WordPressの管理画面を使いやすくする簡単カスタマイズ18選

WordPressは機能として実装できないものはないのではないか、と思えるくらい自由度が高く多機能なCMSです。一方で多機能であるが故に管理画面のメニューも多く、サイトによっては使っていない機能なのに導線が残っていたり、設定画面に到達するまで階層が深かったり、操作が複雑だとユーザーに使いにくい管理画面だと思われてしまいます。

この記事では私が普段の制作でよく行うWordPressの管理画面のカスタマイズ方法について、独自で実装するものとプラグインを導入して実現するものを合わせて18個、ソースコードと解説を交えながらご紹介します。エンジニアだけでなくデザイナーやディレクターの方も「こんなことができるんだ」と知っておくだけで、より使いやすい管理画面に仕上げていくことができると思うので、ぜひ参考にしてみてください。

その1. ログインページのロゴを変更する

以下のログインページのWordPressロゴとリンク先を変更します。

a. ロゴ画像を変更する

以下のようにログインページにロゴ部分の<a>タグに背景画像を指定する関数をlogin_headフックで実行されるように、functions.phpに記述します。background-imageでロゴ画像のパスを指定します。背景画像での指定なので要素に幅と高さも指定しましょう。

function custom_login_logo() {
?>
  <style type="text/css">
    #login h1 a {
      display: block;
      background-repeat: no-repeat;
      background-size: cover;
      background-image: url(/path/to/logo.svg);
      width: 200px;
      height: 60px;
    }
  </style>
<?php
}
add_action( 'login_head', 'custom_login_logo' );

以下のようにロゴ画像が変更されます。

b. ロゴクリック時の遷移先を変更する

ロゴはクリックするとデフォルトではhttps://ja.wordpress.org/に遷移していまいます。せっかくロゴを変えたのにリンク先がこのままではミスマッチなので以下の記述をfunctions.phpに加えてリンク先を変更しましょう。

function custom_login_logo_url() {
  return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'custom_login_logo_url' );

ちなみにここでは管理画面の設定＞一般の「サイトアドレス（URL）」に入力したURLをリンク先とするためにget_bloginfo( 'url' )の値を設定しました。これで管理画面上でユーザーが好きなURLに変更できます。

その2. ヘッダーの不要なメニューを非表示にする

ヘッダーにも様々なページへのリンクが設置されています。コメント機能などを使わない場合、無効なのに導線が残って設定画面にアクセスできる矛盾した状態になります。ここではヘッダーの不要なメニューを非表示にする方法をご紹介します。

基本的には次のようにadmin_bar_menuにフックさせた関数内で$wp_admin_bar->remove_menu( '引数' );とすることで各メニューを非表示できます。

function remove_admin_bar( $wp_admin_bar ) {
  $wp_admin_bar->remove_menu( '引数1' );
  $wp_admin_bar->remove_menu( '引数2' );
}
add_action( 'admin_bar_menu', 'remove_admin_bar' );

引数として渡す値を変えることで、どのメニューを非表示にするかを制御できます。非表示にするメニューが複数ある場合は$wp_admin_bar->remove_menu( '引数' );をメニューの数だけ記述します。

グループごと非表示にするか、個別にメニューを非表示にするか制御できます。たとえばWordPressロゴにマウスをホバーするとドロップダウンメニューが表示されますが、引数に「wp-logo」を指定して設定しておくとWordPressロゴとドロップダウンメニューがまるごと非表示になります。各メニューをグループごとに表示にする場合の引数は以下の通りです。

WordPressロゴグループ	wp-logo
サイト名グループ	site-name
更新グループ	updates
コメントグループ	comments
新規投稿グループ	new-content
ユーザーグループ	my-account

以下は個別にメニューを非表示にする場合の引数です。グループごとに紹介します。

a. WordPressロゴグループ

WordPressロゴのドロップダウンメニュー内の設定値です。

WordPressについて	about
WordPress.org	wporg
ドキュメンテーション	documentation
サポート	support-forums
フィードバック	feedback

b. サイト名グループ

サイト名のドロップダウンメニューには「サイトを表示」しかリンクがないので、以下の設定をするとドロップダウンメニューが表示されないようになります。

サイトを表示	view-site

c. 新規投稿グループ

「新規」のドロップダウンメニュー内の設定値です。

投稿	new-post
メディア	new-media
固定ページ	new-page
Block	new-block_lab
ユーザー	new-user

d. ユーザーグループ

右側の「こんにちは、○○さん」にホバーすると表示されるドロップダウンメニュー内も、アイコン画像以外で要素ごとに表示をコントロールすることができます。

ユーザー名	user-info
プロフィールを編集	edit-profile
ログアウト	logout

その3. サイドバーにリンクを追加する

サイドバーに独自の追加メニューを表示します。よく使う設定画面をサイドバーに表示しておくと便利です。

functions.phpで以下のように記述します。

function add_custom_menu() {
  add_menu_page(
    '記事カテゴリー', // ①ページタイトル
    '記事カテゴリー', // ②ラベル
    'manage_options', // ③表示するユーザーの権限
    'edit-tags.php?taxonomy=category', // ④スラッグ名
    '', // ⑤遷移後に実行する関数
    'dashicons-category', // ⑥アイコン
    '13' // ⑦表示位置
  );
}
add_action('admin_menu', 'add_custom_menu');

サイドバーへの追加はadd_menu_page()関数を使用します。この関数には7個も引数を渡す必要があります。上から順に説明します。

