ACFカスタムフィールドでの選択肢ラベルにHTMLを使用する方法

Advanced Custom Fields（ACF）は、WordPressサイトに
カスタムフィールドを簡単に追加できるプラグインで、開発者やサイト管理者に非常に人気があります。
ACFを使用すると、ページや投稿に追加のデータを保存し、
そのデータをテンプレートで柔軟に表示することができます。
今回は、ACFのカスタムフィールドで選択肢のラベルにHTMLを使用する方法について説明します。

選択肢の設定

ACFで選択肢を設定する際、通常は以下のように「値:ラベル」の形式で入力します。

red : Red
blue : Blue

この例では、「red」や「blue」が実際に保存される値で、
「Red」や「Blue」がユーザーに表示されるラベルです。
しかし、ACFの素晴らしい点は、ラベル部分にHTMLを使用できることです。
これにより、ラベルの表示をカスタマイズし、スタイルやアイコンなどを追加することが可能になります。

HTMLを含むラベルの設定

例えば、選択肢のラベルに色を指定したい場合、以下のように入力することができます。

red : <span style="color: red;">Red</span>
blue : <span style="color: blue;">Blue</span>

この設定を保存すると、選択肢のラベル部分にHTMLが含まれることになります。
このHTMLは、テンプレートで適切に出力することで、ユーザーに対して指定したスタイルで表示されます。

テンプレートでの出力方法

ACFで設定した選択肢のラベルをテンプレートで出力する際、
HTMLが正しく表示されるようにするには、エスケープ処理を避ける必要があります。
エスケープ処理を行うと、HTMLタグがそのままテキストとして表示されてしまうためです。

例えば、以下のように出力します。

<?php
$option_value = get_field('your_field_name');
echo $option_value; // HTMLがそのまま適用される
?>

このコードでは、選択したオプションの値がそのまま表示され、HTMLが適用されます。
エスケープ処理を行わないことで、指定したスタイルや構造がそのまま反映されます。

セキュリティへの配慮

HTMLを使用する際には、特にセキュリティに注意する必要があります。
信頼できるデータのみを使用し、不適切なデータが出力されないようにするための対策が重要です。
特にユーザーから入力されたデータを表示する場合、
XSS（クロスサイトスクリプティング）攻撃のリスクがあるため、慎重に取り扱う必要があります。

例えば、選択肢の値をユーザーが入力できる場合、
そのデータを出力する際には、以下のようにエスケープ処理を行うことが推奨されます。

<?php
$option_value = get_field('your_field_name');
echo esc_html($option_value); // HTMLをエスケープして出力
?>

このようにすることで、不正なスクリプトの実行を防ぐことができます。

まとめ

ACFカスタムフィールドで選択肢のラベルにHTMLを使用することで、
表示内容を柔軟にカスタマイズすることができます。
テンプレートでの出力時にはエスケープ処理に注意し、
特にセキュリティ面での配慮を忘れないようにしましょう。
この方法を活用することで、よりリッチでユーザーフレンドリーなサイトを構築することが可能です。