前回に引き続き、カスタムフィールドの使い方について。
カスタムフィールドの値をリスト表示させる方法
カスタムフィールドの入力をテキストエリアにしておいて、改行するとそのままリストとして表示させるというもの。
≪カスタムフィールドテンプレートの設定≫
[フィールド名] type = textarea size = 100
≪PHPコード≫
<?php
$fieldData = explode("\n",get_post_meta($post->ID,'テスト',true) );
$i = 0;
echo "<ul>\n";
foreach ($fieldData as $value){
if ( $value ){
echo "\t\t".'<li>' . $value .'</li>' ."\n";
}
$i++;
}
echo "</ul>\n";
?>
参考にさせていただいたサイトがあったんですが、ブックマークし忘れて分からなくなってしまいました。すみません。
ループの外で特定ページのカスタムフィールドの値を出力する方法
ヘッダーとかサイドバーとか各ページ共通の場所にカスタムフィールドの値を表示させる場合とかに使える方法です。IDだと分かりにくいので、スラッグ名で指定できます。
項目1つだけ表示させる方法
≪カスタムフィールドテンプレートの設定≫
テキストかテキストエリアを使用します。下記コードは、テキストの例。
[フィールド名] type = text size = 100
≪PHPコード／ループ外で使う方法≫
<?php
$page_id = get_page_by_path('スラッグ名');
$page_id = $page_id->ID;
echo get_post_meta($page_id, 'フィールド名', true);
?>
複数項目を表示させる方法
≪カスタムフィールドテンプレートの設定≫
カスタムフィールドテンプレートは上記と同じです。
必要な項目の数だけ用意してください。
≪PHPコード／ループ外で使う方法≫
下記コードは3つの項目をリストで表示させるサンプルです。
<?php
$page_id = get_page_by_path('スラッグ名');
$page_id = $page_id->ID;
$test01 = get_post_meta($page_id, 'フィールド名01', true);
$test02 = get_post_meta($page_id, 'フィールド名02', true);
$test03 = get_post_meta($page_id, 'フィールド名03', true);
echo "<ul>\n<li>".$test01."</li>\n<li>".$test02."</li>\n<li>".$test03."</li>\n</ul>";
?>
カスタムフィールドのラジオボタンで画像を切り替える方法
単純にラジオボタンで掲載する画像を切り替えるだけなんですが、自分のサイトで使って便利だったので。
≪カスタムフィールドテンプレートの設定≫
下記の例は「photo」と「noimage」の2つのボタンで切替するというサンプル。
wordpressの管理画面に表示されるのは「valueLabel」で指定した文字が表示されます。
[フィールド名] type = radio value = 1 # 2 valueLabel = photo # noimage
ｃ
「get_stylesheet_directory_uri();」でテーマフォルダのパスを読込に行ってますので、画像の置き場所によってパスは変更してください。
<?php
global $post;
$dataimg = get_post_meta($post->ID,'フィールド名');
?>
<?php if(in_array("1",$dataimg)):?><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/sample.png" alt=""><?php endif;?>
<?php if(in_array("2",$dataimg)):?><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/no-image.png" alt=""><?php endif;?>
カスタムフィールドのラジオボタンのYESorNOで表示を変更する方法
採用情報などで募集している時としていない時で表示を切り替えたいというご要望があったので、実装してみました。
≪カスタムフィールドテンプレートの設定≫
「default = yes」はデフォルト時の選択肢です。
[フィールド名] type = radio value = yes # no default = yes
≪PHPコード≫
<?php $yesno = get_post_meta($post->ID,"フィールド名",true); ?> <?php if ($yesno == 'no') : ?> <p>選択肢がnoの時の内容</p> <?php else : ?> <p>選択肢がyesの時の内容</p> <?php endif;?>
表示させるhtmlコードが長くなると思うので、上記の記載方法が便利でした。
カスタムフィールドのラジオボタンのYESorNOでアイキャッチ画像の表示を変更する方法
ちょっとややこしいんですが、特定のカスタム投稿のアイキャッチ画像をカスタムフィールドのラジオボタンで
固定ページへの表示を切り替える方法です。
クライアントからの要望はトップページと実績ページにそれぞれ切り分けて表示させたいというもの。どちらか一方だけに表示させる場合もあれば、両方のページに表示させる場合もあるんですよね。
今回はカスタムフィールドで切替ボタンを作ったので、クライアントが操作に迷わないように画像はアイキャッチ画像を使っています。
カスタムフィールドテンプレートの設定方法は、上記と全く同じです。
≪PHPコード≫
「posts_per_page」で表示させるカスタム投稿タイプの記事を指定できます。すべての記事を表示させる場合は「-1」を指定してください。
ちなみに上記のように複数ページにまたがって1つのカスタム投稿タイプを表示させる場合は、「posts_per_page」を「-1」にしておかないとうまく表示されません。
なので、下記コードのままで使うとラジオボタンで「yes」が選択されたものはすべて表示されてしまいます。どうしても表示数を限定したい場合は、whileの回数を設定するのがいいと思います。
<?php
$query = new WP_Query(
array(
'post_type' => 'カスタム投稿の名前',
'posts_per_page' => 3,
)
);
?>
<?php
if ( $query->have_posts() ) : ?>
<?php while ( $query->have_posts() ) : $query->the_post();?>
<?php $yesno = get_post_meta($post->ID,"フィールド名",true); ?>
<?php if ($yesno == 'yes') : ?>
<?php if ( has_post_thumbnail() ) : ?>
<p><?php the_post_thumbnail(); ?></p>
<?php endif; ?>
<?php else : ?>
<p>選択肢がnoの時の内容</p>
<?php endif;?>
<?php endwhile; ?>
<?php endif; wp_reset_postdata(); ?>
今回はアイキャッチ画像を設定するというのが大前提にあったので、アイキャッチ画像の登録がない場合の設定は省いています。
