【WordPress】アイキャッチ表示切替【サムネイルorフル】

記事にアイキャッチを設定したいとき、トップの記事一覧には小さい画像(サムネイル)を出し、個別記事のページには大きい画像(通常サイズ)を出したい場合があります。
そんなとき、両方の表示に対応出来るPHPのコードを紹介していきます。

アイキャッチ表示の前提条件

WordPressのテーマは「Twenty Twelve」を使用しています。
他のテーマでは試していないので、今回の方法が使えるかはわかりません。
また、テーマを編集する前には、必ずバックアップをとってください。
環境によってはうまく表示されない可能性がありますので、テーマを編集する際は自己責任で編集してください。

WordPressのテーマ編集

WordPress管理画面の「外観>テーマの編集」から「content.php」を開きます。
まず「<?php the_post_thumbnail(); ?>」と書いてある行を削除します。
次に「<div class=”entry-content”>」と書いてある行を探します。
その一行上に、以下のコードを丸ごとコピーして貼り付けます。

PHPのコード解説

「if ( is_home() || is_front_page() )」の部分で、現在表示しているのがトップページかを判定し、トップと個別記事で処理を分岐させています。
「the_post_thumbnail();」の引数に「’thumbnail’」を指定するとアイキャッチがサムネイル表示になり、引数を指定しないと通常サイズで表示されます。
また、サムネイル表示のときは「<span style=” float: left; margin-right: 1em;”>」により、テキストを画像の横に回り込み表示させています。

Share

  • Twitter Shareボタン
  • Facebook Shareボタン
  • はてなブックマーク Shareボタン
  • LINE Shareボタン

コメントを残す

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。