wordpress

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

更新日:




今回は「wordpressでカテゴリ別の新着情報を表示する方法」を説明します。タブをクリックすると各カテゴリがふわっと切り替わるエフェクトを付けてあるので、同じページ内でスマートに納まりますよ。




160926_02

目標とするページ

まずは目標とする完成図をチェックしましょう。今回は施工事例を地域別に分けて表示したいというケースを想定しました。

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

demopage

ちなみにテーマはこのブログと同じ「lightning」を使わせて頂きました。

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

それではさっそくソースコードを編集していきましょう。まずはカテゴリ別の新着記事の読み込みから。今回はシンプルにget_posts関数を使います。超かんたんです。

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

<解説>
▼赤字の「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 様

再・改良版:タブで表示切り替え jQuery プラグインなし

マイペースクリエイターの覚え書き様

今さら…いや今だから「WordPressのトップページに、新着記事数件を表示する」サンプルコードをあげとく[WordPress使えそうなスニペットシリーズ]

 







-wordpress
-

Copyright© フリーランス航海日誌 , 2019 All Rights Reserved.