【WordPress化】カスタムフィールド、条件つきループなど

【WordPress化】カスタムフィールド、条件つきループなど
目次

投稿を必要な件数だけ一覧表示する

<?php
	$args = array(
	'post_type' => 'post',
	'posts_per_page' => 1 // 表示件数
	);
	$posts = get_posts( $args );
	foreach ( $posts as $post ): // ループの開始
	setup_postdata( $post ); // 記事データの取得
?>

 //ループの内容

<?php
	endforeach; // ループの終了
	wp_reset_postdata(); // 一覧情報取得に利用したループをリセット
?>


カスタム投稿タイプならpost_typeにスラッグ名を書きます。(postはデフォルトなので削除してもOK)

記述例

<?php
	$args = array(
	'post_type' => 'post',
	'posts_per_page' => 1 // 表示件数
	);
	$posts = get_posts( $args );
	foreach ( $posts as $post ): // ループの開始
	setup_postdata( $post ); // 記事データの取得
?>

<a href="<?php the_permalink() ?>" class="top-news__archive">
  <time datetime="<?php the_time('c');?>" class="top-news__date"><?php the_time('Y.m.d'); ?></time>
  <p class="top-news__text"><?php the_title(); ?></p>
</a>

<?php
	endforeach; // ループの終了
	wp_reset_postdata(); // 一覧情報取得に利用したループをリセット
?>

カスタムフィールドで入力フォームを作る

編集に不慣れなお客様でも、簡単にコンテンツの中を入力編集できるカスタムフィールドを作成します。

カスタムフィールドは、プラグインAdvanced Custom Fieldsを使います。

カスタムフィールドの作成

設定方法

  1. フィールドグループを新規作成
  2. 「フィールドを追加」で項目を作成
    1. フィールドラベルを入力
    2. フィールド名を入力
    3. フィールドタイプを入力
  3. 紐付ける位置を設定

フィールドタイプが「テキストエリア」なら、改行を「自動的に<br>に変換」にしておくことでテキスト間の余白を保ってくれます。

phpファイルを編集

出力の基本系は以下のような形。

<?php if(get_field( 'フィールド名' ): ?>
	<p><?php the_field( 'フィールド名' ); ?></p>
<?php endif; ?>

get_field( ‘フィールド名’ )で取得、the_field( ‘フィールド名’ )で出力です。

データが空の場合を除外したいので、if文を使っています。

あとは、Wordpressの編集ページから任意のテキストなどを入力すると反映されます。

カスタム投稿などの記事を自由にループさせる

記事一覧ページなど、URLによって決定されるクエリのことメインクエリと呼びます。

カスタム投稿のあるジャンルを5件だけ表示など、複数の条件で記事を取得して表示したいときはWP_Queryを利用したサブクエリを使います。

サブクエリの概要

  1. 条件を設定
  2. ループ開始
  3. ループの内容
  4. ループ終了リセット
<?php // サブクエリをセット
	$args = array(
	'post_type' => 'plan',  // 投稿タイプ ・投稿:post ・固定ページ:page ・カスタム投稿:カスタム投稿タイプ名
	'posts_per_page' => -1, // 表示件数。 -1ならすべての投稿を取得
	'orderby' => 'date',    // ソート
	'order' => 'ASC',       // 降順'DESC' 昇順は'ASC'
	'post_status' => 'publish', // - 公開された投稿または固定ページ
	'tax_query' => array(       //(array) - タクソノミーパラメーターを指定
		array(
			'taxonomy' => 'plan_genre',  //(string) - タクソノミー
			'field' => 'slug',      //(string) - IDかスラッグ
			'terms' => 'general',   //(string) - ターム
		)
	),
);
$the_query = new WP_Query( $args );
// ループ
if ( $the_query->have_posts() ) :
while ( $the_query->have_posts() ) : $the_query->the_post();
?>

// ループの内容

<?php
endwhile;
endif;
wp_reset_postdata(); //投稿データをリセット
?>

$argsの中は必要に応じてオプションを設定。

サブクエリを使うことで、カスタム投稿タイプの記事にあるカスタムフィールドの内容を反映させるといったケースにも対応できます。

ループの中でループを使う方法

例えば以下のようなスタッフ紹介で、全ての役職とスタッフを表示させる場合、ループの中でループする方法が使えます。

スタッフ紹介

  • 歯科衛生士
    • スタッフ1
    • スタッフ2
  • 歯科助手
    • スタッフ3
    • スタッフ4
    • スタッフ5

役職をカスタムタクソノミー、スタッフをカスタム投稿で作成し、最初に役職をループさせています。

  • 役職1
  • 役職2

入れ子にしたサブクエリで$term->term_idを利用することで、役職の中のスタッフを出し分けることが可能です。

  • 役職1
    • スタッフ1
    • スタッフ2
  • 役職2
    • スタッフ3
    • スタッフ4

手順は以下の通り。

  1. get_termsを使用しforeachでターム毎にループさせる
  2. タームIDでサブループさせる
<!-- ①タームごとにループ -->
<?php
$array = array(
	'orderby' => 'id', // ID順にする
);
	$terms = get_terms('position', $array );
	foreach ( $terms as $term ): // ループの開始
	setup_postdata( $term ); // 記事データの取得
	// var_dump(get_terms());
?>
<h3><?php echo esc_html($term->name); ?></h3>
	<!-- ②タームID別にループ -->
		<?php // サブクエリをセット
			$args_general = array(
				'post_type' => 'staffs',  // 投稿タイプ
				                          // ・投稿:post  
				                          // ・固定ページ:page 
				                          // ・カスタム投稿:カスタム投稿タイプ名
				'posts_per_page' => -1, // 表示件数。 -1ならすべての投稿を取得
				'orderby' => 'date',    // ソート
				'order' => 'ASC',       // 降順'DESC' 昇順は'ASC'
				'post_status' => 'publish', // - 公開された投稿または固定ページ
				'tax_query' => array(       //(array) - タクソノミーパラメーターを指定
					array(
						'taxonomy' => 'position',  //(string) - タクソノミー
						'field' => 'id',      //(string) - IDかスラッグ
						'terms' => $term->term_id,   //(string) - ターム
					)
				),
			);
			$the_query = new WP_Query( $args_general );
			// ループ
			if ( $the_query->have_posts() ) :
			while ( $the_query->have_posts() ) : $the_query->the_post();
		?>

	<!-- ここに内容 -->

	<?php
		endwhile;
		endif;
		wp_reset_postdata(); //投稿データをリセット
		?>
<?php
endforeach; // ループの終了
wp_reset_postdata(); // 一覧情報取得に利用したループをリセット
?>

前の記事

役に立ったら他の方にシェア

お気軽にコメントどうぞ

コメントする

目次