【WordPress】マテリアルとSimplicityでカテゴリ一覧ページを作成する方法

こんにちは。ちゃぼP（@chabo0429）です。

私のサイトではマテリアルというテーマを使っていますが、このテーマは、カテゴリごとにボックスが並ぶスタイルになっているので、各カテゴリの最新記事がトップページで確認できるようになっています。

WordPressでカテゴリ一覧を参照するには、以下のように、サイドバーにウィジェットを追加すれば簡単ですね。

ただ、これだと画面をスクロールしないと出てこないので、記事やカテゴリが多くなってくると大変です。

そこで、グローバルメニューから、カテゴリ一覧を呼び出せるように、一つ固定ページを作成して、そこにカテゴリを表示させることにしました。

ただ、カテゴリ一覧だけを表示させても下がスカスカになってしまうので、私の場合は、カテゴリ選択ボタンの下にトップページと同じ、カテゴリ一覧のページを表示させるようにしてみました。

ちなみに、これも例によって部長のオーダーが発端でございます（笑）

なんか、私のサイトは部長オーダーで作ったデザインを逆輸入して実装するというスタイルが定着しつつあります。

フツー逆だよね(^◇^;)

まず、カテゴリページ（phpファイルを作成）

まず最初に、ローカル上でカテゴリ一覧表示用のページを作成します。

名前は何でもいいですが、「cat_all.php」としておきます。

上記は、「マテリアル」での使用例ですが、部長の使う「simplicity」の場合は、最下部の３行を、

とすればOKです。

これを、FTPでサーバにアップロードします。

子テーマフォルダ内にアップしてください。

管理画面で「固定ページ」を作成

次にWordPress管理画面で固定ページを作ります。

「固定ページ」から「新規追加」を選択します。

ここで「ページタイトル」の入力、「パーマリンク」の編集を行います。

パーマリンクは、カテゴリ一覧ページのURLになります。既存のものを重複しないよう注意してください。

次に、「テンプレート」を先ほどアップロードしたファイルに設定します。

今回は「Category All」がそのファイルです。

本文は特に入力する必要はありません。そのまま「公開」をクリックします。

グローバルメニューで有効化

これでページができました。グローバルメニューに追加してみましょう。

「メニュー」を開き、「カテゴリ一覧」にチェックを入れ、「メニューに追加」したら、右側メニュー構造部分で「カテゴリ一覧」をドラッグして表示させたいところに移動させます。

最後に「メニューを保存」をクリックします。

あとがき。

これで完成ですが、あとはstyle.cssでデザインを揃えればOKです。

完成形はこんな感じです。

ちなみに、これはgori.meさんのデザインを参考にしています。

gori.me（ゴリミー） | iPhone・Mac・iPad・WatchなどのApple情報を中心とした最新ITニュースや商品レビューをお届け！

iPhone 6sやiPhone 6s Plus、MacBook Air・acBook Pro・iMac、iPad Air・iPad mini・iPad Pro、そしてApple WatchなどのApple情報を中心とした最新ITニュースや商品レビュー、グルメ情報、旅行記、セール情報など幅広い情報をお届け！

gori.me（ゴリミー）

そのため、style.cssを載せるのは控えますが、今回この各カテゴリのボタンを表示しているのは、

という要素になりますので、いろいろとデザインを考えてみてくださいね！