カテゴリーやカスタムタクソノミーのカスタムフィールドを取得して表示する方法

11230 Views
2018年01月27日 WordPressPHPAdvanced Custom Fields

私がWordPressでホームページを作るときに必ずと言っていいほど使うプラグインの一つに【Advanced Custom Field】があります。

通常、カスタムフィールドはカスタム投稿などに使うことが多いですがデザインによってはカテゴリーやカスタムタクソノミー、ユーザーなんかにも使うことがあります。

今回はそんなちょっと変わった使い方をしたときの取得して出力する方法をご紹介。

SNSでシェア♪

1 カテゴリーのカスタムフィールドを取得して表示する
- 1.1 カテゴリー一覧から取得する場合
- 1.2 投稿から取得する場合
2 タグのカスタムフィールドを取得して表示する
- 2.1 タグ一覧から取得する場合
- 2.2 投稿から取得する場合
3 カスタムタクソノミーのカスタムフィールドを取得して表示する
- 3.1 カスタムタクソノミー一覧から取得する場合
- 3.2 投稿から取得する場合
4 ユーザー（投稿者）のカスタムフィールドを取得して表示する
- 4.1 ユーザー一覧から取得する場合
- 4.2 投稿から取得する場合
5 まとめ

カテゴリーのカスタムフィールドを取得して表示する

カテゴリーでカスタムフィールドを使うケースとしては、カテゴリー名に背景と文字色を設定したり画像を設定することが主だと思います。

カテゴリー一覧から取得する場合

<?php
//パラメータはリファレンスを確認してください。
//https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/get_categories

$format   = 'category';
$category = get_categories();

foreach ($category as $v) {
	$catID     = $v->term_id;
	$fontColor = get_field('font-color', "{$format}_{$catID}");
	$bgColor   = get_field('background-color', "{$format}_{$catID}");
	$thumbnail = get_field('thumbnail', "{$format}_{$catID}");
	
	echo "
		<div>
			<a href=\"/category/{$v->slug}\">
				<img src=\"{$thumbnail}\" alt=\"\">
				<p style=\"color: {$fontColor}; background-color: {$bgColor}\">カテゴリー：{$v->name}</p>
			</a>
		</div>
	";
}

<?php

//パラメータはリファレンスを確認してください。

//https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/get_categories

$format = 'category';

$category = get_categories();

foreach ($category as $v) {

$catID = $v->term_id;

$fontColor = get_field('font-color', "{$format}_{$catID}");

$bgColor = get_field('background-color', "{$format}_{$catID}");

$thumbnail = get_field('thumbnail', "{$format}_{$catID}");

echo "

<div>

<p style=\"color: {$fontColor}; background-color: {$bgColor}\">カテゴリー：{$v->name}</p>

</a>

</div>

}

投稿から取得する場合

<?php
$format = 'category';

if (have_posts()) {
	while (have_posts()) {
		the_post();
		$category  = get_the_category();
		$catID     = $category[0]->term_id;
		$fontColor = get_field('font-color', "{$format}_{$catID}");
		$bgColor   = get_field('background-color', "{$format}_{$catID}");
		$thumbnail = get_field('thumbnail', "{$format}_{$catID}");
		
		//以下略
	}
}

<?php

$format = 'category';

