今回は「wordpressでカテゴリ別の新着情報を表示する方法」を説明します。
タブをクリックすると各カテゴリがふわっと切り替わるエフェクトを付けてあるのでかっこいいです。
DEMO(完成イメージ)
まずは完成イメージをチェックしましょう。
今回は施工事例を地域別に分けて表示したいというケースを想定しました。
◯親カテゴリ:施工事例
◯子カテゴリ:千代田区、世田谷区、杉並区
カテゴリ別に新着記事を読み込む
それではさっそくソースコードを編集していきましょう。
まずはカテゴリ別の新着記事の読み込みから。今回はシンプルにget_posts関数を使います。大丈夫、超かんたんですよ。
まずはトップページ用テンプレートファイルの任意の箇所に、以下のコードを貼り付けます。
※home.phpやfront-page.php、または任意のページテンプレートを作成するのがおすすめ。
|
|
<?php $newslist = get_posts( array( 'category_name' => 'jirei', //特定のカテゴリースラッグを指定 'posts_per_page' => 5 //取得記事件数 )); foreach( $newslist as $post ): setup_postdata( $post ); ?> <dt> <?php the_time('Y年n月j日'); ?>・・・<a href="<?php the_permalink(); ?>"> <?php the_title(); ?></a> </dd> <?php endforeach; wp_reset_postdata(); ?> |
<解説>
▼3行目の「jirei」の部分を、任意のカテゴリースラッグに書き換えてください。
'category_name' => 'jirei',
そのカテゴリの新着記事を5件取得します。数字の「5」を「10」にすれば、10件取得します。
各カテゴリをタブで切り替える
今回は、全ての記事と子カテゴリ×3つで合計4つのタブを設定します。
jQueryの読み込み
まずはheader.phpに以下を記述してjQueryを読み込みます。
|
|
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> |
トップページ用テンプレートファイルの編集
トップページ用テンプレートファイルの任意の箇所に、以下のコードを貼り付けます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
<div class="full_content"> <!-- 全ての施工事例取得 --> <div class="tabmenu tabactive mr01">全ての記事</div> <div class="tabcontent"> <p class="tab_title">全ての施工事例</p> <dl> <?php $newslist = get_posts( array( 'category_name' => 'jirei', //特定のカテゴリースラッグを指定 'posts_per_page' => 5 //取得記事件数 )); foreach( $newslist as $post ): setup_postdata( $post ); ?> <dt> <?php the_time('Y年n月j日'); ?>・・・<a href="<?php the_permalink(); ?>"> <?php the_title(); ?></a> </dd> <?php endforeach; wp_reset_postdata(); ?> </dl> </div> <!-- 千代田区の施工事例取得 --> <div class="tabmenu mr01">千代田区</div> <div class="tabcontent"> <p class="tab_title">千代田区の施工事例</p> <dl> <?php $newslist = get_posts( array( 'category_name' => 'jirei-a', //特定のカテゴリースラッグを指定 'posts_per_page' => 5 //取得記事件数 )); foreach( $newslist as $post ): setup_postdata( $post ); ?> <dt> <?php the_time('Y年n月j日'); ?>・・・<a href="<?php the_permalink(); ?>"> <?php the_title(); ?></a> </dd> <?php endforeach; wp_reset_postdata(); ?> </dl> </div> <!-- 世田谷区の施工事例取得 --> <div class="tabmenu mr01">世田谷区</div> <div class="tabcontent"> <p class="tab_title">世田谷区の施工事例</p> <dl> <?php $newslist = get_posts( array( 'category_name' => 'jirei-b', //特定のカテゴリースラッグを指定 'posts_per_page' => 5 //取得記事件数 )); foreach( $newslist as $post ): setup_postdata( $post ); ?> <dt> <?php the_time('Y年n月j日'); ?>・・・<a href="<?php the_permalink(); ?>"> <?php the_title(); ?></a> </dd> <?php endforeach; wp_reset_postdata(); ?> </dl> </div> <!-- 杉並区の施工事例取得 --> <div class="tabmenu">杉並区</div> <div class="tabcontent"> <p class="tab_title">杉並区の施工事例</p> <dl> <?php $newslist = get_posts( array( 'category_name' => 'jirei-c', //特定のカテゴリースラッグを指定 'posts_per_page' => 5 //取得記事件数 )); foreach( $newslist as $post ): setup_postdata( $post ); ?> <dt> <?php the_time('Y年n月j日'); ?>・・・<a href="<?php the_permalink(); ?>"> <?php the_title(); ?></a> </dd> <?php endforeach; wp_reset_postdata(); ?> </dl> </div> </div> |
<解説>
▼やはりこの部分は、あなたのブログのカテゴリースラッグに書き換えてください。
'category_name' => '◯◯◯',
上のサンプルだと4箇所あるので忘れずに。
スタイルシートの編集
スタイルシート(style.cssなど)に下記のコードを追加してください。今回のタブは背景色＋テキストにしてありますが、画像でももちろんOK。デザインはあなたのブログに合わせて調整してください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
.full_content { max-width:750px; height: 300px; position:relative; margin:10px auto 0; clear:both; } .tabmenu{ width:24%; background:#333; float:left; list-style:none; padding:10px 0 10px; text-align:center; display:block; cursor: pointer; color:#FFF; } .active, .hover { background:#999; color: #000; font-weight:bold; } .tabmenu img:hover { opacity:0.7; filter: alpha(opacity=70); -ms-filter: "alpha( opacity=70 )";} .mr01{margin-right:1px;} .tabcontent { width:100%; margin-top:5%; left:0; position:absolute; } .tabcontent dl{max-width:750px; margin: 20px auto;} .tabcontent dl dt{padding:0 20px 5px; border-bottom: solid 1px #e2e2e2; margin-bottom:10px;} .tab_title{margin-top: 10px; padding: 5px 20px 5px; font-weight: bold; border-bottom: 1px #999 solid;} |
jqueryのソースを記述
footer.phpなどを編集し、</body>の直前に下記を記述します。それぞれのタブをクリックすると、内容がふわっとフェードイン・フェードアウトします。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script type="text/javascript"> $ (function(){ $ (".tabcontent:not('.tabactive + .tabcontent')").hide(); $(".tabmenu").hover(function(){ $ (this).addClass("hover") }, function(){ $(this).removeClass("hover") }); $ (".tabmenu").click(function(){ $(".tabmenu").removeClass("tabactive"); $ (this).addClass("tabactive"); $(".tabcontent:not('.tabactive + .tabcontent')").fadeOut(); $ (".tabactive + .tabcontent").fadeIn(); }); }); </script> |
いかがでしたか？今回のポイントは以下の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
関連
静的に構築したTOPページに更新可能な新着情報を埋め込みたい。詳細ページへのリンクも貼らない。画像も…
2017年6月21日追記 現在は「AFFINGER4pro」の販売価格は8,000円(税込)に値上げ…
カラーミーショップで通販サイトを構築したクライアントから「カテゴリーページの商品一覧を新着順に並べて…
