如何在 WordPress 精選圖片中，自動加上文章標題 » 架設網站

一圖勝過千言萬語，刻意挑選的圖片可以描述一篇文章，可以表達作者意圖，可以增加文章的豐富度，可以增加讀者的好奇心，增加點擊率。

如果在圖片上再加上標題，讀者就更能一眼就看清內容要表達的內容。

Table Of Contents

什麼是精選圖片 (Featured Image)
如何設定精選圖片
如何自動加上文章標題
Astra 程式範例
自動顯示標題外掛
如何快速新增精選圖片

什麼是精選圖片 (Featured Image)

精選圖片是 WordPress 的主題特色功能，作者可以挑選一個富含描述意義的圖片，在文章的開頭顯示，讓讀者在瞄到圖片的瞬間就可以概略了解文章的內容。

主題開發者可以在主題內加上精選圖片顯示，也可以控制如何顯示圖片的大小、樣式、是否隱藏等等。

作者可以在文章編輯畫面設定精選圖片，目的當然是讓文章更有吸引力。

如何設定精選圖片

step 1

進入 WordPress 後台，文章編輯畫面

step 2

點擊右方【設定精選圖片】

step 3

選擇或上傳圖片，確定後點擊右下方【設定精選圖片】

step 4

右方內容即會顯示已設定好的精選圖片

如何自動加上文章標題

下圖是自動加上標題後的效果，沒有用任何其它影像工具處理過。

程式修改原理

以下使用 Astra 佈景主題當範例，需要修改 Astra 佈景程式、新增 CSS 樣式。

基本上原理是相同的，不同佈景主題程式，都可用類似方式修改套用。

step 1

修改主題程式，讓精選圖片的 HTML 輸出，加上文章標題在圖片前面。

'<p class="thumb-title">' . 文章標題 . '</p>'

step 2

新增自訂 CSS 樣式，讓文字加上半透明背景顯示在圖片上層。

.post-thumb{
  position:relative;
}
.thumb-title {
  position: absolute;
  background: black;
  bottom: 0px;
  font-size: xx-large;
  line-height: 1.5em;
  text-align: center;
  width: 100%;
  opacity: 0.7;
  color: white;
  margin-bottom: 1em;
  text-shadow:#EDEDED 1px 1px 0;
}

之後只要設定好精選圖片，就會自動在圖片加上文章標題。

這種方式沒有辦法跟影像處理工具一樣設計的很漂亮，確是一個很方便又快速的方式。

好處是樣式可以隨時改變，不用另外修改圖片，也可以自由的使用 CSS 設計。

Astra 程式範例

如果你也使用 Astra 當作佈景主題，可以直接修改套用。

建議使用【子佈景主題】修改。

程式檔案位置: functions.php

function astra_get_post_thumbnail( $before = '', $after = '', $echo = true ) {

  $output = '';

  $check_is_singular = is_singular();

  $featured_image = true;

  if ( $check_is_singular ) {
    $is_featured_image = astra_get_option_meta( 'ast-featured-img' );
  } else {
    $is_featured_image = astra_get_option( 'ast-featured-img' );
  }

  if ( 'disabled' === $is_featured_image ) {
    $featured_image = false;
  }

  $featured_image = apply_filters( 'astra_featured_image_enabled', $featured_image );

  $blog_post_thumb   = astra_get_option( 'blog-post-structure' );
  $single_post_thumb = astra_get_option( 'blog-single-post-structure' );

  if ( ( ( ! $check_is_singular && in_array( 'image', $blog_post_thumb ) ) || ( is_single() && in_array( 'single-image', $single_post_thumb ) ) || is_page() ) && has_post_thumbnail() ) {

    if ( $featured_image && ( ! ( $check_is_singular ) || ( ! post_password_required() && ! is_attachment() && has_post_thumbnail() ) ) ) {

      $post_thumb = apply_filters(
        'astra_featured_image_markup',
        get_the_post_thumbnail(
          get_the_ID(),
          apply_filters( 'astra_post_thumbnail_default_size', 'large' ),
          apply_filters( 'astra_post_thumbnail_itemprop', '' )
        )
      );

      if ( '' != $post_thumb ) {
        $output .= '<div class="post-thumb-img-content post-thumb">';
        if ( ! $check_is_singular ) {
          $output .= apply_filters(
            'astra_blog_post_featured_image_link_before',
            '<a ' . astra_attr(
              'article-image-url',
              array(
                'class' => '',
                'href'  => esc_url( get_permalink() ),
              )
            ) . ' >' . '<p class="thumb-title">' . get_the_title(get_the_ID()) . '</p>'
          );
        } else {
          $output .= '<p class="thumb-title">' . get_the_title(get_the_ID()) . '</p>';
        }
        $output .= $post_thumb;
        if ( ! $check_is_singular ) {
          $output .= apply_filters( 'astra_blog_post_featured_image_link_after', '</a>' );
        }
        $output .= '</div>';
      }
    }
  }

  if ( ! $check_is_singular ) {
    $output = apply_filters( 'astra_blog_post_featured_image_after', $output );
  }

  $output = apply_filters( 'astra_get_post_thumbnail', $output, $before, $after );

  if ( $echo ) {
    echo $before . $output . $after; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
  } else {
    return $before . $output . $after;
  }
}