2020-10-13/2023-05-23

各種カスタムフィールドの自作

テキストやセレクトボックスなどカスタムフィールドで各種入力方法を作成していきます。

今回作成するカスタムフィールドは以下の通りです。

テキスト
ラジオボタン
チェックボックス
セレクトボックス
カラーピッカー
画像(メディア)
エディター

今回の作成ではサニタイズは考慮していません。

また、基本的な事柄は「カスタムフィールドを作成する」記事を参考にしてください。

前提としてadd_meta_boxから指定している関数はいかが記載されています。

function make_custom_meta_box( $post ) {

		wp_nonce_field( 'example_nunce_action', 'example_nunce_field' );

		input_box( get_post_meta( $post->ID, 'input_value', true ) );
		radio_box( get_post_meta( $post->ID, 'radio_value', true ) );
		check_box( get_post_meta( $post->ID, 'check_value', true ) );
		select_box( get_post_meta( $post->ID, 'select_value', true ) );
		color_box( get_post_meta( $post->ID, 'color_value', true ) );
		file_box( get_post_meta( $post->ID, 'file_value', true ) );
		editor_box( get_post_meta( $post->ID, 'editor_value', true ) );
	}

テキスト

function input_box( $value ) {
		ob_start();
		?>
		<div style="margin-bottom: 20px;">
			<p>input[type="text"]のカスタムフィールド</p>
			<input type="text" name="input_value" value="<?php echo esc_attr( $value );?>">
		</div>
		<?php

		echo ob_get_clean();
	}

テキストは基本的な形です。特筆事項はありません。

ラジオボタン

function radio_box( $value ) {
		ob_start();
		?>
		<div style="margin-bottom: 20px;">
			<p>input[type="radio"]のカスタムフィールド</p>
			<label><input type="radio" name="radio_value" value="tonkotu" <?php checked($value, 'tonkotu', true ); ?> >豚骨ラーメン</label>
			<label><input type="radio" name="radio_value" value="syouyu" <?php checked($value, 'syouyu', true ); ?>>醤油ラーメン</label>
			<label><input type="radio" name="radio_value" value="shio" <?php checked($value, 'shio', true ); ?>>塩ラーメン</label>
		</div>
		<?php
		echo ob_get_clean();
	}

選択肢の中から一つを選ばせます。

そのため「name」は統一しておきます。

「checked」関数によって現在選択されている項目にはデフォルトでチェックを入れています。

チェックボックス

function check_box( $value ) {
		ob_start();
		if( array_key_exists('egg', $value) ) {
			$egg_value = $value['egg'];
		} else {
			$egg_value = '';
		}
		if( array_key_exists('menma', $value) ) {
			$menma_value = $value['menma'];
		} else {
			$menma_value = '';
		}
		if( array_key_exists('cyasyu', $value) ) {
			$cyasyu_value = $value['cyasyu'];
		} else {
			$cyasyu_value = '';
		}
		?>
		<div style="margin-bottom: 20px;">
			<p>input[type="checkbox"]のカスタムフィールド</p>
			<label><input type="checkbox" name="check_value[egg]" value="egg" <?php checked($egg_value, 'egg', true ); ?> >卵</label>
			<label><input type="checkbox" name="check_value[menma]" value="menma" <?php checked($menma_value, 'menma', true ); ?>>メンマ</label>
			<label><input type="checkbox" name="check_value[cyasyu]" value="cyasyu" <?php checked($cyasyu_value, 'cyasyu', true ); ?>>チャーシュー</label>
		</div>
		<?php
		echo ob_get_clean();
	}

上のif文は「checked」にかける値を調整しています。

サニタイズ側で調整していればif文のブロックは丸ごと削除可能です。

Select

function select_box( $value ) {
		$volume = [
			'komori'   => '小盛り',
			'normal'   => '普通',
			'cyumori'  => '中盛り',
			'omori'    => '大盛り',
			'tokumori' => '特盛り'
		];

		ob_start();
		?>
		<div style="margin-bottom: 20px;">
			<p>select optionのカスタムフィールド</p>
			<select name="select_value">
				<?php foreach( $volume as $val => $label ) : ?>
				<?php $selected = selected( $value, $val ); ?>
				<option value="<?php echo $val; ?>" <?php echo $selected; ?>><?php echo $label; ?></option>
				<?php endforeach; ?>
			</select>
		</div>
		<?php
		echo ob_get_clean();
	}

