WORDPRESSの投稿を Custom Post Type UI と Advanced Custom Fields の組み合わせで便利にする

2016年12月4日

Custom Post Type UIをインストールして設定。

続いてAdvanced Custom Fieldsをインストールして各種項目を設定。

「投稿タイプ」を選んで先ほど作った"event"を選択。

すると、”イベント登録”から新規追加した時のみカスタムフィールドが表示される。

アーカイブページ等で文字数を制限する

<?php echo mb_substr(strip_tags($post-> post_content),0,60) . '...'; ?>

上記コードは60文字制限。

ループで表示させる場合は以下のようなコードで。

<?php
    $wp_query = new WP_Query();
    $param = array(
        'posts_per_page' => '-1', //表示件数。-1なら全件表示
        'post_type' => 'event', //カスタム投稿タイプの名称を入れる
        'post_status' => 'publish', //取得するステータス。publishなら一般公開のもののみ
        'orderby' => 'date', //ID順に並び替え
        'order' => 'ASC'
    );
    $wp_query->query($param);
    if($wp_query->have_posts()): while($wp_query->have_posts()) : $wp_query->the_post();
?>
	<?php
	$img = get_field('event-photo');
	$imgurl = wp_get_attachment_image_src($img, 320, 200);
	if($imgurl){ ?>
	<div class="event-photo">
		<img src="<?php echo $imgurl[0]; ?>" alt="">
	</div>
	<!-- /.event-photo -->
	<?php } ?>
	<div class="event-detail green">
		<h3 class="event-title"><?php the_title(); ?></h3>
		<h4 class="event-date"> 
			<?php
			//デイトピッカー
			$datepicker = get_field('event-date'); 
			if($datepicker){ 
			?>
			<?php echo $datepicker; ?>
			<?php } ?>
			<?php
			//曜日の出力
				$week = get_field('event-dayoftheweek');
				if($week){ 
			?>
			<? echo $week; ?>
			<? } ?>
		</h4>
		<h5 class="event-time">
			OPEN / START
			<?php the_field('event-dayoftheweek'); ?>
		</h5>
		<p class="event-text"><?php echo mb_substr(strip_tags($post-> post_content),0,60) . '...'; ?></p>
		<div class="more-btn">
			<a href="<?php the_permalink(); ?>">more</a>
		</div>
		<!-- /.more-btn -->
	</div>
	<!-- /.event-detail -->
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php else: ?>
<!-- 投稿が無い場合の処理 -->
<?php endif; ?>