風の羅針盤 | Destination of winds.

【WordPress】ヘッダー下にカテゴリボックスを並べる方法(Simplicity,マテリアル)

time 2016/06/19  所要時間:約 3

【WordPress】ヘッダー下にカテゴリボックスを並べる方法(Simplicity,マテリアル)

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

今日のちゃぼPでも触れましたが、トップページのカテゴリ新着ボックスを3つから5つに増やしました。

早速部長も実装して、両サイトともなんだかトップページに暖簾がかかったようになっております(笑)

というわけで、今日はその実装方法をご紹介します。

スポンサーリンク

カテゴリ新着ボックスは、「main」カラム前に挿入すること

これまでのカテゴリ新着ボックスは、メインカラムのトップ部分に挿入していましたが、それだと横に3枚が限界でした。というのも、サイドバーがヘッダーのすぐ下から始まってしまうため、メインカラムの幅しか使えませんでしたので、これを横いっぱいに使えるようにします。

トップページの要素を読み込む順番は、「ヘッダー」→「メイン・サイド」→「メイン」→「サイド」→「フッター」の順番で読み込みます。

そのため、「メイン」にボックスを挿入してしまうと、サイドバーがその前から始まってしまうのです。

そこで、ヘッダーの直後に挿入することにします。

Simplicityの場合は「before-main.php」に挿入

Simplicityの場合は、あらかじめ子テーマの中に「before-main.php」が存在していますので、そこにコードを挿入します。

すごく簡単ですね。よくSimplicityでヘッダー下に画像を挿入しているサイトを見かけますが、ここに入れていたんですね。

マテリアルの場合は「header.php」に挿入

マテリアルの場合はちょっと気をつけなければいけません。トップページを読み込む際には「header.php」→「loop.php」の順番でファイルを読み込みますが、loop.phpを読み込む時には、すでにメインカラムが始まっているので、header.phpに挿入しなければなりません。

このように、メインカラムが始まる前にコードを挿入します。

表示部ソースコード

実際にボックスを表示するは両テーマとも同じです。

「スラッグ1〜5」はご自分のサイトのカテゴリのスラッグ名に書き換えます。「カテゴリ1〜5」は、ボックスのインデックスに表示させたいカテゴリ名に書き換えます。

style.cssでデザインを整えます

最後に、デザインを整えます。

ボックスの横幅やマージンはサイトによって微妙に違うと思いますので、適宜調整を。

完成

これでボックスの完成。実際に表示させてみましょう。

categorybox01

横幅もバッチリ合いました!

ある程度のカテゴリが増えてくると、アイキャッチ付きのカテゴリボックスはインパクトもあって、回遊率アップにも効果的・・かなとも思っています(笑)

こんな感じで自由にカスタマイズできるのも、WordPressのいいところです。是非皆さんのサイトもお試しあれ!

スポンサーリンク

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

最新情報をお届けします

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

コメント

  • ちゃぼP様

    いつもサイトを拝見して参考にさせていただいております。

    このカテゴリー別、最新記事の表示も早速導入しようと思いSimplicityの子テーマ(before-main.php)に

    コードをコピペして「スラッグ1〜5」にカテゴリーのスラッグを入力したのですが、記事がありませんと表示されました。

    自分のブログの場合、カテゴリーを「親と子」で以下のように分けているのですが、これが影響しているのでしょうか?

    (例)

     ↓

    (親)→ダイエット(50←記事数合算)

    (子)→食事(15←記事数)

    (子)→運動(25←記事数)

    (子)→美容(10←記事数)

    教えていただけると幸いです。
    よろしくお願いいたします。

    by れん €2016年6月21日 2:08 PM

    • れんさん、こんにちは!ご訪問いただきたありがとうございます。

      さて、カテゴリのスラッグは正しく入力されていますでしょうか。(9行目に記述した部分で抽出します)
      「投稿」-「カテゴリー」でスラッグの列に表示されている英数字の文字列がそれになります。

      親と子の関係については、

      「親カテゴリ」のスラッグを入れる→親、子どちらかに含まれる記事がすべて表示される
      「子カテゴリ」のスラッグを入れる→子に含まれる記事のみ表示される

      という違いのみで、どちらを入れても記事があれば表示されるはずですが・・・

      by chabo €2016年6月21日 2:22 PM

  • ちゃぼP様

    ご回答ありがとうございます。

    超ド素人なので、とんでもない勘違いをしてました~すいません;;

    $cat = ‘(スラッグ名1)’;

    このコードのスラッグ名1だけの部分にスラッグをコピペしてファイルを更新していたのです・・・

    つまり・・・()をそのまま残してやっていたのが原因でした。

    お手数をおかけしてすいませんでした;

    無事、カテゴリー別の最新記事が表示されました。

    どうもありがとうございました。

    by れん €2016年6月21日 3:16 PM

    • ちょっと分かりにくかったですね。表示されて何よりです!

      by chabo €2016年6月21日 4:43 PM

  • […] […]

    by 【WordPress】カテゴリ最新記事の表示を少し変えたぞ! €2016年8月2日 5:41 PM

down

コメントする





*

この記事の関連カテゴリ

関連記事

Twitter でフォロー



スポンサーリンク