Wordpressループについての質問です、タブを3つに分けてそれぞれに記事を表示したいです。

Question

Wordpressループについての質問です、タブを3つに分けてそれぞれに記事を表示したいです。

受付中

回答 1

投稿 2019/05/15 17:04 ・編集 2019/05/16 11:56

評価
クリップ 0
VIEW 253

onaoki

score 12

Wordpressのループについての質問です。
年度別タブを３つ分け、2020 2019 2018で年が変わったら2021 2020 2019のように年度が送られる機能と、
それぞれに３月を区切りに年度別の記事が表示される機能を考えております。

その際ループにどう記載しようか調べてもなかなか出てきません。

当方初心者ですがご教示いただければと思います。
宜しくお願い致します。

追記：

質問初心者なもので失礼しました。
タブの動作部分はできてます。
下記をCSSで動作するようにしています。

<input type="radio" name="tab_btn">
    <input id="tab2" type="radio" name="tab_btn" checked>
    <input id="tab3" type="radio" name="tab_btn">
    <div class="tab_area">
        <label class="tab1_label" style="background:#E86E4E;" for="tab1">2019年度</label>
        <label class="tab2_label" style="background-color:#156375;" for="tab2">2018年度</label>
        <label class="tab3_label" style="background-color:#42833B;" for="tab3">2017年度</label>
    </div>
    <div class="panel_area">
        <div id="panel1" class="tab_panel">
        </div>
            <div id="panel2" class="tab_panel">
        </div>
            <div id="panel3" class="tab_panel">
        </div>
    </div>

自分で調べてた分で下記使えそうなモノが有りこれを参考になんとかできそうみたいな感じで考えてます。

function custom__pre_get_posts( $query ) {
    if ( is_admin() || ! $query->is_main_query() ) {
        return $query;
    }

    if ( is_year() ) {
        $y = get_query_var( 'year' );
        $date_from = $y . '-04-01';
        $date_to = ( $y + 1 ) . '-03-31 23:59:59';
        $query->set( 'date_query', array(
            'compare' => 'BETWEEN',
            'after' => $date_from,
            'before' => $date_to,
            'inclusive' => true,
        ) );
        $query->set( 'year', null ); //元々あった年指定を削除
    }
    return $query;
}
add_action( 'pre_get_posts', 'custom__pre_get_posts' );

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

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

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

クリップを取り消します
良い質問の評価を上げる

以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します

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

評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します

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

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

評価を下げる理由を選択してください
プログラミングに関係のない質問やってほしいことだけを記載した丸投げの質問問題・課題が含まれていない質問意図的に内容が抹消された質問過去に投稿した質問と同じ内容の質問広告と受け取られるような投稿
詳細な説明はこちら

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

この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
- メールアドレスの認証
  メールアドレスの認証
- 質問評価に関するヘルプページの閲覧
  質問評価に関するヘルプページの閲覧

3 件の質問への追記・修正依頼

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

CHERRY

2019/05/15 18:03 編集

現在の内容では、丸投げと判断されそうな質問の内容です。

ベースとなる

・WordPress のデータなしで、年度をタブで表示して切り替えること
・年度でアーカイブを表示すること

はできているのでしょうか？
まずは、その部分のコードを質問に追記していただけないでしょうか？

現在の内容では、丸投げと判断されそうな質問の内容です。ベースとなる・WordPress のデータなしで、年度をタブで表示して切り替えること・年度でアーカイブを表示することはできているのでしょうか？まずは、その部分のコードを質問に追記していただけないでしょうか？

キャンセル
CHERRY

2019/05/15 20:43

ソースコードは、コード部分を選択してツールバーの <code> ボタンを利用して、見やすく記述していただけないでしょうか。　 [ソースコードを書きましょう]( https://teratail.com/help/question-tips#questionTips3-5-1 )参考

ソースコードは、コード部分を選択してツールバーの <code> ボタンを利用して、見やすく記述していただけないでしょうか。　 [ソースコードを書きましょう]( https://teratail.com/help/question-tips#questionTips3-5-1 )参考

キャンセル
onaoki

2019/05/16 09:29

了解です、失礼致しました。

了解です、失礼致しました。

キャンセル

回答 1 件

評価が高い順
新着順
古い順

+3

なるほど...

まず、is_year() は、年アーカイブのチェック関数なので、http://example.com/2019/ のような数字４桁の年付きの URL でアクセスされた場合のみ有効です。
年アーカイブ以外のときは、false になります。

関数リファレンス/is_year

また、日付アーカイブ以外の URL にアクセスした場合には、年の値がないので、get_query_var( 'year' ); は、null になります。

pre_get_posts を考えられているようですが、メインクエリーは１回しか実行されませんので、タブに分けた複数年を取得するにはちょっと向かないと思います。

タブ部分ができているのであれば、年度を取得して計算する方法をちょっと考える必要がありますが、WP_Query でサブループを年度別に分けて、３回つかう方法が簡単ではないでしょうか？

出先なので、おおまかな概念だけになりますが...

<div class="panel_area">
<div id="panel1" class="tab_panel">
<?php
$date_from1= 〜 ;
$date_to1 = 〜 ;
$args1 = array(
    'post_type' => 'post',
    'date_query', array(
        'compare' => 'BETWEEN',
        'after' => $date_from1,
        'before' => $date_to1,
        'inclusive' => true,
    )
);
$query1 = new WP_Query( $args1 );
if ( $query1->have_posts() ) {
    while ( $query1->have_posts() ) {
        $query1->the_post();
        echo '<li>' . get_the_title() . '</li>';
    }
    wp_reset_postdata();
}
?>
</div>

<div id="panel2" class="tab_panel">
<?php
$date_from2= 〜 ;
$date_to2 = 〜 ;
$args2 = array(
    'post_type' => 'post',
    'date_query', array(
        'compare' => 'BETWEEN',
        'after' => $date_from2,
        'before' => $date_to2,
        'inclusive' => true,
    )
);
$query2 = new WP_Query( $args2 );
if ( $query2->have_posts() ) {
    while ( $query2->have_posts() ) {
        $query2->the_post();
        echo '<li>' . get_the_title() . '</li>';
    }
    wp_reset_postdata();
}
?>
</div>

<div id="panel3" class="tab_panel">
<?php
$date_from3= 〜 ;
$date_to3 = 〜 ;
$args3 = array(
    'post_type' => 'post',
    'date_query', array(
        'compare' => 'BETWEEN',
        'after' => $date_from3,
        'before' => $date_to3,
        'inclusive' => true,
    )
);
$query3 = new WP_Query( $args3 );
if ( $query3->have_posts() ) {
    while ( $query3->have_posts() ) {
        $query3->the_post();
        echo '<li>' . get_the_title() . '</li>';
    }
    wp_reset_postdata();
}
?>
</div>

の用な感じでどうでしょうか？

投稿 2019/05/15 21:07

編集 2019/05/15 21:09

回答の評価を上げる

以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
回答の評価を下げる

下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

2019/05/16 09:31

ご丁寧にありがとうございます。
記載して頂いた方法で年度取得部分を少々考えてみます。

ご丁寧にありがとうございます。記載して頂いた方法で年度取得部分を少々考えてみます。

キャンセル

同じタグがついた質問を見る

WordPress

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

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

Wordpressループについての質問です、タブを3つに分けてそれぞれに記事を表示したいです。

関連した質問

同じタグがついた質問を見る

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

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

Wordpressループについての質問です、タブを3つに分けてそれぞれに記事を表示したいです。

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

関連した質問

同じタグがついた質問を見る

SNSアカウントでログイン

teratailアカウントでログイン