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

By ゆいちょん On 2016/06/04 Last updated 2016/11/13 0

この記事は投稿されてから１年以上経っています。内容が古くなっているかもしれませんので、ご注意ください。

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

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

このブログで言うところの全幅表示例
–>買ってきた長寿梅の初めての植え替え｜盆栽 | 雑記 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 日本語版

WordPress