WEB制作

[WordPress]トップページにカテゴリ別の新着記事を表示する方法(タブ切り替え)

2016年9月23日

今回は「wordpressでカテゴリ別の新着情報を表示する方法」を説明します。

タブをクリックすると各カテゴリがふわっと切り替わるエフェクトを付けてあるのでかっこいいです。

160926_02

DEMO(完成イメージ)

まずは完成イメージをチェックしましょう。

今回は施工事例を地域別に分けて表示したいというケースを想定しました。

◯親カテゴリ:施工事例
◯子カテゴリ:千代田区、世田谷区、杉並区

demopage

カテゴリ別に新着記事を読み込む

それではさっそくソースコードを編集していきましょう。

まずはカテゴリ別の新着記事の読み込みから。今回はシンプルにget_posts関数を使います。大丈夫、超かんたんですよ。

まずはトップページ用テンプレートファイルの任意の箇所に、以下のコードを貼り付けます。
※home.phpやfront-page.php、または任意のページテンプレートを作成するのがおすすめ。

<解説>
▼3行目の「jirei」の部分を、任意のカテゴリースラッグに書き換えてください。
'category_name' => 'jirei',

そのカテゴリの新着記事を5件取得します。数字の「5」を「10」にすれば、10件取得します。

各カテゴリをタブで切り替える

今回は、全ての記事と子カテゴリ×3つで合計4つのタブを設定します。

jQueryの読み込み

まずはheader.phpに以下を記述してjQueryを読み込みます。

トップページ用テンプレートファイルの編集

トップページ用テンプレートファイルの任意の箇所に、以下のコードを貼り付けます。

<解説>
▼やはりこの部分は、あなたのブログのカテゴリースラッグに書き換えてください。
'category_name' => '◯◯◯',
上のサンプルだと4箇所あるので忘れずに。

スタイルシートの編集

スタイルシート(style.cssなど)に下記のコードを追加してください。今回のタブは背景色+テキストにしてありますが、画像でももちろんOK。デザインはあなたのブログに合わせて調整してください。

jqueryのソースを記述

footer.phpなどを編集し、</body>の直前に下記を記述します。それぞれのタブをクリックすると、内容がふわっとフェードイン・フェードアウトします。

いかがでしたか?今回のポイントは以下の2つでした。

1.カテゴリごとの新着記事を件数指定で表示させる
2.複数の要素をタブでスマートに見せる

これがwordpressでサイト構築するときにはわりとよく使うわりに、ネット上にドンピシャのHowtoページが見当たらなかったので記事をまとめてみました。半分は自分用の備忘録(^_^;)

なお今回の記事執筆にあたり、下記のサイト様の記事を参考にさせていただきました。感謝m(_ _)m

Ri-mode Rainbow 様
http://ri-mode.com/rainbow/2013/12/24/swap_contents_tab_jquery2/

マイペースクリエイターの覚え書き様
http://mypacecreator.net/blog/archives/1981

  • この記事を書いた人

てっくぽっと

独立9年目のWEB系フリーランス。WEBと映像中心のテック系Blog「テックポット」をやっています

-WEB制作
-

Copyright© テックポット , 2020 All Rights Reserved.