①ページタイトル	リンク先ページのタイトルタグに表示するテキスト。
②ラベル	管理画面のサイドメニューに表示するラベル。
③表示するユーザーの権限	セットした権限レベルを満たすユーザーにだけこの追加メニューを表示します。
④スラッグ名	この追加メニューにリンク先として設定するページのスラッグ名。「edit-tags.php」と指定した場合は「https://ドメイン名/wp-admin/edit-tags.php」にリンクします。
⑤遷移後に実行する関数	リンク先ページを表示したときに実行される関数。何も実行しない場合は空にします。
⑥アイコン	管理画面のサイドメニューに表示するアイコン。「画像URL」「Base64変換後テキスト」「WPで用意されているアイコン名」のいずれかで指定できます。WPのアイコンはこちらで検索できます。
⑦表示位置	管理画面のサイドメニューでこの追加メニューを表示する位置。大きい数字ほど下の方に表示されます。

これで以下のように「記事カテゴリー」というメニューが追加されました。

その4. サイドバーのリンクのラベルを変更する

 

サイドバーの各メニューのラベルを変更します。例えば「メディア」を「画像・ファイル」に置き換えて「何のメニューなのか」をイメージしやすくします。

サイドバーのメニューの情報はグローバル変数の$menuと$submenuという配列に登録されているようです。ここではその値を上書きする形で変更します。まずはソースコード全文です。

function change_menu_label() {
  global $menu, $submenu;
  $menu[10][0] = '画像・ファイル';
  $submenu['upload.php'][5][0] = '画像・ファイル一覧';
  $submenu['upload.php'][10][0] = '画像・ファイルを追加';
}
add_action( 'admin_menu', 'change_menu_label' );

admin_menuにフックして配列を上書く処理を記述します。サイドバーには常に表示されているメニュー（$menu）と、ホバーして表示されるサブメニュー（$submenu）があるので置き換えたいラベルの場所に応じて上書きする配列を指定します。次にそれぞれの配列の中身を実際に見てみましょう。$menu[10][0]などが何を指しているかわかるはずです。まずは親階層にあたる$menuです。

array() {
  [2] => array() {
    [0] => "ダッシュボード",
    [1] => "read",
    [2] => "index.php",
    [3] => "",
    [4] =>  "menu-top menu-top-first menu-icon-dashboard",
    [5] =>  "menu-dashboard",
    [6] =>  "dashicons-dashboard"
  },
  [10] => array() {
    [0] => "メディア",
    [1] => "upload_files",
    [2] => "upload.php",
    [3] => "",
    [4] => "menu-top menu-icon-media",
    [5] => "menu-media",
    [6] => "dashicons-admin-media"
  },
  ...
}

このように$menuは二次元配列で、$menu[10][0]は「メディア」にあたります。これを「画像・ファイル」に上書きして変更しているということです。次に子階層にあたる$submenuです。

array() {
  ["index.php"] => array() {
    [0] => array() {
      [0] => "ホーム",
      [1] => "read",
      [2] => "index.php"
    },
    ...
  },
  ["upload.php"] => array() {
    [5] => array() {
      [0] => "ライブラリ",
      [1] => "upload_files",
      [2] => "upload.php"
    },
    [10] => array() {
      [0] => "新規追加",
      [1] => "upload_files",
      [2] => "media-new.php"
    }
  },
  ...
}

$menuと似ていますが第一階層にphpのファイル名がキーとして入っているようです。$submenu['upload.php'][5][0] = '画像・ファイル一覧';は「ライブラリ」という文字列を置き換えていることになります。これで以下のようにサイドバーの「メディア」というラベルが置き換わりました。

「メディア」以外にもこれらの配列に含まれているメニューであれば、リンク先のパス、メニュー要素に付与されるクラス・id、アイコンなども変更できるようです。配列の情報は膨大なのでvar_dump( $menu )などで確認してみてください。

その5. サイドバーの並び順を変更する

サイドバーのメニューの並び順を以下のように入れ替えます。

まずはソースコード全文です。

function sort_side_menu( $menu_order ) {
  return array(
    "index.php", // ダッシュボード
    "edit.php", // 投稿
    "edit.php?post_type=page", // 固定ページ
    "separator1", // 区切り線1
    "upload.php", // メディア
    "edit-comments.php", // コメント
    "separator2", // 区切り線2
    "themes.php", // 外観
    "plugins.php", // プラグイン
    "users.php", // ユーザー
    "tools.php", // ツール
    "options-general.php", // 設定
    "separator-last" // 区切り線（最後）
  );
}
add_filter( 'custom_menu_order', '__return_true' );
add_filter( 'menu_order', 'sort_side_menu' );

サイドメニューの並び順は上記では$menu_order配列で管理されています。この配列の中身を入れ替えて並べ替えを実現します。

custom_menu_orderとmenu_orderの2つのフックを利用して処理を実行します。まず最初のcustom_menu_orderというフックでは、第2引数が「__return_true」となっているのでWordPressにデフォルトで用意されている__return_true()関数を実行し、trueを返しています。これでWordPress側に「サイドバーの並び順を変更します」と通告するようなイメージです。

その後、menu_orderフックでsort_side_menu()関数を実行し変更後の並び順を定義した配列をreturnすると以下のようにサイドメニューが並べ替えられます。

ちなみに$menu_orderの並べ替え前の中身はsort_side_menu()関数内でvar_dump( $menu_order )とすることで確認することができます。デフォルトでは以下のような並び順です。

