WordPressテーマ「Xwrite」を使っていると、カテゴリーアーカイブページのタイトルが次のように表示されます。

「カテゴリー名」の記事一覧

日本語としては自然ですが、

  • 英語を混ぜたミニマルなデザインにしたい
  • 引用符「」を消したい
  • よりスタイリッシュにしたい

という場合もありますよね。

今回は、カテゴリー名だけを表示し、右側に「Articles」と追加する方法を解説します。

目次 [ close ]
  1. 完成イメージ
  2. 実装コード（functions.phpに追加）
  3. コードの仕組み解説
    1. ① template_redirect を使っている理由
    2. ② is_category() で条件分岐
    3. ③ ob_start() で出力バッファを書き換え
    4. ④ 正規表現の意味
  4. デザインを整えるCSS（おすすめ）
  5. 注意点
  6. もっとシンプルにしたい場合
  7. まとめ

完成イメージ

変更前：

「カテゴリー名」の記事一覧

変更後：

カテゴリー名 Articles

実装コード（functions.phpに追加）

以下のコードを子テーマのfunctions.phpに追加してください。

/* カテゴリーアーカイブの「」と「の記事一覧」を削除して「Articles」に変更 */
add_action('template_redirect', function () {

    if (is_category()) {

        ob_start(function ($buffer) {

            $buffer = preg_replace(
                '/<h1 class="contentsHeader__caption">「(.+?)」の記事一覧<\/h1>/',
                '<h1 class="contentsHeader__caption">$1 <span class="archive-en">Articles</span></h1>',
                $buffer
            );

            return $buffer;
        });

    }

});

コードの仕組み解説

① template_redirect を使っている理由

ページ描画直前に処理をフックし、HTML全体を書き換えています。

② is_category() で条件分岐

カテゴリーアーカイブページだけで動作させています。他ページには影響しません。

③ ob_start() で出力バッファを書き換え

ページ出力を一旦バッファに溜め、正規表現でタイトル部分だけを置換しています。

④ 正規表現の意味

/<h1 class="contentsHeader__caption">「(.+?)」の記事一覧<\/h1>/
  • 「(.+?)」 → カテゴリー名だけを抽出
  • $1 → 抽出したカテゴリー名

デザインを整えるCSS（おすすめ）

「Articles」を少し小さめにするとおしゃれになります。

.archive-en{
  font-size: 0.6em;
  letter-spacing: .1em;
  margin-left: .4em;
  opacity: .7;
}

英語部分をアクセントカラーにしても◎

.archive-en{
  color: #888;
  text-transform: uppercase;
}

注意点

  • 必ず子テーマに追加する
  • 正規表現はテーマ側のHTML構造が変わると動かなくなる可能性あり
  • 大規模サイトでは出力バッファ処理はやや負荷がかかる

もっとシンプルにしたい場合

「Articles」ではなく、

  • Archive
  • Posts
  • Category

などに変更することも可能です。

以下部分を書き換えるだけです。

'<span class="archive-en">Articles</span>'

まとめ

カテゴリーアーカイブの見た目は、サイト全体の印象を左右します。Xwriteはシンプルなデザインが魅力のテーマなので、英語を組み合わせるとより洗練された印象になります。ちょっとしたカスタマイズですが、ブランディング効果は高いのでぜひ試してみてください。

他にもXwriteのカスタマイズ記事を書いているので、あわせてチェックしてみてください。