KOSAERU（コサエル）

イベント系のページで重宝する「今月開催されるイベント一覧」ページの作り方。
改造することで、来月のやーつなんかもでけます。

ざっくり思案

・一覧ページは固定ページを使う
・投稿にカスタムフィールドを使って『年月日』を紐づける
・紐づけた『年月日』を参照して、今月開催されるイベント一覧を作る
・クエリーポストで今月1日～末日の値を持っている投稿を表示する
・ページネーションも対応すっぞ

0.準備

プラグイン「Advanced Custom Fields」

https://ja.wordpress.org/plugins/advanced-custom-fields/
1．インストールしますわな
2．フィールドを作る
3．フィールド名は『schedule-day』
4、フィールドタイプは『デイトピッカー』
5．フォーマットを保存するは『yymmdd』
6．表示フォーマットも『yymmdd』

固定ページを作る

わかりやすいように固定ページテンプレートを作る（※1）

<?php
/*
Template Name: 今月のスケジュール一覧
*/
?>

<?php

Template Name: 今月のスケジュール一覧

投稿ページでイベント日を設定

「Advanced Custom Fields」で作ったカスタムフィールドの入力欄（デイトピッカー）で年月日を登録

１．固定ページのカスタマイズ

（※1）で作った固定ページテンプレートをイジります。

ポイント1

1日、末日の変数を作っておく

<?php
$firstmonth	=	date("Y-m-01", time());
$endmonth	=	date("Y-m-t", time());
?>

<?php

$firstmonth = date("Y-m-01", time());

$endmonth = date("Y-m-t", time());

来月のやーつの場合は以下の記述で、上記のものと入れかえるだけ

<?php
$nextmonth_first	=	date('Y-m-d', strtotime('first day of next month'));
$nextmonth_end		=	date('Y-m-d', strtotime('last day of next month'));
?>

<?php

$nextmonth_first = date('Y-m-d', strtotime('first day of next month'));

$nextmonth_end = date('Y-m-d', strtotime('last day of next month'));

クエリーポスト

・ページネーション対応
・20件表示
・カテゴリ絞り込み可能
・並び順は1日から順に表示とする

<?php
//今月のイベント
$args = array(
	'paged' => $paged,
	'posts_per_page' => 20,
	'cat' => 1,
	'order' => ASC,
	'orderby' => 'meta_value',
	'meta_query' => array(
						'relation' => 'AND',
						array(
							'key' => 'schedule-day',
							'value'=>array( $firstmonth, $endmonth ), //ここに配列で範囲をDATE型で設定。
							'compare'=>'BETWEEN',
							'type'=>'DATE',					
							)
    )
);
$wp_query = new WP_Query($args);
if($wp_query->have_posts()): while($wp_query->have_posts()) : $wp_query->the_post();
?>

<?php

//今月のイベント

