WordPressの新着情報にタブ追加|プラグインなしで作る

トップページの新着情報に、もう1つカテゴリのタブを足してほしい。受託でそう頼まれて、タブ切り替えのプラグインを探す前に、まずテーマのファイルを開いてみました。そしたら2枚目のタブが、コメントアウトされた状態で眠っとったんです。

WordPressの新着情報にタブを足すだけなら、プラグインは要りません。新着情報を出しとるテンプレート(今回は home.php)で、①タブのボタンを1つ足す ②中身の枠を1つ足す ③その枠で2つ目のカテゴリの記事を取ってくる、の3つをやれば動きます(タブを切り替える仕組みがテーマに元からある前提。無い時の話は後半で)。あわせて、並び順は「日付の新しい順」と書いて指定しておく。理由も後半で書きます。

新着情報がどのファイルにあるか探す

最初の仕事は、新着情報を出しとるファイル探し。トップページに使われるテンプレートは、テーマとWordPressの設定で変わります。

  • テーマに front-page.php があれば、それがトップに使われる
  • 無くて、表示設定のホームページが「最新の投稿」なら home.php
  • 固定ページをトップにしとるなら、その固定ページに使われとるテンプレート

今回は home.php でした。ファイルが長い時は、トップに出とる見出しの文字でファイルの中を検索すると早いです。

開いてみたら、タブのボタンは2つ目が <!– –> でコメントアウトされてました。中身の枠も2つ目があって、style=’display:none;’ で隠されとる。枠の中には記事を取ってくる処理まで入っとった。前にサイトを作った人が、いつか使うつもりで残したんやと思います(ここは推測)。

なので、まずは自分のテーマにも眠っとるタブが無いか見てください。あれば、ゼロから足すより起こすほうが早いです。

タブを足す手順|ボタン・中身の枠・記事の取得

タブのボタンと表示する枠が順番でひと組になる仕組みを示した図
タブと枠は順番どおりに組み合わせる
  • タブのボタン(li)を1つ足す。今回はコメントアウトを外して、名前を変えただけ
  • 中身の枠(div)を1つ足す。今回は隠す指定(display:none)を外しただけ
  • その枠の中で、2つ目のカテゴリの記事を取ってくる。今回は取ってくるカテゴリを差し替えた

枠の下にある「一覧を見る」リンクの行き先も、2つ目のカテゴリの一覧ページに変えておきます。忘れると、タブは新しいのにリンクだけ元のカテゴリへ飛びます。

眠っとるタブが無いテーマなら、記事の取得を自分で書くことになります。形はこんな感じ(’blog’ の所は、自分のカテゴリのスラッグに置き換えてください)。

$tab2 = new WP_Query( array(
  'category_name'  => 'blog',
  'posts_per_page' => 4,
  'orderby'        => 'date',
  'order'          => 'DESC',
) );

切り替えの動き(押したタブに印を付けて、同じ順番の枠を表示する)は、テーマに元から入っとったjQueryがそのまま使えました。タブの何番目かと枠の何番目かで組にする作りやったので、ボタンと枠の数と順番を揃えれば、2つ目どうしが正しく組になる。切り替えの仕組みが無いテーマなら、ここは数行のJavaScriptを足すことになります。

並べたら出た2つのズレ|日付と並び順

タブを表に出してみて、ズレが2つ見つかりました。

1つ目は日付。1枚目のタブには投稿日が出とるのに、眠っとった2枚目の枠には、日付を出す行がそもそも無かった。隠れとる間は誰も気づかん。並べた瞬間に「片方だけ日付が無い」が見えてまいます。1枚目と同じ書き方(the_time)をそのまま移しました。

2つ目は並び順。新着情報やのに、1年以上前の記事が先頭に出とった。WP_Queryは、並び順を何も指定せんかったら日付の新しい順のはず。テーマ側で並び順を書き換える処理も探したけど、見つからんかった。プラグインのどれかが絡んどる気はします。

