ダッシュボードに自作ウィジェットを作ってみた話
WEB先案内
まずはモノを見てください
完成形
ワードプレスにログインすると最初に表示されます。 メニューの数はもっと増やせます。偶数の方が綺麗にレイアウトできると思います。 オススメは左メニューの下の方に表示される項目や第２階層の項目など、毎回探すのが面倒なものをメニューとしてまとめると便利です。
作り方とコードの説明
ウィジェット追加のテンプレート
1// ウィジェットを追加する
2function add_custom_widget() {
3 //ここに表示させる処理を記述する
4}
5function add_my_widget() {
6 //ダッシュボードに自作ウィジェットを追加する関数
7 wp_add_dashboard_widget( 'custom_widget', 'ここにウィジェットタイトル', 'add_custom_widget' );
8}
9
10add_action( 'wp_dashboard_setup', 'add_my_widget' );2行目、ウィジェットとして表示する内容（後述のHTML）をここに表示します。 7行目、「ここにウィジェットタイトル」の部分にウィジェットの見出しを記述します。custom_widgetがウィジェットのidになります。 wp_add_dashboard_widget()関数について WordPress Codex 日本語版 10行目、管理画面のダッシュボードを表示する時に、自作ウィジェット「add_my_widget」が呼び出されるように設定しています。
ウィジェットに表示させる内容（HTML）
1function add_custom_widget() {
2 if ( is_user_logged_in() && current_user_can('level_10') ){ //管理者ユーザがログインしている場合
3 echo '<ul class="custom_widget" style="margin-left: auto;margin-right: auto;">
4 <li><a href="edit.php"><div class="dashicons dashicons-edit"></div><p>投稿</p></a></li>
5 <li><a href="plugin-install.php"><div class="dashicons dashicons-admin-plugins"></div><p>プラグイン追加</p></a></li>
6 <li><a href="theme-editor.php"><div class="dashicons dashicons-code-standards"></div><p>テーマエディタ</p></a></li>
7 <li><a href="customize.php"><div class="dashicons dashicons-welcome-widgets-menus"></div><p>カスタマイズ</p></a></li>
8 </ul>';
9 }
10}
11
12function add_my_widget() {
13 wp_add_dashboard_widget( 'custom_widget', 'よく使う機能たち', 'add_custom_widget' );
14}
15add_action( 'wp_dashboard_setuじp', 'add_my_widget' );2行目は、管理者ユーザ（level_10）がログインしている場合、3行目以降を実行する判断をしています。 管理者ユーザ以外も設定できます。詳しくは下記リンクをご覧ください。 ログインユーザの権限について 3行目〜8行目について簡単に解説すると、 リスト内にあるaタグのhref属性に飛ばしたいリンク先を指定します。 「投稿」であれば「edit.php」、「プラグイン追加」であれば「plugin-install.php」、「テーマエディタ」であれば「theme-editor.php」、「カスタマイズ」であれば「customize.php」になります。 他にリンク先を設定したい場合は、下記サイトに一覧が記載されていますので参考にしてください。 WordPressの管理画面を使いやすくする簡単カスタマイズ18選 アイコンはWordPress標準で実装されているdashiconsを使用します。 クラスのdashicons-media-documentの部分を変更することで対応したアイコンを表示できます。 各アイコンのコードはこちらをご覧ください。
ウィジェットにスタイルを適用（CSS）
このままだとプレーンなままなのでスタイルを適用します。 FlexBoxを使って横方向に並ぶようにレイアウトしております。一行で表示できない場合、自動で改行するようにしてあります。 FlexBoxについては下記リンクをご覧ください。 【保存版】CSS Flexbox プロパティまとめ 以下のようにして管理画面にスタイルを適用させます。
1ul.custom_widget {
2 display: -webkit-box;
3 display: -ms-flexbox;
4 display: flex; /* FlexBoxを適用 */
5 clear: both;
6 overflow: hidden;
7
8 -ms-flex-wrap: wrap;
9 flex-wrap: wrap; /* 子要素が入りきらない場合は自動改行 */
10}
11.custom_widget li {
12 float: left;
13
14 margin: 10px;
15
16 text-align: center;
17
18 -webkit-box-flex: 1;
19 -ms-flex: 1 0 180px;
20 flex: 1 0 180px;
21}
22.custom_widget a {
23 display: block;
24
25 padding: 10px 20px 30px;
26
27 color: #696969;
28 border-radius: 10px;
29 background-image: -webkit-gradient(
30 linear,
31 left top,
32 right top,
33 from(#fa709a),
34 to(#fee140)
35 );
36 background-image: -o-linear-gradient(left, #fa709a 0%, #fee140 100%);
37 background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
38 -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
39 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
40}
41.custom_widget a:hover {
42 color: #fff;
43 background-image: -webkit-gradient(
44 linear,
45 left top,
46 right top,
47 from(#2af598),
48 to(#009efd)
49 );
50 background-image: -o-linear-gradient(left, #2af598 0%, #009efd 100%);
51 background-image: linear-gradient(90deg, #2af598 0%, #009efd 100%);
52 -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
53 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
54}
55.custom_widget .dashicons {
56 font-size: 70px;
57
58 display: block;
59
60 width: 70px;
61 height: 70px;
62 margin: 10px auto 0;
63 padding: 5px;
64
65 border-radius: 10px;
66}
67.custom_widget p {
68 font-size: 20px;
69 font-weight: bold;
70
71 margin-bottom: 0;
72}
ダッシュボードに表示する「Code Snippets」
Code Snippets
ダウンロードはこちら
プラグインのメリット
- ・追加したコードは、テーマを変えても使用できる
- ・追加したコードの管理が簡単にできる
- ・コードごとにON/OFFの切り替えができる
- ・コード中の文法的なエラーを教えてくれる
- ・コードのインポート・エクスポートが行える
プラグインの使い方
プラグインの基本的な使い方はこちらをご覧ください。
コード全体
1<?php
2/* ------------------------------------------------------------------------------
3ダッシュボードに自作ウィジェットを追加する
4------------------------------------------------------------------------------ */
5function add_custom_widget() {
6 if ( is_user_logged_in() && current_user_can('level_10') ){ //管理者ユーザがログインしている場合
7 echo '<ul class="custom_widget" style="margin-left: auto;margin-right: auto;">
8 <li><a href="edit.php">
9 <div class="dashicons dashicons-edit"></div>
10 <p>投稿</p>
11 </a></li>
12 <li><a href="plugin-install.php">
13 <div class="dashicons dashicons-admin-plugins"></div>
14 <p>プラグイン追加</p>
15 </a></li>
16 <li><a href="theme-editor.php">
17 <div class="dashicons dashicons-code-standards"></div>
18 <p>テーマエディタ</p>
19 </a></li>
20 <li><a href="customize.php">
21 <div class="dashicons dashicons-welcome-widgets-menus"></div>
22 <p>カスタマイズ</p>
23 </a></li>
24</ul>';
25 }
26}
27
28function add_my_widget() {
29 wp_add_dashboard_widget( 'custom_widget', 'よく使う機能たち', 'add_custom_widget' );
30}
31add_action( 'wp_dashboard_setup', 'add_my_widget' );
32
33// 管理画面内で自作CSSを適用させる
34function admin_css() {
35 echo '
36<style>
37 ul.custom_widget {
38 display: -webkit-box;
39 display: -ms-flexbox;
40 display: flex;
41 /* FlexBoxを適用 */
42 clear: both;
43 overflow: hidden;
44
45 -ms-flex-wrap: wrap;
46 flex-wrap: wrap;
47 /* 子要素が入りきらない場合は自動改行 */
48 }
49
50 .custom_widget li {
51 float: left;
52
53 margin: 10px;
54
55 text-align: center;
56
57 -webkit-box-flex: 1;
58 -ms-flex: 1 0 180px;
59 flex: 1 0 180px;
60 }
61
62 .custom_widget a {
63 display: block;
64
65 padding: 10px 20px 30px;
66
67 color: #696969;
68 border-radius: 10px;
69 background-image: -webkit-gradient(linear,
70 left top,
71 right top,
72 from(#fa709a),
73 to(#fee140));
74 background-image: -o-linear-gradient(left, #fa709a 0%, #fee140 100%);
75 background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
76 -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
77 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
78 }
79
80 .custom_widget a:hover {
81 color: #fff;
82 background-image: -webkit-gradient(linear,
83 left top,
84 right top,
85 from(#2af598),
86 to(#009efd));
87 background-image: -o-linear-gradient(left, #2af598 0%, #009efd 100%);
88 background-image: linear-gradient(90deg, #2af598 0%, #009efd 100%);
89 -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
90 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
91 }
92
93 .custom_widget .dashicons {
94 font-size: 70px;
95
96 display: block;
97
98 width: 70px;
99 height: 70px;
100 margin: 10px auto 0;
101 padding: 5px;
102
103 border-radius: 10px;
104 }
105
106 .custom_widget p {
107 font-size: 20px;
108 font-weight: bold;
109
110 margin-bottom: 0;
111 }
112</style>
113';
114}
115add_action('admin_head', 'admin_css');ダッシュボードに表示されない場合
表示オプションにも追加したウィジェットの項目が追加されていると思うので確認してみてください。
以上で完成になります。
まとめ
WordPressにログインして最初の画面で表示されると「お？」となり利便性と満足度がアップすると思います。 さらに、ユーザーのお好みで自由にメニューを選択できるようにしたり、プラグイン化すると面白いかもしれません^^ 他のサイトでは、functions.phpを直接編集するような内容を見受けます。 これでも実現できますが、構文エラーが発生するとブラウザの画面が「真っ白」になったり、WordPressがダウンしたり、エラー文が表示されてセキュリティリスクが高まったりしますので、プラグイン「Code Snippets」と組み合わせて影響範囲を限定した方が良いと思います。
ABOUT ME
あなたのお仕事をする時間を使ってITに関することを調べたり、トライしてみたりして、それでもうまくいかない。そんなことはありませんか？
WEB先案内をご利用いただくと、困ったときにITの顧問としてあなたのITに関するお悩みにお答えし、サポートを行うことができます。