• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

FOXWP

WordPressの始め方と使い方をわかりやすく解説!

  • HOME
  • WordPressブログの始め方
  • お問い合わせ
FOXWP / WordPress / WordPressでカテゴリーページやタグページのデザインやレイアウトを変更する方法

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

最終更新日:2022年12月13日

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

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

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

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

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

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

目次 非表示
1 既に表示されている項目のデザインを変更したい場合
2 表示される項目自体を変更したい場合

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

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

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

カテゴリー:WordPress

WordPress初心者の方に読んで欲しい記事

  • あとで後悔しない!WordPress初期設定の基本事項
  • 安全にサイトを運営しよう!WordPressセキュリティ対策の基本マニュアル
Previous Post: « GoogleタグマネージャーでGoogleアナリティクスを利用できるようにする方法
Next Post: WordPressでショートコードを一から自作する方法 »

Primary Sidebar

世界で一番利用されているWordPressテーマ

Divi WordPress Theme
レビューを見る

あなたの悩みは?

WordPress
セキュリティ
WordPress
トラブル
アクセスアップアフィリエイト
おすすめASP

最新ニュース

  • 【カラフルボックス】夏のキャンペーン実施中【2021年8月31日まで】

最近の投稿

  • WordPressでおすすめのバックアッププラグイン5選
  • WordPressのPHP設定を変更する方法(php.ini)
  • WordPressでおすすめの画像圧縮プラグイン5選
  • WordPressの投稿編集画面でその投稿を表示する方法
  • WordPressの管理画面に再利用ブロックの管理を追加する方法

カテゴリー

  • WordPress
  • お役立ち情報
  • アフィリエイト
  • ドメインレジストラ
  • レンタルサーバー
    • ColorfulBox
    • Conoha WING
    • mixhost
    • さくらのレンタルサーバー
    • エックスサーバー
    • エックスフリー
    • ロリポップ!
  • 便利ツール
WordPress学習方法
トップページへ

プライバシーポリシー|お問い合わせ
Copyright © 2023 FOXWP All rights reserved.