Stinger

Stinger7:個別記事のタイトル上にサムネイルを表示させる方法

stinger7-thumbnail

こんにちは、ぶどうサワーです。
サイトの閲覧ありがとうございます。

今回の記事では、人気WordPressテーマ:Stinger7の個別記事タイトル上部に、その記事のサムネイルを表示させる方法を紹介したいと思います。

カスタマイズ前

↓ 最初の状態ではサムネイルは表示されていません

stinger7-single-page-thumbnail-before

カスタマイズ後

カスタマイズ 1

↓ 記事のサムネイルを、タイトルやパンくずリストの上に表示。

stinger7-single-page-thumbnail-after-1
カスタマイズ 2

↓ サムネイル周りの余白を0に。

stinger7-single-page-thumbnail-after-2
カスタマイズ 3

↓ サムネイルの大きさを変更(画像の高さを480pxから300pxに変更)

stinger7-single-page-thumbnail-after-3

[ad]

1. 個別記事に表示するサムネイルサイズを登録

Stinger7ではカスタマイズ用に子テーマを配布してくれているので、ここでは子テーマを使ってカスタマイズしていきます。

子テーマの functions.php に以下のコードを追加すると、

add_image_size( 'single_thumb680', 680, 480, true );

縦680px, 横480pxの single_thumb680 というサムネイルが登録されました。

2. single.php からサムネイルを表示させる

次に single.php を編集して、先ほど登録した single_thumb680 というサムネイルを表示させます。

同じStinger7でもバージョンによってコードが変わるかもしれませんが、single.php の6行目付近にある以下のコードを、

<article>
    <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <!--ぱんくず -->

下のコードで置き換えます。

<article>
    <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <p class="single-thumbnail">
            <?php the_post_thumbnail('single_thumb680'); ?>
        </p>
        <!--ぱんくず -->

これで functions.php で登録した single_thumb680 というサムネイルが表示されるようになりました。

stinger7-single-page-thumbnail-after-1

2-1. サムネイルサイズがおかしいときは

このままの状態ではサムネイルサイズがバラついてしまったり、思った通りのサイズ(680*480)にならないこともあると思います。

そのようなときは、Regenerate Thumbanils というプラグインを使うのがオススメです。

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

regenerate-thumbnail

名前の通りサムネイルを作り直してくれるプラグインなので、サムネイルサイズ関係の不具合は、このプラグインに任せてあげればきっとほんの少し幸せになれます。

2-2. Regenerate Thumbanils の使い方

Regenerate Thumbanils の使い方は簡単で、インストールが完了したら、WordPressの管理画面から

「ツール」→「Regen.Thumbnail」

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

これでサムネイルが登録したサイズで再生成されます。
(記事の量によっては時間がかかるかもしれません)

regenerate-thumbnail-before

3. 画像周りの余白を0にする(カスタマイズ 2)

次にCSSを編集して画像の周りにできる余白を0にします。

子テーマの style.css に以下のコードを追加すると、、、

#content {
    margin-top: 20px;
}
.single-thumbnail {
    margin: -20px -30px 20px;
}
.single-thumbnail img {
    width: 100%;
    height: auto;
}
.single .post {
    overflow: initial;
}
@media only screen and (max-width: 780px) {
    .single-thumbnail {
        margin: -20px -20px 20px;
    }
}

画像周りの余白がなくなり、メインコンテンツ幅にぴったり収まりました。

(画像が大きくきれいに見えるので、サムネイルにこだわっているサイトに特にオススメしたい方法です)

↓ PCサイズ

stinger7-single-page-thumbnail-after-2

↓ スマホサイズ

stinger7-single-page-thumbnail-after-4

4. サムネイルの大きさを変更するには(カスタマイズ 3)

先ほどはサムネイルを 680*480px で登録しましたが、別のサイズにするには functions.php に追加した add_image_size(...) 部分を編集すれば大丈夫です。

例えば 680px*300px の大きさにする場合のコードは、、、

add_image_size( 'single_thumb680', 680, 300, true );

となります。

これで保存・更新すると、サムネイルの大きさが 680px*300px になります。

stinger7-single-page-thumbnail-after-3

ちなみに add_image_size() の()内は

  • single_thumb680:そのサムネイルの名前のようなもの
  • 680:サムネイルの横幅
  • 300:サムネイルの縦幅
  • true:実際の画像サイズとサムネイルで表示したい画像サイズが違う場合に、画像を伸縮せずに切り落として表示。false なら切り落とさずに画像を伸縮。

となっています。

この add_image_size() は公式リファレンスに詳しく書いてあるので、チェックするといいかもしれません。

関数リファレンス/add image size

また、ここでもサムネイルが思った通りの大きさにならない場合には、先ほど紹介した Regenerate Thumbanils というプラグインを使ってみて下さい。

今回のカスタマイズは以上です。
最後まで閲覧ありがとうございました。