[WordPress] 修改佈景主題,讓精選圖片出現在文章標題的下面

[WordPress] 修改佈景主題,讓精選圖片出現在文章標題的下面

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

(本頁面已被瀏覽過 161 次)

發表迴響

你的電子郵件位址並不會被公開。

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料