投稿画面のウェジェットを2列にする

投稿画面のウェジェットを2列にする - 管理画面カスタマイズTips

説明

ダッシュボード画面ではスクリーンレイアウトを最大4列まで選択できるのに、投稿画面は1列か2列のどちらか。高解像度のディスプレイを使っていると、投稿画面では大画面のメリットを生かせていない理由がここにあるのではと感じ、3列対応にしてみた。

3列表示のイメージは下図の通り。ウェジェットを2列にすることで、独自のウィジェットをサイドに設置しやすくすることを狙っている。
ウェジェットを2列に

テーマのfunctions.phpに追加したソースコードは次の通りで、PHP部分とJavaScript部分で実装されている。

add_action( 'admin_init', 'my_admin_init' );
function my_admin_init() {
	add_filter( 'screen_layout_columns', 'my_screen_layout_columns', 10, 3 );
	function my_screen_layout_columns( $defult, $screen_id, $screen ) {
		if ( $screen_id == 'post' || $screen_id == 'page' )
			return array( $screen_id=>3 );
		else
			return $default;
	}
	add_action( 'dbx_post_sidebar', 'my_dbx_post_sidebar' );
	function my_dbx_post_sidebar() {
		global $post;
?>
<div id="postbox-container-3" class="postbox-container">
<?php
		do_meta_boxes( null, 'column3', $post );
?>
</div>
<?php
	}
?>
<?php
	add_action( 'admin_head', 'my_addmin_head' );
	function my_addmin_head() {
?>
<style type="text/css">
<!--
#poststuff #post-body.columns-3 {
margin-right: 600px;
}
#post-body.columns-3 #postbox-container-1 {
float: right;
margin-right: -300px;
width: 280px;
}
#post-body.columns-3 #postbox-container-3 {
float: right;
margin-right: -600px;
width: 280px;
}
-->
</style>
<script type="text/javascript">
( function($) {
	$(document).ready( function(){
		$( '#postbox-container-2' ).before( $( '#postbox-container-3' ) );
		$( '.columns-prefs input:checked' ).each( function () {
			if ( $( this ).val() == 3 ) jQuery( '#post-body' ).removeClass( 'columns-2' ).addClass( 'columns-3' );
		} );
		if ( $.trim( $( '#column3-sortables' ).html() ) == '' ) $( '#column3-sortables' ).addClass( 'empty-container' );
		$( '#column3-sortables' ).on( "sortupdate", function( event, ui ) {
			if ( $.trim( $( this ).html() ) == '' ) $( this ).addClass( 'empty-container' );
			else $( this ).removeClass( 'empty-container' );
		} );
	} );
} )( jQuery );
</script>
<?php
	}
}

簡単に解説を。admin_initアクションでは、screen_layout_columnsフィルターとdbx_post_sidebarアクション、admin_headアクションを登録する。

  1. screen_layout_columnsフィルターでは、投稿画面の列数を3列に変更。
  2. dbx_post_sidebarアクションでは、3列目のウィジェット内容をセンター下のウィジェットエリアの下に表示。
  3. admin_headアクションでは、CSSとJavaScriptを登録。

JavaScript部分では、まずdbx_post_sidebarアクションで登録したウィジェットコンテンツをセンター下のウィジェットエリアの上に移動。続いて、3列表示の時に画面のクラス指定を変更する。最後に、ウィジェットが1つも配置されていない場合に、プレースホルダ―(実際はempty-containerクラスの付け外し)を指定する。

これで投稿画面の表示オプションを開くと、「スクリーンレイアウト」の「列の数」に「3」が加わる。そこで「3」を選択し、ウィジェットの配置を調整すればいい。

将来的には、投稿画面の3列対応なんて標準になるような気もするのだが、意外に簡単に実装できたので、公開することにした。なお動作確認したバージョンはWordPress 3.5のみで、過去のバージョンでは検証していない。ある程度最近のバージョンなら動作できると思うが、動作しなかったらごめんなさい。また、この実装に伴うトラブルには一切責任を負えないので、その点はご了承ください。

おまけというか、追記。標準ではウィジェット幅が255pxになっているので、ウィジェットエリアの幅(上記だと280px)を255pxより小さくするとはみ出してしまう。対応策として、次に示すようにpostboxクラスの幅指定のスタイルを追加する。ただし、中に入るウィジェットによっては正常に表示できない可能性もあるので、その点は注意すること。

.postbox {
	min-width: 200px;
}

関連

  • add_action - アクション関数を追加する
  • add_filter - フィルター関数を追加する

お勧めコンテンツ

get_post_custom_keys(2012年9月6日 登録)

array get_post_custom_keys( [ int $post_id = 0 ] )
投稿記事のカスタムフィールド名を取得する。

plugins_url(2010年2月27日 登録)

string plugins_url( [ string $path = '' [ , string $plugin = '' ] ] )
プラグインの保存先URLを取得する。

load_template(2010年6月7日 登録)

void load_template( string $_template_file [ , bool $require_once = true ] )
テンプレートファイルを読み込む。

display_header_text(2012年9月10日 登録)

bool display_header_text()
ヘッダーのテキストを表示するか調べる。

get_category_by_slug(2010年1月4日 登録)

mixed get_category_by_slug( string $slug )
カテゴリーのスラッグからカテゴリー情報を取得する。

最終更新日時 : 2013-04-17 10:05