array(
  "index.php", // ダッシュボード
  "separator1", // 区切り線1
  "edit.php", // 投稿
  "upload.php", // メディア
  "edit.php?post_type=page", // 固定ページ
  "edit-comments.php", // コメント
  "separator2", // 区切り線2
  "themes.php", // 外観
  "plugins.php", // プラグイン
  "users.php", // ユーザー
  "tools.php", // ツール
  "options-general.php", // 設定
  "separator-last" // 区切り線（最後）
)

その6. ダッシュボードに独自のHTMLを表示する

ユーザーがログインして最初に表示されるのはダッシュボードです。せっかくなのでマニュアルへのリンクを表示するなどして、このダッシュボードを有効活用しましょう。ここでは、マニュアルや設定画面へのリンクボタンを表示するウィジェットを追加するのを例にご紹介します。以下の3ステップで実装できます。

1. 不要なブロックを消す
2. 新しいウィジェットを追加する
3. ウィジェットに表示するHTMLを定義する

a. 不要なブロックを消す

管理画面のダッシュボードにはデフォルトで概要やアクティビティといったウィジェットが並んでいますが、使わないものも多いです。まずは以下のようにremove_meta_box()で不要なウィジェットは非表示にしましょう。

function remove_dashboard_widget() {
  remove_meta_box( 'dashboard_site_health', 'dashboard', 'normal' ); // サイトヘルスステータス
  remove_meta_box( 'dashboard_right_now', 'dashboard', 'normal' ); // 概要
  remove_meta_box( 'dashboard_activity', 'dashboard', 'normal' ); // アクティビティ
  remove_meta_box( 'dashboard_quick_press', 'dashboard', 'side' ); // クイックドラフト
  remove_meta_box( 'dashboard_primary', 'dashboard', 'side' ); // WordPress イベントとニュース
  remove_action( 'welcome_panel', 'wp_welcome_panel' ); // ウェルカムパネル
}
add_action( 'wp_dashboard_setup', 'remove_dashboard_widget' );

ちなみに最後に記述しているウェルカムパネルだけはremove_action()関数で非表示にします。このウェルカムパネルは管理者権限を持ったユーザーにしか表示されません。

b. 新しいウィジェットを追加する

独自のボタンなどを表示する領域として「ウィジェット」を新規追加します。以下のように2つの関数を実行することでウィジェットを追加できます。

function add_dashboard_widgets() {
  wp_add_dashboard_widget(
    'quick_action_dashboard_widget', // ウィジェットのスラッグ名
    'クイックアクション', // ウィジェットに表示するタイトル
    'dashboard_widget_function' // 実行する関数
  );
}
add_action( 'wp_dashboard_setup', 'add_dashboard_widgets' );

function dashboard_widget_function() {
  // ここに表示したいHTMLを書く
}

wp_dashboard_setupにフックさせることでダッシュボードに新規ウィジェットを追加できます。内部で実行しているwp_add_dashboard_widget()の引数はコメントのとおりです。dashboard_widget_function()については次の章で説明します。ここまでで以下のようなウィジェットがダッシュボードに表示されるようになります。

c. ウィジェットに表示するHTMLを定義する

ウィジェット内に表示したいHTMLを先ほどのdashboard_widget_function()の中に書いていきましょう。ここではマニュアルを開くリンクボタンと、テーマカスタマイズ画面へのリンクボタンを追加します。

function dashboard_widget_function() {
  ?>
  <ul class="quick-action">
    <li>
      <a href="https://example.com" target="_blank" class="quick-action-button">
        <span class="dashicons-before dashicons-book"></span>
        マニュアルを見る
      </a>
    </li>
    <?php if ( current_user_can( 'administrator' ) ) : ?>
      <li>
        <a href="<?php echo admin_url() . 'customize.php'; ?>" class="quick-action-button">
          <span class="dashicons-before dashicons-admin-customizer"></span>
          サイトのカスタマイズ
        </a>
      </li>
    <?php endif; ?>
  </ul>
  <?php
}

「サイトのカスタマイズ」ボタンをif ( current_user_can( 'administrator' ) )で括っていますが、このようにすることで管理者権限を与えられているユーザーにのみ表示するように限定できます。

CSSは「dashboard.css」というファイルを作成してスタイルを記述しましょう。functions.phpで以下のようadmin_print_styles-index.phpというフックを利用することでダッシュボードでだけ読み込むようにします。

function enqueue_dashboard_styles() {
  wp_enqueue_style( 'dashboard_styles', get_template_directory_uri() . '/assets/css/dashboard.css' );
}
add_action( 'admin_print_styles-index.php', 'enqueue_dashboard_styles' );

ここまでの作業で以下のようなウィジェットが表示されるようになっているはずです。

最後に、ウィジェットに表示しておくと便利な各種設定画面へのリンクを参考までに表にまとめておきます。

投稿＞新規追加	admin_url() . 'post-new.php'
ユーザー＞プロフィール	admin_url() . 'profile.php'
外観＞カスタマイズ	admin_url() . 'customize.php'
外観＞メニュー	admin_url() . 'customize.php?autofocus[panel]=nav_menus'
投稿＞投稿一覧	admin_url() . 'edit.php'
設定＞一般	admin_url() . 'options-general.php'
設定＞投稿設定	admin_url() . 'options-writing.php'
設定＞表示設定	admin_url() . 'options-reading.php'

