投稿画面のウェジェットを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 - フィルター関数を追加する

お勧めコンテンツ

status_header(2010年5月24日 登録)

void status_header( int $code [ , string $description = '' ] )
header関数を呼び出し、HTTPステータスをセットする。

get_default_comment_status(2015年8月20日 登録)

string get_default_comment_status( [ string $post_type = 'post' [ , string $comment_type = 'comment' ] ] )
投稿タイプのコメントステータスを取得する。

wp_get_attachment_metadata(2012年3月2日 登録)

mixed wp_get_attachment_metadata( [ int $post_id = 0 [ , bool $unfiltered = false ] ] )
添付ファイルのメタ情報を取得する。

edit_term_link(2015年6月24日 登録)

string edit_term_link( [ string $link = '' [ , string $before = '' [ , string $after = '' [ , object $term = null [ , bool $echo = true ] ] ] ] ] )
タームの編集リンクを表示または取得する。

did_action(2011年12月26日 登録)

int did_action( string $tag )
アクションが実行済みか調べる。

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