WordPressをもっと使いやすく！ダッシュボードカスタマイズ！
こんにちは、広告用バナーの記事のオチを担当したウラカワです。
今回はWordPressのダッシュボードをカスタマイズしてみたいと思います。
バージョン3.8からダッシュボードが様変わりしましたが、まずはお馴染みの「WordPressへようこそ！」をさくっと消す作業からですね！
|
1 |
remove_action( 'welcome_panel', 'wp_welcome_panel' ); |
Windowsのイルカ並に消されてしまう不憫な子…（？）
脳内イメージはこんな感じです。
冗談はさて置き本題に入ります。
目次
- オリジナルのCSSを追加
- オリジナルのウィジェットを追加
- 「概要」にカスタム投稿を追加
- 「アクティビティ」にカスタム投稿を追加
- ウィジェットの削除
- ウィジェットのカラム数を変更
- フッターのテキストを変更
オリジナルのCSSを追加
カスタマイズする上で重要ですよね。
ダッシュボードに限らず管理画面のカスタマイズで、最初の内は悩んだらとりあえずCSSで対応！という感じでいける部分もあると思います。
以下の例では記事中で紹介しているものを入れてます。多い場合は外部ファイルにまとめてしまっても良いですね。
|
1 2 3 4 5 6 7 8 9 |
function custom_dashboard_styles() { ?> <style> #dashboard-widgets-wrap .postbox-container { width: 100%!important; } #dashboard_right_now li a.custom-count:before { content: '\f109'; } </style> <?php } add_action( 'admin_print_styles', 'custom_dashboard_styles' ); |
オリジナルのウィジェットを追加
内容に関してはもうアイデア次第ですね！
個人的に使う時はRSSフィードを表示したりすることが多いです。
|
1 2 3 4 5 6 7 |
function informatiton_widget() { echo '<p>お知らせの内容が入ります。</p>'; } function add_original_widget() { wp_add_dashboard_widget( 'information_widget', 'お知らせ', 'informatiton_widget' ); } add_action( 'wp_dashboard_setup', 'add_original_widget' ); |
お手軽にRSSフィードを表示させるならこんな感じです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
function rss_widget() { echo '<div class="rss-widget">'; wp_widget_rss_output(array( 'url' => 'http://magnets.jp/blog/feed/', 'title' => 'まぐうぇぶろぐ リターンズ', 'items' => 4, 'show_summary' => 1, 'show_author' => 0, 'show_date' => 1 )); echo "</div>"; } function add_rss_widget() { wp_add_dashboard_widget( 'rss_widget', 'まぐうぇぶろぐ リターンズ', 'rss_widget' ); } add_action( 'wp_dashboard_setup', 'add_rss_widget' ); |
「概要」にカスタム投稿を追加
ダッシュボードのウィジェットは基本的に「投稿」に関するものだけ…。
「カスタム投稿」を設定しても、自動的にウィジェットに反映してくれるわけではありません…。
自動的にカスタム投稿がウィジェットに反映されたら良いのに…！
と思ってやってみました。
カスタム投稿を取得するのに、get_post_typesを使います。
これを使ってカスタム投稿だけを取得。
|
1 2 |
get_post_types( array( '_builtin'=>false, 'public'=>true, ), 'names', 'and' ); //名前だけ get_post_types( array( '_builtin'=>false, 'public'=>true, ), 'object', 'and' ); //オブジェクト |
あとは概要ウィジェット用にdashboard_glance_itemsというフィルターが用意されているので、そちらを利用します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
function custom_post_in_right_now( $elements ) { global $wp_post_types; $custom_post_types = get_post_types( array( '_builtin'=>false, 'public'=>true, ), 'object', 'and' ); // カスタム投稿取得 if( !$custom_post_types ){ return; }else{ foreach($custom_post_types as $custom_post_type) { $name = $custom_post_type->name; $label = $custom_post_type->labels->name; $num_posts = wp_count_posts($name); $num = number_format_i18n($num_posts->publish); if ( current_user_can( 'edit_posts' ) ) { $elements[] = '<a href="edit.php?post_type='.$name.'" class="'.$name.'-count">'.$num.'件の'.$label.'</a>'; } } return $elements; } } add_filter('dashboard_glance_items', 'custom_post_in_right_now'); |
アイコンを変更する場合はスタイルを追加します。
今回はまとめて「投稿」と同じアイコンを指定していますが、指定しない場合は○のアイコンになります。
WordPressで使用されているアイコン群であるDashiconsから好きなものを選ぶと良いと思います。
|
1 |
#dashboard_right_now li a.custom-count:before { content: '\f109'; } |
「アクティビティ」にカスタム投稿を追加
こちらも先ほど同様にget_post_typesを使います。
アクティビティ用のフックポイントがないようなので、pre_get_postsでループを変更してしまいます。
ついでに固定ページも追加してみました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function custom_post_in_activity( $query ) { global $pagenow; $custom_post_types = get_post_types( array( '_builtin'=>false, 'public'=>true, ), 'names', 'and' ); // カスタム投稿取得 if( !$custom_post_types ){ return; }else{ if ( is_admin() && !$query->is_main_query() && $query->get( 'post_type' ) && $pagenow == 'index.php' ) { array_push($custom_post_types, 'post', 'page'); //投稿と固定ページ追加 $query->set( 'post_type', $custom_post_types ); //ループの変更 } } } add_action( 'pre_get_posts', 'custom_post_in_activity' ); |
ウィジェットの削除
バージョン3.8からウィジェットが4つに減りましたがさらに厳選…！
例ではWordPressニュースとクイックドラフトを消しています。
|
1 2 3 4 5 6 7 8 |
function remove_dashboard_widgets() { global $wp_meta_boxes; //unset( $wp_meta_boxes['dashboard']['normal']['core']['dashboard_right_now'] ); //概要 //unset( $wp_meta_boxes['dashboard']['normal']['core']['dashboard_activity'] ); //アクティビティ unset( $wp_meta_boxes['dashboard']['side']['core']['dashboard_quick_press'] ); //クイックドラフト unset( $wp_meta_boxes['dashboard']['side']['core']['dashboard_primary'] ); //wordpressニュース } add_action( 'wp_dashboard_setup', 'remove_dashboard_widgets' ); |
ウィジェットのカラム数を変更
フレキシブルなウィジェットのカラムですが、数的に1列で十分なことも…
というわけで1列に固定してしまいます。
|
1 |
#dashboard-widgets-wrap .postbox-container { width: 100%!important; } |
ウィジェットのカラムオプションを復活させることも出来ます。
|
1 2 3 4 5 6 7 8 9 10 |
function columns_screen_options() { add_screen_option( 'layout_columns', array( 'max' => 4, 'default' => 1 ) ); } add_action( 'admin_head-index.php', 'columns_screen_options' ); |
フッターのテキストを変更
デフォルトではWordPressからの感謝の言葉が表示されていますが、有用性の高いものに変更したいと思います。
テーマ開発の際、style.cssにテーマの名前や開発者情報を記載すると思いますので、そちらを有効活用してみましょう！
まず有効化されているテーマをget_templateで取得し、続いてwp_get_themeでテーマの情報を取得します。
各種情報は抜けるので、あとは好きなように整形したテキストを出力します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
function custom_admin_footer() { //テーマのバージョン取得 $template = get_template(); //テーマ $theme_data = wp_get_theme($template); //テーマオブジェクト //取得情報 $name = $theme_data->get( 'Name' ); //テーマの名前 $description= $theme_data->get( 'Description' ); //テーマの説明 $version = $theme_data->get( 'Version' ); //テーマのバージョン $theme_uri = $theme_data->get( 'ThemeURI' ); //テーマURI $author = $theme_data->get( 'Author' ); //テーマのオーナー $author_uri = $theme_data->get( 'AuthorURI' ); //テーマのオーナーURI $template = $theme_data->get( 'Template' ); //テーマのテンプレート $tags = $theme_data->get( 'Tags' ); //テーマのタグ $tags = implode(',',$tags); //タグの連結 echo $name .' ' . $version . ' created by <a href="'.$author_uri.'" target="_blank">'.$author.'</a>'; } add_filter( 'admin_footer_text', 'custom_admin_footer' ); |
最後に
WordPressのダッシュボードはデフォルトだと本当に最低限しか無いので、利用者に合わせてカスタマイズするかどうかで、利便性や効率がかなり変わってくると思います。
画面の多くを占めており、WordPressに不慣れな方ほどダッシュボードの重要度は上がると思いますので、より使いやすいものを目指していきたいですね。