2018.08.02トップページを見た時、サイトにどのような記事があるのか一目でわかりやすくするために、サムネイル(アイキャッチ画像)付きの記事一覧を表示するようにテーマTwentySeventeenをカスタマイズしてみましたので、その方法をご紹介します。準備moreタグで記事本文を抜粋設定にしておく記事の本文については、続きを読む(moreタグ)を挿入して、抜粋表示するようにしておきます。Reloadedを使うと、公開している記事であっても自動で続きを読む(moreタグ)を挿入してくれるので便利ですよ!CHECK簡単!WordPressで自動で「続きを読む(moreタグ)」を挿入できるプラグイン!修正するファイルを子テーマに配置しておく今回修正するのは、以下のPHPファイル4つと、style.cssです。子テーマに配置しておきましょう。失敗しても復元できるように、バックアップを取っておくと良いです。public_html/wp-content/themes/子テーマ/template-parts/post/カスタマイズ方法それでは、各ファイルの修正内容を書いていきたいと思います。content.phpの変更このPHPファイルには、記事本文をどのように構成するのかが書かれています。アイキャッチ画像の表示について書かれているコードを移動します。この対応で、アイキャッチ画像が記事タイトルや日付の前に表示されるようになります。次に、以下のコードを図で指定した箇所に追加します。この記述は、style.cssの中でアイキャッチ画像の横に記事本文を表示するよう指定する際に必要になります。'</div>';endif;?>index.php、archive.php、search.phpの変更index.php、archive.php、search.phpの変更を行っていきます。各ページの役割は、ざっくり次のようになっています。index.php:トップページを表示archive.php:カテゴリー別、タグ別一覧を表示search.php:検索結果一覧を表示ここでの作業は、トップページ記事一覧、カテゴリー一覧、検索一覧などの表示を変更するために必要な作業です。各ファイルに対して、以下のコードを図で指定した箇所に追加していきます。'</div>';index.phpの場合archive.phpの場合search.phpの場合search.phpは検索結果の一覧表示について書かれているファイルですが、初期設定のままだとアイキャッチ画像が表示されませんので、他の2ファイルへの変更に加えて、get_template_partの引数を一部変更します。最後に、cssファイルでデザインの変更を行いました。アイキャッチ画像を記事の左に表示したり、余白の調整やラインの表示、文字の大きさの変更などを行っています。以下のコードをstyle.cssの最後に追加します。※2018年8月2日追記IE11でデザインが崩れるとのご連絡をいただき、一部修正しました。100%;}を追加することで解消することを確認しております。inline;}}完成した記事一覧そして、完成した記事の一覧がこちらです!記事の一覧を見やすく表示することができました!左側にアイキャッチ画像、右側に日付、タイトル、本文が表示されるスタイルです。本文は、抜粋表示にしておかないと、結局1つの記事がずらずらと表示されてしまうので注意してください。各記事のアイキャッチ画像の大きさも揃えておくと見やすくて良いと思います。ちなみに、幅を狭くしていくと、以下の様に、本文が消えるようにカスタマイズしています。このようにしないと、本文が下にずらずらと表示されてしまって、アイキャッチ画像とのバランスが悪くなったためです。試行錯誤で作成したので、もっとこうした方が良いなどあるかもしれませんが、参考になれば幸いです。※失敗しても責任は取れませんので、バックアップをお願いします。育児・マイホームアイテムレビューブロガーだちたまこんにちは!「だちたま」です。2人(4才・0才)の4人家族。元エンジニアの夫に教えてもらいながら、WordPressのカスタマイズ・プログラミングについてお勉強中。