2013
7
24

[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

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

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly 618
  • RSSを登録

公開日:2013/07/24


コメントを残す




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


back to top