ここは原因を追いかけるより、並びを書いて確実に直すほうを選びました。orderby(何で並べるか)と order(向き)を書く。上のコードの ‘date’ と ‘DESC’ の2行です。これで新しい順に揃った。既定の動きに頼らず、欲しい並びは書いておく。新着を扱う時は、最初からこの2行を入れておくのがおすすめです。

記事一覧ページを本文なしのタイトルだけにする

同じ依頼で、記事一覧のページを「本文まで全部出る」形から「タイトルだけ」に変えました。一覧に本文が丸ごと並ぶと、1ページがとんでもなく長くなる。

一覧のテンプレートにある the_content()(本文を出す命令)を外すだけ。外したら、ページの文字数が10分の1以下になりました。

ただ、一覧のテンプレートも1つとは限りません。親のカテゴリには専用のファイル(category-スラッグ.php)があったのに、子のカテゴリには専用のファイルが無くて、archive.php に回っとった。WordPressは「そのカテゴリ専用(スラッグかID)→カテゴリ共通の category.php→アーカイブ共通の archive.php」の順でファイルを探すので、途中が無いと共通のほうへ落ちるんです。

archive.php は他の一覧ページでも使われとるので、そのまま本文を外すと関係ないページまで変わってまう。今回は「このカテゴリの時だけ本文を出さん」という条件(is_category)で囲んで、影響をそのカテゴリだけに絞りました。どのページがどのテンプレートで表示されとるかは、確認用のプラグイン(Show Current Template など)で見るのが確実です。

テーマを直接さわる前に|控えと確かめ方

プラグインを使わん代わりに、テーマのファイルを直接さわるリスクは自分で背負うことになります。今回気をつけたのは、この辺りです。

  • 直す前に、ファイルの中身を丸ごと控える。エディタの中身を全選択してコピーし、テキストファイルに貼る。目で見て打ち直すのはやめたほうがいい。書き写した控えを元と照らし合わせたら、行末の空白が12個落ちとって、別物になってました。見た目では気づけん差なので、控えは必ずコピーで取ります
  • テーマを更新すると、直接直した所は上書きされて消えることがある。自分のサイトなら子テーマで直すのが基本。今回は新しいファイルを置く手段が無かったので直接直して、その点は先に伝えてあります
  • 保存が通っても、直したページは必ず開いて確かめる。最近のWordPressは、テーマエディタで保存する時にトップページと管理画面が開けるかを確かめて、エラーが出たら元に戻してくれます。けど一覧用のテンプレートみたいに、その2画面で読まれんファイルは、壊れとっても保存が通ることがある。FTPなどの戻す手段が無いなら、全ページで読まれる functions.php は、万一すり抜けた時に管理画面ごと開けんくなるおそれがあるので、なるべく触らんほうが無難です
  • 確かめる時は、ログアウトした状態で公開画面を見る。ログイン中は管理バーの分だけ見え方が変わるので、読者と同じ条件で確かめます

よくある質問

固定ページをトップにしとる場合も同じやり方でいける?

テーマのPHPで新着情報を出しとるなら、いけます。変わるのは直すファイルだけです。front-page.php があればそれ、無ければその固定ページに使われとるテンプレートの中で、新着情報を出しとる所を探します。ブロックエディタで作ったトップなら、タブにはならんけど、カテゴリ別の新着一覧は「クエリーループ」ブロックで作れます。

タブ用のプラグインを入れるのと、どっちがいい?

テーマにタブの器が元からあるなら、プラグインなしのほうが軽くて見た目も揃います。器が無くて、PHPをさわるのに抵抗があるなら、プラグインのほうが安全です。

新着情報に古い記事が先に出る時は?

記事を取ってくる所に orderby と order を書き足してください。日付の新しい順なら ‘date’ と ‘DESC’ です。何も指定してへんのに古い記事が出る時は、プラグインなどが並び順を書き換えとる可能性があります。

テーマのファイルをさわるのが不安なら、ココナラのWordPressの表示崩れ・不具合修正で相談も受けてます。

あわせて読みたい