このブログは、Wordpressを使用して作成されていますが、これと同様に、WebサイトをWordpressで作成している個人や企業は多いと思います。
複数のテーマが用意されており、カスタマイズも感覚的に分かりやすく行えるので、多くの利用者がいます。
そのため、多くの方がブログにてWordpressの解説記事を公開しているので、役立てている方も多いのではないでしょうか。わたしもその一人です。
本日はWordpressのテーマ「Twenty Seventeen」で、サムネイル画像（Wordpressでは、アイキャッチと言われていますね）をタイトルページの下に表示させる設定を紹介したいと思います。
デフォルトでは、サムネイル画像は記事の上に大きく表示される
デフォルトの設定では、サムネイル画像を設定すると、以下のように記事の上に大きく表示されます。
これを修正しようといくつかのブログ記事を見て方法を調べても、記載されているとおりに設定してもうまくいかないことが多いです。
原因は、テーマの種類が異なっており、若干古いものを対象にしているためであると考えられます。
本記事で紹介する設定は、2018年4月28日時点でのWordpressデフォルトのテーマである「Twenty Seventeen」を対象としておりますので、このテーマを利用している方は参考になるかと思います。
わたしと同じようにブログを書いている方や、企業のWeb制作担当者の方への参考になれば幸いです。
設定方法
早速、設定変更方法を説明いたします。「単に変更できればいい。なぜ変更されるのか理由はどうでもいい」という方は、この章だけ読めば十分です笑
編集するファイル
・header.php (テーマヘッダー)
・content.php (template→post→content.phpの順で遷移するとあります)
編集する方法
作業の前には、必ず各ファイルのバックアップを取っておいてください。
1・header.phpファイル内にある以下の記述を切り取ります。
<?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;
?>
2・1で切り取った記述を、content.phpファイル内の「<div class=”entry-content”>」の１つ上の行に貼り付けます。
以上です。
最初に申し上げたとおり、「単に変更できればいい。なぜ変更されるのか理由はどうでもいい」という方であれば、ここまでの操作を行えばこれで終了です。
ただし、わたし個人の考えとして、仕事（個人事業も含む）でWordpressを扱っている以上は、その先の理由まで知っておいたほうがいいと思います。
理由は、応用がきくからです。
今後別のテーマを扱う際、もしくはさまざまなカスタマイズを行う際、どうしてもphpの知識は必要になります。たとえ文章やSEOが本職で、システムは専門外であったとしても、です。
今回のカスタマイズはとても簡単だったので、以下を読んでも損はしないのではないでしょうか？
設定変更箇所を発見するためのコツ
半ば強引に始めてしまいましたが笑、解説をしたいと思います。
偉そうなことを言っておいてなんですが、わたしもあまりphpには詳しくないので、「素人でもわかる」ことをコンセプトにしたいと思います。
まずは、「画像がどの記述によって表示されるか」を調べることから始めます。
古いテーマ（Twenty Twelveくらい）であれば、content.phpのみを修正するだけでOKとのことでしたが（画像を表示させる記述が同じファイル内に存在していた）、Twenty Seventeenではcontent.php内に画像を表示させる記述が見当たりませんでした。
調べる方法として、content.php内の記述を１つ１つ消していきます。
（phpでは、「<?php」と「?>」に囲まれている文が、１つの記述になります）
最終的に、content.php内の記述を、以下のようにすべて消してまっさらにしました。
すると、タイトルや本文はすべて消えましたが、トップの画像はそのまま残ります。
これで、「タイトル上の画像を表示させる記述はcontent.php内には存在しない」ことが分かります。
次に考えられるのが、ヘッダーの設定であるheader.phpです。
ここを見ると、ばっちり書いてありました。テーマを作成した方が親切に残しておいてくれましたね。
「If a regular post or page, and not the front page, show the featured image.」
つまりこの記述を消せば、ヘッダーに大きく表示されている画像を消すことができます。
※調べものをしても英語ページしか出てこないことも多いので、英語が苦手な方は練習しましょう。
次に、「タイトルの下に画像を表示させる方法」です。
今までのテーマでは、「各投稿ページの設定であるcontent.php内の『画像を表示させる記述』の場所を移動させる」ことによって、サムネイル画像の表示位置を変更させていました。
そこで、今回も同様にcontent.phpへ画像を表示させる記述を追加します。
表示させたい箇所は、タイトルの下、言い換えると「本文の直前」です。
「本文の記述」は、<div class=”entry-content”>から始まります。そのため、この1行上に「画像を表示させる記述」を追加するとうまくいきます。
以下のように、header.phpにあった記述を、content.phpに貼り付け
すると、以下のようにアイキャッチの画像が移動する
技術は日々変わっており、特にIT業界では今までのやり方はすぐに通用しなくなってしまいます。
ただし、基本的な考え方を理解していれば、何をすべきかはおのずと見えてきます。
