WordPress  
  投稿ページにカスタムフィールドを複数作成する【プラグイン不要】
2018
02
Dec

投稿ページにカスタムフィールドを複数作成する【プラグイン不要】

最終更新日: 2020年5月5日

カスタムフィールドを作成するプラグインは現在いくつあるのでしょう？
便利だから使っている方も多いでしょう。

以下に該当する方以外は参考になりません。

  • プラグインによっては入力の無いカスタムフィールドの値もページごとに保存されてゴミが溜まるのが嫌
  • アフィリエイトのサイトなど自分でいくつも作りたい時に、プラグインの設定を何度もしたくない
  • 自分でプラグインを作りたい

ということで

プラグインなしで投稿ページにカスタムフィールドを作成する方法

functions.php


// 投稿ページにカスタムフィールドを作る場合は、引数は順に　htmlのID, メタボックスへ付けるタイトル, コールバック関数名, 投稿の種類, デザインのフォーマット

function tn_custom_fields() {

	add_meta_box( 'description', '説明', 'tn_create_fields', 'post', 'normal');

}
add_action('admin_menu', 'tn_custom_fields');

 
// カスタムフィールド(formの入力部品を作る)

function tn_create_fields() {
	$fiealds = get_post_custom( $post->ID );
	echo 'ページの説明： <input name="description" size="50" type="text" value="'.$fiealds['description'][0].'" />';
	//入力欄が複数ある場合は、同じ手順で入力欄を増やします。
}
 
 
// カスタムフィールドの値を保存
function tn_save_fields( $post_id ) {
	if(!empty($_POST['description'])){
		update_post_meta($post_id, 'description', $_POST['description'] );
	}else{
		delete_post_meta($post_id, 'description');
	}
	//入力欄が複数ある場合は、同じ手順で入力欄を増やします。
}
add_action('save_post', 'tn_save_fields');

nonce_fieldも抜けていますし、せっかくだから複数のカスタムフィールドに対応したものを書き直しました。

functions.php


//カスタムフィールドのキーと値をセットする
$tn_1956_fields = array(
	'box1' => 'ラベル1',
	'box2' => 'ラベル2',
	'box3' => 'ラベル3',
	'box4' => 'ラベル4',
);

function tn_add_meta_box() {

global $tn_1956_fields;

	foreach ( $tn_1956_fields as $tn_key => $tn_value ) {
		
		add_meta_box(
			$tn_key,
			$tn_value,
			'tn_meta_box_callback',
			'post'
		);
	}
}
add_action( 'add_meta_boxes', 'tn_add_meta_box' );

/**
 * 投稿画面の入力フォームの作成と既存値をセットする
 */

//カウンターとカスタムフィールドのキー
$tn_1956_keyvalue = 0;
$array_key = array_keys($tn_1956_fields);

function tn_meta_box_callback( $post ) {

	global $tn_1956_fields, $tn_1956_keyvalue, $array_key;

	//カスタムフィールド入力欄のラベルをセットする
	$key = $array_key[$tn_1956_keyvalue];
	$label = $tn_1956_fields[$key];

	$tn_1956_keyvalue += 1;

	//カスタムフィールドの値を取得する
	$field = get_post_meta( $post->ID, $key, true );

	// nonceフィールドを追加
	wp_nonce_field( 'アクションの名前', 'nonce フィールドの名前' );

	echo '<label for="'.$key.'">'.$value.'</label> ';
	echo '<input type="text" id="'.$key.'" name="'.$key.'" value="' . esc_attr( $field ) . '" size="25" />';

	//今回はテキストだけの対応ですがtype属性を工夫してテキスト以外にも対応できます。
}

/**
 * 投稿が保存されたとき、カスタムデータも保存する
 */
function tn_save_meta_box_data( $post_id ) {

	// nonceが正しいかどうか検証

	if ( ! isset( $_POST['nonce フィールドの名前'] )  || ! wp_verify_nonce( $_POST['nonce フィールドの名前'], 'アクションの名前' )  {
                 return;
        }

	// $_POSTの中身があるかどうか確認
	if ( ! isset( $_POST ) ) {
		return;
	}

	// 自動保存の場合はなにもしない
	if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
		return;
	}

	// 投稿ページの確認
	if ( !isset( $_POST['post_type'] ) || 'post' !== $_POST['post_type'] ) {
		return;
	}

	global $tn_1956_fields;

	// データがセットされているか確認する
	foreach ( $tn_1956_fields as $key => $value ){

		if ( ! isset( $_POST[$key] ) ) {
			return;
		}

		// 入力を無害化する
		$tn_field = sanitize_text_field( $_POST[$key] );

		// フィールドを更新
		update_post_meta( $post_id, $key, $tn_field );
	}
}

add_action( 'save_post', 'tn_save_meta_box_data' );


cf. https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/add_meta_box

自分のサイトで使うならたったこれだけのコード量で済みます。
今回は投稿タイプがpostでしたが投稿タイプを単語で追加するだけです。
　
投稿タイプやカスタムフィールドを管理画面から設定できるようにして、そのうちにプラグインにしてみようと思います。

 

top