この記事は公開から6年、最終更新日からも6年経過しています。内容が古くなっている可能性があります。

概要

(1)WordPressにおいて同じ名称のカスタムフィールドから値を読み込み、その情報を元にセレクトボックスを動的に作成します。
(2)その際、一つのカスタムフィールドには、複数要素からなるデータのセットを設定していますので、その文字列分離も合わせて行い、HTML出力します。
(3)さらに、動的に作成されたセレクトボックスの選択肢を訪問者が変更したら、(2)の情報を元に属性情報の表示を変更します。

基本方針

・本ページでは、例として、カスタムフィールド「CFtoSB_demo」に、タイトル、価格、URLの各要素をセットにした文字列
　「タイトル(任意の文字列),価格(数値),URL」
　を設定した場合で記載します。
・汎用性を持たせるために、the_contentをフックして投稿画面に入力した本文のあとに生成したセレクトボックス/HTMLを追記します。
・訪問者がタイトルを変更すると、それに応じた価格(消費税8%を計算)、URL表示(リンク付き)も合わせて変更します。

実装コード

カスタムフィールドを読み込み、セレクトボックスと、文字列分離情報をHTML出力する箇所

//the_contentにひっかけて、セレクトボックスを出力する
function selectbox_CFtoSB_demo($the_content) {
	$postid = get_the_ID();
	$sample_datas = get_post_meta( $postid, 'CFtoSB_demo', false );	//いったん、カスタムフィールドの値を配列に格納する。

	$add_content="";	//本関数で追加されるコンテンツ部分
	if (empty( $sample_datas ) === false) {	//カスタムフィールドが存在する場合のみ処理を行う
		$sample_count=0;	//セレクト要素の数
		$sample_all=array();	//取得したカスタムフィールドを配列に格納するための準備(二次元)
		$add_content = $add_content . "<div id='CFtoSB_list'>";	//本関数で追加されるコンテンツ部分
			
		//カスタムフィールドの値を配列に格納しながら定義リスト作成
		foreach ( $sample_datas as $sample_data ) {
			$sample_count++;	//セレクト要素の数をカウント

			$sample_elements = explode("," , $sample_data);	//区切り文字「,」でカスタムフィールドの値を要素に分解

			$sample_array=array();	//各要素を格納するための一次元配列
			array_push($sample_array,$sample_elements[0]);	//項目名
			array_push($sample_array,$sample_elements[1]);	//価格
			array_push($sample_array,$sample_elements[2]);	//URL

			$temp_content = "<dl id='sample" . $sample_count . "'><dt>項目名</dt><dd class='samaple_name'>" . $sample_elements[0] . "</dd><dt>価格</dt><dd class='sample_price'>" . $sample_elements[1] . "</dd><dt>リンクURL</dt><dd class='sample_url'>" . esc_url( $sample_elements[2] ) . "</dd></dl>";
			$add_content = $add_content . $temp_content;

			array_push($sample_all , $sample_elements);	//２次元配列格納
		}
		$add_content = $add_content . "</div>";
			
		//先程生成した配列を元にセレクトボックス作成
		$add_content = $add_content . "<div id='CFtoSB_selectbox'><form class='select_box'><select name='selectbox_ex'>";	//本関数で追加されるセレクトボックス部分
		foreach ( $sample_all as $key => $sample_data ) {
			if ( $key==0 ) {
				$temp_content = "<option value='sample" . ($key+1) . "' selected>" . $sample_data[0] . "</option>";
				$default_value = $sample_data[1];
				$default_url =  $sample_data[2];
			} else {
				$temp_content = "<option value='sample" . ($key+1) . "'>" . $sample_data[0] . "</option>";
			}
			$add_content = $add_content . $temp_content;
		}
		$add_content = $add_content . "</select></form><p class='select_price'>価格：" . number_format( round($default_value*1.08) ) . "円(税込)</p><p class='select_url'><a href='" . esc_url( $default_url ) . "'>" . esc_url( $default_url ) . "</a></p></div>";
			
	}
	return ( $the_content . $add_content );	//加工後の本文
}
add_filter('the_content','selectbox_CFtoSB_demo',5);	//追加したい位置によって最後の優先順位は変更する。

動的に作成されたセレクトボックスの選択肢を訪問者が変更した際に属性表示を変更するためのJavaScript

$(function(){
	//セレクトボックスの選択を変更した時のアクション
	$('select[name="selectbox_ex"]').change(function(){
		//選択したvalue値を変数に格納
		var select_value = $(this).val();

		//取得した値をIDとして設定している定義リストから価格とリンクURLを取得する
		var select_price = $("#" + select_value + " .sample_price").html();
		var select_url = $('#' + select_value + ' .sample_url').html();

		//取得した価格とリンクURLを表示する
		$('.select_price').text( '価格：' + Math.round((select_price*1.08)).toLocaleString() + '円(税込)' );	//四捨五入
		$('.select_url').html( '<a href="' + select_url + '">' + select_url + '</a>' );
	});
 
});

デモ

カスタムフィールドに設定している値

カスタムフィールド「CFtoSB_demo」を複数設置し、それぞれにデモ用として以下の値を入力しました。
(1)「デモ用データ(トップページ),40000,https://www.nakamurayuji.com/」
(2)「デモ用データ２(音楽ページ),65123,https://capture.nakamurayuji.com/」
(3)「デモ用データ３(日記ページ),100,https://www.nakamurayuji.com/archives/category/diary」
(4)「デモ用データ4(works),785123,https://www.nakamurayuji.com/archives/category/works」
(5)「デモ用データ5,-234,https://www.nakamurayuji.com/」

下記がデモです。