はじめに
WordPressのサイト運営が長くなると、複数のメニューを作成して管理することが増えてきます。
「どのメニューがどこで使われているか」「一時的なキャンペーン用なのか」など、後から見返したときに迷ってしまうこともあるでしょう。
そこで、外観→メニューに「管理用メモ」を記録できる入力欄を追加することで、各メニューの用途を一目で判別できるようにします。
この記事では、この方法について説明します。
完成イメージ
実装手順
以下のコードをfunctions.phpに追加します。
/**
* 編集中のナビゲーションメニューIDを取得
*
* @return int メニューID。メニューが存在しない場合は0
*/
if (!function_exists('get_edit_nav_menu_id')):
function get_edit_nav_menu_id() {
$action = isset($_REQUEST['action']) ? $_REQUEST['action'] : '';
// メニューIDを取得
if (isset($_REQUEST['menu']) && $action !== 'delete') {
return (int) $_REQUEST['menu'];
}
// ユーザーメタから直近で編集したメニューIDを取得
$last_id = (int) get_user_meta(get_current_user_id(), 'nav_menu_recently_edited', true);
// 有効なナビゲーションメニューを確認
if ($last_id && is_nav_menu($last_id)) {
return $last_id;
}
// 利用可能なメニューを取得
$menus = wp_get_nav_menus();
return !empty($menus) ? (int) $menus[0]->term_id : 0;
}
endif;
// 管理画面用JS・CSSを追加
add_action('admin_enqueue_scripts', function ($hook_suffix) {
if ($hook_suffix !== 'nav-menus.php') {
return;
}
// メニューの位置設定画面を処理対象外
if (isset($_REQUEST['action']) && $_REQUEST['action'] === 'locations') {
return;
}
// 編集中のメニューIDを取得
$menu_id = get_edit_nav_menu_id();
// 管理用メモを取得
$note = ($menu_id > 0) ? get_term_meta($menu_id, 'my_menu_admin_note', true) : '';
// Nonceフィールドを生成
$nonce_field = wp_nonce_field('nav_menu_admin_note_action', 'nav_menu_admin_note_nonce', true, false);
ob_start();
?>
jQuery(function ($) {
// 挿入先のヘッダー要素を取得
const $target = $("#nav-menu-header");
// 対象要素がない場合、または追加済みの場合は終了
if (!$target.length || $("#custom-menu-note").length) {
return;
}
// PHPから渡されたメモを安全に格納
const noteText = <?= json_encode($note); ?>;
// PHPで生成したnonceフィールドを取得
const nonceField = <?= json_encode($nonce_field); ?>;
// 管理用メモ入力欄のHTMLを生成
const noteHtml = `
<div class="custom-menu-note-wrap" style="padding: 10px 0;">
<label class="menu-name-label" for="custom-menu-note" style="display: block; margin-bottom: 5px;">管理用メモ</label>
<input name="custom-menu-note" id="custom-menu-note" type="text" class="regular-text" style="width: 100%;" value="${noteText}" placeholder="メニューの用途を入力">
${nonceField}
</div>
`;
// ヘッダー末尾に管理用メモ入力欄を追加
$target.append(noteHtml);
});
<?php
wp_add_inline_script('jquery', ob_get_clean());
});
/**
* ナビゲーションメニューの管理用メモを保存
*
* @param int $menu_id ナビゲーションメニューのID
* @return void
*/
if (!function_exists('save_nav_menu_admin_note')):
function save_nav_menu_admin_note($menu_id) {
// nonceチェック
if (!isset($_POST['nav_menu_admin_note_nonce']) || !wp_verify_nonce($_POST['nav_menu_admin_note_nonce'], 'nav_menu_admin_note_action')) {
return;
}
// 管理用メモの入力を確認
if (!isset($_POST['custom-menu-note'])) {
return;
}
$note = sanitize_text_field($_POST['custom-menu-note']);
// 管理用メモを保存または削除
if ($note !== '') {
update_term_meta($menu_id, 'my_menu_admin_note', $note);
} else {
delete_term_meta($menu_id, 'my_menu_admin_note');
}
}
endif;
// ナビゲーションメニューを作成・更新
add_action('wp_create_nav_menu', 'save_nav_menu_admin_note');
add_action('wp_update_nav_menu', 'save_nav_menu_admin_note');さいごに
今回紹介した方法を使えば、複雑になりがちなメニュー画面に「管理メモ」を付けることができ、管理効率が格段にアップします。
複数人での運営や、クライアントへの引き渡し時の利便性向上にぜひ役立ててください。