その7. 投稿をドラッグ＆ドロップで並べ替えられるようにする

ウェブサイト上で投稿を任意の順序で表示する場合、管理画面の投稿一覧の並び順を反映します。しかし、デフォルトでは日付でソートされ、並べ替えはできません。ここでは投稿をドラッグ＆ドロップで並べ替えられるように「Intuitive Custom Post Order」というプラグインをインストールします。

プラグインをインストールしたら「設定＞並べ替え設定」で並べ替えを有効化したい投稿にチェックをつけましょう。

有効化したら以下のように投稿一覧画面でドラッグ＆ドロップで投稿を並べ替えられるようになります。

その8. 投稿を複製できるようにする

作成済みの投稿を複製して、それをベースに別の投稿を作成したいという場面は意外と多いです。ここではプラグイン「Yoast Duplicate Post」をインストールして複製できるようにします。

プラグインをインストールしたら投稿一覧画面で複製したい投稿にカーソルを合わせて「複製」をクリックするだけで投稿が複製できます。

ちなみにカスタム投稿では複製を有効化する設定を行わないと複製できません。設定＞Duplicate Postから設定画面を開き、「権限」のタブの「これらの投稿タイプに対して有効化」で複製機能を有効化したいカスタム投稿にチェックをつけましょう。

その9. ブロックエディターにCSSを適用する

エディター内部にCSSを適用する場合はenqueue_block_editor_assetsというフックを利用します。読み込み自体はwp_enqueue_style()という関数を用います。引数は以下のとおりです。

function add_my_editor_styles() {
  wp_enqueue_style(
    'editor-style', // ハンドル名
    get_template_directory_uri() . '/assets/css/editor_style.css' ); // CSSファイルのパス
}
add_action( 'enqueue_block_editor_assets', 'add_my_editor_styles' );

その10. カスタムフィールドにCSSを適用する

投稿画面のカスタムフィールドのスタイルをカスタマイズして見やすくしてみましょう。入力必須フィールドを擬似要素を駆使して目立つようにするのも良いでしょう。

投稿の編集画面だけに限定してCSSを読み込みます。以下のようにfunctions.phpに記述します。

function enqueue_post_styles() {
  global $pagenow;
  if ( $pagenow == 'post.php' || $pagenow == 'post-new.php' || $pagenow == 'edit.php' ) {
    wp_enqueue_style(
      'post_styles', // ハンドル名
      get_template_directory_uri() . '/assets/css/post.css' // CSSファイルのパス
    );
  }
}
add_action( 'admin_enqueue_scripts', 'enqueue_post_styles' );

$pagenowというグローバル変数で判別します。この変数には表示画面のURL末尾が入っているので、投稿画面であれば「post.php」「post-new.php」「edit.php」となるのでいずれかに該当した場合にCSSの読み込み処理を行うようにします。

ちなみにフックを使い分けて画面ごとに処理を限定する方法もあります。admin_print_styles-****.phpというようにフック名の末尾に読み込ませたいページのURL末尾をつなげて使います。上記のコードをフックで限定する方法に書き換えると次のようになります。

function enqueue_post_styles() {
  wp_enqueue_style(
    'post_styles', // ハンドル名
    get_template_directory_uri() . '/assets/css/post.css' // CSSファイルのパス
  );
}
add_action( 'admin_print_styles-post.php', 'enqueue_post_styles' );
add_action( 'admin_print_styles-post-new.php', 'enqueue_post_styles' );
add_action( 'admin_print_styles-edit.php', 'enqueue_post_styles' );

あとは読み込んだpost.cssにスタイルを記述していきます。ここでは使用するカスタムフィールドのプラグインによってHTML構造は異なるので具体的なスタイルの記述は割愛します。また、この方法を使えば管理画面のあらゆる場所にCSSを適用できるようになるので必要に応じてスタイルの調整を行いましょう。

その11. エディターの自動保存時間を延長する

投稿を編集していると更新ボタンを押さなくても自動保存機能によって10秒ごとに保存されてしまいます。一見親切な機能なのですが、余計にリビジョン（保存するごとに復元用にバックアップする機能）が作成され、上部に「新しいリビジョンがあります」などの通知が出て鬱陶しいことがあります。このような場合は以下のようにfunctions.phpに記述して自動保存の間隔を延長し、事実上無効にするのが良いでしょう。

function change_autosave_interval( $editor_settings ) {
  $editor_settings[ 'autosaveInterval' ] = 3600; // 3600秒=1時間
  return $editor_settings;
}
add_filter( 'block_editor_settings', 'change_autosave_interval' );

block_editor_settingsフックを利用し、引数の配列$editor_settingsのautosaveIntervalの値を上書きします。単位は秒です。

その12. 不要なブロックを一覧から非表示にする

追加するブロック一覧には使わないようなものも多く表示されています。スタイルが用意されていなくて使えないブロックは非表示にした方がすっきりしてユーザーにとっても良いでしょう。

特定のブロックを非表示にするにはJSで非表示にするブロックを定義します。ここではremove-block.jsというJSファイルを用意しそれをfunctions.phpで以下のようにして読み込みます。

function enqueue_custom_script() {
  wp_enqueue_script(
    'remove_block', // ハンドル名
    get_template_directory_uri() . '/js/remove-block.js', // JSのパス
    array() // 依存関係のスクリプト（jQueryなどのライブラリを指定可）
  );
}
add_action( 'enqueue_block_editor_assets', 'enqueue_custom_script' );

