投稿フォーマットで条件分岐してアイキャッチ画像を出し分ける方法

盆栽の記事をアップする時は画像を大きく見たいので、投稿フォーマットを「画像」として、全幅のテンプレートとして使用しているのですが、そのままだとアイキャッチ画像が全幅になってくれないので、残念な表示になります。

ですので、投稿フォーマットが画像の時は、フルサイズの画像をアイキャッチ画像として表示するように調整しました。

このブログで言うところの全幅表示例
–>買ってきた長寿梅の初めての植え替え|盆栽 | 雑記 BOOOKs

 前提

ワードプレスのテーマは Sparkring を使用しています。以降に記載する HTML 部分は適宜読み替えてください。

で、そもそも、投稿フォーマットを「画像」としたときに、記事表示に使用するテンプレートを single-image.php としています。

functions.php に下記を追記してあります。

// 投稿フォーマットが“画像”の時に、single-image.php を読み込むようにする
function add_post_format_template( $single_template ) {
    $new_template = $single_template;
  
    $post = get_queried_object();
    $post_format = get_post_format( $post );
  
    $single_post_format_template = locate_template( "single-{$post_format}.php" );
    if( !empty( $single_post_format_template ) )
        $new_template = $single_post_format_template;
  
    return $new_template;
}
  
add_filter( 'single_template', 'add_post_format_template' );

参考:WordPress の single.php を投稿フォーマットで振り分ける方法 | Design Hack and Slash

もちろん全幅表示になるように single-image.php も新規作成して追加してあります。

 アイキャッチ画像を表示するコードを条件分岐させる

投稿フォーマットが「画像」ならフルサイズのサイムネイルを呼び出す。それ以外はテーマのデフォルトに記載されている指定を呼び出す。とします。

has_post_format( 'hoge' )で現在の記事投稿フォーマットを取得できます。

content-single.php に

<div class="entry-main-image">
	<?php the_post_thumbnail( 'sparkling-featured', array( 'class' => 'single-featured' )); ?>
</div>

と書かれているところがあるので、ここを

<?php if ( has_post_format( 'image' ) ) : ?>
	<div class="entry-main-image">
		<?php the_post_thumbnail( 'full', array( 'class' => 'fullsize' )); ?>
	</div>
<?php else: ?>
	<div class="entry-main-image">
		<?php the_post_thumbnail( 'sparkling-featured', array( 'class' => 'single-featured' )); ?>
	</div>
<?php endif; ?>

としました。

functions.php でワザワザ任意のアイキャッチ(サムネイル)画像を生成する設定をせずに、 full と指定すればアップロードしたままの画像をアイキャッチ画像として適用してくれるので、それで十分かと思いました。

the_post_thumbnail(‘thumbnail’); // サムネイル (デフォルト 150px x 150px :最大値)
the_post_thumbnail(‘medium’); // 中サイズ (デフォルト 300px x 300px :最大値)
the_post_thumbnail(‘large’); // 大サイズ (デフォルト 640px x 640px :最大値)
the_post_thumbnail(‘full’); // フルサイズ (アップロードした画像の元サイズ)

参考:投稿サムネイル – WordPress Codex 日本語版
参考:関数リファレンス/has post format – WordPress Codex 日本語版

東京都内で仕事をしています。猫飼いたいです。30歳からピアノ始めたおじさんです。盆栽にも興味が出てきました。
最近ブログ用のTwitterアカウントを作成したので、是非フォローをしてください。@zakkiboooks

 コメントをどうぞ

  • 入力いただいたメールアドレスは公開されませんが、このブログが置いてあるサーバーに保存されます。
  • 入力いただいた情報の他に、WordPress の機能により IPアドレス を取得させていただきます。取得した IPアドレス はスパムコメントの対処ために利用され、公開することはありません。
  • 個人情報などを記入された場合、投稿いただいたコメントを表示しないか、該当箇所を編集して公開する可能性があります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。