MENU
  1. ホーム
  2. WordPress
  3. プラグインなしでカスタムフィールドを追加する方法【WordPressカスタマイズ】

プラグインなしでカスタムフィールドを追加する方法【WordPressカスタマイズ】

こんにちは！Weblattです。

カスタムフィールドを追加するなら、プラグイン『Advanced Custom Fields』などがまず候補になると思います。

複雑なカスタムフィールドを追加すならプラグインが便利ですが、簡単でシンプルなカスタムフィールドなら出来ればプラグインなしで追加したいですよね。

今回はプラグインなしでシンプルなカスタムフィールドを作成する方法をお伝えします。

今回は例として、以下のような【店舗情報】のカスタムフィールドを作成していきましょう。

結論としては、functions.phpに以下を記述することで実現します。

// 固定カスタムフィールドボックスを追加
function add_shop_fields() {
	add_meta_box( 'shop_setting', '店舗情報', 'insert_shop_fields', 'post', 'normal');
}
add_action('admin_menu', 'add_shop_fields');
  
// カスタムフィールドの入力エリア
function insert_shop_fields() {
	global $post;
 
	echo '住所： <input type="text" name="shop_address" value="'.get_post_meta($post->ID, 'shop_address', true).'" size="50" /><br><br>';
	echo 'TEL： <input type="text" name="shop_tel" value="'.get_post_meta($post->ID, 'shop_tel', true).'" size="15" /><br><br>';
	echo '台数： <input type="text" name="shop_units" value="'.get_post_meta($post->ID, 'shop_units', true).'" size="3" />　<br><br>';
	echo '店舗HP： <input type="text" name="shop_url" value="'.get_post_meta($post->ID, 'shop_url', true).'" size="50" />　<br><br>';
}
 
// カスタムフィールドの値を保存
function save_shop_fields( $post_id ) {
	if(!empty($_POST['shop_address'])){ //入力されている場合
		update_post_meta($post_id, 'shop_address', $_POST['shop_address'] ); //値を保存
	}else{ //未入力の場合
		delete_post_meta($post_id, 'shop_address'); //値を削除
	}
	
	if(!empty($_POST['shop_tel'])){
		update_post_meta($post_id, 'shop_tel', $_POST['shop_tel'] );
	}else{
		delete_post_meta($post_id, 'shop_tel');
	}
	
	if(!empty($_POST['shop_units'])){
		update_post_meta($post_id, 'shop_units', $_POST['shop_units'] );
	}else{
		delete_post_meta($post_id, 'shop_units');
	}
	
	if(!empty($_POST['shop_url'])){
		update_post_meta($post_id, 'shop_url', $_POST['shop_url'] );
	}else{
		delete_post_meta($post_id, 'shop_url');
	}
}
add_action('save_post', 'save_shop_fields');

順番に解説してきますね。

まずは固定カスタムフィールドボックスを作成します。カスタムフィールド名は【店舗情報】とします。

admin_menuをフックしてadd_meta_box関数でメタボックスを追加します。

// 固定カスタムフィールドボックスを追加
function add_shop_fields() {
	add_meta_box( 'shop_setting', //編集画面セクションのHTML ID
                '店舗情報', //編集画面セクションのタイトル
                'insert_shop_fields', //編集画面セクションにHTML出力する関数
                'post', //投稿タイプ名
                'normal' //編集画面セクションが表示される部分
	);
}
add_action('admin_menu', 'add_shop_fields');

次に入力エリアを作成します。先程の編集画面セクションにHTML出力する関数insert_shop_fieldsを作成します。

// カスタムフィールドの入力エリア
function insert_shop_fields() {
	global $post;
	echo '住所： <input type="text" name="shop_address" value="'.get_post_meta($post->ID, 'shop_address', true).'" size="50" /><br><br>';
	echo 'TEL： <input type="text" name="shop_tel" value="'.get_post_meta($post->ID, 'shop_tel', true).'" size="15" /><br><br>';
	echo '台数： <input type="text" name="shop_units" value="'.get_post_meta($post->ID, 'shop_units', true).'" size="3" />　<br><br>';
	echo '店舗HP： <input type="text" name="shop_url" value="'.get_post_meta($post->ID, 'shop_url', true).'" size="50" />　<br><br>';
}

最後に、カスタムフィールドの値を保存しする処理を記述します。

// カスタムフィールドの値を保存
function save_shop_fields( $post_id ) {
	if(!empty($_POST['shop_address'])){ //入力されている場合
		update_post_meta($post_id, 'shop_address', $_POST['shop_address'] ); //値を保存
	}else{ //未入力の場合
		delete_post_meta($post_id, 'shop_address'); //値を削除
	}
	
	if(!empty($_POST['shop_tel'])){
		update_post_meta($post_id, 'shop_tel', $_POST['shop_tel'] );
	}else{
		delete_post_meta($post_id, 'shop_tel');
	}
	
	if(!empty($_POST['shop_units'])){
		update_post_meta($post_id, 'shop_units', $_POST['shop_units'] );
	}else{
		delete_post_meta($post_id, 'shop_units');
	}
	
	if(!empty($_POST['shop_url'])){
		update_post_meta($post_id, 'shop_url', $_POST['shop_url'] );
	}else{
		delete_post_meta($post_id, 'shop_url');
	}
}
add_action('save_post', 'save_shop_fields');

以上で処理の記述は完了です。

あとは、カスタムフィールドの値を取得・表示したい場所に以下のように記述するだけです。

<?php echo get_post_meta($post->ID, 'shop_address', true); ?>

シンプルなカスタムフィールドならこれだけで追加可能です。簡単ですよね。

プラグインに頼らないことで、エラーや不具合の対処も格段にしやすくなります。

是非トライしてみてください。それでは！

WordPress
目次