WordPressのfunctions.phpを使って、カスタムフィールドを追加してみます。
カスタムフィールドの追加
デフォルトの投稿にカスタムフィールドの入力を追加してみます。
今回追加するのは以下の6つです。
- 商品名: item_name(1行テキスト)
- 紹介文(簡易): item_lead(テキストエリア)
- 紹介文(詳細): item_detail(ウィジウィグ)
- カテゴリー: item_category(セレクトボックス)
- ジャンル: item_genre(チェックボックス)
- 評価: item_eval(ラジオボタン)
functions.php
// カスタムフィールドの追加
add_action( 'admin_menu', 'add_custom_field' );
function add_custom_field() {
add_meta_box( 'custom-item_name', '商品名', 'create_item_name', 'post', 'normal' );
add_meta_box( 'custom-item_lead', '紹介文(簡易)', 'create_item_lead', 'post', 'normal' );
add_meta_box( 'custom-item_detail', '紹介文(詳細)', 'create_item_detail', 'post', 'normal' );
add_meta_box( 'custom-item_category', 'カテゴリー', 'create_item_category', 'post', 'side' );
add_meta_box( 'custom-item_genre', 'ジャンル', 'create_item_genre', 'post', 'side' );
add_meta_box( 'custom-item_eval', '評価', 'create_item_eval', 'post', 'side' );
}
// カスタムフィールドのHTMLを追加する時の処理
function create_item_name() {
$keyname = 'item_name';
global $post;
// 保存されているカスタムフィールドの値を取得
$get_value = get_post_meta( $post->ID, $keyname, true );
// nonceの追加
wp_nonce_field( 'action-' . $keyname, 'nonce-' . $keyname );
// HTMLの出力
echo '<input name="' . $keyname . '" value="' . $get_value . '">';
}
function create_item_lead() {
$keyname = 'item_lead';
global $post;
// 保存されているカスタムフィールドの値を取得
$get_value = get_post_meta( $post->ID, $keyname, true );
// nonceの追加
wp_nonce_field( 'action-' . $keyname, 'nonce-' . $keyname );
// HTMLの出力
echo '<textarea name="' . $keyname . '">' . $get_value . '</textarea>';
}
function create_item_detail() {
$keyname = 'item_detail';
global $post;
// 保存されているカスタムフィールドの値を取得
$get_value = get_post_meta( $post->ID, $keyname, true );
// nonceの追加
wp_nonce_field( 'action-' . $keyname, 'nonce-' . $keyname );
// HTMLの出力
wp_editor( $get_value, $keyname . '-box', ['textarea_name' => $keyname] );
}
function create_item_category() {
$keyname = 'item_category';
global $post;
// 保存されているカスタムフィールドの値を取得
$get_value = get_post_meta( $post->ID, $keyname, true );
// selectの値
$data = ['男性コミック', '女性コミック', '文芸・ラノベ'];
// nonceの追加
wp_nonce_field( 'action-' . $keyname, 'nonce-' . $keyname );
// HTMLの出力
echo '<select name="' . $keyname . '">';
echo '<option value="">-----</option>';
foreach( $data as $d ) {
$selected = '';
if( $d === $get_value ) $selected = ' selected';
echo '<option value="' . $d . '"' . $selected . '>' . $d . '</option>';
}
echo '</select>';
}
function create_item_genre() {
$keyname = 'item_genre';
global $post;
// 保存されているカスタムフィールドの値を取得
$get_vals = get_post_meta( $post->ID, $keyname, true );
$get_value = $get_vals ? $get_vals : array();
// radioの値
$data = ['ファンタジー', 'SF', '恋愛', 'スポーツ', 'コメディ', 'ドキュメンタリー', 'ミステリー・ホラー', '歴史・伝記'];
// nonceの追加
wp_nonce_field( 'action-' . $keyname, 'nonce-' . $keyname );
// HTMLの出力
foreach( $data as $d ) {
$checked = '';
if( in_array( $d, $get_value ) ) $checked = ' checked';
echo '<label><input type="checkbox" name="' . $keyname . '[]" value="' . $d . '"' . $checked . '>' . $d . '</label>';
}
}
function create_item_eval() {
$keyname = 'item_eval';
global $post;
// 保存されているカスタムフィールドの値を取得
$get_value = get_post_meta( $post->ID, $keyname, true );
// checkboxの値
$data = ['A', 'B', 'C', 'D', 'E', 'F'];
// nonceの追加
wp_nonce_field( 'action-' . $keyname, 'nonce-' . $keyname );
// HTMLの出力
foreach( $data as $d ) {
$checked = '';
if( $d === $get_value ) $checked = ' checked';
echo '<label><input type="radio" name="' . $keyname . '" value="' . $d . '"' . $checked . '>' . $d . '</label>';
}
}
// カスタムフィールドの保存
add_action( 'save_post', 'save_custom_field' );
function save_custom_field( $post_id ) {
$custom_fields = ['item_name', 'item_lead', 'item_detail', 'item_category', 'item_genre', 'item_eval'];
foreach( $custom_fields as $d ) {
if ( isset( $_POST['nonce-' . $d] ) && $_POST['nonce-' . $d] ) {
if( check_admin_referer( 'action-' . $d, 'nonce-' . $d ) ) {
if( isset( $_POST[$d] ) && $_POST[$d] ) {
update_post_meta( $post_id, $d, $_POST[$d] );
} else {
delete_post_meta( $post_id, $d, get_post_meta( $post_id, $d, true ) );
}
}
}
}
}
1～10行目でadd_meta_box()を使ってカスタムフィールドの追加を行っています。
12～109行目はadd_meta_box()の第三引数で指定している関数で、カスタムフィールド出力時の処理をそれぞれ記述しています。
それぞれの関数内の流れは基本的には同じで、保存しているカスタムフィールドの値を取得して、HTML出力時に値を反映した状態で出力するようにしています。
111～129行目は投稿内容保存時にカスタムフィールドの値を保存しています。
| add_meta_box( $id, $title, $callback, $screen, $context, $priority, $callback_args ); | 管理画面にmeta boxを追加する。 $id: 投稿画面の入力部分に付与されるID。必須。 $title: 投稿画面の入力部分に表示されるタイトル。必須。 $callback: 投稿画面の入力部分にHTMLを出力する関数。必須。 $screen: カスタムフィールドを追加する投稿タイプ。 $context: カスタムフィールド追加する場所。(normal,advanced,sideのいずれか) $priority: 表示される優先度。 $callback_args: コールバックに渡す引数。 |
|---|---|
| wp_nonce_field( $action, $name, $referer, $echo ); | nonceを取得してhiddenフィールドとして追加する。 nonceは英数字で作られたハッシュで、不正なものでないかの認証に使用される。 $action: アクションの名前。 $name: nonceの名前。 $referer: リファラーを表すhiddenフィールドを生成するかどうか。 $echo: hiddenフィールドを表示すか値として返すか。 |
| check_admin_referer( $action, $query_arg ); | 現在のリクエストが有効なnonceを持っているか、または現在のリクエストが管理画面から参照されたものであるかをテストする。 $action: アクションの名前。 $query_arg: nonceの名前。 |
デフォルトの投稿にカスタムフィールドの入力を表示することができました。
カスタムフィールドの表示
カスタムフィールドに値を入力して、ページ上に表示させてみます。
投稿画面で以下のようにして保存を行いました。
表示させたいページテンプレートのループ内(今回はsingle-post.php)で、以下のように記述します。
PHP
<?php
// カスタムフィールドの値を取得
$item_name = get_post_meta($post->ID, item_name, true);
$item_lead = get_post_meta($post->ID, item_lead, true);
$item_detail = get_post_meta($post->ID, item_detail, true);
$item_category = get_post_meta($post->ID, item_category, true);
$item_genre = get_post_meta($post->ID, item_genre, true);
$item_eval = get_post_meta($post->ID, item_eval, true);
?>
<dl>
<dt>商品名</dt>
<dd><?php echo esc_html( $item_name ); ?></dd>
</dl>
<dl>
<dt>紹介文(簡易)</dt>
<dd><?php echo esc_html( $item_lead ); ?></dd>
</dl>
<dl>
<dt>紹介文(詳細)</dt>
<dd><?php echo wp_kses_post( $item_detail ); ?></dd>
</dl>
<dl>
<dt>カテゴリー</dt>
<dd><?php echo esc_html( $item_category ); ?></dd>
</dl>
<dl>
<dt>ジャンル</dt>
<dd>
<?php
$genre_insert = '';
for ($i = 0; $i < count($item_genre); $i++) {
$genre_insert .= esc_html( $item_genre[$i] ) . ',';
}
echo rtrim( $genre_insert, ',' );
?>
</dd>
</dl>
<dl>
<dt>評価</dt>
<dd><?php echo esc_html($item_eval); ?></dd>
</dl>
ページで確認すると、以下のように表示されました。
| get_post_meta( $post_id, $key, $single ); | カスタムフィールドの値を取得する。 $post_id: カスタムフィールドを取得したい投稿のID。 $key: 取得したい値のキー名の文字列。 $single: 文字列として単一の結果を返すか、カスタムフィールドの配列を返すか。 |
|---|
【参考サイト】
- カスタムフィールドの使い方 – WordPress Codex 日本語版
- 関数リファレンス/add meta box – WordPress Codex 日本語版
- 関数リファレンス/get post meta – WordPress Codex 日本語版
- [WordPress] functions.phpでカスタムフィールドを固定させる方法 | inter-arteq.com :: interaction between art and technology
- WordPressにてfunction.phpを使いチェックボックスのカスタムフィールド付ける – WEBUTUBUTU
- 関数リファレンス/wp nonce field – WordPress Codex 日本語版
- 関数リファレンス/check admin referer – WordPress Codex 日本語版
- wp_nonce_fieldに関するメモ – WEBUTUBUTU
コメントが承認されるまで時間がかかります。