30代兼業パパブロガーのプロフィールを見る

WPテーマ「Sango」カスタマイズ カテゴリー・タグ別の一覧ページを作る

ぼくが現在使っているワードプレステーマがこちら。

参考 SANGOSANGOデモページ

「SANGO」というテーマで、かわいらしくデザインもよくサクサク動くところが気にいってます。

 

今回はそんなワードプレステーマ「SANGO」のカスタマイズ。

『カテゴリー・タグ別の一覧ページ』を作っていきたいと思います。

 

一覧ページを作るメリット

・サイトのカラーを明確化できます。

・カテゴリーの中でも特にピックアップしたい項目を目立たせることができます。

カテゴリーページ自体はウィジェットからでも設定できますが、この作業をする最大のポイントとして、カテゴリーやタグ別のページをヘッダーメニューに表示できるということがあります。

 

それでは、さっそくいってみましょう!

①カテゴリー一覧ページを作る

大まかな流れとしては、固定ページを作って、ショートコードを挿入し、カテゴリー・タグ別の記事一覧を表示させていきます。

ほとんどが、SANGOのカスタマイズガイドのショートコード一覧「18. 指定したカテゴリーIDの記事を好きな数だけ出力」に書いてありますが、個人的に少し分かりにくい部分があったので補足しています。

参考 SANGOのショートコード一覧SANGOカスタマイズガイド

手順

  • 手順1
    固定ページを作る
    固定ページを作りましょう

    ワードプレスの編集画面に入り、固定ページの項目の新規追加をクリックします。

  • 手順2
    ショートコードを入力する

     

    コード
    [catpost catid="カテゴリーID" num="出力する記事数"]

     

    上記のショートコード内の「カテゴリーID」と、「出力する記事数」を自分のサイトに合わせて入力し、固定ページのテキスト入力欄に入れます。

     

    「カテゴリーID」と「出力する記事数(例:num=”6″)」を指定するだけで、そのカテゴリーの記事へのリンクカードが指定数分だけ出力されます。初期設定だと公開日が近い記事順に表示されます。
    SANGOカスタマイズガイドより

     

    ▼カテゴリーIDの調べ方は以下を参照のこと。

    参考 WordPressで条件分岐:カテゴリー別にデザインを変える3つの方法サルワカ

     

    IDの調べ方は上記のリンク先の方法以外でも…

    ワードプレス編集画面>投稿>カテゴリー>カテゴリー名の上にマウスのポインタを乗せる>左下のURLバー内「…tag_id=●●」の●●の数字を見る。

    その数字がカテゴリーIDです。

    あまり変わりませんが、一手早いです。

    ▼補足:正方形カードタイプにしたい場合

    そのままのコードだと横長タイプのものになりますが、ぼくの場合はトップページが正方形の形のもの(縦長影付き)にしているので、カスタマイズガイドのオプションを見ながらコードを付け加えました。

    コードの最後にcardがついています。

    カテゴリーIDが「30」で記事数が「10」かつ、正方形カードタイプの場合は以下のようなコードになります。

    コード
    [catpost catid="30" num="10" type="card"]
    注意
    最初マニュアルを見てもうまく表示されなかったので、少し試した結果、(catpost catid=”30″ num”10″)の後に半角のスペースを入れて(type=”card”)を入力しないと正方形のカードタイプになりませんでした。ご注意を!
  • 手順3
    公開する

    上手くいくと、上記のようになります。

    記事自体が少ないので3つしか表示されていませんが、10記事表示されるようにしているので、記事が増えていくと最大10表示されるはずです。

    また、固定ページなので、上記の画像のように比較的自由にテキストなどを挿入することができます。

あとは、同じように表示させたいカテゴリーがある場合は、作業を繰り返すだけです。

②タグ一覧を表示させる

タグ別にしたい場合は、カテゴリーのショートコードを以下に変えるだけです。

コード
[tagpost id="タグID" num="出力する記事数"]

1つの固定ページに複数のカテゴリー・タグを表示させたい場合の例

もし、1ページで複数のカテゴリーを表示させたい場合は

カテゴリに関するテキスト
ショートコード
カテゴリに関するテキスト
ショートコード

と入力するといいと思います。

例えばこんな感じです。

悲しい時に読む本(見出しh2)
ショートコード
腹が立つときに読む本(見出しh2)
ショートコード

まとめと、覚え書き

この方法を用いると、自分の記事のカテゴリー別のまとめや、雑記ブログの中の特集ページなど様々なアレンジができるのではと思うので、色々と試してみてください。

ただ、この方法だと設定した表示数を超えると表示されないと思われるので、その場合はカテゴリーの2ページ目に行けるようにリンクやボタン等を設置しないといけないだろうと思います。またそれは考えてみます。

それでは、また。

コメントを残す

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

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください