トップページを見た時、サイトにどのような記事があるのか一目でわかりやすくするために、サムネイル(アイキャッチ画像)付きの記事一覧を表示するようにテーマTwentySeventeenをカスタマイズしてみましたので、その方法をご紹介します。

スポンサーリンク



準備

moreタグで記事本文を抜粋設定にしておく

記事の本文については、続きを読む(moreタグ)を挿入して、抜粋表示するようにしておきます。

プラグインAuto Limit Posts Reloadedを使うと、公開している記事であっても自動で続きを読む(moreタグ)を挿入してくれるので便利ですよ!

 

修正するファイルを子テーマに配置しておく

今回修正するのは、以下のPHPファイル4つと、style.cssです。あらかじめ子テーマに配置しておきましょう。

また、失敗しても復元できるように、バックアップを取っておくと良いです。

  • style.css:フォルダパス ⇒ public_html/wp-content/themes/子テーマ
  • index.php:フォルダパス ⇒ public_html/wp-content/themes/子テーマ
  • archive.php:フォルダパス ⇒ public_html/wp-content/themes/子テーマ
  • search.php:フォルダパス ⇒ public_html/wp-content/themes/子テーマ
  • content.php:フォルダパス ⇒ public_html/wp-content/themes/子テーマ/template-parts/post/

カスタマイズ方法

それでは、各ファイルの修正内容を書いていきたいと思います。

content.phpの変更

このPHPファイルには、記事本文をどのように構成するのかが書かれています。

まずは、アイキャッチ画像の表示について書かれているコードを移動します。

この対応で、アイキャッチ画像が記事タイトルや日付の前に表示されるようになります。

 

次に、以下のコードを図で指定した箇所に追加します。この記述は、style.cssの中でアイキャッチ画像の横に記事本文を表示するよう指定する際に必要になります。

top_page_customize0009

 

index.php、archive.php、search.phpの変更

index.php、archive.php、search.phpの変更を行っていきます。各ページの役割は、ざっくり次のようになっています。

  • index.php:トップページを表示
  • archive.php:カテゴリー別、タグ別一覧を表示
  • search.php:検索結果一覧を表示

ここでの作業は、トップページ記事一覧、カテゴリー一覧、検索一覧などの表示を変更するために必要な作業です。

各ファイルに対して、以下のコードを図で指定した箇所に追加していきます。

index.phpの場合

top_page_customize03

archive.phpの場合

top_page_customize04

search.phpの場合

search.phpは検索結果の一覧表示について書かれているファイルですが、初期設定のままだとアイキャッチ画像が表示されませんので、他の2ファイルへの変更に加えて、get_template_partの引数を一部変更します。

●変更する引数

top_page_customize05

 

style.cssの変更

最後に、cssファイルでデザインの変更を行いました。

アイキャッチ画像を記事の左に表示したり、余白の調整やラインの表示、文字の大きさの変更などを行っています。

以下のコードをstyle.cssの最後に追加します。

 

完成した記事一覧

そして、完成した記事の一覧がこちらです!

記事の一覧を見やすく表示することができました!

左側にアイキャッチ画像、右側に日付、タイトル、本文が表示されるスタイルです。本文は、抜粋表示にしておかないと、結局1つの記事がずらずらと表示されてしまうので注意してください。

各記事のアイキャッチ画像の大きさも揃えておくと見やすくて良いと思います。

top_page_customize06

ちなみに、幅を狭くしていくと、以下の様に、本文が消えるようにカスタマイズしています。

このようにしないと、本文が下にずらずらと表示されてしまって、アイキャッチ画像とのバランスが悪くなったためです。

top_page_customize007

色々試行錯誤で作成したので、もっとこうした方が良いなどあるかもしれませんが、参考になれば幸いです。

※失敗しても責任は取れませんので、バックアップをお願いします。

“Twenty Seventeen サムネイル(アイキャッチ画像)付き記事一覧を表示する方法” への1件の返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です