[WordPress]カスタムフィールドを使ってみた！

functions.phpを変更しますので、WordPress/CSS/PHPをある程度理解し、カスタマイズできる方向けの内容となります。

WordPressのfunctions.phpを編集する前は、編集前に必ずバックアップを取って保存してください。もし編集後、エラーが出るようでしたら、バックアップファイルを元に復元してください。

WordPressの変更や更新をすると予期せぬ不具合が生じる事があります。カスタマイズは自己責任でお願いいたします。

初心者の方、functions.phpを変更することに不安のある方は、下記の参考サイト様にすばらしいプラグインを解説してくださっていますので、そちらを参考にしてみてください。

参考にさせていただいたサイト様

【CodeCampus】WordPressのカスタムフィールドとは？設定手順からプラグインまで徹底解説！
https://blog.codecamp.jp/wordpress-custom-field-what

【ワプ活】WordPressのカスタムフィールドを設定しよう！プラグイン有・無それぞれの方法を徹底解説
https://www.conoha.jp/lets-wp/wp-customfield/

【ferret】WordPressで便利なカスタムフィールドの設定手順と初心者向けプラグイン
https://ferret-plus.com/8047

使用テーマはcocoonです。

必要かどうかわからなくて(面倒くさくて)今まで書いてなかったんですが、自分だったら皆様のプロンプト見たいよなあと思って、画像生成AIで生成した画像のページにプロンプトを載せる事にしました。
どんどん真似してください！

プロンプトを載せるにあたって、スタイルを統一したり、入力の手間を少しでも減らせるようにどういう方法が良いか？を考えたときに、WordPressの　カスタムフィールド　を使うのが良さそうという結論に至りました。

カスタムフィールドとは？
投稿画面でカスタムフィールドの設定
functions.phpにコードを書く
スタイルシートで見た目を整える
完成！

カスタムフィールドとは？

簡単に調べた所、カスタムフィールドとは、タイトルや本文以外にも追加入力できる枠を自分で作れる機能のようです。

決まったスタイルだが、内容が少し違う文章などを入れたりしたい場合にCSSなどをまとめて設定しておけば便利そうです。

本文に直接書き込もうとするとCSSのクラスを毎回設定しなくてはいけないので面倒ですよね。
カスタムフィールドを使えば文字列を入力するだけで整ったスタイルで表示することができるようになります。

投稿画面でカスタムフィールドの設定

カスタムフィールドは初期設定では隠れているようですので、まず表示出来るようにします。

新規（既存のでも可）投稿画面を開き、公開ボタンの列の右端にある［点が縦に三つ並んだボタン］→［設定］→［パネル］→［カスタムフィールド］を有効にします。

リロードすると本文入力エリアの下に［カスタムフィールド］が出てきます。

cocoonにはカスタムフィールドが沢山設定されているみたいで色々出てきましたが、ほかの物はとりあえず触らないようにしましょう。

カスタムフィールドエリアの一番下に［新規追加］リンクがあるので、好きなフィールド名とフィールドに入れたい内容を書き込み、［カスタムフィールドを追加］ボタンをクリックします。

今回 prompt_input とprompt_negative の二つのフィールドを作成しました。

注意事項：同じ名前のフィールドを設定しないように気をつけてください。誤動作の原因になります。（配列になって表示がArrayになる（体験済））

これで投稿側の設定は終わりです。

functions.phpにコードを書く

次に functions.php を開き、以下のコードを追加します。

//カスタムフィールドでプロンプト表示
function prompt_indication($the_content){
  $prpt = post_custom('prompt_input');
  if($prpt){ 
    $prompt_value = <<< EOM
    <br>
    <div class="prompt_box"><strong>Prompt : プロンプト</strong><br>
    <pre>{$prpt}</pre>
    </div>
EOM;
  $prpt_ngtv = post_custom('prompt_negative');
  if($prpt_ngtv){ 
    $prompt_value .= <<< EOM
    <div class="prompt_box"><strong>Negative prompt : ネガティブプロンプト</strong><br>
    <pre>{$prpt_ngtv}</pre>
    </div>
EOM;
　　}
  } else {
    return $the_content;
  }
return $the_content.$prompt_value;
}
add_filter('the_content', 'prompt_indication');

post_custom(”)　でカスタムフィールドを取得
カスタムフィールドがあればHTMLを表示、なければ何もせずコンテンツを返して return しています。

これで、プロンプトがない写真の投稿にも対応できているはず。

私は今あるコンテンツ下に入れたかったので、コンテンツの最後に追加しています。
ご自分の環境に合わせて調整してください。

スタイルシートで見た目を整える

次にスタイルシートで見た目の調整をします。

/* プロンプト表示 */
	.prompt_box{
		background: #eee;
		border:none;
		border-radius: 5px;
		font-size: 9pt;
		color: #555;
		margin: 5px; padding: 5px;
	}
	.prompt_box pre{
		white-space: pre-wrap;
		margin: 0; padding:5px;
		border:none;
	}

<pre> を使って文章をそのまま表示できるようにしたので、white-space: pre-wrap;　で自動改行できるようにしました。あとはお好みの設定です。

スタイルを変えたくなった時もこれで一括変更できて便利ですね。