テキストエリア、ラジオボタン、画像、チェックボックス等あらゆる入力タイプの実装テンプレあります。コピペで簡単実装可能です。
目次(クリックでジャンプ)
functions.phpでカスタム投稿タイプにカスタムフィールドを追加
functions.phpに追記する
###################################################
# 画像アップロード用のタグを出力する
###################################################
function generate_upload_image_tag($name, $value){?>
<div id="<?php echo $name; ?>_thumbnail" class="uploded-thumbnail">
<?php if ($value): ?>
<img src="<?php echo $value; ?>" alt="選択中の画像" width="100px" height="auto">
<?php endif ?>
</div>
<input name="<?php echo $name; ?>" type="text" value="<?php echo $value; ?>" style="display:none;"/>
<input type="button" name="<?php echo $name; ?>_slect" value="画像選択" />
<input type="button" name="<?php echo $name; ?>_clear" value="クリア" />
<script type="text/javascript">
(function ($) {
var custom_uploader;
$("input:button[name=<?php echo $name; ?>_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");
/* file の中に選択された画像の各種情報が入っている */
images.each(function(file){
/* テキストフォームと表示されたサムネイル画像があればクリア */
$("input:text[name=<?php echo $name; ?>]").val("");
$("#<?php echo $name; ?>_thumbnail").empty();
/* テキストフォームに画像の URL を表示 */
$("input:text[name=<?php echo $name; ?>]").val(file.attributes.sizes.full.url);
/* プレビュー用に選択されたサムネイル画像を表示 */
$("#<?php echo $name; ?>_thumbnail").append('<img src="'+file.attributes.sizes.full.url+'" width="200px" height="auto"/>');
});
});
custom_uploader.open();
});
/* クリアボタンを押した時の処理 */
$("input:button[name=<?php echo $name; ?>_clear]").click(function() {
$("input:text[name=<?php echo $name; ?>]").val("");
$("#<?php echo $name; ?>_thumbnail").empty();
});
})(jQuery);
</script>
<?php
}
function my_admin_scripts() {
wp_enqueue_media();
}
add_action( 'admin_print_scripts', 'my_admin_scripts' );
###################################################
# カスタムフィールドの追加
###################################################
//制作実績にフィールド追加
function insert_works_fields(){
global $post; ?>
<table style="width:100%">
<tr>
<th>チェックボックス単体</th>
<td>
<input type="checkbox" name="c_check" value="is-on"<?php checked( get_post_meta($post->ID,'c_check',true), 'is-on' ); ?>
</td>
</tr>
<tr>
<th>画像</th>
<td>
<?php generate_upload_image_tag('c_img', get_post_meta($post->ID,'c_img',true)); ?>
</td>
</tr>
<tr>
<th>テキスト</th>
<td>
<input type="text" name="c_title" value="<?php echo get_post_meta($post->ID,'c_title',true); ?>" placeholder="香川のメンズ脱毛サロン「LOT STYLE」 SEOキーワードを入れると良し" style="width:100%">
</td>
</tr>
<tr>
<th>説明文</th>
<td>
<textarea name="c_description" placeholder="" style="width:100%"><?php echo get_post_meta($post->ID,'c_description',true); ?></textarea>
</td>
</tr>
<tr>
<th>ラジオボタン</th>
<td>
<input type="radio" name="c_radio" value="〜1万円"<?php checked(get_post_meta($post->ID,'c_radio',true), 'ボタン1' );?>>ボタン1
<input type="radio" name="c_radio" value="~10万円"<?php checked(get_post_meta($post->ID,'c_radio',true), 'ボタン2' );?>>ボタン2
<input type="radio" name="c_radio" value="~20万円"<?php checked(get_post_meta($post->ID,'c_radio',true), 'ボタン3' );?>>ボタン3
</td>
</tr>
<tr>
<th>チェックボックス複数</th>
<td>
<?php
$c_check_group = get_post_meta($post->ID,'works_spec',true,[]);
$c_check_group = isset( $works_spec ) ? (array) $works_spec : [];
?>
<input type="checkbox" name="c_check_group[]" value="c_check_group_1"<?php if (in_array( 'c_check_group_1', $c_check_group )){echo 'checked';}?>>ボタン1
<input type="checkbox" name="c_check_group[]" value="c_check_group_2"<?php if (in_array( 'c_check_group_2', $c_check_group )){echo 'checked';}?>>ボタン2
<input type="checkbox" name="c_check_group[]" value="c_check_group_3"<?php if (in_array( 'c_check_group_3', $c_check_group )){echo 'checked';}?>>ボタン3
</td>
</tr>
</table>
<?php
}
function add_works_fields(){
add_meta_box('meta_id', '情報', 'insert_works_fields', 'works', 'normal', 'high');
}
add_action('admin_menu', 'add_works_fields');
//カスタムフィールドの値を保存
function save_custom_fields($post_id){ $save_fields = [
'c_check',
'c_img',
'c_title',
'c_description',
'c_radio',
'c_check_group',
'c_radio',
//ここにカスタムフィールドのnameを格納していく
];
foreach($save_fields as $value) {
if (isset( $_POST['action'] ) && $_POST['action'] == 'inline-save') {
return $post_id;
}elseif (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
return $post_id;
}
elseif(isset($_POST[$value])) {
update_post_meta($post_id, $value, $_POST[$value] );
} else {
delete_post_meta($post_id, $value);
}
}
}
add_action('save_post', 'save_custom_fields');