WordPressのカスタムフィールドの値をJavaScriptの配列変数に入れて扱う

WordPressのカスタムフィールドの値をJavaScriptの配列変数に代入して扱うサンプルです。

やり方はいろいろありますが、知っておくと使えるかもしれません。

  
この記事は2年以上前に書かれたものです。
情報が古い可能性があります。

photo credit: teamstickergiant via photopin cc

検証バージョン

  • WordPress3.5.1

ソースコード

single.php

<?php while ( have_posts() ) : the_post(); ?>

	<script>
	//カスタムフィールドの値を入れるJavaScriptの配列変数を定義
	var cf = new Array();
	
	<?php
	//カスタムフィールドの値を取得
	$field = post_custom( 'cf' );
	
	if ( is_array( $field ) ) : ?>
	
		<?php
		/**
		 * JavaScriptの配列変数にカスタムフィールドの値を追加
		 * (同じ定義名のカスタムフィールドが複数ある場合の処理)
		 */ ?>
		<?php foreach( $field as $value ) : ?>
			cf.push( '<?php echo esc_html( $value ); ?>' );
		<?php endforeach; ?>
		
	<?php elseif ( $field !== false ): ?>
	
		<?php
		/**
		 * JavaScriptの配列変数にカスタムフィールドの値を追加
		 * (カスタムフィールドが単一の場合の処理)
		 */ ?>
		cf.push( '<?php echo esc_html( $field ); ?>' );
	
	<?php endif; ?>
	
	//取り敢えずJavaScriptで出力してみる
	for( var i=0; i < cf.length; i++ ) {
		document.write( '<p>' + cf[i] + '</p>');
	}
	</script>

<?php endwhile; ?>

カスタムフィールドの入力

カスタムフィールドは以下のように入力しました。
カスタムフィールド

ブラウザでの実行結果

おはようございます。
こんにちは。
こんばんは。

出力されたHTML

ブラウザからソースを表示して出力されたHTMLを確認してみると以下のようになっています。

<script>
//カスタムフィールドの値を入れるJavaScriptの変数
var cf = new Array();

cf.push( 'おはようございます。' );
cf.push( 'こんにちは。' );
cf.push( 'こんばんは。' );
				
//取り敢えずJavaScriptで出力してみる
for( var i=0; i < cf.length; i++ ) {
	document.write( '<p>' + cf[i] + '</p>');
}
</script>
  

共有やブックマークなど