WordPressウィジェットの設定エリアを余裕を持った広さにするカスタマイズ方法

WordPressデフォルトのウィジェット設定では、ブラウザの幅によっては、以下のような狭いウィジェット設定エリアになります。

これだと少し狭い気がするので、設定エリアをもう少し広げて、以下のような余裕を持ったものにした方が見やすいです。

今回は上記のような「少し横幅に余裕を持った『ウィジェット設定エリア』にするカスタマイズ方法」を紹介したいと思います。

ウィジェット設定エリアを広げるカスタマイズ方法

ウィジェット設定エリアを広げるには、子テーマのfunctions.phpに以下のようにコピペするだけです。

//ウィジェット設定エリアの幅を広げる
add_action('admin_head', 'wide_widget_setting_area');
if ( !function_exists( 'wide_widget_setting_area' ) ):
function wide_widget_setting_area(){
  global $current_screen;
  if ( $current_screen->id == 'widgets' )
  {
  ?>
	<style type="text/css">
	.widget.open{
	  margin-left: -116px;
	  z-index: 100;
	}

	#sub-accordion-section-sidebar-widgets-sidebar .widget.open,
	#wp_inactive_widgets .widget.open{
	  margin-left: 0;
	}

	</style>
  <?php
  }
}
endif;

やっていることは単純で、admin_headアクションをフックして、ウィジェット管理画面のヘッダーにCSSを出力しているだけです。

基本的にはマイナスマージンでエリアを広げている

基本動作としては、「ウィジェット開いた状態（.widget.open）」のHTML要素に対して、マイナスマージン「margin-left: -116px;」を指定して、ウィジェットエリアを広げているだけです。

「-116」の値を変更すれば、エリアを広げたり狭めたりも可能です。

ウィジェット画面以外では動作しないように

この部分は、ウィジェット設定画面以外ではマイナスマージン動作をしないようにするためです。

	#sub-accordion-section-sidebar-widgets-sidebar .widget.open,
	#wp_inactive_widgets .widget.open{
	  margin-left: 0;
	}

「#sub-accordion-section-sidebar-widgets-sidebar .widget.open」はテーマカスタマイザーのウィジェット設定エリアで動作しないようにしています。

「#wp_inactive_widgets .widget.ope」は「使用停止中のウィジェット」置き場で動作しないようにしています。

動作確認

このようにカスタマイズすることで、「外観→ウィジェット」の例えば「サイドバーウィジェットエリア」の個々のウィジェット開いた場合、以下のような広い設定エリアを確保できます。

個人的には、上記のように横幅があった方が見やすいような気がします。

まとめ

個人的には、狭い設定エリア内でちまちまと設定するよりは、余裕を持ったエリアでウィジェット設定をできた方が楽なので、カスタマイズしてみました。

基本的に、「WordPressデフォルトのウィジェット」を使用しているだけでは、今回のカスタマイズは必要ないと思います。

けれど、様々なプラグインをインストールしたときに使えるようになる「高機能な設定画面を持つウィジェット」を設定する際は、やはり広い設定エリアの方が見やすいので楽に設定変更できます。

というわけで「あのプラグインの高機能ウィジェットは、狭いエリアで設定をいじるとやりづらいんだよな…」なんてことがある場合は、今回のカスタマイズをすると良いかもしれません。

「そういったことは、これまで思ったことがない」なんて方は、わざわざする必要はないと思います。