enqueue_block_editor_assetsというフックを利用することでブロックエディターにJSを読み込めます。読み込んだremove-block.jsには以下のように非表示にするブロックを定義します。

wp.domReady(() => {
  // 通常ブロック
  wp.blocks.unregisterBlockType( 'core/paragraph' ); // 段落
  wp.blocks.unregisterBlockType( 'core/heading' ); // 見出し
  ...

  // 埋め込みブロック
  wp.blocks.unregisterBlockVariation( 'core/embed', 'youtube' ); // Youtube
  ...
});

上記のように「通常のブロック」と「埋め込みブロック」で用いる関数と引数の形式が異なります。どんな引数を渡せばそれぞれのブロックを非表示にできるかは以下の表にまとめているので参照してください。なお、埋め込みブロックを非表示にするunregisterBlockVariation()は第一引数core/embedは常に固定で、第二引数だけを変更します。

テキスト

ブロック名	キー名
段落	core/paragraph
見出し	core/heading
リスト	core/list
引用	core/quote
クラシック	core/freeform
コード	core/code
整形済みテキスト	core/preformatted
プルクオート	core/pullquote
テーブル	core/table
詩	core/verse

メディア

ブロック名	キー名
画像	core/image
ギャラリー	core/gallery
音声	core/audio
カバー	core/cover
ファイル	core/file
メディアとテキスト	core/media-text
動画	core/video

デザイン

ブロック名	キー名
ボタン	core/buttons
カラム	core/columns
グループ	core/group
行	core/group-row
続き	core/more
ページ区切り	core/nextpage
区切り	core/separator
スペーサー	core/spacer

ウィジェット

ブロック名	キー名
アーカイブ	core/archives
カレンダー	core/calendar
カテゴリー	core/categories
カスタムHTML	core/html
最新のコメント	core/latest-comments
最新の投稿	core/latest-posts
固定ページリスト	core/page-list
RSS	core/rss
検索	core/search
ショートコード	core/shortcode
ソーシャルアイコン	core/social-links
タグクラウド	core/tag-cloud

テーマ

ブロック名	キー名
ナビゲーション	core/navigation
サイトロゴ	core/site-logo
サイトのタイトル	core/site-title
サイトのキャッチフレーズ	core/site-tagline
投稿一覧	core/query
投稿タイトル	core/post-title
投稿の抜粋	core/post-excerpt
投稿のアイキャッチ画像	core/post-featured-image
投稿コンテンツ	core/post-content
投稿者	core/post-author
投稿日	core/post-date
投稿カテゴリー	core/post-terms ※「投稿タグ」も同時に非表示になります
投稿タグ	core/post-terms ※「投稿カテゴリー」も同時に非表示になります
次の投稿	core/post-navigation-link ※「前の投稿」も同時に非表示になります
前の投稿	core/post-navigation-link ※「次の投稿」も同時に非表示になります
投稿コメント	core/post-comments
ログイン / ログアウト	core/loginout
タームの説明	core/term-description
アーカイブタイトル	core/query-title

埋め込み

ブロック名	キー名
埋め込み	※「埋め込み」ブロックだけを非表示にする方法はないようです
Twitter	twitter
YouTube	youtube
WordPress	wordpress
SoundCloud	soundcloud
Spotify	spotify
Flickr	flickr
Vimeo	vimeo
Animoto	animoto
Cloudup	cloudup
Crowdsignal	crowdsignal
Dailymotion	dailymotion
Imgur	imgur
Issuu	issuu
Kickstarter	kickstarter
Mixcloud	mixcloud
Reddit	reddit
ReverbNation	reverbnation
Screencast	screencast
Scribd	scribd
Slideshare	slideshare
SmugMug	smugmug
Speaker Deck	speaker-deck
TikTok	tiktok
TED	ted
Tumblr	tumblr
VideoPress	videopress
WordPress.tv	wordpress-tv
Amazon Kindle	amazon-kindle
Pinterest	pinterest
Wolfram Cloud	wolfram-cloud

その13. 繰り返し使うパーツを再利用ブロックとして登録する

「再利用ブロック」という機能を利用すると、複数のページに登場するようなパーツを繰り返し使えるフォーマットとして登録し、中の文章や画像だけ書き換えて何度も使うことができるようになります。例えば以下のような吹き出しのパーツを再利用ブロックとして登録するとエディター上で画像や文章を差し替えて使用することができるようになります。

エディター上でブロックを組み合わせてCSSのクラス名を付与したり、専用のスタイルを記述しなければならなかったりと若干手順は多いですが、その一方で実際のページでの見た目通りの編集ができるためユーザーからするとかなり便利な機能です。詳しい手順は以前に私が執筆した以下の記事をご覧ください。

その14. 親カテゴリーの設定を非表示にする

投稿のカテゴリーを新規追加・編集する際、それぞれに親カテゴリーを設定することができますが、親子関係のカテゴリーが不要な場面もあるかと思います。このような場合は新規追加・編集画面の両方で親カテゴリーの設定を非表示にしましょう。まずはfunctions.phpにCSSファイルを読み込みます。

function add_edit_tags_page_styles() {
  wp_enqueue_style(
    'edit_tags_page_styles', // ハンドル名
    get_template_directory_uri() . '/assets/css/edit-tags.css' // CSSファイルのパス
  );
}
add_action( 'admin_print_styles-edit-tags.php', 'add_edit_tags_page_styles' );

