クライアント向けにwordpressをカスタマイズする場合、必ずといっていいほどカスタムフィールドを使います。
クライアントの希望によって少しずつカスタマイズの内容が違うので、こんな使い方もできるなぁとか新しい発見もあります。
今回、いくつかカスタムフィールドの便利な使い方に気づいたので、備忘録兼ねてまとめてみました。
カスタムフィールドを使う時に便利なプラグイン
functions.phpでもカスタムフィールドの設定は可能なんですが、クライアント向けに設定する場合は、項目を固定させておきたいので、プラグインを使って実装しています。
私のおすすめは「Custom Field Template」。これ、かなり便利です！
使い方については、様々なサイトで紹介されているので、気になる方は検索してみてください。
私は使ったことがないですが「Advanced Custom Fields」も有名なプラグインです。
基本形
プラグインで設定したカスタムフィールドをテンプレートに記述する基本の記述方法から。
テキストデータとして出力する方法
≪ループ内で使う方法≫
<?php echo esc_html( $post->フィールド名); ?>
≪ループ外で使う方法≫
<?php echo esc_html(get_post_meta($post->ID,'フィールド名','true')); ?>
urlとして出力する方法
≪ループ内で使う方法≫
<?php echo esc_url( $post->フィールド名); ?>
≪ループ外で使う方法≫
<?php echo esc_url(get_post_meta($post->ID,'フィールド名','true')); ?>
カスタムフィールドの値を改行して表示させたい
≪カスタムフィールドテンプレートの設定≫
[フィールド名] type = textarea
≪ループ内で使う方法≫
<?php echo nl2br(esc_html($post->フィールド名)); ?>
≪ループ外で使う方法≫
<?php echo nl2br(get_post_meta($post->ID,フィールド名,true)); ?>
カスタムフィールドで画像をアップロードして表示させたい
≪カスタムフィールドテンプレートの設定≫
[フィールド名] type = file mediaLibrary = true mediaPicker = true mediaRemove = true label=説明文を入れられます
「mediaPicker = true」はすでにメディアに登録した画像を選択できるようにする機能を使えるようにします。
「mediaRemove = true」は一度カスタムフィールドに登録した画像を削除できるようにします。メディアから削除できるわけではありません。
≪選択した画像を表示させる方法≫
<?php echo wp_get_attachment_image(get_post_meta($post->ID,"フィールド名",true),'サイズ'); ?>
サイズのところは「full」はフルサイズ（登録した元のサイズ）、「large」は700×700、「medium」は300×300、「thumbnail」はサムネイルサイズ（100×100）で指定できます。それ以外にサイズを指定する方法もあります。
≪選択した画像のファイルパスを取得して画像表示させる方法≫
私は使いやすいのでこの記述方法を使ってます。
<img src="<?php echo esc_url ( wp_get_attachment_url($post->フィールド名)); ?>" alt="" />
カスタムフィールドで改行したデータをリスト表示させたい
≪カスタムフィールドテンプレートの設定≫
[フィールド名] type = textarea
≪リストで表示させる方法≫
<?php
$listdata = explode("\n",get_post_meta($post->ID,'フィールド名',true) );
$i = 0;
echo "<ul>\n";
foreach ($listdata as $value){
if ( $value ){
echo "\t\t".'<li>' . $value .'</li>' ."\n";
}
$i++;
}
echo "</ul>\n";
?>
カスタムフィールドについて
使い方次第で、とっても便利なカスタムフィールド！
クライアント向けに制作する場合は、カスタム投稿タイプにカスタムフィールドのみ表示させてPC操作に慣れていない方にもできるだけ入力しやすくするとか工夫しています。
レイアウト崩れの防止とかにも便利なので、重宝してます。
ちなみに「Custom Field Template」のデータを固定ページで使う場合は、ショートコードを利用できるので、上記に記載した方法よりもっと簡単に実装できます。