$args = array(

'paged' => $paged,

'posts_per_page' => 20,

'cat' => 1,

'order' => ASC,

'orderby' => 'meta_value',

'meta_query' => array(

'relation' => 'AND',

array(

'key' => 'schedule-day',

'value'=>array( $firstmonth, $endmonth ), //ここに配列で範囲をDATE型で設定。

'compare'=>'BETWEEN',

'type'=>'DATE',

)

);

$wp_query = new WP_Query($args);

if($wp_query->have_posts()): while($wp_query->have_posts()) : $wp_query->the_post();

ページネーション対応

wp_reset_query();は忘れないように

<!-- pager -->
<?php
if ($the_query->max_num_pages > 1) {
	echo paginate_links(array(
		'base' => get_pagenum_link(1) . '%_%',
		'format' => 'page/%#%/',
		'current' => max(1, $paged),
		'total' => $the_query->max_num_pages
	));
}
?>


<div class="navigation">
<div class="alignleft"><?php previous_posts_link('&lt; 前の20件'); ?></div>
<div class="alignright"><?php next_posts_link('次の20件 &gt;'); ?></div>
</div>
<!-- /pager	 -->

<?php wp_reset_query();	 ?>

<?php

if ($the_query->max_num_pages > 1) {

echo paginate_links(array(

'base' => get_pagenum_link(1) . '%_%',

'format' => 'page/%#%/',

'current' => max(1, $paged),

'total' => $the_query->max_num_pages

));

}

</div>

<?php wp_reset_query(); ?>

実際に動いている固定ページテンプレートのソース

bootstrap4を使ってのテンプレで、PC&スマホ対応なので、余計な記述が色々あるけど、メンゴメンゴw

<?php
/*
Template Name: 今月のスケジュール一覧
*/
?>
<?php get_header(); ?>


	<div class="contet-title hidden-xs-down">
    <div class="container">

        <h1>

		今月のイベント

        </h1>

    </div>
    </div>


<div class="container">
<div class="row">

<div class="contet-title hidden-sm-up">
    <h1>
    <span>
	今月のイベント
    </span>
    </h1>
</div>

<?php
$firstmonth	=	date("Y-m-01", time());
$endmonth	=	date("Y-m-t", time());
?>

<div class="col-12 col-md-8">
<div id="main">


<?php
//今月のイベント
$args = array(
	'paged' => $paged,
	'posts_per_page' => 20,
	'cat' => 1,
	'order' => ASC,
	'orderby' => 'meta_value',
	'meta_query' => array(
						'relation' => 'AND',
						array(
							'key' => 'schedule-day',
							'value'=>array( $firstmonth, $endmonth ), //ここに配列で範囲をDATE型で設定。
							'compare'=>'BETWEEN',
							'type'=>'DATE',					
							)
    )
);
$wp_query = new WP_Query($args);
if($wp_query->have_posts()): while($wp_query->have_posts()) : $wp_query->the_post();
?>

	
	<div id="post-<?php the_ID(); ?>" <?php post_class('card-type'); ?>>
    

    <div class="meeting-img"><a href="<?php the_permalink() ?>"><?php the_post_thumbnail('full', 'class=img-w100'); ?></a></div>
    
        <div class="meeting-txt">
        <h2><a href="<?php the_permalink() ?>"><?php echo get_the_title(); ?></a></h2>
        <?php if(is_category(1)) : //カテゴリスケジュールの時だけ表示 ?>
        開催日：
        <?php $week = array("日", "月", "火", "水", "木", "金", "土"); ?>
        <?php 
        $date = date_create(''.get_field('schedule-day').'');
        echo date_format($date,'Y/m/d') . "(" . $week[(int)date_format($date,'w')] . ")" ; 
        ?>
        <?php endif; ?>
        
        
        <p class="post-meta">
        	
			<?php $kanren = get_field('related-store'); ?>
            <?php if($kanren): ?>
            <?php foreach((array)$kanren as $value):?>
            ＠<a href="<?php echo get_the_permalink($value->ID); ?>"><?php echo $value->post_title; ?></a>
            <?php endforeach; ?>
            <?php endif; ?>
             
             
            <?php $kanren = get_field('related-organizer'); ?>
            <?php if($kanren): ?>
            <?php foreach((array)$kanren as $value):?>
            <i class="fa fa-user" aria-hidden="true"></i> <a href="<?php echo get_the_permalink($value->ID); ?>"><?php echo $value->post_title; ?></a>
            <?php endforeach; ?>
            <?php endif; ?>           
            
            <?php edit_post_link(__('EDIT'), ' ｜ <i class="fa fa-pencil-square-o" aria-hidden="true"></i> ', ''); ?>
        </p>
        </div>
    
    </div>

<?php endwhile; ?>
<?php else: ?>
オフ会はありません
<?php endif; ?>



<!-- pager -->
<?php
if ($the_query->max_num_pages > 1) {
	echo paginate_links(array(
		'base' => get_pagenum_link(1) . '%_%',
		'format' => 'page/%#%/',
		'current' => max(1, $paged),
		'total' => $the_query->max_num_pages
	));
}
?>


<div class="navigation">
<div class="alignleft"><?php previous_posts_link('&lt; 前の20件'); ?></div>
<div class="alignright"><?php next_posts_link('次の20件 &gt;'); ?></div>
</div>
<!-- /pager	 -->

<?php wp_reset_query();	 ?>
</div><!--/#main-->
</div><!--/.col-->

	<div class="hidden-md-down col-md-4">
    <?php get_sidebar(); ?>
    </div>	
    
</div><!--/.row-->
</div><!--/.container-->
<?php get_footer(); ?>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

<?php

Template Name: 今月のスケジュール一覧

<?php get_header(); ?>

<h1>

今月のイベント

</h1>

</div>

<h1>

<span>

今月のイベント

</span>

</h1>

</div>

<?php

$firstmonth = date("Y-m-01", time());

$endmonth = date("Y-m-t", time());

<?php

//今月のイベント

$args = array(

'paged' => $paged,

'posts_per_page' => 20,

'cat' => 1,

'order' => ASC,

'orderby' => 'meta_value',

'meta_query' => array(

'relation' => 'AND',

array(

'key' => 'schedule-day',

'value'=>array( $firstmonth, $endmonth ), //ここに配列で範囲をDATE型で設定。

'compare'=>'BETWEEN',

'type'=>'DATE',

)

);

$wp_query = new WP_Query($args);

if($wp_query->have_posts()): while($wp_query->have_posts()) : $wp_query->the_post();

<?php if(is_category(1)) : //カテゴリスケジュールの時だけ表示 ?>

開催日：

<?php $week = array("日", "月", "火", "水", "木", "金", "土"); ?>

<?php

$date = date_create(''.get_field('schedule-day').'');

echo date_format($date,'Y/m/d') . "(" . $week[(int)date_format($date,'w')] . ")" ;

<?php endif; ?>

<?php $kanren = get_field('related-store'); ?>

<?php if($kanren): ?>

<?php foreach((array)$kanren as $value):?>

＠<a href="<?php echo get_the_permalink($value->ID); ?>"><?php echo $value->post_title; ?></a>

<?php endforeach; ?>

<?php endif; ?>

<?php $kanren = get_field('related-organizer'); ?>

<?php if($kanren): ?>

<?php foreach((array)$kanren as $value):?>

<i class="fa fa-user" aria-hidden="true"></i> <a href="<?php echo get_the_permalink($value->ID); ?>"><?php echo $value->post_title; ?></a>

<?php endforeach; ?>

<?php endif; ?>

<?php edit_post_link(__('EDIT'), ' ｜ <i class="fa fa-pencil-square-o" aria-hidden="true"></i> ', ''); ?>

</p>

</div>

<?php endwhile; ?>

<?php else: ?>

オフ会はありません

<?php endif; ?>

<?php

if ($the_query->max_num_pages > 1) {

echo paginate_links(array(

'base' => get_pagenum_link(1) . '%_%',

'format' => 'page/%#%/',

'current' => max(1, $paged),

'total' => $the_query->max_num_pages

));

}

</div>

<?php wp_reset_query(); ?>

</div>

</div>

<?php get_sidebar(); ?>

</div>

</div>

</div>

<?php get_footer(); ?>

東京都立川市のWeb制作事務所KOSAERU（コサエル）
理想をカタチに！あなたのホームページをこさえます！

WordPress 投稿に年月日を持たせて今月のイベント一覧ページを作るメモ

ざっくり思案

0.準備

プラグイン「Advanced Custom Fields」

固定ページを作る

投稿ページでイベント日を設定

１．固定ページのカスタマイズ

ポイント1

クエリーポスト

ページネーション対応

実際に動いている固定ページテンプレートのソース

WordPress 投稿に年月日を持たせて今月のイベント一覧ページを作るメモ

ざっくり思案

0.準備

プラグイン「Advanced Custom Fields」

固定ページを作る

投稿ページでイベント日を設定

１．固定ページのカスタマイズ

ポイント1

クエリーポスト

ページネーション対応

実際に動いている固定ページテンプレートのソース

横からスライドしてくるドロワーメニューが超簡単につくれる『Drawer』

WordPress 問い合わせフォームのプラグインMW WP Formの自動返信メールに送信日時を設置

関連するタグの記事

関連するカテゴリの記事