WordPressで更新者が少しでも使いやすい・更新しやすいと感じてくれる管理画面をつくるヒントやカスタマイズ

WordPressで更新者が少しでも使いやすい・更新しやすいと感じてくれる管理画面をつくるヒントやカスタマイズ

個人的に普段から対応することが多いものを中心に、更新者(クライアント)が少しでも使いやすい・更新しやすいと感じてくれるようなWordPressの管理画面をつくるためのヒントやカスタマイズを紹介します。
サイト構成や更新者のスキルなどにもよると思うので全部が全部やるべきということでもないですが、紹介しているものをいくつか組み合わせるだけで不要なものはすべて取り除いたシンプルな管理画面にできたり、少し手を加えるだけでもデフォルトに比べて大幅に使いやすくすることも可能です。

WordPressで更新者が少しでも使いやすい・更新しやすいと感じてくれる管理画面をつくるヒントやカスタマイズ 目次

  1. 管理画面に任意のCSSやJavaScriptを適用する
  2. 不要な項目やメニューを非表示に
  3. メニューを追加する
  4. 注釈を入れる
  5. わかりやすい文言に変更する
  6. 入力漏れ・設定漏れを防ぐ
  7. エディタをカスタマイズしたり、クイックタグ・ショートコードを活用する
  8. カスタムフィールドを活用する
  9. マニュアルを設置する
  10. プラグインを利用する

1. 管理画面に任意のCSSやJavaScriptを適用する

CSSであればフロントのデザインに近い感じで管理画面を装飾したりデフォルトのレイアウトを使いやすい形に調整するなど、JavaScript(以下:JS)であればデフォルトにはない動きをちょっと付けたり逆にデフォルトで実装されている動きを無効化するといったように、管理画面をカスタマイズするのであれば任意のCSSとJSを適用させておくと何かと便利です。

管理画面に任意のCSSとJSを適用させたい場合は、テーマ内のfunctions.phpにそれぞれ下記のように記述することで実装できます。

functions.php

add_action( 'admin_enqueue_scripts', 'enqueue_admin_style_script' );
function enqueue_admin_style_script() {
  // CSS
  wp_enqueue_style( 'admin-style', get_template_directory_uri() . '/admin/style.css' );
  // JavaScript
  wp_enqueue_script( 'admin-script', get_template_directory_uri() . '/admin/script.js', array(), '1.0.0', true );
}

上記はCSSがテーマ内の/admin内にあるstyle.cssを、JSがテーマ内の/admin内にあるscript.jsを読むというものになるので、ディレクトリやファイル名、各種パラメータなどについては環境に合わせて変更してください。
また、この場合は管理画面の全ページで追加したCSSとJSが読み込まれますが、条件分岐やhook_suffixを用いたり、あとはCSSやJSを記述する際に管理画面のbodyに指定されているclassを上手く利用する形で記述するようにすれば、特定のページのみ読み込ませたい(スタイルやスクリプトを適用させたい)といったことが可能です。

目次へ

2. 不要な項目やメニューを非表示に

例えば...

  • 更新部分はカスタム投稿で実装されているのでデフォルトで用意されている「投稿」は使わない。
  • コメント投稿できないサイトなので「コメント」は必要ない。
  • アドレスやパーマリンクなど、基本的に更新者は触ることがない・触ってほしくない設定。
  • 全体的に無駄なものを省いてシンプルな見栄えにしたい。

といったように、更新者またはそのサイトにとっては不要だと思う項目やメニューを非表示にしていくことで管理画面をスッキリさせることができ、やろうと思えばコンテンツの更新ページへのメニューのみ表示させて、更新者が迷うことなく容易に目的のページへ辿り着けるシンプルな管理画面にするということも可能です。
また、上でも例にあげたように、権限的に表示されてしまうけどできれば触ってほしくない項目などがあればそれらも非表示にしておくことで、予期せぬ動作になってしまったり最悪サイトが表示されないといったリスクも減らすことができると思います。

ここでは個人的に利用する機会が多いものとして、メニュー・投稿画面のメタボックス・投稿一覧の項目をいずれもfunctions.phpを使って非表示にする方法を紹介します。

メニューを非表示に

ダッシュボードや投稿といった管理画面でデフォルトで表示されているメニューを非表示にしたい場合は、下記をfunctions.phpに記述します。
このコードの場合はすべてを非表示にするものなので、非表示にする必要のないメニューはコードから削除すれば表示されるようになります。

functions.php

