今回も備忘録

1、下準備

functions.phpに以下のコードを追加する。

場所：wp-content>themes>アクティブなテーマファイル>functions.php

 //ダッシュボードにかんたんメニューを追加

require get_template_directory() . '/adminmenu/admin-menu.php';

これでダッシュボードカスタマイズ用コードがファイルから読み取られます。

2、ファイル作成

場所：wp-content>themes>アクティブなテーマファイル>

に、

ファイルadminmenu

|__admin-menu.php

|__admin-menu.css

を作成します。

記述内容は以下の通り。

ファイル名：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>
 <li>
 <a href="'.get_bloginfo("url").'">
 <div class="dashicons dashicons-desktop"></div>
 <p>サイトを見る</p>
 </a>
 </li>
 <li>
 <a href="'.wp_logout_url(home_url()).'">
 <div class="dashicons dashicons-admin-network"></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' );

ファイル名：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;
 }

以上で完了。

あとは必要に応じてダッシューボードの表示項目を変更していくだけ。

おわり

参考サイト

ミズタマブログさん：https://mizutama.blog

いつもありがとう