[WordPress]カスタム投稿ページでカスタムフィールド(custom-fields)を、プラグインなしで作成する方法

WordPressでカスタムフィールドを作成するとなると、プラグイン「Advanced Custom Fields」や、「Smart Custom Fields」がよく利用されている。

プラグインに依存すると、他のプラグインやテーマに移行する際に問題になったりする。(まぁほとんどないと思います。)

そのため、今回はWordPress標準のメタデータを使ってカスタムフィールドを追加していきます。

WordPressには投稿にカスタムフィールドを追加できる機能があります。これらの情報をメタデータと呼んでいます。

メリットはコードベースで管理できること、柔軟で自由度が高いことが挙げられます。
デメリットはコードを書くので潜在バグの可能性があったりすることでしょうか。

目次

テキストフィールドを追加する。

add_meta_box を使ってテキストフィールドを作成していきます。

add_meta_box の引数は下記を参考にしてください。

$id (string)メタボックスの識別子。管理画面内で一意である必要があります。
$title (string)メタボックスのタイトル。管理画面で表示される見出しのテキスト。
$callback (callable)メタボックスの内容を表示するコールバック関数。HTMLやその他の出力を行う関数を指定します。
$screen (string|array|WP_Screen)メタボックスを表示する画面を指定します。投稿タイプ(例:postpagecustome_post_typeなど)を指定します。
$context (string):メタボックスを表示するコンテキスト(位置)。以下のいずれかを指定します。
normal:メインコンテンツエリアの下
side:サイドカラム
advanced:メインコンテンツエリアの下(normalの下)

下記のようにすると、’custome_post_type’の投稿タイプの編集画面で、テキストフィールが表示されます。

重要なのはcallbackで、ここで出力したHTMLでテキストフィールドを表示しています。

add_action('admin_menu', function() {
    add_meta_box(
        'custom_id_setting', // メタボックスの識別子
        'カスタム投稿ID', // メタボックスのタイトル
        function () {
            global $post;
            $meta = get_post_meta($post->ID, 'custom_id', true); ?>

            <form method="post" action="admin.php?page=site_settings">
                <label for="custom_id">カスタム投稿ID:</label>
                <input id="custom_id" type="text" name="custom_id" value="<?= $meta ?>">
            </form>

            <?php
        },
        'custome_post_type', // カスタム投稿タイプ名
        'normal'
    );
});

表示イメージはこのようになります。

テキストフィールドを保存する

save_postフックで$_POSTに、メタボックスで指定したフォームのID`custom_id`があれば、update_post_metaで保存するようにします。

add_action('save_post', function($post_id) {
    if (isset($_POST['custom_id'])) {
        update_post_meta($post_id, 'custom_id', $_POST['custom_id']);
    }
});

追加したテキストフィールドを取得する。

get_post_meta で取得することができます。

第一引数は該当する投稿ID、第二引数は取得したいカスタムフィールドキーを設定します。
今回は”custom_id”になります。
第三引数は、trueの場合、文字列として返します。falseの場合は、カスタムフィールドの配列を返します。

get_post_meta($post->ID, "custom_id", true);

Summary

実際に使ってみてプラグインの管理を考えて良くなった分、長い目で見て便利かなと思います。
また、自分で投稿するHTMLも書くのでデザインも含めて使いやすくできそうです。

よかったらシェアしてね!
目次