即席でWordPressでカテゴリ一覧ページを作る

ぼく「WordPressってカテゴリ一覧ページとかないの」
WordPress「ないよ」
ぼく「悲しいなぁ…」

というわけで作りました

やること

WordPressのカテゴリ一覧ページ(もちろん固定ページ直書きではない)を作る

必要なもの

  • WordPress本体(それはそう)
  • 基礎的なPHPの知識(人権)
  • ある程度の数の記事(動作確認に必要)

必須ではありませんがPHPのシンタックスハイライトができるエディタがあるといいです。VisualStudio Codeとかでも十分です。あとはFTPクライアントがあると便利かもしれませんがぼくはレンサバのnet2ftpを使いました。

作る

では早速作っていきます。と言ってもファイルコピってちょっと書き換えて終わりー!みたいな感じなのでそんなに身構える必要はないと思います。

必要なファイルをコピる

まず WordPressのディレクトリ/wp-content/themes/使ってるテーマ/page.php をコピーし、名前を変えます。パスは適宜読み替えてください。

現在使用中のテーマを直接弄ると、後の更新によりカスタマイズが失われることがあります。WordPressのWikiなどに従って「子テーマ」を作成しておいたほうが安全で確実です。

この page.php はWordPressのデフォルトのページテンプレートと呼ばれるものです。端折って言うとブログ記事とか固定ページとかを出力する際の雛形といったところでしょうか。
テーマによっては「サイドバーを表示しない」みたいなテンプレートがあると思います。今回はこれを作ってカテゴリ一覧ページを作ります。

ページテンプレートとして使うファイルは page-namae.php のようなファイル名である必要があります。今回はカテゴリ一覧ページなので page-category.php としました。

え?固定ページだけでできねーのかって?固定ページ内にプログラムによる処理は書けないんですよ…
テーマのファイルを直接いじる必要があるので例えばWordPress.comでは使えません。ごめんなさいね。だって固定ページに直書きじゃ意味がないじゃないですか…

いじる

まずはさっきコピったファイルを開いてみます。

<?php get_header(); ?>

    <section id="primary" class="content-area">
        <main id="main" class="site-main" role="main">
                    
            <?php while ( have_posts() ) : the_post();

                get_template_part( 'template-parts/content', 'page' );

                comments_template();

            endwhile; ?>
        
        </main><!-- #main -->
    </section><!-- #primary -->
    
    <?php get_sidebar(); ?>

<?php get_footer(); ?>

あー強そう(小並感)

まずは今からいじるファイルをテンプレートとして使ってもらうための準備です。

<?php
/**
 * Template Name: CategoryPage
 */

ファイルの先頭にこのように書くことでWordPressに対して「これは”CategoryPage”って名前のテンプレートだよー」と教えてあげます。そうするとWordPressはなるほどねとなって投稿編集・固定ページ編集ページのテンプレート選択欄にこれを追加してくれます。

ではコードを見ていきましょう。

とりあえず、なんとなーく中盤にあるwhile文が怪しい感じがしますね!ここをゴリゴリ書き換えます。

<?php get_header(); ?>

    <section id="primary" class="content-area">
        <main id="main" class="site-main" role="main">
        <h1 class="entry-title" style="border-bottom:solid 4px #eee">Categories</h1>
        <?php
        $args = array(
          'orderby' => 'id',
          'order' => 'desc'
        );
        $categories = get_categories($args);
        foreach($categories as $category){
          echo "<h2><a href=\"".get_category_link($category->term_id)."\">".$category->name."</a></h2>\n";
          echo "<p>".$category->category_count."件の記事";
          if(!empty($category->category_description)) echo " - ".$category->category_description;
          echo "</p>\n";
        } ?>
        </main><!-- #main -->
    </section><!-- #primary -->
    
    <?php get_sidebar(); ?>

<?php get_footer(); ?>

ここでキモになるのは get_categories関数 です。これはWordPressの関数ですね。
$args で連想配列の形でオプションを渡してコールすることでカテゴリの一覧をオブジェクトの配列で返します。ここではカテゴリ一覧をカテゴリID降順で並べ替えてちょーだいってことになります。

あとはお馴染みforeachで欲しい情報をぱぱっと出力して終わりっ!カテゴリ一つ一つはオブジェクトの形で返されているので $category->name だとかの形で値を出してタグで囲んで出力します。

ついでにカテゴリに説明(description)があればそれも出力するようにします。

それぞれのカテゴリの記事一覧ページはちゃんと用意されており、カテゴリIDを引数に入れて get_category_link関数 をコールすることで取得できるのでこれをaタグのhrefにぶち込みます。
なんでカテゴリ一覧は用意されてないんだろう。

これが書き終わったらFTP経由で先程のpage.phpと同じ階層に保存しましょう。

固定ページに適用する

これでテンプレートとして使う準備ができたので、カテゴリ一覧ページ用の固定ページを用意します。

と言っても簡単です。

名前を決めてテンプレートに「CategoryPage」にして保存・公開して終わりです。

内容を書いてもここに書いた内容を出力するコードは消し去ってしまったので意味がありません。ハハハ。

できた

動作確認をしましょう

やったぁ!

もちろん、プログラムで処理しているので記事が追加されればこの数も増加します。
WP Fastest Cacheとか使っている人は除外設定とかを使わないとここの数字が固まったままになるかもしれないので注意が必要かもしれません。

で、なんでこれがやりたかったの?

このメニューが作りたかったんや…

みんなも試してみるといいかもしれません

2件のコメント

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です