wordpressの管理画面（編集画面）で、プラグインを使わずに固定テンプレートごとにカスタムフィールドを分岐表示させる方法

前提・実現したいこと

wordpressでテンプレートテーマを作成しています。
下の例のように固定ページ編集画面でプラグインを使用せずに、
選択されたデザインテンプレートごとにカスタムフィールドを切り替えて設置・表示させることは可能でしょうか？

例）
固定ページ編集画面にて
デフォルトテンプレート選択時にはカスタムフィールド非表示
デザインテンプレート１を選択したときにカスタムフィールド１を表示

functions.php

// カスタムフィールド１作成
function add_page_fields() {
	add_meta_box( 'page_setting', '本の情報', 'insert_page_fields', 'page', 'normal');
}
add_action('admin_menu', 'add_page_fields');
 
 

// カスタムフィールドの入力エリア
function insert_page_fields() {
	global $post;
	echo '題名： <input type="text" name="page_name" value="'.get_post_meta($post->ID, 'page_name', true).'" size="50" /><br>';
	echo '作者： <input type="text" name="page_author" value="'.get_post_meta($post->ID, 'page_author', true).'" size="50" /><br>';
	echo '価格： <input type="text" name="page_price" value="'.get_post_meta($post->ID, 'page_price', true).'" size="50" />　<br>';
	
	if( get_post_meta($post->ID,'page_label',true) == "is-on" ) {
		$page_label_check = "checked";
	}
	echo 'ベストセラーラベル： <input type="checkbox" name="page_label" value="is-on" '.$page_label_check.' ><br>';
}
 
 
// カスタムフィールドの値を保存
function save_page_fields( $post_id ) {
	if(!empty($_POST['page_name'])){ 
		update_post_meta($post_id, 'page_name', $_POST['page_name'] ); 
	}else{ 
		delete_post_meta($post_id, 'page_name'); 
	}
	
	if(!empty($_POST['page_author'])){
		update_post_meta($post_id, 'page_author', $_POST['page_author'] );
	}else{
		delete_post_meta($post_id, 'page_author');
	}
	
	if(!empty($_POST['page_price'])){
		update_post_meta($post_id, 'page_price', $_POST['page_price'] );
	}else{
		delete_post_meta($post_id, 'page_price');
	}
	
	if(!empty($_POST['page_label'])){
		update_post_meta($post_id, 'page_label', $_POST['page_label'] );
	}else{
		delete_post_meta($post_id, 'page_label');
	}
}
add_action('save_post', 'save_page_fields');

試したこと

  add_meta_box( 'page_setting', '本の情報', 'insert_page_fields', 'page', 'normal');

上記コード３行目add_meta_boxの第４引数にデザインテンプレートのパス（page/template1.php）なども記載してみましたがダメでした。

補足情報（FW/ツールのバージョンなど）

WordPress 4.9.4

行動規範の内容に同意します

回答2件

ベストアンサー

固定ページにカスタムフィールドを設置して、どのテンプレートが選択されたかをjavascriptで取得して、そのカスタムフィールドを表示・非表示させればどうでしょうか。

たとえば、固定ページに設置したカスタムフィールドのHTMLが以下のようだとして、

html
1<div id="page_setting">
2//カスタムフィールド
3</div>
4

選択したテンプレートのselectのIDが「page_template」、valueが「front-page.php」だとします。

functions.phpに以下のコードを追加して

function testdayo() {
	if( get_post_type() == 'page' ) {

echo '<script type="text/javascript">

$(document).ready(function() {
	$("div#page_setting").hide();
	$("#page_template").bind("change", function() {
		var temp = $("#page_template").val();
		if( temp == "front-page.php") {
		$("div#page_setting").show();
	} else {
		$("div#page_setting").hide();
	}
});
});

</script>';
}}
add_action( 'admin_footer', 'testdayo' );

参考まで。

追記

function testdayo() {
	if( get_post_type() == 'page' ) {

echo '<script type="text/javascript">

$(document).ready(function() {
//ここから変更
	var temp = $("#page_template").val();
	if( temp == "front-page.php") {
		$("div#page_setting").show();
	} else {
		$("div#page_setting").hide();
	}
//ここまで変更
	$("#page_template").bind("change", function() {
		var temp = $("#page_template").val();
		if( temp == "front-page.php") {
			$("div#page_setting").show();
		} else {
			$("div#page_setting").hide();
		}
	});
});

</script>';
}}
add_action( 'admin_footer', 'testdayo' );

すいませんでした。
最初のコードでは、ページを読み込んだ時点ではカスタムフィールドを隠す設定になっていたので、公開した後の読み込みでも隠れてしまったようです。
なので、テンプレートの状態を判定させる処理を付け加えました。
ただ、わたしはjavascriptについて門外漢なので、違ったコードのほうがいいかもしれません。

投稿2018/02/11 02:08

編集2018/02/12 11:12