「その10. カスタムフィールドにCSSを適用する」で紹介したフック名で特定の画面だけで処理を実行する方法を用います。admin_print_styles-edit-tags.phpとすることでカテゴリー編集画面（URL末尾がedit-tags.php）でだけ実行されます。

edit-tags.cssには以下のようにスタイルを記述します。

.form-field.term-parent-wrap {
  display: none;
}

.form-field.term-description-wrap {
  display: none;
}

カテゴリーの新規追加・編集画面では以下のように各入力項目の親要素は.form-fieldというクラスが振られており、「親カテゴリー」は.term-parent-wrapという独自のクラスが振られているのでこれを指定して非表示にします。また、ここではその下の「説明」の項目も同様にして非表示にしました。

その15. カテゴリーの設定にカスタムフィールドを表示する

カテゴリーの設定画面にカスタムフィールドを表示することができます。ここで設定できるようにすると良いのはカテゴリー一覧ページのタイトルタグといった設定値でしょう。次の3ステップで実装できます。

1. カテゴリー新規追加画面にカスタムフィールドを表示する
2. カテゴリー編集画面にカスタムフィールドを表示する
3. カスタムフィールドの値を保存する

a. カテゴリー新規追加画面にカスタムフィールドを表示する

まずカスタムフィールドにセットする情報を配列形式で入力フィールドのタイプ、ラベルに表示する文字列、スラッグ名、説明文の4つを定義しておきましょう。複数の関数から参照するので共通で参照できるところに定義しておくと便利です。

$custom_field = [
  'type' => 'text',
  'label' => 'タイトルタグ',
  'slug' => 'term_meta_title',
  'description' => 'このカテゴリー一覧ページで使用するタイトルタグの内容を設定できます。未入力の場合はカテゴリー名が自動で設定されます。'
];

カスタムフィールドを表示すべき設定ページはカテゴリーの「新規追加画面」と「編集画面」の2つがあります。編集画面ではDBに保存してある値があるかどうかといった判別が必要でややこしいので、まずはシンプルな構成の新規追加画面にフィールドを表示する方から見ていきましょう。以下をご覧ください。

function generate_add_form_term_cf_html( $tag ) {
  global $custom_field;
  $slug = $custom_field[ 'slug' ];
?>
  <div class="form-field term-<?php echo $slug; ?>-wrap">
    <label for="<?php echo $slug; ?>"><?php echo $custom_field[ 'label' ]; ?></label>
    <input
      name="<?php echo $slug; ?>"
      id="<?php echo $slug; ?>"
      type="text"
      value=""
      size="40"
    >
    <p><?php echo $custom_field[ 'description' ]; ?></p>
  </div>
<?php
}
add_action ( 'category_add_form_fields', 'generate_add_form_term_cf_html');

category_add_form_fieldsにフックして出力するHTMLを定義します。HTML構造はカテゴリーの新規追加画面にある入力フィールドを真似ています。シンプルに<label>、<input>、説明文を表示する<p>という構成です。先程定義した$custom_field配列のslugの値を参照し、class名、name属性、idとして表示します。

b. カテゴリー編集画面にカスタムフィールドを表示する

編集画面に表示するHTMLも定義しましょう。こちらではcategory_edit_form_fieldsにフックさせます。新規追加画面とやっていることはほぼ同じですが、編集画面にアクセスする際は既にカスタムフィールドに値を登録済みの状況も考えられるため、登録済みの値がある場合は<input>のvalue属性にその値を表示するように設定しています。値はget_term_meta()という関数にそのカテゴリのID、カスタムフィールドのスラッグを指定することで取得できます。

function generate_edit_form_term_cf_html( $tag ) {
  global $custom_field;
  $slug = $custom_field[ 'slug' ];
?>
  <tr class="form-field term-<?php echo $slug; ?>-wrap">
    <th scope="row">
      <label for="<?php echo $slug; ?>"><?php echo $custom_field[ 'label' ]; ?></label>
    </th>
    <td>
      <input
        name="<?php echo $slug; ?>"
        id="<?php echo $slug; ?>"
        type="text"
        value="<?php echo esc_html( get_term_meta( $tag->term_id, $slug, true ) ); ?>"
        size="40"
      >
      <p class="description"><?php echo $custom_field[ 'description' ]; ?></p>
    </td>
  </tr>
<?php
}
add_action ( 'category_edit_form_fields', 'generate_edit_form_term_cf_html' );

c. カスタムフィールドの値を保存する

最後にカスタムフィールドに入力された値をデータベースに登録する処理を記述します。データベースに登録するタイミングは以下の2回です。それぞれにフックさせて登録する処理を実行するように設定します。

• 新規追加画面で「追加」ボタンを押した時（create_termフック）
• 編集画面で「更新」ボタンを押した時（edited_termフック）

カスタムフィールドの入力値は$_POST[$slug]で取得することができます。この値をupdate_term_meta(カテゴリーID, スラッグ, カスタムフィールド入力値)を実行してデータベースに登録します。一方で、カスタムフィールドが空の場合は、データベースに登録した値も空にする必要があるためdelete_term_meta(カテゴリーID, スラッグ)を実行して値を削除しています。

function save_term_cf( $term_id ) {
  global $custom_field;
  $slug = $custom_field[ 'slug' ];
  $val = $_POST[ $slug ];
  if ( !empty( $_POST[ $slug ] ) ) {
    update_term_meta( $term_id, $slug, $val );
  } else {
    delete_term_meta( $term_id, $slug );
  }
};
add_action ( 'create_term', 'save_term_cf' );
add_action ( 'edited_term', 'save_term_cf' );

