トップページを見た時、サイトにどのような記事があるのか一目でわかりやすくするために、サムネイル(アイキャッチ画像)付きの記事一覧を表示するようにテーマ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の最後に追加します。

※2018年8月2日追記
IE11でデザインが崩れるとのご連絡をいただき、一部修正しました。

.post-thumbnail a img {
width: 100%;
}

を追加することで解消することを確認しております。

 

完成した記事一覧

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

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

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

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

top_page_customize06

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

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

top_page_customize007

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

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

この記事をシェアする

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

  1. はじめまして、Chloeと申します(問い合わせメールがうまく送れず、コメント欄で失礼します)

    半年前にWordpressでブログを始めまして、Twenty Seventeenのカスタマイズについてダチたまさんのサイトには大変お世話になりました。私のようなド素人にも大変分かりやすく、非常に助かりました。遅ればせながら、ありがとうございました。

    実は今回、一点ご相談したい件がありまして、私はいつもGoogle Chromeを使っているのですが、ふと他のブラウザだとどう見えるのだろう、と思いInternet Explorerで自サイトを開いてみたのですが、記事一覧ページがうまく表示されないことが発覚しました。
    勝手ながらダチたまさんのブログもIEで開いてみたところ、同じような状態で表示されておりました(ご存知でしたらすみません)。
    私、コーディングの知識ゼロのため、ダチたまさんのような先輩ブログをまねることでしかカスタマイズできず、どうにも頭を抱えております。現在のデザインをとても気に入っているため、もし可能でしたら対処方法をご教示いただけないかと思い、メールさせていただきました。
    大変お忙しいとは思いますが、よろしければご返信いただけますと幸いです。

    どうぞよろしくお願いいたします。

    Chloe

  2. Chloe様
    はじめまして。ダチたまです。
    当ブログを読んでいただき、ありがとうございます!
    IEでデザインが崩れることを、こちらでも確認いたしました。
    EdgeとChromeでは問題ないことを確認していたのですが、IEでのテストが漏れていました。
    申し訳ありません。
    デザインの崩れについては、CSSに対して、
    .post-thumbnail a img {
    width: 100%;
    }
    を追記したところ、解消することを確認しましたので、一度お試しいただけませんでしょうか。
    よろしくお願いいたします。

  3. ダチたま様、

    早速のご返信、ありがとうございます!

    教えていただいた方法を試してみたのですが、なぜか解消されず・・
    色々とググり、互換性についてのタグをheader.phpのheadタグ内に追加するというのも試してみたのですが、変わらずでして・・
    もし他に改善策がありましたらご教示いただけますでしょうか><

    お手数おかけします。

  4. Chloe様
    改善されませんでしたか…。
    勝手ながら、IEの開発ツールを用いて、Chloe様のブログのCSSを確認させていただきました。
    style.cssに
    .post-thumbnail a img{
    -webkit-backface-visibility : hidden;
    -webkit-transition : opacity 0.2s;
    transition : opacity 0.2s;
    }
    という記述があるかと思いますが、ここに
    width:100%;を追記し、
    .post-thumbnail a img{
    -webkit-backface-visibility : hidden;
    -webkit-transition : opacity 0.2s;
    transition : opacity 0.2s;
    width:100%;
    }
    にしたところ、こちらではChloe様のブログの表示状態が改善されることを確認できました。

    最初に提案した内容と同様なのですが、よろしければ一度お試しください。

    また、ブログの表示確認はキャッシュを削除してからご確認ください。

  5. 小テーマを作っているのですが、小テーマ最下部に上記全文を張り付けたところ、解消いたしました!
    なぜか、最初にアドバイス頂いた部分のみを貼り付けると機能しなかったようです。
    勉強することだらけです・・!

    お忙しい中、迅速なご対応本当にありがとうございました。
    これからも更新楽しみにしております!

コメントを残す

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