WordPressの管理画面のメニューは、初めてCMS(WordPress)を使って記事を更新する人にはちょっと使いにくいようです。
そこで、ログインした時の最初の画面「ダッシューボード」にオリジナルのメニューウィジェットを追加して使いやすくしてみました。
今回はWordPress 3.8から導入されているアイコンフォント「Dashicons」を使うので画像いらずで簡単です！
メニューはウィジェットとして追加するので、オリジナルのウィジェットを作成していきます。
ウィジェット用フォルダ・ファイル構成
コードはfunctions.phpに記述してもいいのですが、変更しやすいようにファイルを別にして読み込ませることにします。
テーマディレクトリに「adminmenu」フォルダを作成し、「admin-menu.php」「admin-menu.css」をそのフォルダに入れます。
そして、ウィジェットを読み込むコードをfunctions.phpに記述してください。
functions.php
//オリジナルダッシュボードウィジェットを追加 require get_template_directory() . '/adminmenu/admin-menu.php';
ウィジェットファイル admin-menu.php を編集
admin-menu.php がメニューウィジェットになるので、ここにメニューのリンクを追加していきます。
このウィジェット用のCSSをhead内に追加するコードも記述しておきます。
アイコンフォント「Dashicons」 について
アイコンはアイコンフォント「Dashicons」を使いますが、管理画面ではすでにこのアイコンフォントが左のメニューバーなどで使われているのでHTMLを記述するだけでOKなんです。
アイコンフォント「Dashicons」の一覧は以下のページで確認できます。
「Dashicons」
アイコンを選択してから「Copy HTML」をクリックするとHTMLタグが取得できます。
<div class="dashicons dashicons-admin-post"></div>
admin-menu.php
<?php
/*-------------------------------------------*/
/* メニューウィジェット用のcssを追加
/*-------------------------------------------*/
function adminmenu_css() {
echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo("template_directory").'/adminmenu/admin-menu.css">';
}
add_action('admin_head', 'adminmenu_css');
/*----------------------------------------------------------------------------------------------*/
/* ダッシュボードにオリジナルのメニューウィジェットを追加
/*----------------------------------------------------------------------------------------------*/
function adminmenu_dashboard_widget_function() {
echo '
<ul class="adminmenu">
<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-welcome-write-blog"></div>
<p>記事編集</p>
</a>
</li>
<li>
<a href="./edit-comments.php">
<div class="dashicons dashicons-format-chat"></div>
<p>コメント</p>
</a>
</li>
</ul>
';
}
function adminmenu_dashboard_widgets() {
wp_add_dashboard_widget('adminmenu_dashboard_widget', '更新者用メニュー', 'adminmenu_dashboard_widget_function');
}
add_action('wp_dashboard_setup', 'adminmenu_dashboard_widgets' );あと、次のようなリンクもあるといいと思います。
サイトを見る
「ページってどこから見られるの？」って聞かれるのことが多いので。
<a href="'.get_bloginfo("url").'">
<div class="dashicons dashicons-desktop"></div>
サイトを見る
</a>ログアウト
<a href="'.wp_logout_url().'"> <div class="dashicons dashicons-admin-network"></div> ログアウト </a> //ログアウト後トップを表示する場合 <a href="'.wp_logout_url(home_url()).'"> <div class="dashicons dashicons-admin-network"></div> ログアウト </a>
オリジナルウィジェット用のCSS admin-menu.css を編集
ul.adminmenu{
clear: both;
overflow: hidden;
}
.adminmenu li{
float: left;
margin: 10px;
text-align: center;
}
.adminmenu a{
display: block;
padding: 10px 20px;
background-color: #c1e4e9;
border-radius:10px
}
.adminmenu a:hover{
background-color: #a2d7dd;
}
.adminmenu .dashicons{
display: block;
height: 60px;
width: 60px;
margin: 10px auto 0;
padding: 5px;
font-size: 60px;
background-color: #FFF;
border-radius:5px
}
.adminmenu p{
margin-bottom: 0;
font-weight: bold;
}オリジナルメニューウィジェット完成です！
オリジナルメニューウィジェット【応用編】
アイコンフォントを「Font Awesome」にしたり、特定のユーザーだけに見せたいなどの応用もできます。
アイコンフォント「Font Awesome」を使う
「Font Awesome」は「Dashicons」よりも種類が多いし、使い方も簡単なのでオススメです。
「Font Awesome」 http://fortawesome.github.io/Font-Awesome/
admin-menu.php は以下のようになります。
function adminmenu_css() {
echo '<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">';
}
add_action('admin_head', 'adminmenu_css');以下のようなコードが取得できるので、HTML・CSSもこれに合わせて編集してください。
<i class="fa fa-pencil-square-o"></i>
ウィジェットを特定のユーザーだけに表示させる
記事の編集権限を持つユーザーのみメニューを表示する
functions.php
if ( current_user_can('edit_post') ) {
require get_template_directory() . '/adminmenu/admin-menu.php';
}他の条件にしたい場合は「edit_post」を書き換えてください。
参考 ユーザーの種類と権限 – WordPress Codex 日本語版
特定のユーザだけにメニューを表示される
「Aさんだけが使える秘密のスペシャルメニュー」なんていうのも作れます。
逆にAさんだけに見せないメニューとかもw
Aさんのユーザー名が「aoi」の場合。
functions.php
get_currentuserinfo();
if ( $current_user->user_login == 'aoi') {
require get_template_directory() . '/adminmenu/admin-menu.php';
}最後に
WordPressダッシュボードの余分なウィジェットを消している場合も多いと思いますが、何もなさすぎてちょっとさみしいですよね。
WordPressに慣れてない人には大きなメニューの方が見やすくて便利ですし、わかりやすい方が更新のモチベーションも少しは違ってくるかなーと思います。
これってプラグイン化しておくと便利そうですね。
時間ができたらプラグイン化してみようと思います。
今回はオリジナルメニューのウィジェットを追加しましたが、他にもお知らせウィジェットを追加したり、ウィジェット関連も色々カスタマイズしていきたいなーと思ってます。
