記事一覧ページをタイル状に配置する(Twenty Seventeen)-WordPress

WordPressの無料テーマ「Twenty Seventeen」の記事一覧ページは、全ての記事をそのままつらつらと並べただけでとにかく見にくいです。「moreタグ」を使って多少はすっきりとできますが、それでもぱっと見どのような記事があるのか分かりにくく、サイトに訪問してくれた方に対して優しいものではありません。

そこで、各記事の情報をコンパクトにまとめて表示し、それをタイル状に敷き詰めることで見やすく、そしてスタイリッシュな記事一覧ページにカスタマイズしたいと思います。

今回変更するPHP

今回手を加えるPHPは「archive」「header」「index」「content」と少し多めです。

ここを見ながら慎重に進めれば問題ないと思いますが、いろんなケースを考慮すると、やはりカスタマイズ前に子テーマを作成するメリットは大きいです。もし子テーマを作成しない場合は、せめてバックアップをとりましょう。

スポンサーリンク

PHPを子テーマにコピー

  1. 親テーマから「template-parts」フォルダと「archive」「header」「index」PHPをコピーする。
  2. コピーしたものを子テーマへ貼り付ける。
  3. 「template-parts」フォルダ内で使用する「post」フォルダ以外を削除。
  4. 「post」フォルダ内で使用する「content.php」以外を削除する。

Twenty Seventeen カスタマイズ 記事一覧ページ

「content」PHPの変更

Twenty Seventeen カスタマイズ 記事一覧ページ

「content.php」を上記のとおり変更します。記事一覧ページから記事本文を消し去りました。また、「アイキャッチ」「投稿日」「タイトル」の順番に表示するように設定しています。変更したコードを下記に載せますので、全文コピーして上書きしてもO.K.です。

index.phpとarchive.phpの変更

「index」はサイトトップページの記事一覧、「archive」はカテゴリーの記事一覧を表示します。この2つのPHPについて、後ほど記事をタイル状に配置するために「id」と「class」を指定しておきます。下記コードをコピーし、それぞれ図の箇所へ貼り付けてください。

「index.php」の変更箇所

Twenty Seventeen カスタマイズ 記事一覧ページ

「archive.php」の変更箇所

Twenty Seventeen カスタマイズ 記事一覧ページ

上記コード変更の結果

記事一覧ページでは、下画像のように投稿記事それぞれに「class」が指定され、それを「id」により囲う形になります。この状態が後々必要となってくるのです。

Twenty Seventeen カスタマイズ 記事一覧ページ

スポンサーリンク

style.cssへ追記

下記コードをコピーし、「style.css」に追記します。

画面サイズによる表示列数の変更

上記コードでは、画面サイズ横幅が30em未満で2列、30em以上で3列、48em以上で2列、60em以上で3列になるように設定しています。画面の横幅に対して列数を変えることにより、小さくなりすぎたり大きくなりすぎたりしないように指定します。

横の記事個数(列数)の指定

上記コード8、15、20、25行目で列数を指定しています。指定する数字は100%を横に表示させたい個数により分割すればよいです。ただし、上記コード7行目で各記事左右の余白を1%ずつ確保しているため、その分を差し引いてあげる必要があります。

  • 横に4個表示=100%÷4-2%=23%
  • 横に3個表示=100%÷3-2%=31.33%
  • 横に2個表示=100%÷2-2%=48%

ここまでのカスタマイズイメージ

ここまでの変更で、記事一覧ページが下画像のように表示されます。ここまでくれば後少しです。「float」により横並びになった記事に空白がありますが、これをタイル状に敷き詰める作業を行います。

Twenty Seventeen カスタマイズ 記事一覧ページ

Masonryの導入とheader.phpの変更

記事一覧を隙間のないタイル状に配置するために「jQuery」ライブラリの「Masonry」を使用します。すでに「Masonry」のための形(idとclassの指定)はできているので、あとはファイルのダウンロードと「header.php」の変更で完成です。

ダウンロード

Masonry」から「masonry.pkgd.min.js」ファイルをダウンロードします。
ダウンロードは「Download masonry.​pkgd.​min.js 」ボタンを右クリックして「リンク先を保存」します。

Twenty Seventeen カスタマイズ 記事一覧ページ

アップロード

ダウンロードした「masonry.pkgd.min.js」ファイルは、子テーマフォルダ内(他のPHPと同じ場所)へ貼り付けます。

Twenty Seventeen カスタマイズ 記事一覧ページ

「header.php」の変更作業

上記コードをコピーして、header.phpのheadタグ内にある<?php wp_head(); ?>の下へ貼り付けます。

1行目でMasonryを呼び出しています。「masonry.pkgd.min.js」の保存場所が子テーマフォルダ内であれば上記コードで呼び出せます。

5行目と6行目には、「index」と「archive」PHPで既に指定していた「id」と「class」を記述しています。

7行目のアニメーションはオンになっています。画面幅を変更するとかっこよく記事が動いて綺麗に整列します。(現在、このブログのTOPやカテゴリーの記事一覧がこのスタイルになっているので、表示してウィンドウ幅を変えてみてください。)

Twenty Seventeen カスタマイズ 記事一覧ページ
記事一覧ページのカスタマイズイメージ

以上でこのカスタマイズは完了となります。あとは、CSSや配置個数など好みに変更してみてください。

カスタマイズのまとめページはこちら⇒『テーマ Twenty Seventeen を使ってブログをカスタマイズ(目次)』

シェアしてください!お願いしますorz

スポンサーリンク

Fatal error: Uncaught Error: Call to undefined function wp_parse_list() in /home/tsumaboku/tsumaboku.wpblog.jp/public_html/wp-content/plugins/yet-another-related-posts-plugin/classes/YARPP_Core.php:991 Stack trace: #0 /home/tsumaboku/tsumaboku.wpblog.jp/public_html/wp-content/plugins/yet-another-related-posts-plugin/classes/YARPP_Core.php(1294): YARPP->get_query_post_types(1931, Array) #1 /home/tsumaboku/tsumaboku.wpblog.jp/public_html/wp-content/plugins/yet-another-related-posts-plugin/includes/related_functions.php(23): YARPP->display_related(1931, Array, true) #2 /home/tsumaboku/tsumaboku.wpblog.jp/public_html/wp-content/plugins/yet-another-related-posts-plugin/includes/related_functions.php(80): yarpp_related(Array, false, true) #3 /home/tsumaboku/tsumaboku.wpblog.jp/public_html/wp-content/themes/twentyseventeen-child/template-parts/post/content.php(78): related_posts() #4 /home/tsumaboku/tsumaboku.wpblog.jp/public_html/wp-includes/template.php(690): require('/home/tsumaboku...') #5 /home/tsumaboku/tsumaboku.wpblog.jp in /home/tsumaboku/tsumaboku.wpblog.jp/public_html/wp-content/plugins/yet-another-related-posts-plugin/classes/YARPP_Core.php on line 991