masakichi-code

『カスタム投稿』アーカイブページで年毎の一覧表示するやり方

PHP
WordPress

2023.06.11(日)

『アーカイブページでカスタム投稿を年毎で一覧表示したい』『カスタム投稿を年毎で一覧表示して各年の見出しを出したい』

こういった疑問に答えます。

本記事の内容

『カスタム投稿』アーカイブページで年毎の一覧表示するやり方
年毎の各年の見出しの出し方

Webエンジニア歴1年
WordPressの運営＆立ち上げ70サイト以上かかわっている

こういった私が解説していきます。

1.『カスタム投稿』アーカイブページで年毎の一覧表示するやり方

その①：カスタム投稿タイプを用意する
その②：アーカイブページを作成する
その③：年毎一覧の記述のやり方
その④：年毎の各年の見出しの出し方

その①：カスタム投稿タイプを用意する

カスタム投稿タイプの用意をしよう

カスタム投稿タイプの作り方は記事にしています。
作成のやり方がわからない方はぜひご覧ください。

WordPressのカスタム投稿の作り方【パターンごとでページ表示させる方法もご紹介】

用意のできた方は次をご覧くださいね。

その②：アーカイブページを作成する

こちらも記事にしています

カスタム投稿タイプのアーカイブページの作り方も記事にしています。
作成のやり方がわからない方はぜひご覧くださいね。

WordPressのカスタム投稿の一覧ページの作り方【パターンごと有り】

用意ができた方は次に進みましょう。

その③：年毎一覧の記述のやり方

実際のコードがこちら

まず、実際のコードをご紹介します。
コピペで使ってOKです。

/* 年毎の投稿ループ */
<section class="news">
    <div class="inner">
        <?php
        // 投稿年ごとにグループ化
        $news_by_year = array();
        $news_query = new WP_Query(array(
            'post_type' => 'news',
            'posts_per_page' => -1,
        ));
        while ($news_query->have_posts()) : $news_query->the_post();
            $year = get_the_date('Y');
            $news_by_year[$year][] = $post;
        endwhile;
        wp_reset_postdata();


        // 投稿年でループ
        foreach ($news_by_year as $year => $news) :
        ?>
            <h1 class="year-ttl"><?php echo esc_html($year); ?>年</h1>
            <ul class="news-items">
                <?php
                // 投稿をループ
                foreach ($news as $post) :
                    setup_postdata($post);
                ?>
                    <?php
                        $permalink = get_permalink();
                        $term = get_the_terms($post->ID,'newslist');
                    ?>
                        <li>
                            <span class="date"><?php the_time("Y/m/d"); ?></span>
                            <a id="post-<?php the_ID(); ?>" href="<?php echo $permalink; ?>"><?php the_title(); ?></a>
                        </li>

                <?php endforeach; ?>
            </ul><!-- news-items -->
        <?php endforeach;?>
    </div><!-- inner -->
</section><!-- news -->

/* 年毎の投稿ループ */

<?php

// 投稿年ごとにグループ化

$news_by_year = array();

$news_query = new WP_Query(array(

'post_type' => 'news',

'posts_per_page' => -1,

));

while ($news_query->have_posts()) : $news_query->the_post();

$year = get_the_date('Y');

$news_by_year[$year][] = $post;

endwhile;

wp_reset_postdata();

// 投稿年でループ

foreach ($news_by_year as $year => $news) :

<?php

// 投稿をループ

foreach ($news as $post) :

setup_postdata($post);

<?php

$permalink = get_permalink();

$term = get_the_terms($post->ID,'newslist');

<li>

</li>

<?php endforeach; ?>

</ul>

<?php endforeach;?>

</div>

</section>

解説をしていきます

