今回も備忘録
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
いつもありがとう