selectにnameを指定します。

selected関数で現在選択している項目を選択状態にして表示します。

カラーピッカー

function color_box( $value ) {
		add_action( 'admin_enqueue_scripts', function(){
		    wp_enqueue_style( 'wp-color-picker' );
		} );
		ob_start();
		if(  ! $value ) {
			$value = '#123456'; 
		}
		?>
		<div style="margin-bottom: 20px;">
			<p>colorのカスタムフィールド</p>
			<input class="color_pick" type="text" name="color_value" value="<?php echo esc_attr( $value ); ?>">
		</div>
		<script>
			jQuery(function($){ 
				$('.color_pick').wpColorPicker();
			});
		</script>	
		<?php
		echo ob_get_clean();
	}

カラーピッカー本体(カラーコード出力部)はinputです。

カラーピッカーを表示させるために「wp-color-picker」の読み込みと、対象セレクタの「wpColorPicker」のスクリプトが必要です。

画像(メディア)

function file_box( $value ) {
		ob_start();
		?>
		<div style="margin-bottom: 20px;">
			<p>fileのカスタムフィールド</p>
			<input name="file_value" type="text" value="<?php echo esc_attr( $value ); ?>" />
			<input type="button" name="file_slect" value="選択" />
			<input type="button" name="file_clear" value="クリア" />
			<div id="file_image">
			<?php if ( $value ): ?>
			 	<img src="<?php echo $value; ?>" width="100px" height="auto">
			<?php endif ?>
			</div>

			<script type="text/javascript">
			(function ($) {
			  var custom_uploader;
			  $("input:button[name='file_slect']").click(function(e) {
			      e.preventDefault();
			      if (custom_uploader) {
			          custom_uploader.open();
			          return;
			      }
			      custom_uploader = wp.media({
			          title: "画像を選択してください",
			          library: {
			              type: "image"
			          },
			          button: {
			              text: "画像の選択"
			          },
			          multiple: false
			      });

			      custom_uploader.on("select", function() {
			          var images = custom_uploader.state().get("selection");
			          images.each(function(file){
			              $("input:text[name='file_value']").val("");
			              $("#file_image").empty();
			              $("input:text[name='file_value']").val(file.attributes.sizes.full.url);
			              $("#file_image").append('<img src="' + file.attributes.sizes.full.url + '" width="100px" height="auto" />');
			          });
			      });
			      custom_uploader.open();
			  });

			  $("input:button[name='file_clear']").click(function() {
			      $("input:text[name='file_value']").val("");
			      $("#file_image").empty();
			  });

			})(jQuery);
			</script>
		</div>
		 <?php
		 echo ob_get_clean();
	}

表示させるものとしては簡単な構成になっています。

wordpressのメディアの選択を行うためのjavascriptを記載しています。

選択ボタンを押す
メディア選択画面が立ち上がる
選択されたファイルのurlをinputに表示
選択されたファイルのurlを<img>のsrcに入れて指定箇所に追加

といった

処理が書かれています。

エディター

function editor_box( $value ) {
		ob_start();
		?>
		<div style="margin-bottom: 20px;">
			<p>editorのカスタムフィールド</p>
			<?php wp_editor( $value, 'editor_value', [
				'media_buttons'  => false,
				'tenny'          => true
			]); ?>
		</div>
		<?php
		echo ob_get_clean();
	}

エディターはwp_editor関数を使用することで簡単に表示ができます。

第一引数に既存内容を指定し、第二引数にエディターのIDを指定します。

投稿更新時の$_POSTではエディタ―IDから内容を取得できます。

最後に

使用する際は保存時にサニタイズ処理を付けてください。

自分で使用しやすいようこれらをクラスとしてまとめておくと使いまわしができると思います。