質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

4332閲覧

wordpressの年別リストをタブ切り替えで表示したい

heyhey...

総合スコア40

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2019/01/15 01:52

編集2019/01/15 05:59

https://qiita.com/noqua/items/a26cfcb378300ba20bb1

上記サイトを参考に、newsカテゴリを年別で表示することはできました。

これを、「2019年」「2018年」「2017年」「2016年」「2015年」「2014年」のタブをそれぞれ選択したときだけ、その年の投稿がページ内に表示されるようにしたいのですが、どうしても方法が分かりません。

archive.phpのコードはこちらです

<?php // 出力する内容を設定 function archiveFunc($year){ query_posts('category_name=news&posts_per_page=-1&year='.$year.'&order=ASC'); // category_name=history などスラッグを記入 //posts_per_page は表示する記事数(-1は無制限) if(have_posts()) : ?> <dl class="news_archive"> <dt><?php echo $year; ?> 年</dt> <?php while(have_posts()) : the_post(); ?> <dd> <div class="date"><?php the_time('Y.m.d'); ?></div> <div class="content"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_content(); ?></a></div> </dd> <?php endwhile; ?> </dl> <?php endif; wp_reset_query(); } $thisyear = date('Y'); // 現在の西暦年を取得 for ($year=$thisyear; $year >= 2000; $year--) { // $year >= で指定した年から現在の年までの記事を出力(例では2000年から現在まで) archiveFunc($year); } ?>




このコードによる結果はこちら(2019年分もちゃんと表示されています)

イメージ説明
理想の見え方はこちらです↓

イメージ説明

タブ切り替えのhtmlはこれを使用し、

<ul class="tab_area"> <li id="tab1" class="select">2019</li> <li id="tab2">2018</li> <li id="tab3">2017</li> <li id="tab4">2016</li> <li id="tab5">2015</li> <li id="tab6">2014</li> </ul> <div class="content_area"> 2019の内容 </div> <div class="content_area hide"> 2018の内容 </div> <div class="content_area hide"> 2017の内容 </div> <div class="content_area hide"> 2016の内容 </div> <div class="content_area hide"> 2015の内容 </div> <div class="content_area hide"> 2014の内容 </div>

javascript

