個別記事のタイトル上部にサムネイルを表示させる方法：賢威7

今回は人気WordPressテーマ： 賢威7 の個別記事に表示させるタイトル上部に、サムネイルを表示させる方法について書いてみたいと思います。

ここ最近、大きめサイズのサムネイルを使ったサイトが増えていますね。
アイキャッチがあるとサイト閲覧者にもその記事のイメージが伝わりやすいですし、良い写真ならサイト全体の雰囲気が一気に華やかになる気がします。

ここではそんな大きめサイズのサムネイルを、賢威にも表示させるカスタマイズを紹介します。

カスタマイズ前

↓ 賢威7をインストールしたばかりの状態

カスタマイズ後

↓ サムネイルをタイトルの上に表示

[ad]

※　今回はPHPファイルを編集していきます。管理画面に入れなくなることもあるので、PHPコードは注意して編集して下さい。

1. 個別記事用のサムネイルサイズを登録

今回は少し大きめのサムネイルを使いたいので、まずは functions.php で single_thumb という名前のサムネイルサイズを登録しましょう。

以下のコードを functions.php に追加します。

add_image_size( 'single_thumb', 700, 480, true );

上のコードは 700px*480pxのサムネイルサイズを single_thumb という名前で登録する、という内容です。
（最後の true は、サムネイル用の画像がこのサイズと違うときに、伸縮させるかどうかという指定です。false だと伸縮するので、場合によっては縦横比が崩れます）

2. single.php を編集

次に、個別記事にサムネイルを表示させるために single.php を編集していきます。

バージョンによって多少行数が変わるかもしれませんが、14行目付近にある、

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

というコードと、

<div class="section-in">

というコードの間に、以下のコードを追加します。　

<div class="post-thumb">
    <?php the_post_thumbnail( 'single_thumb' ); ?>
</div>  

これでサムネイルが個別記事に表示されるようになりました。

↓ コード追加後

↓ サムネイルが個別記事のタイトルの上部に表示

3. サムネイルをリサイズ

ここまでの編集で、サムネイルを投稿のページに表示させることまで出来ましたが、表示される画像サイズが登録したサイズと違っている（ことが多い）ので、Regenerate Thumbnails というプラグインを使って登録したサイズにリサイズします。

https://wordpress.org/plugins/regenerate-thumbnails/

インストールが完了したら、WordPressの管理画面から

「ツール」→「Regen.Thumbnail」

を選択し、「すべてのサムネイルを再生成する」というボタンを押します。

これでサムネイルが登録したサイズで再生成されます。

問題がなければ以下のように表示されると思いますが、もしうまくいかない、という場合には、上の方で functions.php に追加したコードに、 true が付いているか確認してみてください。

add_image_size( 'single_thumb', 700, 480, true );   // ← このコードを確認

4. 最後にCSSでスタイリング

サムネイルを表示することが出来ましたが、画像とタイトルの余白が詰まり過ぎていますよね。
かなり見にくいので、CSS で余白を調整します。

以下のコードを親テーマ（賢威7自体）の base.css や 子テーマの style.css など、お好みのCSSファイルに追加します。

.post-thumb img {
    max-width: 100%;
    height: auto;
    margin-bottom: 40px;
}

これで完成です！