この記事は最後に更新してから1年以上経過しています。

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

管理画面カスタマイズTips

説明

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

3列表示のイメージは下図の通り。ウェジェットを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アクションを登録する。

screen_layout_columnsフィルターでは、投稿画面の列数を3列に変更。
dbx_post_sidebarアクションでは、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;
}

最終更新 : 2013年04月17日 10:05

お勧め

add_shortcode（2018年5月27日更新）

void add_shortcode( string $tag, mixed $func )

ショートコード（独自タグ）を追加する。ショートコードは、投稿記事内でテキスト内容がない[tag]や、テキストを内包する[tag]テキスト[/tag]の書式で使用できる独自タグのこと。標準の状態では、 the_content関数によって表示する直前のフィルター処理内でパラメータ$funcで指定した関数・メソッドが実行される。

get_user_setting（2022年1月31日更新）

mixed get_user_setting( string $name [ , string $default = false ] )

ユーザーインターフェイス設定を取得する。

have_posts（2018年5月27日更新）

bool have_posts( )

次の投稿データが存在するかを調べる。

in_category（2018年5月27日更新）

bool in_category( mixed $category [ , mixed $post = null ] )

投稿情報が指定したカテゴリーに属しているか調べる。

add_feed（2024年6月24日更新）

string add_feed( string $feedname, callable $callback )

フィードを追加する。

説明

関連

お勧め