「更新できるようWordPressで構築してもらったが管理画面を開いても更新の仕方がわからずブログやお知らせを書かず放置している」
「SEO対策のためクライアントに更新してもらいたいが、PC操作に戸惑うようでなかなか更新してもらえない」
昨今のSEO対策では定期的にWEBサイトを更新することが重要だといわれます。
そのようにわかってはいるものの、なかなか更新できていない…というお悩みも多く寄せられます。そこで今回は、少しでも記事更新がしやすくなるような工夫について書いていきたいと思います。
WEBサイトの更新はSEO対策の側面としてはもちろん、最新情報を掲載すること、情報を追加し増やしていくことで訪問者様の利便性向上につながり、満足度もアップ。リピート頻度も上がります。更新しているWEBサイトは印象もよくなり、企業の売上にも貢献します。WEBサイトの更新はさまざまな複合的な側面から、とても大切です。
更新の重要性はずいぶん浸透しており、WEBサイト制作の依頼時に「更新しやすいようWordPressでつくってほしい」「気兼ねなく更新できるよう、自分たちで更新できる仕組みにしてほしい」と依頼される方々も増えています。
それでは実情を振り返ってみるとどうでしょうか。予定していた通り、もしくはそれ以上の頻度でWEBサイトの更新ができている事例は少ないのではないでしょうか。
パソコンに苦手意識のある方は特に、管理画面を開いても「どこをどう操作してよいかわからないので億劫になる」ものです。WEB制作者が更新マニュアルをつくったとしても、初めて見る管理画面に戸惑い、読んでもなかなか頭に入らないことも。
苦手意識が芽生えてしまうと、なかなか日常のルーティンの中に更新作業が入らず、ついつい後回しに。そして結局、1年間のうちで更新したのは数えるほど…ということも。せっかく更新することを前提につくったWEBサイトですから、やはり更新していきたいですよね。
○苦手意識をなくすには？
苦手意識は無意識の中で生まれるといわれています。
パッとひと目でみて「自分が理解できる」と感じなければ、それが記憶されてしまって「難しい」「自分にはよくわからない」との感情につながってしまう、ということなのです。
では、WEBサイトの更新に置き換えてみると、苦手意識を持たずに更新するためにはどんな要素が必要なのでしょうか。
●平易、簡単、知っている言葉が並んでいる
●作業動線が短い
●作業の流れ、次の動作が直感的にわかる
これまでの経験から、上記の3つが備わっていると、パソコン操作に慣れていない人や知らないことを覚えるのが辛い人でも、積極的に更新作業へ向かってくださっていると感じます。
苦手意識を持たず更新できる状況をつくるためには、丁寧に簡単な言葉で書いたマニュアルをつくるのも効果的でした。もう一つ、効果があると考えられるのが管理画面そのものをわかりやすくつくることです。
WEBサイトが仕上がり、管理画面をお見せしながら説明したときに「なるほど！これならできそうです」とおっしゃってもらえたり、感じてもらえたりしたときは、その後の更新作業がはかどっているように思います。
裏側の作り込みもWEBサイト制作の一部と考え、整えていくことで、更新されて情報が増えていく、結果的によりよいWEBサイトになっていくと思います。制作時には訪問者様が見る表側、管理する裏側と両方の利便性を考えて構築していきたいですね。
では、CMSの中で最も使われているWordPressを例に、管理画面をわかりやすくカスタマイズする方法についてポイントを５つ挙げていきます。プラグインの活用＋ソースコードの少しの追加で、かなり工夫を凝らすことができます。
※注意：function.phpファイルはWEB制作の知識のある方、WEBサイトを構築した方のみ触るようにしてください。不安がある方はプラグインでできる範囲内でカスタマイズをすると安心です。
１．ログイン画面のロゴを変えてオリジナルにする
まずいちばん最初に目にするログイン画面のカスタマイズです。
IDとパスワード、場合によってはセキュリティコードを入力するだけの画面ですが、初めて見る方にとっては馴染みのないもの。「これまでに見たことがない画面だ」と感じさせないよう、オリジナルのロゴを出すカスタマイズがおすすめです。
■Before
＜変更方法＞
①利用するロゴ画像の縦幅・横幅をpxで確認する
②ロゴ画像を「メディア」からアップロードし、画像URLをコピーしておく
②function.phpファイルのバックアップを取る
③以下のコードの▲▲▲、●●、■■■部分を画像URLから抜き出して書き直す。
④同じく以下のコード内、［縦幅］、［横幅］をロゴ画像に合わせて書き直す。
⑤function.phpファイルに書き込む
function my_org_logo() { ?>
<style type="text/css">
#login h1 a, .login h1 a {
background-image: url(<?php echo get_site_url(); ?>/wp-content/uploads/▲▲▲/●●/■■■.png);
height:［縦幅］px;
width:［横幅］px;
background-size: ［縦幅］px ［横幅］px;
background-repeat: no-repeat;
}
</style>
<?php }
add_action( 'login_enqueue_scripts', 'my_org_logo' );
■After
見慣れたロゴが入ることで、「この画面からのログインが間違っていない」ことを直感的に伝えられます。「このロゴが出たらOKですよ」と伝えると皆さん安心してくださいます。
２．左メニューを編集し、項目名を変更する
WordPressの管理画面（ダッシュボード）に表示されるメニューは、聞き馴染みのない言葉も使われています。そこで、プラグインを利用し、メニュー名を変更しておきます。
■Before
＜変更方法＞
①プラグイン「Admin Menu Editor」をインストール、有効化する
②左メニュー「設定＞Menu Editor」からカスタマイズ
■After
●ダッシュボード→管理画面TOP
●投稿→記事作成
●メディア→画像追加
●固定ページ→ページ作成
メニュー名は更新担当者がわかりやすいものへ。
このメニューの下のカテゴリも変更できます。
メニュー名に「このメニューでは何ができるか」「このメニューをクリックすると何が見えるか」がわかるように書いておくとスムーズに理解していただけると思います。
３．バージョン更新情報を消す
ダッシュボードに表示される「WordPress ●.● が利用可能です ! 今すぐ更新してください。」の文言は、結構目立つので気になりますよね。
お客様がWordPressの更新をしない、メンテナンスは他社が対応する場合であれば消しておく（＝編集者権限では見えないようにしておく）と親切です。更新者に見えてしまうと目立つ表示を見て「何かしなければならない」と不安に思われることがあります。そして、もし更新ボタンを押してしまい、表示が変わってしまったら業務に支障が出てしまいます。トラブル回避のためにもオススメです。
■Before
＜変更方法＞
①function.phpファイルのバックアップを取る
②以下のコードをコピーする
③function.phpファイルに書き込む
※以下のコードは更新者のユーザー権限が【編集者】の場合です。
function hide_update_notices() {
if ( !current_user_can( 'administrator' ) ) { //管理者以外は非表示にする
remove_action( 'admin_notices', 'update_nag', 3 );
}
}
add_action( 'admin_init', 'hide_update_notices' );
■After
管理者権限のあるIDでfunction.phpにコードを追加した後、ログアウトし、編集者の権限でダッシュボードを見てみるとバージョンアップ情報が消えています。
４．記事作成画面でカスタムフィールドを活用し説明も載せておく（プラグイン活用）
こちらもプラグインを活用し手軽にできるカスタマイズです。更新者が記事を新規作成する画面をカスタマイズします。さらに更新時の注意なども画面上に記載しておくとマニュアルを毎回読み返さなくて済みます。
管理画面上の表示が親切であれば、作業の時短効果があるほか、わかりやすさによって更新作業への心理的なハードルを下げることができます。
カスタムフィールドを設定するプラグインは多数ありますが、今回は「Advanced Custom Fields」の無料版を活用したものを事例としてい挙げます。
■Before
ブロックエディタ（Gutenberg）で新規作成画面を開くと、このような真っ白なページが表示されます。
■After
予め入力する項目を記事内に表示し、それに沿って入力します。
同じ項目・デザインのページを複数つくるときに便利です。
また、更新者によって書き方のブレなどが出てしまうことを予防する効果があるほか、更新時に過去ページをコピーする、入力項目を確認するなど多くの作業が省けます。
＜変更方法＞
①プラグイン「Advanced Custom Fields」のインストール、有効化
②「左サイドメニュー＞カスタムフィールド＞新規追加」へ進み、フィールドグループの新規作成と設定を行う
③フィールドグループの中に入力項目を作成（グループ1つ＝1ページ構成で設定します。別ページ用のカスタムフィールド設定を行うときは、フィールドグループをさらに増やしていきます）。
④フィールドにマニュアルを表示したいときは「説明」の枠に書き込む、入力例を表示したいときは「プレースホルダーのテキスト」に書き込む
⑤最後に各ページにカスタムフィールドを適用させる以下のコードをテーマのテンプレートに埋め込む
<?php if(get_field('field_name'): ?>
<p><?php the_field('field_name'); ?></p>
<?php endif; ?>
※field_nameは皆さまが設定された任意のフィールド名に変更してください
そのほか画像が入っているときや、チェックボックスを使っているときなどはコードが変わりますので、公式のガイドページからコピペ＋任意の部分を変更してテンプレートの表示させたい位置に埋め込みます。
https://www.advancedcustomfields.com/resources/code-examples/
コードの埋め込みは少し手間がかかりますが、カスタムフィールドを使っておけば更新者は直感的に、メールフォームに必要事項を入力するくらいに簡単に記事をつくっていけます。
マニュアル的な解説を「説明」に、入力例を「プレースホルダーのテキスト」に書き込んでおくことがより更新を簡単に平易にするポイントです！
５．ダッシュボードのカスタマイズし、マニュアル文を載せる
管理画面を開いてすぐ目に入ってくるダッシュボード内に、難しい言葉が並んでいるとハードルが上がってしまいます。そこで、ダッシュボードはカスタマイズして必要なものだけを残す、そしてマニュアル文などを簡単に載せて、次に何をすべきか記載しておくとわかりやすくなります。
■Before
管理者でもあまり使わないメニューがたくさん表示されます。
最低限まで削っておき、更新者が迷わないようにしておきます。
また、HTMLコードを追加するとマニュアルや更新者への連絡を載せることもできますので、気をつけてほしいことなどは明記しておくようにしましょう。
＜変更方法＞
①ダッシュボード画面右上「表示オプション」から不要なもののチェックを外す
②以下のコード＋任意の文章をfunction.phpに追加し、↑表示オプションから「更新する皆さまへ」にチェックをして表示させる
function announce_dashboard_widget_function() {
echo '
<h2>更新ありがとうございます。</h2>
<p>記事の追加は左のメニューから任意の項目を選んでください</p>
<hr>
<h2>土地が売れた場合は</h2>
<p>土地情報のメニューから進んでいただき、売れた土地の記事をゴミ箱に入れてください</p>
';
}
add_action('wp_dashboard_setup', 'announce_add_dashboard_widgets');
※日本語の部分は任意で変更してください
■After
載せる文章はそれぞれのケースに合わせて、自由にご変更ください。
まとめ
少しの工夫で更新しやすい管理画面をオリジナルでつくれます。管理画面の工夫により、よりよいWEBサイトが継続して保ちやすくなります。SEO対策としてコンテンツを継続してつくっていきたい皆さまには、ぜひ更新しやすい管理画面の設計も合わせて行っていくことをオススメします。
このような管理画面の設計は、WEBディレクターやコーディング担当者が行うことが多いかと思います。WEBサイトができた後からでも設定できますので、オリジナルのわかりやすい管理画面をつくってみたいと思われた方は、WEBサイト制作の担当者（担当企業）にご相談してみてください。