【WordPress】テーマ「Hueman」のカスタマイズ 一覧ページで一行あたりの表示数を変更する

当サイトで使用しているテーマ「Hueman」の、記事単体ページのカスタマイズについての記事です。
Wordpressのカスタマイズにあたり、子テーマを使用している前提となっています。

今回は、記事一覧ページの1行あたりに表示される表示数を変更する手順を紹介します。
テーマ「Hueman」のカスタマイズを行いたい人の参考になれば幸いです。
※テーマの編集は、必ずバックアップを取ってから行いましょう！

Huemanのバージョン: 3.3.4

記事一覧ページとは

この記事では、以下のページを「記事一覧ページ」として扱います。

• 新しい記事の一覧（フロントページ）
• カテゴリ一覧
• 検索結果一覧

デフォルトの表示イメージ

デフォルトでは、スマホ以外は1行あたり2件の記事が表示されるようになっています。
3カラム構成の場合はそうでもないんですが、2カラムで構成した場合1記事あたりの画面占有率が高いように見えます。

どのようにカスタマイズしたいのか

1行あたり3件の表示に変更し、記事一覧画面にもう少しまとまりを出したいと思いカスタマイズすることにしました。

カスタマイズ対象となるファイル

今回のカスタマイズでは、以下のファイルをカスタマイズしています。

• index.php
• archive.php
• search.php
• style.css

カスタマイズ内容

それぞれのファイルのカスタマイズ内容は、以下の通りです。

index.phpのカスタマイズ

フロントページに表示されている、新しい記事一覧の表示をカスタマイズします。
21行目にあるコードの数値を変更し、表示する件数を調整します。

<?php if( ( $wp_query->current_post + 1 ) % 3 == 0 ) { echo '</div><div class="post-row">'; }; endwhile; echo '</div>'; ?>

変更を行うのはif文の部分で、デフォルトで「2」の部分が表示件数を表しています。
実際にはstyle.cssも組み合わせて表示が制御されているので、ここを「3」に変更しただけではレイアウトが崩れるだけですが、
スタイルは後で変更しますので後述します。

archive.phpのカスタマイズ

カテゴリ一覧ページに表示されている、記事一覧の表示をカスタマイズします。
25行目にあるコードの数値を変更し、表示する件数を調整します。

<?php if( ( $wp_query->current_post + 1 ) % 3 == 0 ) { echo '</div><div class="post-row">'; }; endwhile; echo '</div>'; ?>

search.phpのカスタマイズ

検索結果一覧ページに表示されている、記事一覧の表示をカスタマイズします。
29行目にあるコードの数値を変更し、表示する件数を調整します。

<?php if( ( $wp_query->current_post + 1 ) % 3 == 0 ) { echo '</div><div class="post-row">'; }; endwhile; echo '</div>'; ?>

これで、それぞれのページの1行あたりに表示する件数は3件になりました。
ただ、このままではレイアウトが崩れてしまっており上手く表示されません。

style.cssのカスタマイズ

.post-list .page, .post-list .post{width:33%;}

@media only screen and (max-width: 719px){
.post-list .page, .post-list .post {
    width: 100%;
}}

.post内の、固定ページの表示クラス.pageと、投稿ページの表示クラス.postに対して変更を加えます。
デフォルトでは50%ですが、3分割のため33%に変更。

注意点としては、レスポンシブの設定である@media only screen and (max-width: 719px)…以下の設定が抜けていると、
レスポンシブ用の設定も33%で上書きされてしまい3分割になってしまいますので、
子テーマでのcss上書きの場合も必ずセットで書いておく必要があります。

カスタマイズ後の表示

1行あたり、3件の記事が表示されるようになりました。

しかし、このままでは4行目に1件はみ出して中途半端

WordPressのデフォルト設定では、記事一覧の表示件数は最大10件となっています。
1行あたり3件表示にすると、最後の1件がはみ出してしまい中途半端になってしまうので、
9件または12件あたりに調節したいところ。

スマートフォン表示時の事を考えると12件は長い気がしますので、9件の設定に変更します。

管理画面から変更が可能

管理画面の「設定→表示設定」で、1ページに表示する最大投稿数を変更することができます。
これで、1行あたり3件の表示に変更し、表示される数も3で割り切れてスッキリしました。

＜スポンサードリンク＞