add_action( 'admin_menu', 'remove_admin_menu', 999 );
function remove_admin_menu() {
  remove_menu_page( 'index.php' );                // ダッシュボード
  remove_menu_page( 'edit.php' );                 // 投稿
  remove_menu_page( 'upload.php' );               // メディア
  remove_menu_page( 'edit.php?post_type=page' );  // 固定ページ
  remove_menu_page( 'edit-comments.php' );        // コメント
  remove_menu_page( 'themes.php' );               // 外観
  remove_menu_page( 'plugins.php' );              // プラグイン
  remove_menu_page( 'users.php' );                // ユーザー
  remove_menu_page( 'tools.php' );                // ツール
  remove_menu_page( 'options-general.php' );      // 設定
}

親となるメニューは残してサブメニューのみ表示したいときはremove_submenu_page()を利用することで非表示にできます。
例えば、下記は「外観 > テーマの編集」「プラグイン > プラグイン編集」「設定 > パーマリンク設定」の3つのサブメニューを非表示にしたものになります。

functions.php

add_action( 'admin_menu', 'remove_admin_submenu', 999 );
function remove_admin_submenu() {
  // 「外観 > テーマの編集」を非表示
  remove_submenu_page( 'themes.php', 'theme-editor.php' );
  // 「プラグイン > プラグイン編集」を非表示
  remove_submenu_page( 'plugins.php', 'plugin-editor.php' );
  // 「設定 > パーマリンク設定」を非表示
  remove_submenu_page( 'options-general.php', 'options-permalink.php' );
}

また、デフォルトのメニューだけでなくテーマやプラグインによって追加されたメニューについても同じようにして非表示にできます。
以下エントリーで個人的によく利用されている印象のプラグインの各種メニューを非表示にする方法を紹介しているので、プラグインのメニューを非表示にしたい場合は参考にしてみてください。

投稿・固定ページのメタボックスを非表示に

カスタム投稿の場合は作成時にsupportsで必要なものだけ指定すれば不要なメタボックスができることはないと思いますが、デフォルトで用意されている投稿・固定ページのメタボックスを非表示にする場合は、remove_meta_box()を使用してfunctions.phpに下記のように記述していきます。
ここでは例として投稿・固定ページそれぞれから「カスタムフィールド」と「ディスカッション」を非表示にしたコードで、メタボックスを非表示にするのに加えて表示オプションからも削除することができます。

functions.php

// 投稿
add_action( 'admin_menu', 'remove_default_post_screen_metaboxes', 999 );
function remove_default_post_screen_metaboxes() {
  // カスタムフィールドを非表示
  remove_meta_box( 'postcustom', 'post', 'normal' );
  // ディスカッションを非表示
  remove_meta_box( 'commentstatusdiv', 'post', 'normal' );
}

// 固定ページ
add_action( 'admin_menu', 'remove_default_page_screen_metaboxes', 999 );
function remove_default_page_screen_metaboxes() {
  // カスタムフィールドを非表示
  remove_meta_box( 'postcustom', 'page', 'normal' );
  // ディスカッションを非表示
  remove_meta_box( 'commentstatusdiv', 'page', 'normal' );
}

remove_meta_box()を使用する際は、第1パラメータに非表示にしたいメタボックスのidを、第2パラメータにそのメタボックスが表示されているスクリーンタイプを指定し、このコードの場合は投稿と固定ページに適用させたいので、それぞれpostpageを指定しています。

その他のメタボックスを非表示にする方法については以下で紹介しているので参考にしてみてください。

投稿一覧から不要な項目を非表示に

例えばデフォルトの投稿一覧ではコメント数を表すカラムがありますが、フロントでコメント機能を利用していない場合はここは表示する必要がありません。
このように投稿一覧から不要な項目を非表示にしたい場合は下記をfunctions.phpに記述します。
下記は例として投稿一覧から「タグ」と「コメント」の項目を非表示にしたものになります。

functions.php

add_filter( 'manage_posts_columns', 'custom_posts_columns' );
function custom_posts_columns( $columns ) {
  unset( $columns['tags'] );      // タグ
  unset( $columns['comments'] );  // コメント
  return $columns;
}

ここでは投稿一覧が対象なのでフックをmanage_posts_columnsとしていますが、これを固定ページ対象にしたい場合はmanage_pages_columnsを使えば、固定ページでも同じように項目を非表示にできます。

その他の項目を非表示にする方法については以下で紹介しているので参考にしてみてください。

いくつか紹介してきましたが、このようにフックを利用することでデフォルトで表示されている項目やメニューを簡単に非表示にすることが可能で、ここで紹介していない部分についても調べてみればいろいろと出てくると思います。

ちなみに、ここで紹介したコードをそのまま使用した場合は全ユーザーに対して適用されるものですが、管理者には適用したくないとか特定の権限のみに適用したいという場合は、current_user_can()を使うなど条件を付けて実行される形にすれば実装可能です。

目次へ

3. メニューやボタンを追加する

先ほどとは逆に、デフォルトではないものを新たに追加することによって管理画面を使いやすくします。
ここでは頻繁に確認したり更新するページに容易に辿り着けるようにするメニューやボタンを追加する実装方法を3パターン紹介します。

新たにメニューを追加する

新たにメニューを追加する

新たにメニューを追加する方法で、イメージのように固定ページのサブメニューを追加してみます。
デフォルトの固定ページ部分のサブメニューは「固定ページ一覧」と「新規追加」の2つが表示されており、作成済みのページを編集したい場合は「固定ページ一覧に移動 → 編集したいページに移動」という流れになると思いますが、それをfunctions.phpに下記のように記述してサブメニューとして各固定ページの編集画面へのリンクを追加して、そこから直接目的のページの編集画面に飛べる形にします。

functions.php

add_action( 'admin_menu', 'add_pages_sub_menu' );
function add_pages_sub_menu() {
  $pages = get_pages();
  foreach( $pages as $page ) {
    add_pages_page( '', $page->post_title, 'manage_options', 'post.php?post=' . $page->ID . '&action=edit' );
  }
}

add_filter( 'parent_file', 'set_current_menu' );
function set_current_menu( $parent_file ) {
  global $submenu_file, $current_screen, $pagenow, $action, $post;
  $page_IDs = [];
  $pages = get_pages();
  foreach( $pages as $page ) {
    $page_IDs[] = $page->ID;
  }

  $post_type = $current_screen->post_type;
  if ( $pagenow == 'post.php' && $post_type == 'page' && $action == 'edit' && in_array( $post->ID, $page_IDs ) ) {
    $pageFlag = true;
    $submenu_file = 'post.php?post=' . $post->ID . '&action=edit';
    $parent_file = 'edit.php?post_type=page';
  }
  return $parent_file;
}

まず、コード上部のadmin_menuでサブメニューを追加します。
今回は固定ページのサブメニューを追加したいのでadd_pages_page()を使用しており、このサンプルコードのようにforeachを使って記述すれば今後ページが追加された場合も自動的に追加されます。
(追加されるのは公開済みページのみで、下書き状態や非公開のものは追加されません。)
全ページ追加ではなく特定のページのみの場合は、例えばそれ用の配列を用意して出力するとか、あとは単純にforeachを使わず追加したいメニュー分だけadd_pages_page()を記述するのでも実装できます。

コード下部のparent_fileは、追加したサブメニューにカレント処理を適用させる記述となります。
デフォルトではどの固定ページを編集していた場合でも「固定ページ一覧」がカレント表示になっていますが、こちらを記述することで現在編集中のページメニューがカレント表示される形になります。
デフォルトの動きでも特別気になるというわけでもないですが、これによって更新者が現在どのページを編集しているのかがメニューを見ても判断できるようになります。

今回は固定ページにサブメニューを追加する形で紹介しましたが、他のメニューのサブメニューとして追加したり、親メニューとして追加するということももちろん可能で、その場合は以下でメニュー追加についていろいろと確認できます。

アドミンバーにメニューを追加する

アドミンバーにメニューを追加する

こちらはアドミンバーに固定ページの編集画面に飛ぶサブメニューを追加するというもので、実装後は上のイメージのようになります。
実装にはfunctions.phpに下記のように記述し、最初の$wp_admin_bar->add_menu()でまず親となるメニューを作成し、その後サブメニューとして登録したいものを記述します。
サブメニューを登録する際は、parentに親メニューのidを指定すればサブメニューとして登録されます。

functions.php

add_action( 'wp_before_admin_bar_render', 'add_custom_page_edit_in_admin_bar' );
function add_custom_page_edit_in_admin_bar() {
  global $wp_admin_bar;
  $wp_admin_bar->add_menu(array(
    'id'    => 'custom-page-edit',
    'title' => 'ページ編集'
  ));
  $wp_admin_bar->add_menu(array(
    'parent' => 'custom-page-edit',
    'id'     => 'custom-page-edit-sub01',
    'title'  => 'Xページ',
    'href'   => 'post.php?post=10&action=edit'
  ));
  $wp_admin_bar->add_menu(array(
    'parent' => 'custom-page-edit',
    'id'     => 'custom-page-edit-sub02',
    'title'  => 'Yページ',
    'href'   => 'post.php?post=20&action=edit'
  ));
  $wp_admin_bar->add_menu(array(
    'parent' => 'custom-page-edit',
    'id'     => 'custom-page-edit-sub03',
    'title'  => 'Zページ',
    'href'   => 'post.php?post=30&action=edit'
  ));
}

ダッシュボードに各更新ページへのリンクボタンを設置する

ダッシュボードに各更新ページへのリンクボタンを設置する

ログイン後最初に表示されるダッシュボードに頻繁に確認するページや更新するページへすぐ飛べるボタンを設置するというものです。
ダッシュボードに何か追加する際にはwp_add_dashboard_widget()を使用してウィジェットで追加することも多いですが、ここではウェルカムパネルを利用する形で実装して上のイメージのような見栄えにしてみます。

実装にはfunctions.phpに下記のように記述し、この場合は2つの投稿タイプの一覧ページと新規追加ページにそれぞれ飛ぶボタンと3つの固定ページの編集ページに飛ぶボタンを設置するものになります。

functions.php

remove_action( 'welcome_panel', 'wp_welcome_panel' );
add_action( 'welcome_panel', 'add_links_welcome_panel' );
function add_links_welcome_panel() {
?>
  <h2>各種投稿</h2>
  <ul>
    <li><a href="edit.php?post_type=foo">投稿A 記事一覧</a></li>
    <li><a href="post-new.php?post_type=foo">投稿A 新規追加</a></li>
    <li><a href="edit.php?post_type=bar">投稿B 記事一覧</a></li>
    <li><a href="post-new.php?post_type=bar">投稿B 新規追加</a></li>
  </ul>
  <h2>下層ページ</h2>
  <ul>
    <li><a href="post.php?post=10&action=edit">Xページ 編集</a></li>
    <li><a href="post.php?post=20&action=edit">Yページ 編集</a></li>
    <li><a href="post.php?post=30&action=edit">Zページ 編集</a></li>
  </ul>
<?php
}

まず、welcome_panelに対してremove_action()を行ってデフォルトで表示されている「WordPress へようこそ !」などのコンテンツを飛ばし、次に同じくwelcome_panelに対してadd_action()を行って任意のコンテンツを表示させます。
カスタム投稿の各ページや固定ページにリンク指定についてはサンプルコードにあるような形で指定をし、それぞれハイライト表示してある部分を任意の投稿タイプ名やページIDに変更してください。
あとは、CSSで見栄えを調整すれば上の実装イメージのような形でダッシュボード上部にリンクボタンを設置することができます。
実装イメージと同じような見栄えにしたい場合は、下記エントリーで具体的なコードやCSSの記述を紹介しているので参考にしてください。

また、今回はウェルカムパネルをカスタマイズする形でしたが、ウィジェットとして実装する場合は上でも少し触れたようにwp_add_dashboard_widget()を使えば任意のウィジェットを追加することができ、追加方法なども含めて詳細は以下で確認できます。

目次へ

4. 注釈を入れる

もちろんそのようなものがなくてもわかりやすくなっていることが望ましいですが、この入力欄は具体的にどのようなものを入れる場所なのかの説明や注意点を書いておいたり、更新者がわかりづらいと思うような箇所に注釈を入れておくことで、スムーズに更新を行う手助けをします。
ここでは注釈を入れる方法として2通りの実装方法を紹介します。

フックを利用する

フックを利用することで特定の箇所に注釈を挿入することができます。
下記はいずれも投稿画面に注釈を入れるというもので、上から「投稿画面上部」「タイトル下」「パーマリンク下」「エディタ下」「投稿画面下部」にそれぞれテキストを表示させています。

functions.php

add_action( 'edit_form_top', 'before_form_content' );
function before_form_content() {
  echo '<p>投稿画面上部に表示されます。</p>';
}

add_action( 'edit_form_before_permalink', 'before_permalink_content' );
function before_permalink_content() {
  echo '<p>タイトル下(パーマリンク上)に表示されます。</p>';
}

add_action( 'edit_form_after_title', 'after_title_content' );
function after_title_content() {
  echo '<p>パーマリンク下に表示されます。</p>';
}

add_action( 'edit_form_after_editor', 'after_editor_content' );
function after_editor_content() {
  echo '<p>エディタ下に表示されます。</p>';
}

add_action( 'dbx_post_sidebar', 'after_form_content' );
function after_form_content() {
  echo '<p>投稿画面下部に表示されます。</p>';
}

コードにあるようにテキストを入れるだけでなく任意のHTMLを挿入することも可能なので、CSSで装飾なども行えば様々な見せ方も可能です。

JavaScriptを利用する

少し無理やり感もありますが、上記のようなフックが用意されていない場合やどのフックを利用するのかがわからない部分にはJavaScriptを利用する方法もあり、特定の箇所に新たに注釈を挿入する他、デフォルトで用意されているテキストや要素を差し替えるということも容易にできます。

下記は例として「投稿」の記事投稿画面に対して行ったもので、画面上部にテキストを加えるのと抜粋の入力欄下にある要素を差し替えるというものになります。
ここでは実装にjQueryを用いており、「1. 管理画面に任意のCSSやJavaScriptを適用する」で紹介した方法で任意のJSを読み込む形にして、そこに下記を記述すればそれぞれ変更されているのを確認できます。

jQuery

(function($) {
  // 投稿画面上部にテキストを表示させる
  $('body.post-type-post #post').before('<p>投稿画面上部に表示されます。</p>');
  // 抜粋下にある要素を差し替える
  $('body.post-type-post #postexcerpt .inside p').replaceWith('<div>抜粋部分のHTMLを任意のものに差し替える。</div>');
})(jQuery);

目次へ

5. わかりやすい文言に変更する

例えばアイキャッチ・メディア・パーマリンクなど、特に普段からWordPressを触っている人であればそれぞれどのようなものなのかは理解できますが、更新者によってはこれらの呼び方にピンとこない人もいます。
それをfunctions.phpを使って、そういった人でもすぐわかるような文言に変更してみます。

functions.php

add_filter( 'gettext', 'custom_gettext_translation' );
function custom_gettext_translation( $translation ) {
  $translation = str_ireplace( 'メディア', '画像', $translation );
  $translation = str_ireplace( 'パーマリンク:', '記事URL:', $translation );
  $translation = str_ireplace( '固定ページ', '下層ページ', $translation );
  return $translation;
}

add_filter( 'gettext_with_context', 'custom_gettext_with_context_translation' );
function custom_gettext_with_context_translation( $translation ) {
  $translation = str_ireplace( 'アイキャッチ', 'サムネイル', $translation );
  $translation = str_ireplace( '固定ページ', '下層ページ', $translation );
  return $translation;
}

上のサンプルコードは、それぞれ下記の文言を差し替えものになります。

  • メディア → 画像
  • パーマリンク: → 記事URL: (記事投稿画面のタイトル下)
  • アイキャッチ → サムネイル
  • 固定ページ → 下層ページ

ちなみに、パッと見は同じ文言が使用されているのに一部変更されていない箇所があるときは、このサンプルコードで「固定ページ → 下層ページ」の変更をかけているように2つのフックに対して指定をします。
これは場所によって異なる翻訳が使われている場合があり、それらはフックも異なっているのでこのようにそれぞれのフックで指定します。

目次へ

6. 入力漏れ・設定漏れを防ぐ

記事投稿時に更新者が入力漏れや設定漏れを起こさない・起こしにくいようにしたいときに使えるちょっとしたカスタマイズです。

1カラム表示にする

デフォルトの投稿画面(PCなどのウィンドウサイズが広いとき)は、左側にタイトルや本文が、右側にカテゴリーや公開ボタンといった感じで2カラムになっています。
2カラムにすることで投稿画面をコンパクトに表示させることはできますが、入力漏れ・設定漏れを防ぐひとつの方法として1カラムに表示にするというものがあります。

functions.php

add_filter( 'get_user_option_screen_layout_post', 'one_columns_screen_layout' );
function one_columns_screen_layout() {
  return 1;
}

上記をfunctions.phpに記述すると「投稿」の投稿画面が1カラム表示になるので、あとはボックスの並びを少し変更して公開ボタンなどが表示されているボックスを一番下に配置する形にすれば、上から順番に入力・選択していき、最後に公開ボタンを押すという流れをつくることができます。
このサンプルコードの場合は「投稿」に対してのものですが、固定ページやカスタム投稿に適用したい場合は、コードでハイライト表示している部分をpageや投稿タイプ名に変更すれば、その他の投稿タイプにも適用できます。

必須項目を設定する

より確実に入力漏れ・設定漏れを防ぎたい場合は、投稿画面に必須入力項目を設定しておき、未入力または未選択だった場合はアラート表示させるという方法が使えます。
正確には動きが異なるものではありますが、この実装方法については過去にfunctions.phpを使う方法とプラグインを用いる方法とでそれぞれ紹介しているので、こちらを参考にしてみてください。

目次へ

7. エディタをカスタマイズしたり、クイックタグ・ショートコードを活用する

エディタをカスタマイズする

コンテンツ作成時にほとんどの場合はエディタを利用すると思いますが、デフォルトのエディタはお世辞にも使いやすいとは言えません...。
ただ、例えば任意のCSSを適用させてエディタ内をフロントの見栄えと同じようにしたり、不要なボタンを消してシンプルな見栄えにしたり、逆にデフォルトで用意されていないボタンを追加して記事作成の効率をあげたりなど様々なカスタマイズを行うことも可能なので、それによって更新者に少しでも使いやすいと感じてもらえるエディタにすることができます。
ビジュアルエディタのカスタマイズについては下記エントリーでいくつか紹介しているので、こちらを参考にしてみてください。

クイックタグを活用する

エディタをビジュアルモードのみ使用するなら不要ですが、テキストモードで使用することもあるのであればクイックタグを活用することで記事作成の時短に繋げることができます。
多数のHTMLを書かなくてはいけないようなものを予め登録しておけば特定のボタンをクリックするだけで簡単にそれらが挿入できるようにできますし、編集すべき箇所を明示して登録しておけば基本的にHTMLが書けないという人にも扱えるようにできます。
クイックタグはQTags.addButton()を利用すれば簡単に登録でき、デフォルトで用意されているクイックタグの詳細とあわせて、詳しくは下記で確認することができます。

また、もっと手軽に登録を行いたい場合は「AddQuicktag」というプラグインが便利です。

ショートコードを活用する

クイックタグと同様にショートコードを活用することでも記事作成の時短に繋げることができ、複雑なHTMLなどを簡単に呼び出すのはもちろん、テンプレートやプログラムなどを呼び出すこともできます。
使い方も使用したい箇所に[myshortcode]のような形で記述するだけで設定したものが呼び出されると簡単で、さらに基本的に同じショートコードでも例えば[myshortcode foo="xxx" bar="yyy" baz="zzz"]のように属性の付け方によって動作を異なるものにすることも可能です。

ショートコードを覚えなくてはいけないというのはありますが、例えば上で紹介したクイックタグと組み合わせて「このボタンがクリックされたらこのショートコードを呼び出す」という形にしておいたり、エディタの上にどのようなショートコードを使えるかを一覧化しておくと忘れてしまった場合も容易に使用・確認できると思います。
ショートコードの詳細については下記で確認することができます。

また、エディタにショートコードを簡単に挿入できるようにするボタンを設置する方法については下記エントリーで紹介しているので、興味ある方はこちらを参考にしてみてください。

目次へ

8. カスタムフィールドを活用する

特に更新者がHTML・CSSの知識がないという場合やエディタだけでは再現が難しい・面倒というレイアウトの実装をカスタムフィールドを活用して実装しておく方法があります。
上で紹介したクイックタグやショートコードでサポートしながらエディタで頑張る手もありますが、予め入力する項目をわかりやすく設置しておいてそれぞれ設定・入力するだけの状態にしておけば、更新者がただ項目を埋めていくだけで目的のレイアウトを表示することができて楽ですし、余計なHTMLやCSSが入ってレイアウトが崩れるなどのリスク軽減にも繋がります。

言葉だけだとピンとこないという人もいると思うので、以下で簡単にですがカスタムフィールドを活用した使用例を紹介します。

例1:画像とテキストの横並びレイアウト

例えば以下イメージのようにフロントでは画像とテキストが横並びになっているものが複数並ぶレイアウトだったとします。

カスタムフィールドを活用例 #1 - フロント

これをカスタムフィールドを利用して見栄えを整えることで、記事投稿画面の一部を以下イメージのような表示にすることができます。

カスタムフィールドを活用例 #1 - 管理画面

フロントの見栄えと同じようにブロック左側で画像をアップしてブロック右側でテキストを入力できるような形にしておけば、あとは更新者がそれぞれの項目を埋めて保存するだけで簡単に先ほどのフロントイメージのような見栄えを実装することができる状態にできます。
また、このサンプルでは画像をアップする箇所にチェックボックスを設けて、単純にアップした場合は画像が左配置されるレイアウトになるのをここにチェックを入れるだけで画像が右配置になるようにしています。(チェックが入っていたらフロントで別途classを付与して、それを用いてCSSを調整)

例2:製品情報などのレイアウト

こちらはよくある製品情報を紹介しているページを想定したもので、以下イメージのようにフロントではスライドで複数枚の画像が表示されており、さらに紹介文などのテキストに加えより詳細な情報を掲載したテーブルなどがあるレイアウトだったとします。

カスタムフィールドを活用例 #2 - フロント

これをカスタムフィールドを利用して見栄えを整えることで、記事投稿画面の一部を以下イメージのような表示にすることができます。

カスタムフィールドを活用例 #2 - 管理画面

こちらもひとつ目の例と同様で更新者がそれぞれの項目を埋めて保存するだけで簡単に先ほどのフロントイメージのような見栄えを実装することができるようになっており、ブロック左側で画像をアップしてブロック右側でテキストなどを入力できるようなレイアウトでそれぞれ入力項目を配置し、画像と詳細情報を掲載する部分については任意の数だけアップ・掲載できるようにしています。

簡単に管理画面イメージを2パターン紹介しましたが、このようにカスタムフィールドを上手く利用することで更新者が少しでもわかりやすく且つ簡単に更新できると思ってくれるような管理画面にすることができますし、エディタのみで更新を行うのに比べて様々な見せ方が可能にもなります。
また、確実にこうすべきということでもないですが、上で紹介したイメージのようになるべく管理画面内の各項目の配置もフロントに近い形にすることで、HTMLやCSSの調整などで開発する側の手間は多少増えてはしまいますが、ただ項目が並べられているよりもそれぞれフロントで表示されるどの部分を更新する項目なのかがわかりやすいのではないかと個人的に思います。

カスタムフィールドはfunctions.phpを利用して実装することが可能ですが、プラグインを利用することで簡単に実装することができ、公式で配布されている有名なものだと以下のようなものがあります。
同じカスタムフィールド実装プラグインでも、全体的にシンプルな作りになっているとか自作しようと思ったら面倒な機能が予め付いているなどそれぞれ特徴も違うので、まだ使ったことがないという人はひと通り試して自分が使いやすいと思うものを見つけてみてください。

目次へ

9. マニュアルを設置する

上で紹介してきたようなカスタマイズを行っていくことでわかりやすく更新もしやすい管理画面に近づけることはできますが、例えばサイトの作りが複雑になっていたりすると人によっては管理画面を見ただけでは分からないというときもあります。
そのような場合は実際に目の前で操作しながらしっかり使い方や更新方法について説明して解決することもありますが、より理解してもらえるようにとかちょっと困ったときに手助けできる方法のひとつとして、管理画面内にマニュアルを設置しておくという方法もあります。
マニュアルを設置しておくことで更新者が困ったときもそのまま管理画面内で容易に使い方などを確認できますし、他にも後から更新に携わることになった人に使い方を教える際の助けにもなります。

ここではマニュアル設置方法として3通りの方法を紹介します。

マニュアルPDFを閲覧できるようにする

マニュアルメニューを追加

リンク先がPDFに設定されている「マニュアル」という項目を追加する方法で、例えば更新者にローカルファイルとしてマニュアルを渡すのであれば、同時にこれをやっておくことで管理画面内でもそれを閲覧する状態にしておくことができます。
実装後はイメージのような形で管理画面のメニューへ追加されます。

ここではテーマ内に/adminというディレクトリを作成し、その中に格納したmanual.pdfを閲覧させるというもので、functions.phpへ下記のように記述します。

functions.php

add_action( 'admin_menu', 'add_manual_menu' );
function add_manual_menu() {
  add_menu_page( '', 'マニュアル', 'manage_options', 'manual', '', 'dashicons-editor-help' );
}

add_action( 'admin_head', 'setting_manual_menu' );
function setting_manual_menu() {
?>
  <script>
    jQuery(function($) {
      $('.toplevel_page_manual').attr({
        href: '<?php echo get_theme_file_uri( 'admin/manual.pdf' ); ?>',
        target: '_blank'
      });
    });
  </script>
<?php
}

内容としてはまずメニュー自体をadd_menu_page()で追加してはいますが、その後jQueryを使って追加したメニューのリンク先をマニュアルのPDFに変更しつつ、さらに別ウィンドウで表示させるためにtarget="_blank"を追加しています。
jQueryのセレクタに指定するのはadd_menu_page()内の$menu_slugで指定したものによって変更され、どのような指定かわからない場合はデベロッパーツールなどで確認できます。
ちょっと無理矢理感ありますが上記記述後に管理画面を確認すると、マニュアルという項目がメニューに追加されており、クリックすれば別ウィンドウで指定したPDFが表示されます。

マニュアルページを作成

こちらはPDFではなくマニュアル用のページを管理画面内に作成して表示させるというもので、追加されたメニューの見栄えは上で紹介したものと同様です。
実装にはfunctions.phpへ下記のように記述し、ここではテーマ内に/adminというディレクトリを作成し、その中に格納したmanual.phpを表示させるというものになります。

functions.php

add_action( 'admin_menu', 'add_manual_menu' );
function add_manual_menu() {
  add_menu_page( '', 'マニュアル', 'manage_options', 'manual', 'include_manual_page', 'dashicons-editor-help' );
}

function include_manual_page() {
  get_template_part( 'admin/manual' );
}

add_action( 'admin_head', 'add_manual_menu_blank' );
function add_manual_menu_blank() {
?>
  <script>
    jQuery(function($) {
      $('.toplevel_page_manual').attr('target', '_blank');
    });
  </script>
<?php
}

やっていることはPDF追加時とほぼ同じで、こちらの場合はadd_menu_page()でメニューを追加する際に$functionも使ってマニュアルページで利用するPHPファイルを読み込む形にしており、その後別ウィンドウで表示させるためにjQueryでtarget="_blank"を追加しています。
上記記述後に管理画面を確認すると、マニュアルという項目がメニューに追加されており、クリックすれば別ウィンドウで指定したページの内容が表示されると思うので、あとは中身をしっかり作っていけばページとしてのマニュアルの完成になります。

プラグインでマニュアルを作成

「WP Help」使用イメージ

上2つはいずれもfunctions.phpを利用するものでしたが、もっと手軽に行いたい場合は「WP Help」というプラグインを使うことで簡単にマニュアルを作成することができます。
プラグインをインストール・有効化すると「投稿ヘルプ」という項目が追加される(項目名は変更可能)ので、そこから中身を編集したり閲覧したりすることができます。
表示する内容は新規投稿と同じような形でタイトルとエディタに内容を入れて保存することでマニュアル内の1ページとして追加され、作成したものは順番を並べ替えたり親子関係を持たすこともできます。

プラグインの詳細やダウンロードは以下より確認できます。

目次へ

10. プラグインを利用する

上で紹介してきたカスタマイズの多くはfunctions.phpを利用していましたが、WordPressには管理画面に関する便利なプラグインも沢山用意されており、それらを組み合わせることでより使いやすい・更新しやすい管理画面をつくることができます。
まだまだ他にもあるとは思いますが、個人的に普段からよく利用させてもらうものや便利だと思うプラグインを一部紹介します。

WP Admin UI Customize
用意されている項目に入力したりチェックしたりしていくだけで、管理画面内のメニューやウィジェットの名称変更や並び替え、各部分の不要項目を非表示などといったことが簡単にできるプラグインです。
また、それらを適用させる権限についても指定できるので、特定の権限のみカスタマイズした管理画面にするといったこともできます。
WP Admin UI
同じく管理画面やログイン画面の様々な部分を簡単に変更することができるプラグインです。
こちらのプラグインは翻訳がされていないので設定画面はすべて英語ではありますが、メニューの並び替えや名称変更、各部分の不要項目を非表示、デフォルトではない要素を追加するなど多数の項目が用意されており、それぞれの機能をどの権限に適用させるかも細かく設定できます。
Admin Menu Editor
その名の通り管理画面のメニューを任意にカスタマイズすることができるプラグインです。
メニューの追加・削除をはじめ、並び替え、名称変更、リンク先変更などが容易にできます。
上で紹介したプラグインでも可能でしたが、メニューだけ変更したいのであればこれで十分だと思います。
Dashboard Widgets Suite
ダッシュボードをカスタマイズしたいときに便利なプラグインです。
実際に利用してもらえれば分かりますが様々なものを表示させることが可能で、フロントで使用しているウィジェットを表示させたりすることもでき、表示する権限の選択なども可能です。
Admin Columns
投稿一覧や固定ページ一覧などの表示をカスタマイズできるプラグインです。
デフォルトで表示されているものの名称変更や並び替えをはじめ、新しく項目を追加したり不要なものを削除することができます。
TinyMCE Advanced
有効化するだけでエディタをパワーアップさせることができるプラグインで、デフォルトで配置されているボタンの並び替えや非表示設定、デフォルトで表示されていないボタンの追加などが容易にできます。
AddQuicktag
クイックタグを簡単に登録できるプラグインで、デフォルトで用意されているクイックタグを非表示にする機能も用意されています。
Duplicate Post
記事を複製することができるプラグインです。
単純に記事を複製はもちろんですが、例えばフォーマットとなるような記事を下書きなどで用意しておいて、それを複製したベースを使って新たな記事を書くみたいな使い方もできます。
Intuitive Custom Post Order
記事やタクソノミーの順番をドラッグ&ドロップで並べ替えることができるプラグインです。
基本的に記事の並びを自由に変更して表示させたいというサイトにピッタリです。

※何らかの理由で上手く機能しないときは同じような動作をする「Post Types Order」も試してみてください。

Category Order and Taxonomy Terms Order
カテゴリー(タクソノミー)の順番をドラッグ&ドロップで並べ替えることができるプラグインで、並べ替え可能な権限の設定なども可能です。

※何らかの理由で上手く機能しないときは同じような動作をする「Custom Taxonomy Order NE」も試してみてください。

Tabify Edit Screen
投稿画面の各項目を任意でタブ分けすることができるプラグインです。
項目が多すぎて長くなってしまった投稿画面をスッキリさせたいときに便利で、設定もドラッグ&ドロップだけと簡単ですし、タブ部分の名前で任意で指定できます。

目次へ


長々と紹介してきましたがこれらのカスタマイズ例もほんの一部で、このようにコアなどに手を入れずとも各種フックやプラグインを上手く組み合わせることで他にも様々なカスタマイズが可能ですし、少し手を加えてあげるだけでもグッと使いやすく・更新しやすい管理画面にすることができます。
特に普段からWordPressを触ってはいるものの管理画面については基本デフォルトのままという人で、少しでも更新が楽にできるようにしてあげたいとかフロントだけでなく管理画面もしっかり作ってあげたいというときに是非試してみてください。

Close the search window,
please press close button or esc key.