將鼠標懸停在圖像上的圖像描述

Question

我不是PHP，javascript和js方面的專家； 所以我希望有人可以用簡單的語言幫助我。 我剛剛使用此論壇開發了我的第一個wordpress網站並極大地更改了代碼-到目前為止，謝謝！

該網站： http ： //www.heritageglass.com.au

我的要求：將文本（媒體庫中圖像的描述）懸停在圖像上。

就像這個網站或這個插件一樣 ，我在這個網站上發現了幾個有關我的問題的問題，但是它們似乎並沒有幫助，或者我不知道將其放置在哪里，因為它抓住了the_title ，我想要the_description 。 有這樣的名詞嗎？

Portfolio.php模板中的PHP代碼：

<div data-id="post-<?php the_ID(); ?>" data-type="<?php
  $categories = get_the_category();
  $count = count($categories);
  $i=1;
  foreach($categories as $category) {
      echo str_replace('-', '', $category->slug);
      if ($i<$count) echo ' '; $i++;} ?>" class="post-<?php the_ID(); ?>
      <?php
        $categories = get_the_category();
        foreach($categories as $category) {
            echo str_replace('-', '', $category->slug).' '; } ?> project portfolio-item-wrap">
    <div class="portfolio-item">
        <?php if ( has_post_thumbnail() ) { ?>
        <a class="portfolio-item-img" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail( 'portfolio-image' ); ?></a>
        <?php } ?>


        <h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
        <p>
            <?php
            $categories = get_the_category(); 
            $temp = array();
            foreach($categories as $category) {
                if ($category->category_parent == 0) continue;
                $temp[] = str_replace('-', '', $category->name); 
            } 
            echo implode(", ", $temp);
            ?>
        </p>
    </div>
</div>

我發現了這一點： 使用jquery和css在圖像上輸入文本 ，並將腳本添加到header.php中。 並使用了我的.portfolio-item和.portfolio-item-img而不是.wrapper和.description-但這沒有任何作用。

希望有人可以將我引向正確的方向？

謝謝！

Answer 1

在四年前我在WordPress論壇上進行搜索時，不確定是否是您需要的，但這可能會為您指明正確的方向。

$img_desc = $image->post_excerpt;

Answer 2

我認為這會幫助您。

http://www.net-kit.com/10-jquery-caption-plugins/#

http://www.inwebson.com/jquery/jquery-image-hover-effects/

Answer 3

編輯帖子時，添加兩個定制字段，一個用於標題，一個用於描述。 我們的代碼如下所示：

$dataType = '';
$divClass = '';

$categories = get_the_category();
$count = count($categories); 
$i=1; 
foreach($categories as $category) {
    $dataType .= str_replace('-', '', $category->slug); 
    $divClass .= str_replace('-', '', $category->slug).' ';
    if ($i<$count) $dataType.= ' ';
    $i++;
}

$metaList = get_post_meta(get_the_ID());
$title = isset($metaList['title']) ? $metaList['title'] : '';
$description = isset($metaList['description']) ? $metaList['description'] : '';

// now we have title and description for the thumb!
?>
<div data-id="post-<?php the_ID(); ?>" data-type="<?php echo $dataType;?>"
    class="post-<?php the_ID(); echo $divClass;?>  project portfolio-item-wrap">
    <div class="portfolio-item">
        <?php if ( has_post_thumbnail() ) { ?>
            <a class="portfolio-item-img" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                <?php the_post_thumbnail( 'portfolio-image' ); ?>
            </a>
        <?php } ?>


        <h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
        <p>
            <?php
                $temp = array();
                foreach($categories as $category) {
                    if ($category->category_parent == 0) continue;
                    $temp[] = str_replace('-', '', $category->name); 
                } 
                echo implode(", ", $temp);
            ?>
        </p>
    </div>
</div>

Answer 4

經過大量研究，我找到了答案。

答案是： 如何從我的wordpress頁面上獲得特色圖像描述？

輸入the_post_thumbnail_caption（）; 在span標簽中，並在CSS中設置您的span標簽類。

完成。

感謝大家的幫助！