デイトピッカーで年度ごとに見出しを表示

  • 解決済 natsumi201

    (@natsumi201)


    1年、 2ヶ月前

    いつもお世話になっております。
    Advanced Custom Fieldのデイトピッカーを使用し、沿革形式のように受賞歴を年度ごとに見出し（〇〇年）を表示したいと思っています。
    例）
    ■2019年
    ・2019年5月　〇〇受賞
    ・2019年4月　〇〇受賞
    ■2018年
    ・2018年5月　〇〇受賞

    現在、記事の表示まではできましたが、デイトピッカーを使用して年度別に表示する方法で躓いております。

    <?php if (have_posts()) : ?>
<ul>
<?php while (have_posts()) : the_post(); ?>
<li>
<a class="awardslist_box" href="<?php the_permalink(); ?>">
<p class="reset a_bay"><?php
    $date = date_create(get_field('デイトピッカーフィールド名'));
    echo date_format($date,'Y年m月');
?></p>
<h2><?php the_title(); ?></h2>
</a>
</li>
<?php endwhile; ?>
</ul>

<?php else: ?>
<p>受賞歴に投稿はありません。</p>
<?php endif; ?>

    ※ACFのデイトピッカーは、フォーマットyymmdd・表示フォーマットyy/mm/ddで登録しました。

    また、下記コードを参考にしましたがうまく表示されない状態です。
    よろしければ解決法、ヒントなどご教授いただけないでしょうか。
    よろしくお願いいたします。

    <?php 
if ( have_posts() ) :
	$postyear = false;
	while ( have_posts() ) : 
		the_post(); $date = get_field('ーフィールド名'); $year = mb_substr($date, 0, 4);
		if( $postyear != $year ) :
			if ( $postyear !== false ) : echo '</div>';
?>
<?php endif; ?>
	<h2><?php echo $year; ?>年</h2><div>
<?php endif; ?>
ここにコンテンツ
<?php $postyear = $year; endwhile; echo '</div>'; endif; ?>
2件の返信を表示中 - 1 - 2件目 (全2件中)
  • Aki Hamano

    (@wildworks)

    1年、 1ヶ月前

    こんにちは。コードを見る限り、やりたいこととしては

    • 年別に記事をグルーピングしたい
    • グルーピングした年別に、その年をタイトルとし表示させたい
    • 各記事は、リンク付きタイトルとして表示

    なのかなと思いました。

    もしこれであれば、わざわざカスタムフィールドは使わなくても、記事の公開日日を使って実現出来るように思います。

    色々アプローチ方法はありますが、以下が一つの実装のイメージです。ChatGPTで生成したコードをベースとしており、動作確認はしておりませんので、コードの意図を汲み取った上で、適宜調整いただければと思います。

    <?php
// Wp_Queryを使って記事を取得
$args  = array(
	'post_type' => 'post',  // 投稿タイプ
	'posts_per_page' => -1, // 表示する記事の数（全件取得）
);
$query = new WP_Query($args);

// 年別にグループ化した記事を格納するための配列
$grouped_posts = array();

if ( $query->have_posts() ) {
	// WP_Queryで取得した記事をループする
	while ( $query->have_posts() ) {
		$query->the_post();

		// 記事の投稿年を取得
		$year = get_the_date( 'Y' );

		// 配列に、その年のキーが存在しなければ追加しておく
		if ( !isset( $grouped_posts[ $year ] ) ) {
				$grouped_posts[ $year ] = array();
		}

		// その年のキーを持つ配列に記事を追加
		$grouped_posts[$year][] = array(
			'title'     => get_the_title(),
			'permalink' => get_the_permalink(),
		);
	}
}
?>

<!-- グループ化された記事を年別に表示する -->
<?php
if ( ! empty( $grouped_posts ) ) :
	// 年毎にループする
	foreach ( $grouped_posts as $year => $posts ) :
		?>
		<!-- 年タイトルを表示する -->
		<h2><?php echo esc_html( $year ); ?></h2>
		<ul>
			<?php
			// その年に属する記事をループして表示する
			foreach ( $posts as $post ) :
				?>
				<li><a href="<?php esc_attr( $post['permalink'] ); ?>"><?php esc_html( $post['title'] ); ?></a></li>
			<?php endforeach; ?>
		</ul>
	<?php endforeach; ?>
<?php endif; ?>

<?php
// メインクエリをリセット
wp_reset_postdata();
?>
    トピック投稿者 natsumi201

    (@natsumi201)

    1年、 1ヶ月前

    ご回答ありがとうございます！！
    デイトピッカーを使用した方が、入力する際に分かりやすいかなと思いチャレンジしたところでした。
    Aki Hamanoさんのおっしゃる通り、公開日時で年度の表示はイメージ通りの表示になりましたので、また時間のある時にチャレンジしてみます！


    頂いたソースコードではないですが、ご参考までに載せておきます。

    <?php
$args = array(
'post_type' => 'post', // 投稿タイプ
'posts_per_page' => -1,
'order' => 'DESC'
);
$the_query = new WP_Query($args);
if($the_query->have_posts()):
$post_year = false; ?>

<?php while ($the_query->have_posts()): $the_query->the_post(); ?>
<?php if ( $post_year != get_post_time('Y') ) {
        echo '<h2>'.get_post_time('Y').'年</h2>';
} ;?>
<div>
<a class="awardslist_box" href="<?php the_permalink(); ?>">
<p><?php the_time('Y年m月'); ?></p>
<h2><?php the_title(); ?></h2>
</a>
</div>

<?php $post_year = get_post_time('Y'); endwhile; ?>
</div><!--awardslist-->
<?php wp_reset_postdata(); ?>

<?php else : ?>
<p>記事が見つかりませんでした。</p>
<?php endif; ?>
2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「デイトピッカーで年度ごとに見出しを表示」には新たに返信することはできません。

タグ