WordPressでカテゴリごとの新着記事をタブ切り替えして表示する

WordPressでカテゴリごとの新着記事をタブ切り替えして表示する

「wordpress 新着記事 カテゴリごと タブで表示」みたいなキーワードで訪れてくれる方がいらっしゃるみたいなんですが、残念ながら当ブログでは該当する記事が存在しなかったので、書いてみることにしました。


関連記事

冒頭の検索結果で、おそらくこちらにたどり着いてしまうと思うんです。

ちげーよ!カテゴリ毎が欲しいんだよ((└(:3」┌)┘)) と、残念な思いをしている方がいらっしゃるのかしら…と思って作ってみます。

完成図

このブログでいうと、こういう感じでしょうか(サムネイルもつけてみました)。フッターとかサイドバーに有りそうな感じ?カテゴリ毎の新着5件が表示されていて、上の見出しクリックで切り替わります。

指定したカテゴリの新着記事を表示

任意のphpファイル

カテゴリIDが1の記事を5件、リスト形式で表示します。この条件は4行目の数値で変更できます。

サムネイルの大きさを変えたい場合は10行目のarray内の数値にて(長辺がこの大きさになります)。サムネイル自体不要の場合は10行目を削除してください。

ただ、ひとつだけ出力するならばともかく、複数のカテゴリ毎に4行目だけ変えたこのコードを何度も書くのはちょっと面倒ですよね。

【改】指定したカテゴリの新着記事を表示

functions.php

件数とカテゴリIDを引数にして簡単に呼び出せるように関数化してみます。

任意のphpファイル

そしたら、ひとつめの引数に件数、ふたつめの引数にカテゴリIDを指定してさっきの関数を呼び出してやれば、省コードで先ほどと同じ結果が得られます。

タブ切り替えさせる

任意のphpファイル

上記のコードを使ってタブ切り替え用のhtmlを書きます。2~4行目は直接カテゴリ名を書いても良いと思うんですが、IDからカテゴリ名を出力してくれるっていうの書いてみました。カテゴリ名を変えたとき便利ですかね。

jQuery

このあたりは前も書いたことありますが、一応。

スムーズスクロール系と一緒にするとうまく動かないという方は、こちらの記事もご参照ください。

:firstなどのjQuery独自フィルターは処理が遅いので、CSSのセレクタで書いたほうがいいかも、というアドバイスを頂きましたー!また勉強して追記できたらと思います、ありがとうございます!

css

あんまり装飾してないので、タブ部分はアイコンとかつけたほうが分かりやすいと思います。

以上です。どなたかのお役に立てたら幸いです!

公開日:2013/07/24

コメントを残す

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

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

コメントは承認制ですので、反映までしばらくお待ち下さい。(稀にスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。)