/* 年毎の投稿ループ */
<section class="news">
    <div class="inner">
        <?php
        // 投稿年ごとにグループ化
        $news_by_year = array();
        $news_query = new WP_Query(array(
            'post_type' => 'news',
            'posts_per_page' => -1,
        ));
        while ($news_query->have_posts()) : $news_query->the_post();
            $year = get_the_date('Y');
            $news_by_year[$year][] = $post;
        endwhile;
        wp_reset_postdata();


        // 投稿年でループ
        foreach ($news_by_year as $year => $news) :
        ?>
            <h1 class="year-ttl"><?php echo esc_html($year); ?>年</h1>
            <ul class="news-items">
                <?php
                // 投稿をループ
                foreach ($news as $post) :
                    setup_postdata($post);
                ?>
                    <?php
                        $permalink = get_permalink();
                        $term = get_the_terms($post->ID,'newslist');
                    ?>
                        <li>
                            <span class="date"><?php the_time("Y/m/d"); ?></span>
                            <a id="post-<?php the_ID(); ?>" href="<?php echo $permalink; ?>"><?php the_title(); ?></a>
                        </li>

                <?php endforeach; ?>
            </ul><!-- news-items -->
        <?php endforeach;?>
    </div><!-- inner -->
</section><!-- news -->

/* 年毎の投稿ループ */

<?php

// 投稿年ごとにグループ化

$news_by_year = array();

$news_query = new WP_Query(array(

'post_type' => 'news',

'posts_per_page' => -1,

));

while ($news_query->have_posts()) : $news_query->the_post();

$year = get_the_date('Y');

$news_by_year[$year][] = $post;

endwhile;

wp_reset_postdata();

// 投稿年でループ

foreach ($news_by_year as $year => $news) :

<?php

// 投稿をループ

foreach ($news as $post) :

setup_postdata($post);

<?php

$permalink = get_permalink();

$term = get_the_terms($post->ID,'newslist');

<li>

</li>

<?php endforeach; ?>

</ul>

<?php endforeach;?>

</div>

</section>

/* 年毎の投稿ループ */
<?php
// 投稿年ごとにグループ化
$news_by_year = array();

/* 年毎の投稿ループ */

<?php

// 投稿年ごとにグループ化

$news_by_year = array();

最初に$news_by_year = array();で年毎の投稿を格納する配列を用意します。

/* 年毎の投稿ループ */
$news_query = new WP_Query(array(
    'post_type' => 'news',
    'posts_per_page' => -1,
));

/* 年毎の投稿ループ */

$news_query = new WP_Query(array(

'post_type' => 'news',

'posts_per_page' => -1,

));

次に$news_queryにカスタム投稿『news』を全件取得しています。

/* 年毎の投稿ループ */
while ($news_query->have_posts()) : $news_query->the_post();
    $year = get_the_date('Y');
    $news_by_year[$year][] = $post;
endwhile;
wp_reset_postdata();

/* 年毎の投稿ループ */

while ($news_query->have_posts()) : $news_query->the_post();

$year = get_the_date('Y');

$news_by_year[$year][] = $post;

endwhile;

wp_reset_postdata();

その後、$year = get_the_date(‘Y’);で投稿日の年を取得して、$news_by_year[$year][] = $post;で年毎に投稿をまとめています。

/* 年毎の投稿ループ */
// 投稿年でループ
foreach ($news_by_year as $year => $news) :
?>

/* 年毎の投稿ループ */

// 投稿年でループ

foreach ($news_by_year as $year => $news) :

ここから、最初のforeach文『foreach ($news_by_year as $year => $news)』で年毎に出力しています。

/* 年毎の投稿ループ */
<?php
// 投稿をループ
foreach ($news as $post) :
    setup_postdata($post);
?>

/* 年毎の投稿ループ */

<?php

// 投稿をループ

foreach ($news as $post) :

setup_postdata($post);

年のループの中で月ごとの投稿をforeachを使って、出力しています。

その④：年毎の各年の見出しの出し方

実は先ほどのコードにまぎれています

/* 年毎の投稿ループ */
<?php
// 投稿年でループ
foreach ($news_by_year as $year => $news) :
?>
    <h1 class="year-ttl"><?php echo esc_html($year); ?>年</h1>

/* 年毎の投稿ループ */

<?php

// 投稿年でループ

foreach ($news_by_year as $year => $news) :

投稿年as $yearに格納した年をループ内で呼び出しています。

ここまでできればphpファイルをいじらず、WordPress管理画面だけ完結できますね。
ではまた。

< 前の記事一覧へ戻る次の記事 >

masakichi

カテゴリー

アーカイブ

2024 (3)
2023 (18)
2022 (8)