if (have_posts()) {

while (have_posts()) {

the_post();

$category = get_the_category();

$catID = $category[0]->term_id;

$fontColor = get_field('font-color', "{$format}_{$catID}");

$bgColor = get_field('background-color', "{$format}_{$catID}");

$thumbnail = get_field('thumbnail', "{$format}_{$catID}");

//以下略

}

タグのカスタムフィールドを取得して表示する

私個人はタグの機能を使ったことがないですが、以下の方法で取得が可能です。

タグ一覧から取得する場合

<?php
//パラメータはリファレンスを確認してください。
//https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/get_tags

$format = 'post_tag';
$tag    = get_tags();

foreach ($tag as $v) {
	$tagID     = $v->term_id;
	$fontColor = get_field('font-color', "{$format}_{$tagID}");
	$bgColor   = get_field('background-color', "{$format}_{$tagID}");
	$thumbnail = get_field('thumbnail', "{$format}_{$tagID}");
	
	echo "
		<div>
			<a href=\"/tag/{$v->slug}\">
				<img src=\"{$thumbnail}\" alt=\"\">
				<p style=\"color: {$fontColor}; background-color: {$bgColor}\">タグ：{$v->name}</p>
			</a>
		</div>
	";
}

<?php

//パラメータはリファレンスを確認してください。

//https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/get_tags

$format = 'post_tag';

$tag = get_tags();

foreach ($tag as $v) {

$tagID = $v->term_id;

$fontColor = get_field('font-color', "{$format}_{$tagID}");

$bgColor = get_field('background-color', "{$format}_{$tagID}");

$thumbnail = get_field('thumbnail', "{$format}_{$tagID}");

echo "

<div>

</a>

</div>

}

投稿から取得する場合

<?php
$format   = 'post_tag';

if (have_posts()) {
	while (have_posts()) {
		the_post();
		$tag       = get_the_tags();
		$tagID     = $tag[0]->term_id;
		$fontColor = get_field('font-color', "{$format}_{$tagID}");
		$bgColor   = get_field('background-color', "{$format}_{$tagID}");
		$thumbnail = get_field('thumbnail', "{$format}_{$tagID}");

		//以下略
	}
}

<?php

$format = 'post_tag';

if (have_posts()) {

while (have_posts()) {

the_post();

$tag = get_the_tags();

$tagID = $tag[0]->term_id;

$fontColor = get_field('font-color', "{$format}_{$tagID}");

$bgColor = get_field('background-color', "{$format}_{$tagID}");

$thumbnail = get_field('thumbnail', "{$format}_{$tagID}");

//以下略

}

カスタムタクソノミーのカスタムフィールドを取得して表示する

これを使うケースが私は一番多いですね！

今回は
・post_type: news（ニュース）
・taxonomy: news_category（カスタム投稿：ニュースに対するカスタムタクソノミー
とします。

カスタムタクソノミー一覧から取得する場合

<?php
//パラメータはリファレンスを確認してください。
//http://wpdocs.osdn.jp/Function_Reference/get_terms

$format   = 'news_cat';
$taxonomy = get_terms($format, array('hide_empty'=>true));

foreach ($taxonomy as $v) {
	$taxonomyID = $v->term_id;
	$fontColor  = get_field('font-color', "{$format}_{$taxonomyID}");
	$bgColor    = get_field('background-color', "{$format}_{$taxonomyID}");
	$thumbnail  = get_field('thumbnail', "{$format}_{$taxonomyID}");

	echo "
		<div>
			<a href=\"/news/?c={$v->slug}\">
				<img src=\"{$thumbnail}\" alt=\"\">
				<p style=\"color: {$fontColor}; background-color: {$bgColor}\">カテゴリー：{$v->name}</p>
			</a>
		</div>
	";
}

<?php

//パラメータはリファレンスを確認してください。

//http://wpdocs.osdn.jp/Function_Reference/get_terms

$format = 'news_cat';

$taxonomy = get_terms($format, array('hide_empty'=>true));

foreach ($taxonomy as $v) {

$taxonomyID = $v->term_id;

$fontColor = get_field('font-color', "{$format}_{$taxonomyID}");

$bgColor = get_field('background-color', "{$format}_{$taxonomyID}");

$thumbnail = get_field('thumbnail', "{$format}_{$taxonomyID}");

echo "

<div>

<p style=\"color: {$fontColor}; background-color: {$bgColor}\">カテゴリー：{$v->name}</p>

</a>

</div>

}

投稿から取得する場合

<?php
$format    = 'news_cat';
$newsQuery = new WP_Query(array(
	'posts_per_page' => '-1',
	'post_type'      => 'news'
));
if ($newsQuery->have_posts()) {
	while ($newsQuery->have_posts()) {
		$newsQuery->the_post();
		$post_id    = get_the_ID();
		$taxonomy   = get_the_tags($post_id, $format);
		$taxonomyID = $taxonomy[0]->term_id;
		$fontColor  = get_field('font-color', "{$format}_{$taxonomyID}");
		$bgColor    = get_field('background-color', "{$format}_{$taxonomyID}");
		$thumbnail  = get_field('thumbnail', "{$format}_{$taxonomyID}");

		//以下略
	}
}
wp_reset_postdata();

<?php

$format = 'news_cat';

$newsQuery = new WP_Query(array(

'posts_per_page' => '-1',

'post_type' => 'news'

));

if ($newsQuery->have_posts()) {

while ($newsQuery->have_posts()) {

$newsQuery->the_post();

$post_id = get_the_ID();

$taxonomy = get_the_tags($post_id, $format);

$taxonomyID = $taxonomy[0]->term_id;

$fontColor = get_field('font-color', "{$format}_{$taxonomyID}");

$bgColor = get_field('background-color', "{$format}_{$taxonomyID}");

$thumbnail = get_field('thumbnail', "{$format}_{$taxonomyID}");

//以下略

}

wp_reset_postdata();

ユーザー（投稿者）のカスタムフィールドを取得して表示する

これも使った事はありませんが、以下の方法で取得して表示させる事が可能です。

ユーザー一覧から取得する場合

<?php
//パラメータはリファレンスを確認してください。
//https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/get_users

$format = 'user';
$user   = get_users();

foreach ($user as $v) {
	$authorID   = $v->data->ID;
	$fontColor  = get_field('font-color', "{$format}_{$authorID}");
	$bgColor    = get_field('background-color', "{$format}_{$authorID}");
	$thumbnail  = get_field('thumbnail', "{$format}_{$authorID}");

	echo "
		<div>
			<a href=\"/author/{$v->data->user_nicename}\">
				<img src=\"{$thumbnail}\" alt=\"\">
				<p style=\"color: {$fontColor}; background-color: {$bgColor}\">投稿者：{$v->name}</p>
			</a>
		</div>
	";
}

<?php

//パラメータはリファレンスを確認してください。

//https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/get_users

$format = 'user';

$user = get_users();

foreach ($user as $v) {

$authorID = $v->data->ID;

$fontColor = get_field('font-color', "{$format}_{$authorID}");

$bgColor = get_field('background-color', "{$format}_{$authorID}");

$thumbnail = get_field('thumbnail', "{$format}_{$authorID}");

echo "

<div>

<a href=\"/author/{$v->data->user_nicename}\">

</a>

</div>

}

投稿から取得する場合

<?php
$format = 'user';
if (have_posts()) {
	while (have_posts()) {
		the_post();
		$author     = get_the_author();	//投稿者名
		$authorID   = $post->post_author;
		$fontColor  = get_field('font-color', "{$format}_{$authorID}");
		$bgColor    = get_field('background-color', "{$format}_{$authorID}");
		$thumbnail  = get_field('thumbnail', "{$format}_{$authorID}");
		
		//以下略
	}
}

<?php

$format = 'user';

if (have_posts()) {

while (have_posts()) {

the_post();

$author = get_the_author(); //投稿者名

$authorID = $post->post_author;

$fontColor = get_field('font-color', "{$format}_{$authorID}");

$bgColor = get_field('background-color', "{$format}_{$authorID}");

$thumbnail = get_field('thumbnail', "{$format}_{$authorID}");

//以下略

}

まとめ

前回と今回でカスタムフィールドはだいぶ使いこなせるようになったのではないでしょうか？

次は有料版機能に存在するリピーターのカスタムフィールドを取得する方法を紹介できればいいなと思います。

SNSでシェア♪

カテゴリーやカスタムタクソノミーのカスタムフィールド を取得して表示する方法

カテゴリーのカスタムフィールドを取得して表示する

カテゴリー一覧から取得する場合

投稿から取得する場合

タグのカスタムフィールドを取得して表示する

タグ一覧から取得する場合

投稿から取得する場合

カスタムタクソノミーのカスタムフィールドを取得して表示する

カスタムタクソノミー一覧から取得する場合

投稿から取得する場合

ユーザー（投稿者）のカスタムフィールドを取得して表示する

ユーザー一覧から取得する場合

投稿から取得する場合

まとめ

関連記事

カテゴリーやカスタムタクソノミーのカスタムフィールドを取得して表示する方法