jQuery(function($){ //クリックしたときのファンクションをまとめて指定 $('ul.tab_area li').click(function() { //.index()を使いクリックされたタブが何番目かを調べ、 //indexという変数に代入します。 var index = $('ul.tab_area li').index(this); //コンテンツを一度すべて非表示にし、 $('.content_area').css('display','none'); //クリックされたタブと同じ順番のコンテンツを表示します。 $('.content_area').eq(index).fadeIn(); //一度タブについているクラスselectを消し、 $('.tab_area li').removeClass('select'); //クリックされたタブのみにクラスselectをつけます。 $(this).addClass('select') }); }); jQuery(function($){ //location.hashで#以下を取得 変数hashに格納 var hash = location.hash; //hashの中に#tab~が存在するか調べる。 hash = (hash.match(/^#tab\d+$/) || [])[0]; //hashに要素が存在する場合、hashで取得した文字列(#tab2,#tab3等)から#より後を取得(tab2,tab3) if($(hash).length){ var tabname = hash.slice(1); } else{ // 要素が存在しなければ初期化 var tabname = "tab1";} //コンテンツを一度すべて非表示にし、 $('.content_area').css('display','none'); //一度タブについているクラスselectを消し、 $('.tab_area li').removeClass('select'); var tabno = $('ul.tab_area li#' + tabname).index(); //クリックされたタブと同じ順番のコンテンツを表示します。 $('.content_area').eq(tabno).fadeIn(); //クリックされたタブのみにクラスselectをつけます。 $('ul.tab_area li').eq(tabno).addClass('select') });

CSS

.tab_area{ overflow:hidden; margin:0 auto; width:100%; border-bottom:#ccc solid 1px; text-align:center; } .tab_area li{ color:#000; padding:15px 0; margin:0 5vw; display:inline-block; margin-right:-1px; cursor:pointer; font-size:1rem; } .all_area { overflow: hidden; } .all_area div.content_area{ background:#fff; padding:30px 0 0 0; margin-bottom:30px; border-top:1px solid #1E3784; } .tab_area li.select{ /*アクティブタブの装飾*/ border-bottom:5px solid #000; } .hide{display:none;}

静的には動きました。動的にこれを表示する方法が分かりません。
どなたかご教授いただけないでしょうか。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2019/01/15 05:24 編集

タブ表示をするためのコード(JavaScriptもしくはCSS)は質問文に記載されていないようですが、質問文にあるHTMLの構造にさえ組み立てられれば問題ないということでしょうか?
guest

回答1

0

ベストアンサー

質問文に提示されたコードとは構造が変わってしまいましたが、以下の様なコードで、タブ表示対応のHTMLコードを出力できます。
必要に応じて、関数化するなどしてください。

PHP

1$thisyear = date('Y'); 2$counter = 1; 3 4// リスト・コンテンツ格納用 5$list = ''; 6$contents = ''; 7 8for ($year = $thisyear; $year >= 2017; $year--) 9{ 10 // リスト部分 11 $list .= '<li id="tab' . $counter . '"'; 12 $list .= ($counter==1) ? ('class="select"'):(''); 13 $list .= '>' . $year . '</li>'; 14 15 // コンテンツ部分 16 $myposts = get_posts('posts_per_page=-1&year='.$year.'&order=ASC'); 17 $contents .= '<div class="content_area'; 18 $contents .= ($counter==1) ? (''):(' hide'); 19 $contents .= '">'; 20 foreach ( $myposts as $post ) 21 { 22 setup_postdata( $post ); 23 $contents .= get_the_content(); // ここで投稿ごとに必要な値を取得・格納 24 } 25 wp_reset_postdata(); 26 $contents .= '</div>'; 27 $counter++; 28} 29 30// 出力 31echo '<ul class="tab_area">'; 32echo $list; 33echo '</ul>'; 34echo $contents;

投稿2019/01/15 07:21

編集2019/01/16 03:23
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

heyhey...

2019/01/15 12:47

ありがとうございます!! こちら試してみましたが、 「2019」「2018」「2017」 のタブが3つだけ表示され、それぞれタブをクリックすると2019年の投稿が1件ずつ3つのタブに分かれて表示されていました。 必要に応じて関数化してくださいとの事なので後は考えないといけないのでしょうが、力量不足で分からないです。。 どうしたら希望の表示になりますか?
退会済みユーザー

退会済みユーザー

2019/01/15 13:08

> 「2019」「2018」「2017」 のタブが3つだけ表示され、それぞれタブをクリックすると2019年の投稿が1件ずつ3つのタブに分かれて表示されていました。 年数を設定して回しているfor文の数値がこちらのテストで使用した値(2017)までになっているからですね。そこの値を希望の値に修正して使用してください。 JavaScriptによるタブ表示の動作確認はしていないのですが、「タブ切り替えのhtmlはこれを使用し」の下にあるHTMLを出力するようにつくったつもりです。どこか一致していないところがあったでしょうか?
退会済みユーザー

退会済みユーザー

2019/01/15 13:21

あっ、指定したカテゴリの投稿1件を取得するためのget_posts関数のところで、カテゴリ名を指定するところも抜けてますね。後で修正しておきます。
heyhey...

2019/01/15 15:20

ご丁寧に回答いただき、ありがとうございます。 >年数を設定して回しているfor文の数値がこちらのテストで使用した値(2017)までになっているからですね。そこの値を希望の値に修正して使用してください。 >>>こちらは解決しました! 希望としては「2019」タブをクリックしたら2019年の投稿全件を、「2018」タブをクリックしたら2018年の投稿全件を表示したいのですが、現状では「2019」タブをクリックで最新の投稿が1件、「2018」タブをクリックで2番目の投稿が1件、「2017」タブをクリックで3番目の投稿が1件、、、とコンテンツ部分には年数関係なく1件ずつしか表示されないんです。 タブ切り替えの動作的には問題ないです! 表示される内容が違うんです、、
退会済みユーザー

退会済みユーザー

2019/01/16 03:23

divタグの位置がおかしかったので修正しました。失礼しました。
heyhey...

2019/01/16 04:39

divタグの位置だけのことだったのですね。それすらも分からず、失礼致しました。 希望通り表示されました。 今回私の勉強不足でこの質問に対する皆様からの評価が低くなりましたが、その中でも丁寧にご回答いただき誠にありがとうございました。
退会済みユーザー

退会済みユーザー

2019/01/16 04:51

どういたしまして。 (きれいなコードでなくて申し訳ありませんか)今回のコードが何をどうしているのかを、var_dump等を用いて是非解析してみてください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問