WordPressテーマ「SWELL」カスタマイズ。投稿ページのアイキャッチ画像位置をPC/モバイルで分岐させる。

WordPressテーマ「SWELL」カスタマイズの備忘。

テーマのデフォルト設定では投稿ページのアイキャッチ画像は「記事タイトル→アイキャッチ画像」の順に配置されていますが、これを「アイキャッチ画像→記事タイトル」の順になるようにカスタマイズします。

この記事のアイキャッチ画像では、

  • 左:アイキャッチ→タイトル
  • 右:タイトル→アイキャッチ

という例を実際に見比べることができますが、個人的にアイキャッチ画像が上の方が収まりが良いというか見栄えが落ち着くような気がします。この辺りは人それぞれの好みです。

カスタマイズを行うにはsingle.phpのメインコンテンツ上部のコードを以下のように書き換えます、子テーマを使用している場合は親テーマからファイルをコピーして移しておきましょう。

<main id="main_content" class="l-mainContent l-article">
	<article class="l-mainContent__inner">
		
		<?php if ( SWELL_FUNC::is_show_thumb( $post_id ) ) : //アイキャッチ画像 
			do_action( 'swell_before_post_thumb', $post_id );
			echo SWELL_PARTS::post_thumbnail( $post_id );
		endif; ?>
		
		<?php if ( ! SWELL_FUNC::is_show_ttltop() ) : //タイトル周り
			SWELL_FUNC::get_parts('parts/single/post_head', $post_id );
		endif; ?>

ちょっとわかりにくいかもですが、シンプルに「アイキャッチ画像」という指定のあるコードを「タイトル周り」の上に持ってきただけです。デフォルトのコードではこの順番が逆になっていると思います。

ただ、これでアイキャッチ画像をタイトルの上に持ってくることができますが、PC画面で見てみるとアイキャッチ画像がいきなりどんと表示されるので少し重苦しい感じもあります。

そこで条件分岐タグを使って「モバイル画面ではアイキャッチが上」「PC画面ではタイトルが上」というように指定するのもありだと思います。記事執筆時点ではこのサイトもそのようにカスタマイズしています。

<main id="main_content" class="l-mainContent l-article">
	<article class="l-mainContent__inner">
		
 <?php if ( wp_is_mobile() ) : ?>
		<?php if ( SWELL_FUNC::is_show_thumb( $post_id ) ) : //アイキャッチ画像 
			do_action( 'swell_before_post_thumb', $post_id );
			echo SWELL_PARTS::post_thumbnail( $post_id );
		endif; ?>
 <?php endif; ?>
		
		<?php if ( ! SWELL_FUNC::is_show_ttltop() ) : //タイトル周り
			SWELL_FUNC::get_parts('parts/single/post_head', $post_id );
		endif; ?>
		
	<?php if ( !wp_is_mobile() ) : ?>
		<?php if ( SWELL_FUNC::is_show_thumb( $post_id ) ) : //アイキャッチ画像 
			do_action( 'swell_before_post_thumb', $post_id );
			echo SWELL_PARTS::post_thumbnail( $post_id );
		endif; ?>
 <?php endif; ?>

wp_is_mobileでモバイル表示時アイキャッチ画像のコードを、!wp_is_mobileでPC表示時アイキャッチ画像のコードをそれぞれ指定しています。

自分の好きなメディアの多くがアイキャッチ画像が先にくる表示だったのでこんなカスタマイズをしてみました。

記事を訪れたユーザーが最初に目にする部分なので、場合によってはファーストビューにバナー広告を設置するというのも良いでしょうし、こういう細かいカスタマイズをしていくのも面白くて良いんじゃないかなあと思います。

記事の感想や要望、サイト周りの質問や相談など
Twitter(@___kurosb)で承ってます。気軽にご連絡ください

記事の感想や要望、サイト周りの質問や相談など
Twitter(@___kurosb)で承ってます。

気軽にご連絡ください