【Wordpressテーマ作成】Wordpressの編集画面右側のツールバーに項目を追加する方法

2021-9-12

meko

メタボックスという名前

あのサイドバーの部分の名前ってあまり知られていないと思うのですが、メタボックスと言います
wordpress サイドバー　編集画面などで調べても、管理画面の編集方法しか出てこないので、そうじゃないんだという人向けの記事です

デフォルトで用意されたメタボックスの使用

add_theme_supportという関数であらかじめ用意されたメタボックスを使うことができます
add_theme_support("項目名", "オプション")という感じで使えます
オプションはなくても問題ないです

完成するもの

この記事で作成するのはシンプルなinputを持つメタボックスです
保存や更新をする設定までします

メタボックスの追加

functions.phpから操作します
テーマエディタを開いて、functions.phpがなければ作成してください

add_meta_boxという関数があるので、それを使います

<?php
// functions.php
function meta_box() {
    add_meta_box(
        "property_name",
        __("Title", "property_name"),
        "property_name_display",
        "page",
        "side",
        "high"
    );
}
add_action("add_meta_boxes", "meta_box");
?>
Copy

シンプルな例で行くとこれで設定できます
property_name_displayのところに書いた、関数の中で、表示する内容を変更します

<?php
// functions.php
function property_name_display() {
    echo "<input type='text' name='meta_key' />";
}
?>
Copy

これで、メタボックスの中に入力欄が表示されます

更新されたらメタボックスを保存する

表示するだけでは、更新した内容が保存されません
更新ボタンが押された際に登録する方法をここでは記載します

更新ボタンが押された際に使われる関数(Hook)はsave_postです
固定ページも投稿も同じです

<?php
// functions.php
function meta_box_save($id) {
    if (array_key_exists("meta_key", $_POST)) {
        return update_post_meta(
            $id,
            "meta_key",
            $_POST["meta_key"]
        );
    } else {
        add_post_meta(
            $id,
            "meta_key",
            $_POST["meta_key"]
        );
    }
}
add_action("save_post", "meta_box_save");
?>
Copy

先ほどinputの中のnameで指定したmeta_keyを使って$_POSTの中から拾ってきます
meta_keyというIDですでに登録があれば、上書きをして、なければ作成します

更新した内容をメタボックスに表示する

まだ更新しても表示されません
inputのデフォルトの値として呼び出してあげます

<?php
// functions.php
function property_name_display() {
    // ここを追加  
    $default = get_post_meta($post -> ID, "meta_key")[0];
    echo "<input type='text' value='". $default ."' />";
}
?>
Copy

get_post_metaで登録したメタデータを呼び出して、inputのvalueとして初期値を与えてやります
これで保存した内容が表示されるようになったので、完成です

参考

add meta box
add theme support
add post meta
add_theme_support