WordPress【twenty seventeen】アイキャッチ画像の表示位置を変更する方法

Tweet

Pocket

前回の記事で「WordPress【twenty seventeen】アイキャッチ画像を設定する方法」でアイキャッチ画像が表示されるようにしたのだが、単独ページでの画面を表示するとヘッダーとタイトルの間にアイキャッチ画像が表示される。トップページにおいては記事タイトルの下に表示されるのに何で？正直、細かい事だが筆者は気に入らなかったので、どんな時も記事タイトル下にアイキャッチ画像が表示されるように変更することとした。

スポンサーリンク

アイキャッチ画像表示位置の変更

アイキャッチ画像の表示位置を変更するにはいくつかのファイルに修正を加える必要がある。変更した部分について説明していきたいと思う。

 テーマヘッダー（header.php）を修正する

次の部分を探し赤字の部分を削除するかコメントアウトする。

</header><!-- #masthead -->
<?php

/*
* If a regular post or page, and not the front page, show the featured image.
* Using get_queried_object_id() here since the $post global may not be set before a call to the_post().
*/
if ( ( is_single() || ( is_page() && ! twentyseventeen_is_frontpage() ) ) && has_post_thumbnail( get_queried_object_id() ) ) :
    echo '<div class="single-featured-image-header">';
    echo get_the_post_thumbnail( get_queried_object_id(), 'twentyseventeen-featured-image' );
    echo '</div><!-- .single-featured-image-header -->';
endif;
?>

<div class="site-content-contain">
    <div id="content" class="site-content">

コメントアウトした場合は次のようになる。筆者の場合は削除ではなくコメントアウトで対応した。

</header><!-- #masthead --> </header><!-- #masthead -->
<?php
/* 
* If a regular post or page, and not the front page, show the featured image. 
* Using get_queried_object_id() here since the $post global may not be set before a call to the_post(). 
*/ 
//　アイキャッチ画像を個別投稿時にヘッダー下部に表示するのをやめる
//if ( ( is_single() || ( is_page() && ! twentyseventeen_is_frontpage() ) ) && has_post_thumbnail( get_queried_object_id() ) ) : 
//echo '<div class="single-featured-image-header">'; 
//echo get_the_post_thumbnail( get_queried_object_id(), 'twentyseventeen-featured-image' ); 
//echo '</div><!-- .single-featured-image-header -->'; 
//endif; ?>
<div class="site-content-contain"> 
    <div id="content" class="site-content">

これで「header.php」の修正は完了です。このままの状態ですと、単独記事の画面ではアイキャッチ画像が表示されなくなっています。単独記事においても記事タイトル下にアイキャッチ画像が表示するには次の修正が必要となります。

「Content.php」に修正しアイキャッチ画像が表示されるようにする

子テーマフォルダにコピーしてある「twentyseventeen-child/template-parts/post/Content.php」の次の部分を探し赤字の部分を削除するかコメントアウトする。

</header><!-- .entry-header -->

<?php if ( '' !== get_the_post_thumbnail() && ! is_single() ) : ?>
    <div class="post-thumbnail">
        <a href="<?php the_permalink(); ?>">
            <?php the_post_thumbnail( 'twentyseventeen-featured-image' ); ?>
        </a>
    </div><!-- .post-thumbnail -->
<?php endif; ?>

<div class="entry-content">

赤字の部分は「単独ページでなければ」という条件分になるので、ここをコメントアウトすれば、「サムネイルがあればどんな時でも」という条件にので、筆者は次のようにコメントアウトした。コメントアウトした部分はブルーになっている部分となる。

</header><!-- .entry-header -->
<?php  if ( '' !== get_the_post_thumbnail() /* アイキャッチ画像を個別でも出力　&& ! is_single() */ ) : ?>
　　　　<div class="post-thumbnail"> 
　　　　　　　　<a href="<?php the_permalink(); ?>"> 
　　　　　　　　　　　　<?php the_post_thumbnail( 'twentyseventeen-featured-image' ); ?> 
　　　　　　　　</a> 
　　　　</div><!-- .post-thumbnail -->
<?php endif; ?>
<div class="entry-content">

これでどのような時においても記事タイトルの下にアイキャッチ画像が表示されるように変更される。

ちなみにアイキャッチ画像の表示の仕方についいては「WordPress【twenty seventeen】アイキャッチ画像を設定する方法」をご参照ください。

エンジニアのためのWordPress開発入門 (Engineer’s Library)

posted with amachazl at 2020.04.16

野島 祐慈, 菱川 拓郎, 杉田 知至, 細谷 崇, 枢木 くっくる
技術評論社 (2017-01-26)
売り上げランキング: 216,899

Amazon.co.jpで詳細を見る

【A8.netに登録しよう！】
◇ 広告主数・アフィリエイトサービス数日本最大級☆
◇ 登録はもちろん無料、審査なしのアフィリエイトサービス☆
◇ 使いやすいサイトNO.1
⇒アフィリエイトならA8.net

Tweet

Pocket

スポンサーリンク