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

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

ただいまの
回答率

89.10%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,300

heyhey...

score 16

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;}

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • 退会済みユーザー

    退会済みユーザー

    2019/01/15 14:23 編集

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

    キャンセル

  • 退会済みユーザー

    2019/01/16 00:46

    複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

回答 1

checkベストアンサー

0

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

$thisyear = date('Y');
$counter = 1;

// リスト・コンテンツ格納用
$list = '';
$contents = '';

for ($year = $thisyear; $year >= 2017; $year--)
{
    // リスト部分
    $list .= '<li id="tab' . $counter . '"';
    $list .= ($counter==1) ? ('class="select"'):('');
    $list .=  '>' . $year . '</li>';

    // コンテンツ部分
    $myposts = get_posts('posts_per_page=-1&year='.$year.'&order=ASC');
    $contents .= '<div class="content_area';
    $contents .= ($counter==1) ? (''):(' hide');
    $contents .= '">';
    foreach ( $myposts as $post )
    {
        setup_postdata( $post );
        $contents .= get_the_content(); // ここで投稿ごとに必要な値を取得・格納
    }
    wp_reset_postdata();
    $contents .= '</div>';
    $counter++;
}

// 出力
echo '<ul class="tab_area">';
echo $list;
echo '</ul>';
echo $contents;

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/01/16 12:23

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

    キャンセル

  • 2019/01/16 13:39

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

    キャンセル

  • 2019/01/16 13:51

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

    キャンセル

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

  • ただいまの回答率 89.10%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる