「WordPressの更新をお客様に任せたい」
「あまり知識のない人でもWordPressからお知らせ記事を簡単に作成できるようにしたい」
お客様のWEBサイトをWordPressで構築した後、日々の更新をお客様にお任せする場合にハードルとなるのが管理画面の操作です。管理画面を見慣れていないと、なかなか直感的な操作は難しいのですが、よくわからないからとお客様が更新をしなくなってしまうのも困りものです。
また、「どのメニューから記事の作成や修正ができるのかわからなくなってしまった」という問い合わせもできることなら減らしたいです。
そのような課題を解決するには、管理画面のカスタマイズ（＝デザイン）が有効です。
管理画面にデザインを入れてわかりやすくしておくと、お客様は気持ちよく、迷わず更新できるようになるためコンテンツが充実するようになり、最終的にSEO面、集客面などとてもよい効果が生まれてきます。
そこで今回はWordPressで構築したWEBサイトの管理画面のカスタマイズ方法をご紹介します。視覚的に判断できるようアイコンを入れると、文字だけのリンクよりわかりやすくなり、操作の迷いを大幅に軽減できます。
WEBサイトのデザインを提案するときにも、管理画面のデザインも同時に合わせて提案すると、印象もアップしそうですね。また、他社との差別化も図れること間違いなしです。
○WordPress管理画面をカスタマイズする流れ
１．管理画面に掲載したい項目を整理しておく
２．ダッシュボードウィジェット APIをベースに、コードを書く
３．デザイン用CSSをつくる
４．サーバーにCSSをアップする＋functions.phpをバックアップする
５．functions.phpにコードを書く
管理画面に自作のウィジェットを追加するという形でカスタマイズします。
デザインは管理画面のページにCSSを読み込む形で実現させます。
ベースのコード（さらに画像も）は用意されているので、そちらに肉付けしながら完成させられます。
○管理画面カスタマイズ時に気をつけること
今回の作業のポイントはfunctions.phpを編集する前に、サーバーに接続してファイルのバックアップを取っておくことです。
不適切なコードをfunctions.phpに書いてしまうと”重大なエラー”としてWEBサイトが表示されなくなるのですが、そのときにはバックアップしていたファイルをサーバーにアップして上書きすれば解消できますので、安心して作業を行ってください。
ではカスタマイズ方法を順を追ってご紹介します。
1. 管理画面に掲載したい項目を整理しておく
まずはコードを書く前に、掲載情報の整理を行っておきます。
お客様に作成や更新をしていただきたい項目をピックアップしたり、管理画面を見たときに何が載っていたら便利か考えます。
リンクを貼れば、さまざまなページへ直接移動ができるようになり、作業も時短になります。例えば、【投稿】メニュー内にある【カテゴリーを追加する】ページに直接管理画面TOPページから移動させたいときは、そのURLへリンクを貼ることで1クリックで作業が始められます。
作業の時短だけでなく更新忘れを予防することもできるので、よくアクセスするページのほか、忘れずに行ってほしい作業内容などを管理画面に掲載しておくのも効率的です。
つまり、簡単なマニュアルを管理画面TOPページにつくるというイメージで設計します。作業手順を直接書いておくと、編集者がコロコロ変わったとしても伝え漏れをなくせます。
簡単なマニュアルならデザインなしでも十分伝わります。
2. ダッシュボードウィジェット APIをベースに、コードを書く
WordPressのバージョン2.7から追加されたダッシュボードウィジェットAPI機能を使うと、管理画面に新しくオリジナルのウィジェットを追加することができます。設置マニュアルもありますし、サンプルコードがありますので、そちらを参考にコードを作っていきます。
https://wpdocs.osdn.jp/ダッシュボードウィジェット_API
公式の解説ページに書かれてあるウィジェット追加のための基本のコードは以下の通りです（このコードを書き込むファイルは、functions.phpです）。
/**
* ダッシュボードにウィジェットを追加する。
*
* この関数は以下の 'wp_dashboard_setup' アクションにフックされています。
*/
function example_add_dashboard_widgets() {
wp_add_dashboard_widget(
'example_dashboard_widget', // Widget slug.
'Example Dashboard Widget', // Title.
'example_dashboard_widget_function' // Display function.
);
}
add_action( 'wp_dashboard_setup', 'example_add_dashboard_widgets' );
/**
* ダッシュボードウィジェットのコンテンツを出力する関数を作成する。
*/
function example_dashboard_widget_function() {
// 表示したいものを出力する。
echo "Hello World, I'm a great Dashboard Widget";
}
関数は「wp_add_dashboard_widget」と「wp_dashboard_setup」の２つを使っています。基本のコードを参考にして管理画面に載せたい情報を追加していき、カスタマイズしたコードをつくります。
（コピペ用コードは後述します）
アイコンは画像を準備しなくとも、WordPressのオフィシャルアイコンを呼び出して使うことができます。使いたいアイコンの【Copy HTML】を参考に、コードに書き込みます。
https://developer.wordpress.org/resource/dashicons/#admin-tools
※このコードを書くファイルはfunctions.phpですが、いきなりファイル内に書き込んでしまうとエラーが出てアクセスできなくなる可能性が出てくるので、↑冒頭で書きましたが、FTPで接続してfunctions.phpのファイルをダウンロードしてローカル保存しておいてから書き込みます。
３. デザイン用CSSをつくる
管理画面デザイン用のスタイルシートをローカル環境で準備し、管理画面にスタイルシートを読み込むコード（以下）をつくっておきます。
今回は［my-widgets.css］というファイル名のスタイルシートを管理画面用に新しくつくりました。
このスタイルシートは管理画面全体に適用されるので、カスタムフィールドの見栄え調整も同じシート内への記述で可能です。
// ダッシュボードにスタイルシートを読み込む
function custom_admin_enqueue(){
wp_enqueue_style( 'custom_admin_enqueue', get_stylesheet_directory_uri(). '/my-widgets.css' );
}
add_action( 'admin_enqueue_scripts', 'custom_admin_enqueue' );
４. サーバーにCSSをアップする＋functions.phpをバックアップする
ここまで準備ができたら、サーバーにFTPで接続し、スタイルシートをサーバー上にアップします。合わせて、現状のfunctions.phpをダウンロードし、ローカル上で保存しておきます。
これからコードを実装するためにfunctions.phpを触るので、まずサーバーからダウンロードしておき、何かあったときはそのファイルでリカバリーします。
↑レンタルサーバーにログインするとフォルダ管理のツールがあり、そこからアップロードやダウンロードができることが多いです。
５. functions.phpにコードを書く
バックアップが取れたら、functions.phpを編集します。
・オリジナルウィジェットを追加するコード
・管理画面にスタイルシートを追加するコード
準備しておいたコードをfunctions.phpに書き加え、保存します。
// ダッシュボードにオリジナルウィジェットを追加する
add_action('wp_dashboard_setup', 'my_dashboard_widgets');
function my_dashboard_widgets() {
wp_add_dashboard_widget('my_theme_options_widget', '自作ウィジェット', 'my_dashboard_widget_function');
}
// ダッシュボードのオリジナルウィジェット内に情報を掲載する
function my_dashboard_widget_function() {
// 管理画面に表示される内容を以下に書く
echo '<ul class="custom_widget">
<li><a href="post-new.php"><div class="dashicons dashicons-edit"></div><p>新しく記事を書く</p></a></li>
<li><a href="edit.php"><div class="dashicons dashicons-list-view"></div><p>過去記事一覧</p></a></li>
<li><a href="edit.php?post_type=page"><div class="dashicons dashicons-clipboard"></div><p>固定ページ編集</p></a></li>
<li><a href="admin.php?page=home%2Fcropcrop%2Fcrop.wakayama.jp%2Fpublic_html%2Fwp%2Fwp-content%2Fthemes%2Fjin%2Finclude%2Fcustom-seo.php"><div class="dashicons dashicons-admin-tools"></div><p>SEO設定編集</p></a></li>
</ul>';
}
// ダッシュボードにスタイルシートを読み込む
function custom_admin_enqueue(){
wp_enqueue_style( 'custom_admin_enqueue', get_stylesheet_directory_uri(). '/my-widgets.css' );
}
add_action( 'admin_enqueue_scripts', 'custom_admin_enqueue' );
管理画面のTOPページを開いてみて、想定通りに表示されているか確認します。
リンクも無効になっていないか、１つずつリンク切れチェックをします。
また、コードを追加しただけではウィジェットが下の方に配置されるので、操作しやすい位置まで上げておきます。【ウィジェットを一番上にする】というコードや【デフォルトのウィジェットを削除する】というコードもあるので、配置にこだわる場合は、このようなコードも使います。
https://wpdocs.osdn.jp/ダッシュボードウィジェット_API
↑このページ内にウィジェットの並び替え、削除などさまざまな基本のコードがありますので、組み合わせて使いやすいようデザインしてください。
まとめ
お客様用に更新マニュアルを作成したとしても、そのマニュアルがきちんと引き継がれるかどうかまで管理できないですし、仕様変更やWordPressのアップデート等でマニュアルの作り直しも発生します。
そのような課題の解決にもなりますし、管理画面上のデザインやメモによってお客様も管理者も作業がしやすくなると思います。引き渡し前に少し管理画面を整えておき、スムーズに管理・運用ができるようにしておきたいですね。