WordPressでカテゴリーページやタグページのデザインやレイアウトを変更する方法

WordPressでカテゴリーページやタグページのデザインやレイアウトを変更する方法は、変更したい内容によって異なります。

「既に表示されている項目のデザインを変更したい場合」と「表示される項目自体を変更したい場合」です。

「既に表示されている項目のデザインを変更したい場合」とは、文字の大きさや色の変更、表示される項目の間隔の調整といったことです。

「表示される項目自体を変更したい場合」とは、記事一覧を表示せずに、特定の記事のみを表示させるといったことです。

「既に表示されている項目のデザインを変更したい場合」は、CSSを追加することで変更が可能となります。

一方で「表示される項目自体を変更したい場合」は、テンプレートファイルの編集または新規作成が必要となります。

既に表示されている項目のデザインを変更したい場合

WordPressでは、生成されるカテゴリーページおよびタグページのbodyタグに付与されるclassが異なります。

例えば、カテゴリー名が「WordPress」でスラッグが「wordpress」のカテゴリーを作成した場合、そのカテゴリーページのbodyタグのclassに「category-wordpress」が付与されます。

これは「category-xxx」(xxxがスラッグ)のクラスが付与されるということです。

このclassの付与を利用して、カテゴリーページのデザインを変更したい場合は、次のようなCSSを追加します。

.category-wordpress h1 { // カテゴリーページにあるタイトルを変更する
    font-size: 16px; // タイトルの文字を大きさを16pxに設定する
}

このようなCSSを追加することで、既に表示されている項目であれば、デザインを変更することができます。

表示される項目自体を変更したい場合

テンプレートファイルを編集または新規作成を行います。テンプレートファイルの編集または新規作成を行う際には、WordPressのテンプレート階層の知識が必要となります。

テンプレート階層とは、WordPressで表示されるページの種類ごとに、読み込まれるテンプレートファイルの優先順位が異なることです。

テンプレートファイルの編集を行う場合は、テンプレート階層にそって、編集すべきテンプレートファイルを探す必要があります。

新規作成を行う際には、テンプレート階層にそって、テンプレートファイル名を決める必要があります。

カテゴリーページのテンプレート階層は以下のようになります。

  1. category-{slug}.php
  2. category-{id}.php
  3. category.php
  4. archive.php
  5. index.php

タグページのテンプレート階層は以下のようになります。

  • tag-{slug}.php
  • tag-{id}.php
  • tag.php
  • archive.php
  • index.php

カテゴリーページやタグページの表示される項目自体を変更したい場合は、これらのテンプレート階層にそって、テンプレートファイルの編集または新規作成を行いましょう。

よかったらシェアしてね!
  • URLをコピーしました!