その16. 一般設定に独自の入力フィールドを追加する

設定の一般ページに上図の「アクセス解析タグ」のように独自の入力項目を追加します。まずはソースコード全文です。functions.phpに記述します。

// 入力フィールドを設定＞一般に表示する処理
function add_general_custom_field() {
  add_settings_field(
    'analytics_tags', // 
    'アクセス解析タグ', // 追加する項目のタイトル
    'display_option_field', // コールバック関数
    'general' // 追加する項目を表示するページ
  );
  register_setting( 'general', 'analytics_tags' );
}
add_filter( 'admin_init', 'add_general_custom_field' );

// 入力フィールドのHTML出力処理
function display_option_field() {
  echo '<textarea name="analytics_tags" rows="5" style="width:100%; max-width:600px;">';
  echo esc_html( get_option( 'analytics_tags' ) );
  echo '</textarea>';
  echo '<p class="description">&lt;/head&gt;の直前に挿入するタグを記述します。</p>';
}

具体的な処理の流れですが、まず管理画面表示時に実行されるadmin_initフックを利用し、add_general_custom_field()を実行します。最初のadd_settings_field()は設定＞一般ページに「アクセス解析タグ」フィールドを表示する処理です。第3引数でdisplay_option_field()を実行するように指定します。その他の引数はコメントのとおりです。

コールバックで実行されたdisplay_option_field()では「アクセス解析タグ」フィールドのHTMLを定義します。ここに定義するHTMLは以下の赤枠のエリアに表示されるものです。左側のラベルなどは前出のadd_settings_field()の引数で指定したものが表示されるので<input>や<textarea>など最低限の入力UIだけを書きます。今回は「アクセス解析タグ」の説明文も下に表示したいので「description」クラスをつけた<p>も記述しています。

最後にregister_setting()で「アクセス解析タグ」フィールドを登録しています。WordPressに「設定＞一般に"analytics_tags"というフィールドが追加になったから一緒に保存してね」と通達するイメージが近いかと思います。

その17. プロフィールに独自の入力フィールドを追加する

functions.phpにコードを記載することで、ユーザーのプロフィール編集画面にオリジナルの入力フィールドを追加できます。ここではTwitterのプロフィールページURLを入力するフィールドを例に説明します。まずは以下のコード全文をご覧ください。

// 1. どのユーザーのプロフィールを編集するのかIDを特定する
parse_str( $_SERVER['QUERY_STRING'], $str );
$user_id = !empty( $str[ 'user_id' ] ) ? intval( $str[ 'user_id' ] ) : wp_get_current_user()->ID;

// 2. 「あなたについて」の末尾に入力フィールドを追加する
function add_twitter_url_field( $bool ) {
  global $user_id;
  $registered_twitter_url = get_user_meta( $user_id, 'twitter_url' )[0] ?? '';
  echo '<tr>
    <th>Twitter URL hoge</th>
    <td>
      <input
        type="text"
        name="twitter_url"
        id="twitter_url"
        placeholder="例）https://twitter.com/user_id"
        class="regular-text"
        value="' . $registered_twitter_url . '"
      >
    </td>
  </tr>';
  return $bool;
}
add_action( 'show_password_fields', 'add_twitter_url_field' );

// 3. 「プロフィールを更新」ボタンを押したらデータベースを更新する
function update_profile() {
  global $user_id;
  if ( current_user_can( 'edit_user', $user_id ) ) {
    update_user_meta( $user_id, 'twitter_url', $_POST[ 'twitter_url' ] );
  }
}
// 他人のプロフィール更新を行った場合.
add_action( 'edit_user_profile_update', 'update_profile' );
// 自分のプロフィール更新を行った場合.
add_action( 'personal_options_update', 'update_profile' );

実装は以下の3ステップに分けて説明します。

1. どのユーザーのプロフィールを編集するのかIDを特定する
2. 「あなたについて」の末尾に入力フィールドを追加する
3. 「プロフィールを更新」ボタンを押したらデータベースを更新する

a. どのユーザーのプロフィールを編集するのかIDを特定する

入力したTwitterのURLはユーザーIDに紐づけてDBに登録するので、どのユーザーなのかIDを特定します。$strはプロフィール画面のURLのパラメータを連想配列にしたものですが、ログインしているユーザーが他のユーザーのプロフィール画面にアクセスしている際のURLの末尾は/wp-admin/user-edit.php?user_id=2&wp_http_referer=%2Fsample%2Fwp-admin%2Fusers.phpというような形で、$strに「user_id」というキーが存在するのでこの値をユーザーIDとして利用します。

一方でログインユーザー自身のプロフィール画面のURLパラメータには「user_id」が存在しないのでwp_get_current_user()関数で自分自身のユーザーIDを取得し利用します。

b. 「あなたについて」の末尾に入力フィールドを追加する

表示したいHTMLを定義していきましょう。show_password_fieldsというフックを利用することでプロフィール編集画面の「あなたについて」のセクションの<table>の末尾にHTMLを挿入できます。プロフィール画面の<table>の書式に合わせて<input>には.regular-textというクラスを付与し、<tr>～</tr>を定義しています。この際、既にTwitterのURLが登録済みの場合も考慮しなければならないので、get_user_meta()に先ほど取得した$user_idと「twitter_url」というキーを渡し、登録済みURLを$registered_twitter_urlに代入します。未登録の場合は空とします。

