追加したダッシュボードウィジェットを強制的に一番上に表示させる方法

著者 Nora

日付 2015/11/05

カテゴリーカスタマイズ

タグダッシュボードウィジェット,表示位置

ダッシュボードウィジェットでは、使い方がわからない時の「ヘルプ」なども載せられますから、テーマにダッシュボードウィジェットを追加する際には、一番上に表示させたい時も少なくない筈です。

そして、実は「ダッシュボードウィジェット API – WordPress Codex 日本語版」にダッシュボードウィジェットを一番上に表示させる方法が載っているのですが、それとはちょっと異なる簡単な方法をここでは紹介していきます。

また、基本的なダッシュボードウィジェットの追加に関しては、以下のチュートリアルページをご参照ください。

ダッシュボードウィジェットの作成・追加方法

以下のコードでは、リンク先で追加しているウィジェットのIDを使用しています。

まずは参照ページで紹介されている方法の解説

参照ページで紹介されている方法は、

ダッシュボードウィジェットを追加
グローバル変数を取得
配列を編集して追加したウィジェットのidを指定して先頭へ

といった流れです。

チュートリアルで作成したダッシュボードウィジェットの例を使うと以下のようになります。

global $wp_meta_boxes;
$normal_dashboard = $wp_meta_boxes[ 'dashboard' ][ 'normal' ][ 'core' ];
	 	
// バックアップして新しいダッシュボードウィジェットを配列の最後から削除
	 
$example_widget_backup = array( 'dashboard_widget_example' => $normal_dashboard[ 'dashboard_widget_example' ] );
unset( $normal_dashboard[ 'dashboard_widget_example' ] );
	 
// 2つの配列を統合して新しいウィジェットが最初にくるようにする
	 
$sorted_dashboard = array_merge( $example_widget_backup, $normal_dashboard );
	 
// 並べ替えた配列を元のメタボックスに保存し直す
	 
$wp_meta_boxes[ 'dashboard' ][ 'normal' ][ 'core' ] = $sorted_dashboard;

ダッシュボードウィジェットのID部分を入れ替えただけです。

このコードをダッシュボードを追加するWordpress関数「wp_add_dashboard_widget」の後に追加すればOKです。

JavaScriptで一番上に表示させる

上で紹介した方法で問題は無いと思われますが、使用しているテーマやプラグインでも同様の設定が加えられていると、一番上に来るかは読まれた順によって異なってしまいますので、ちょっと心配になります。

そこでもうちょっと確実に一番上に持ってくるために、jQueryで操作します。

書くのは出力用のコールバック関数内です。

// 「フォーラムへの案内」
function dashboard_widget() { ?>
	<h4>テーマ「Optimizer」の案内</h4>
	<p>テーマ「Optimizer」用の解説ページは<a rel="nofollow" target="_blank" href="http://wp-googlist.com/how-to-set-up-optimizer/">こちら</a></p>
	<p>「質問」「不具合報告」「改善点」「機能追加要望」などは<br>
	配布サイト<a rel="nofollow" target="_blank" href="http://wp-googlist.com/">Wordpressテーマ「Googlist」</a>の<a rel="nofollow" target="_blank" href="http://wp-googlist.com/forums/">フォーラム</a>まで。</p>

	<script>
		( function( $ ) {
			$( document ).ready( function(){
				var infoForumsLink = $( "#dashboard_widget_example" ).clone();
				$( "#dashboard_widget_example" ).remove();
				$( "#normal-sortables" ).prepend( infoForumsLink );								
			} );
		} ) ( jQuery );
	</script>

<?php }

やっていることは同じなんですが、JavaScriptで操作すると、表示されてから時差やイベントを条件に操作することが出来ますので、より確実に一番上に表示されるようになります。