WordPressでカテゴリ表示を工夫するには？

WordPressでカテゴリを視覚的に把握しやすく表示し、それに関連する投稿にリンクさせる方法について解説します。

方法1: カスタムメニューを使う

1. 管理画面でカテゴリを確認する
   管理画面の「投稿」 > 「カテゴリー」で、使用したいカテゴリがすべて作成されていることを確認します。
2. メニューにカテゴリを追加する
   1. 管理画面の「外観」 > 「メニュー」に移動します。
   2. 「カテゴリ」を選び、追加したいカテゴリをチェックして「メニューに追加」をクリック。
   3. メニュー構造でドラッグ＆ドロップして順番を調整。
   4. 保存して、ウィジェットやヘッダーに表示。

方法2: サイドバーやウィジェットを活用する

1. カテゴリウィジェットを追加
   1. 管理画面の「外観」 > 「ウィジェット」に移動します。
   2. 「カテゴリー」ウィジェットを追加したい場所（サイドバーやフッターなど）にドラッグ＆ドロップ。
   3. 表示オプションで「投稿数を表示」や「階層を表示」などを設定。
2. カスタムCSSでデザインを改善
   サイトの外観に合わせて、ウィジェットのデザインを調整するために「外観」 > 「カスタマイズ」 > 「追加CSS」でスタイルを変更できます。

方法3: カテゴリページのカスタマイズ

カテゴリーページで投稿を見やすくするためのカスタマイズを行います。

テンプレートを編集
テーマファイル（category.phpやarchive.php）をカスタマイズして、カテゴリーページの表示を変更します。phpコードをコピーする

<?php if ( have_posts() ) : ?>
    <header>
        <h1><?php single_cat_title(); ?></h1>
        <?php echo category_description(); ?>
    </header>
    <?php while ( have_posts() ) : the_post(); ?>
        <article>
            <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <p><?php the_excerpt(); ?></p>
        </article>
    <?php endwhile; ?>
<?php endif; ?>

プラグインを活用する
カテゴリーページを視覚的にカスタマイズしたい場合、以下のプラグインを活用するのもおすすめです：

Content Views

Content Viewsは、WordPressで投稿やページの一覧を簡単に作成できるプラグインです。カテゴリやタグごとに投稿を整理し、グリッドやリスト形式で表示する際に便利です。このプラグインを使えば、投稿を美しく整理して表示できる上、カスタマイズも容易です。

Elementor

:カスタムデザインのカテゴリーページを作成可能。有料プラグイン。

方法4: ビジュアルナビゲーションプラグインを使う

1. おすすめプラグイン
   • Category Order and Taxonomy Terms Order
     カテゴリをドラッグ＆ドロップで並べ替えたり、視覚的に管理しやすくできます。
   • WPBakery Page Builder
     カテゴリーページをビジュアル的に設計できます。
2. 関連投稿の表示
   • Related Posts for WordPress
     関連投稿を自動的にリンク表示できるプラグイン。
   • Yet Another Related Posts Plugin (YARPP)
     投稿下部に関連する記事を自動表示。

方法5: 視覚的なカテゴリカードを作成

ショートコードを使う例：

function custom_category_cards() {
    $categories = get_categories();
    $output = '<div class="category-cards">';
    foreach ($categories as $category) {
        $category_link = get_category_link($category->term_id);
        $output .= '<div class="card">';
        $output .= '<a href="' . $category_link . '">';
        $output .= '<h3>' . $category->name . '</h3>';
        $output .= '<p>' . $category->description . '</p>';
        $output .= '</a>';
        $output .= '</div>';
    }
    $output .= '</div>';
    return $output;
}
add_shortcode('category_cards', 'custom_category_cards');

これを「外観」 > 「カスタマイズ」 > 「ウィジェット」や投稿ページにショートコード [category_cards] として挿入します。

視覚的なイメージ例

カテゴリをアイコンや画像付きで表示するデザインも可能です。CSSやプラグインを駆使して、カテゴリをカード形式、グリッド形式、またはスライダー形式にすることで、視覚的な魅力を高めることができます。