c. 「プロフィールを更新」ボタンを押したらデータベースを更新する

最後に「保存されたらデータベースを更新する」処理をupdate_profile()という関数に定義していきます。この関数は2つのフックに引っ掛けて実行されるようにします。どちらもプロフィール画面末尾の「プロフィールを更新」をクリックすると発火するフックですが、edit_user_profile_updateはログインしているユーザーとは違うユーザーのプロフィールを更新した時、personal_options_updateはログインしているユーザー自身のプロフィールを更新した時、というように場面によって異なるフックが発火します。このため両方から同じ関数が実行されるようにしておきます。

肝心のデータベース更新まわりの処理は単純で、update_user_meta()という関数に更新対象となるユーザーのID、キー名、保存する値（ここではTwitter URLの入力フィールドの値）の3つを渡して実行するだけです。初めて登録する場合は指定したキーに該当する格納先がありませんが、自動で作成してくれます。また、if文で囲っていますが、これは更新を実行したログイン中のユーザーがプロフィールを更新する権限がある（管理者権限か）場合にのみ更新実行できるように限定しているというものです。

その18. サイトのグロナビを管理画面で編集できるようにする

サイトのヘッダーに表示するグローバルナビゲーションのリンク先やラベルを管理画面で変更できたら便利だと思いませんか？実はWordPressには管理画面で編集できるように機能として用意されています。手順もそんなに複雑ではありません。次の3ステップで実装できます。

1. register_nav_menus()でグロナビの格納先を用意する
2. PHPの出力したい箇所でwp_nav_menu()で呼び出す
3. WordPress管理画面でグロナビを登録する

a. register_nav_menus()でグロナビの格納先を用意する

管理画面でグロナビを作成する前に、作ったグロナビを表示する準備をします。以下のようにテーマ適用後のフックにかけて関数を実行する処理をfunctions.phpに記述します。引数として連想配列を指定します。

function setup_menu() {
  register_nav_menus(
    array(
      'header_menu' => 'ヘッダー'
    )
  );
}
add_action( 'after_setup_theme', 'setup_menu' );

b. PHPの出力したい箇所でwp_nav_menu()で呼び出す

header.phpなどのグロナビを出力したい箇所でwp_nav_menu()関数を記述します。

wp_nav_menu(
  array(
    'menu_class' => 'l-header__link', // <ul>に付与するクラス
    'container' => false, // <ul>を囲う親要素のタグ
    'depth' => 1, // 表示する階層構造の深さ
    'theme_location' => 'header_menu' // メニューを表示する位置の名前
  )
);

ここで注意が必要なのが、wp_nav_menu()を実行したところに出力されるのはWordPress側で生成したHTMLだという点です。以下のような形式のHTMLが出力されます。

<ul id="menu-{メニュー名}" class="{menu_classのクラス名}">
  <li id="menu-item-***" class="menu-item ...">
    <a href="#">リンク</a>
  </li>
  ...
</ul>

このようにul > li > aという構造で関数を実行した位置に書き出されます。ただ、親要素にクラス名を付与したり、<div>などで括ったりできるので、それに合わせて後からCSSを記述する形になります。

wp_nav_menu()の引数には連想配列を指定しますが、よく使う値を以下に抜粋して載せておきます。

menu_class	出力される<ul>に付与するクラス名。
menu_id	出力される<ul>に付与するid。
container	<ul>を囲う親要素を<div>か<nav>で指定できる。不要な場合はfalseを指定する。
container_class	<ul>を囲う親要素に付与するクラス名。
depth	メニューが階層構造の場合に表示する階層の深さを指定できる。0=全階層、1=親メニューのみ。
theme_location	register_nav_menus()で登録したメニューを表示する位置の名前。どこに表示するか指定できる。

c. WordPress管理画面でグロナビを登録する

WordPressの管理画面の外観＞メニューでグロナビを登録します。メニュー名とメニューの位置を以下のように設定して「メニューを作成」をクリックします。メニュー名はHTMLに出力される<ul>にidとして指定されるので、日本語で入力してしまうとパーセントエンコードされてしまいます。気になる方は半角英数字で入力しましょう。

次にグロナビに表示するリンクを設定します。以下のように固定ページ、投稿（カスタム投稿含む）、カテゴリーの各種ページへのリンクを設定できるほかに、URLとラベルを直接指定できるカスタムリンクなどもあるので、目的に合わせて設定してください。「メニューに追加」をクリックすると右側に追加されます。

また、管理画面上部の表示オプションでチェックを入れると以下の設定項目が出現します。

• リンクターゲット
• タイトル属性
• CSSクラス
• 自分とリンク先の関係/間柄（XFN）
• 説明

わかりにくいですが、「リンクを新しいタブで開く」はよく使う設定なので表示しておきましょう。また、リンクを新しいタブで開くようにすると<a>タグにtarget="_blank"が付与されるので、この属性がついたら別ウィンドウアイコンが表示されるようにCSSでスタイルを当てておくと良いでしょう。

さいごに

いかがでしたでしょうか。私自身、ここで紹介したすべての実装を毎回しているわけではなく必要に応じて取捨選択しています。紹介したカスタマイズはものによっては実装コストがかかるので「管理画面で特に使いやすくしたいところはどこか？」という視点をもって注力するところを絞るのが良いと思います。実装しているとユーザー視点に立って使いやすいかを考えるのが難しくなりますが、この記事が少しでも助けになれば嬉しい限りです。