WordPressのカスタムフィールドをカスタムしてみた

WordPressをブログではなくもう少し大掛かりなCMSとして利用する際には、どうしても必要になってくるカスタムフィールドですが、ただのinput, textarea, selectでは~~面白くないので~~使い勝手が悪いので、色々とカスタマイズした内容を残しておきます。

プラグイン無しでカスタムフィールドの入力欄を追加する

まずはカスタムフィールドの入力欄の追加方法からです。

カスタムフィールドの管理を行うプラグインは様々ありますが、管理側の使い勝手を向上させるためにどうしても入力欄は一定のレイアウトで、もうちょっと違う表示をさせたいんだけどな…という所が出てきてしまいます。

なので、そんな時にはプラグイン無しで入力欄を追加してしまいます。

<?php

function _add_custom_field()
{
    // 入力パネルのキー, パネル表示タイトル, コールバック関数名, 投稿タイプ名, 表示位置, 優先度, コールバック関数に渡す変数
    add_meta_box( 'field-name', 'フィールド名', '_add_meta_box', 'post', 'advanced', 'default', NULL );
}
add_action( 'add_meta_boxes', '_add_custom_field' );

function _add_meta_box( $post )
{
    $value = get_post_meta( $post->ID, 'field', TRUE );
    echo '<input type="text" name="field" value="'.esc_attr( $value ).'">';
}

?>

add_meta_boxに渡す引数の詳細は公式リファレンスを参照ください。

また、追加したカスタムフィールドは保存しないといけませんので、保存する処理を追記します。

<?php

function _save_custom_field( $post_id )
{
    // 投稿ID, カスタムフィールド名, 値
    update_post_meta( $post_id, 'field', $_POST&#91; 'field' &#93; );

    return $post_id;
}
add_action( 'save_post', '_save_custom_field' );

?>

これで保存はされますが、何でもかんでも保存してしまうとマズイので、WPのnonceを使って投稿元のチェックをします。先ほどの追加の処理も少し書き換えて…。

<?php

function _add_custom_field()
{
    // 入力パネルのキー, パネル表示タイトル, コールバック関数名, 投稿タイプ名, 表示位置, 優先度, コールバック関数に渡す変数
    add_meta_box( 'field-name', 'フィールド名', '_add_meta_box', 'post', 'advanced', 'default', NULL );
}
add_action( 'add_meta_boxes', '_add_custom_field' );

function _add_meta_box( $post )
{
    $value = get_post_meta( $post->ID, 'field', TRUE );
    echo '<input type="text" name="field" value="'.esc_attr( $value ).'">';

    wp_nonce_field( 'custom_key', 'custom_nonce' );
}

function _save_custom_field( $post_id )
{
        // ワンタイムチケットと権限の確認
        if ( ! isset( $_POST[ 'custom_nonce' ] )
          || ! check_admin_referer( 'custom_key', 'custom_nonce' )
          || ! current_user_can( 'edit_post', $post_id ) ) {
            return $post_id;
        }

    // 投稿ID, カスタムフィールド名, 値
    update_post_meta( $post_id, 'field', $_POST[ 'field' ] );

    return $post_id;
}
add_action( 'save_post', '_save_custom_field' );

?>

_add_meta_boxにwp_nonce_fieldを追加し、_save_custom_fieldでcheck_admin_refererを使って検証しています。これで、安心、のはず。

さて、カスタムフィールドの追加方法は分かったので、ここから入力欄をカスタマイズしていきます。

通常の本文と同じTinyMCEを使う

カスタムフィールドにもWYSIWYGを使いたい事があるので、いっその事用意されている通常の本文と同じ機能を持ってきたいと思います。

リファレンスをあさっていると、wp_editorという素敵な関数がありましたので、そちらを利用します。 _WP_Editors::editorを先に見つけて、あとでwp_editorの存在に気づいたなんて気のせいです。

<?php

// カスタムフィールドを追加する処理を色々

function _add_meta_box( $post )
{
    $value = get_post_meta( $post->ID, 'field', TRUE );
    // 初期値, フィールド名, 設定情報
    wp_editor( $value, 'field' );

    wp_nonce_field( 'custom_key', 'custom_nonce' );
}

?>

wp_editorを呼ぶだけで本文同様のTinyMCEを引っ張ってくることが出来ます。便利！また、第三引数に配列で値を渡すことでエディターの設定をいじることも出来るようです。（コチラは試していません）

設定できるパラメータはコチラに記載されていました。

メディアアップロードボタンを使う

続いて、WYSIWYGを配置するまでもないけど、画像を選択させたい、という入力欄も時にはあると思います。アイキャッチ画像の設定みたいな感じですね。

そんな時に、WPのメディアアップロード画面を再利用できたら、と思って調べていたら詳しく説明しているページを見つけましたので読んでいくと、wp.mediaというメソッドが用意されているようですね。

ということで、自分用に画像をアップロードするカスタムフィールド用のJSを作ってみました。ちょっと長いので、コチラはGistにアップしました。

雑感

カスタムフィールドをカスタマイズするためのフックやフィルターも結構揃ってますので、頑張れば管理画面もかなり自由に操作できることがわかってきました。

また、完全にオリジナルではなく、良いものは使いまわすことが出来るので、そのあたりも嬉しいですね。

TinyMCE回りのフックやフィルターも結構揃っているようなので、またそのあたりも触っていけると良いなぁ何て思っていたりしますが、もし手を出した時には残すようにします。

WordPressのカスタムフィールドをカスタムしてみた

目次

プラグイン無しでカスタムフィールドの入力欄を追加する

通常の本文と同じTinyMCEを使う

メディアアップロードボタンを使う

雑感

参考