WordPress 有個精選圖片的功能，之前我很少使用，

一方面是懶得去選一張圖片，一方面是因為版面呈現的問題…

以我目前使用的佈景主題 Nisarg 來說，

它會把精選圖片放在文章標題的上面，看起來有點不習慣：

 

似乎有些佈景主題可以讓使用者決定，精選圖片要出現的地方，

但若佈景主題沒有提供這個功能的話，就只能自己動手修改了。

幸好修改起來也不算太困難，不會 PHP 的我也可以改～

 

先到 WordPress 後台 > 外觀 > 主題編輯器，

右邊有一堆檔案的名稱，每個佈景主題裡面的檔案不太一樣，

但我們要修改的通常是叫做 content.php 或 content-xxx.php。

以 Nisarg 為例，我們會修改下面幾個檔案：

• content-excerpt.php：這是首頁顯示文章摘錄時的範本
• content.php: 這是單篇文章的範本

 

先來看一下 content-excerpt.php～

大略看一下內容，是屬於這樣的排列：

1. nisarg_featured_image_disaplay()，從函式名稱可以猜出這是在顯示精選圖片
2. <header>，裡面有呼叫 the_title() 代表這是文章標題
3. <div>，裡面有呼叫 the_excerpt() 代表文章摘錄

 

想把精選圖片放在文章標題下面，那就是修改一下排列順序：

1. <header>，裡面有呼叫 the_title() 代表這是文章標題
2. nisarg_featured_image_disaplay()，從函式名稱可以猜出這是在顯示精選圖片
3. <div>，裡面有呼叫 the_excerpt() 代表文章摘錄

 

看一下改好後的樣子：

<?php
/**
 * Template part for displaying posts.
 *
 * @package Nisarg
 */

?>

<article id="post-<?php the_ID(); ?>"  <?php post_class( 'post-content' ); ?>>

    <?php
    if ( is_sticky() && is_home() && ! is_paged() ) {
        printf( '<span class="sticky-post">%s</span>', __( 'Featured', 'nisarg' ) );
    } ?>

    <header class="entry-header">

        <span class="screen-reader-text"><?php the_title();?></span>

        <?php if ( is_single() ) : ?>
            <h1 class="entry-title"><?php the_title(); ?></h1>
        <?php else : ?>
            <h2 class="entry-title">
                <a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a>
            </h2>
        <?php endif; // is_single() ?>

        <?php if ( 'post' == get_post_type() ) : ?>
        <div class="entry-meta">
            <h5 class="entry-date"><?php nisarg_posted_on(); ?></h5>
        </div><!-- .entry-meta -->
        <?php endif; ?>
    </header><!-- .entry-header -->

    <?php nisarg_featured_image_disaplay(); ?>

    <div class="entry-summary">
        <?php the_excerpt(); ?>
    </div><!-- .entry-summary -->

    <footer class="entry-footer">
        <?php nisarg_entry_footer(); ?>
    </footer><!-- .entry-footer -->
</article><!-- #post-## -->

 

接下來改 content.php，結構和 content-excerpt.php 有點接近，

一樣是調整一下順序就好了，改好的範本如下：

<?php
/**
 * Template part for displaying posts.
 *
 * @package Nisarg
 */

?>

<article id="post-<?php the_ID(); ?>"  <?php post_class( 'post-content' ); ?>>

    <?php
    if ( is_sticky() && is_home() && ! is_paged() ) {
        printf( '<span class="sticky-post">%s</span>', __( 'Featured', 'nisarg' ) );
    } ?>

    <header class="entry-header">
        <span class="screen-reader-text"><?php the_title();?></span>
        <?php if ( is_single() ) : ?>
            <h1 class="entry-title"><?php the_title(); ?></h1>
        <?php else : ?>
            <h2 class="entry-title">
                <a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a>
            </h2>
        <?php endif; // is_single() ?>

        <?php if ( 'post' == get_post_type() ) : ?>
        <div class="entry-meta">
            <h5 class="entry-date"><?php nisarg_posted_on(); ?></h5>
        </div><!-- .entry-meta -->
        <?php endif; ?>
    </header><!-- .entry-header -->

    <?php nisarg_featured_image_disaplay(); ?>

            <div class="entry-content">
                <?php
                    the_content( '...<p class="read-more"><a class="btn btn-default" href="'. esc_url( get_permalink( get_the_ID() ) ) . '">' . __( ' Read More', 'nisarg' ) . '<span class="screen-reader-text"> '. __( ' Read More', 'nisarg' ).'</span></a></p>' );
                ?>

                <?php
                    wp_link_pages( array(
                        'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'nisarg' ),
                        'after'  => '</div>',
                    ) );
                ?>
            </div><!-- .entry-content -->

    <footer class="entry-footer">
        <?php nisarg_entry_footer(); ?>
    </footer><!-- .entry-footer -->
</article><!-- #post-## -->

 

改好後儲存，再重新整理，

可以發現精選圖片變成顯示在文章標題的下面，順眼多啦：

 

如果佈景主題裡不是用 content-xxx.php 來代表文章的範本的話，

可能就要辛苦點，找檔名比較像的，

或是從主題編輯器裡每個檔案都進去看一下囉～

 

參考資料：I DON`T SEE THE POST IMAGES