風の羅針盤 | Destination of winds.

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

time 2016/05/01  所要時間:約 3

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

こんにちは。ちゃぼP(@chabo0429)です。

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

category_page07

 

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

category_page05

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

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

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

 

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

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

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

スポンサーリンク

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

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

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

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

とすればOKです。

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

category_page01

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

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

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

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

category_page06

 

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

category_page03

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

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

category_page02

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

 

category_page04

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

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

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

category_page08

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

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

あとがき。

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

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

category_page09

ちなみに、これは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ニュースや商品レビュー、グルメ情報、旅行記、セール情報など幅広い情報をお届け!

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

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

スポンサーリンク

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

シェアしてくれると、ちゃぼPめっちゃよろこびます^^v

down

コメントする




*

この記事の関連カテゴリ

関連記事

人気の記事

Twitter でフォロー



スポンサーリンク