ブログ

wordpress管理画面の左メニュー幅を広げて折り返しを修正する方法。

いつもだったら気にしない事、いや気にしてない事でしたが、ある程度自分のwordpressブログも形になってくると違った所が気になってくるもので。

 

 

 

 

 

むむむ

 

 

(*゚д゚)なんで折り返してるのーーーー???

 

wordpress管理画面の左メニュー幅拡張の実装方法

というわけでメニューの折り返しを防ぐためにも、wordpressの管理画面の左にあるメニューの幅の変更する方法を調べました。まずは新しくCSSを作成し、wordpressテーマのフォルダに置きます。今回はテーマフォルダ直下にkanri.cssというファイル名で作成しています。

cssファイルの作成

そして作成したkanri.cssに下のように書き込みます。

#adminmenuback,#adminmenuwrap,#adminmenu,#adminmenu .wp-submenu {
 width: 200px;
}

これら要素は下の画像の赤で囲った黒メニュー部分およびサブメニューの幅です。

続いて、

#adminmenu .opensub .wp-submenu {
 left: 200px;
 width:200px;
}

上のleftは下の画像でのサブメニューの左からの開始位置です。
下のwidthはサブメニューの幅になります。

#wpcontent,#wpfooter {
 margin-left: 200px;
}

このmargin-leftは管理画面のメニューの右側にあるコンテンツ部分の左側のマージンになります。

基本的に指定したは同一指定してください。

作成したCSSファイルの導入方法

続いて、上で作成したcssファイルを管理画面で読み込みます。実装の仕方としては、テーマファイル内のfunction.phpに以下のスクリプトを追加し、カスタムCSSを読み込みます。スクリプト内のkanri.cssの部分は作成したcssファイルにしてください。

add_action('admin_enqueue_scripts', 'custom_enqueue');
function custom_enqueue() {
 wp_enqueue_style('custom_css', get_template_directory_uri() . '/kanri.css');
}

以上の実装を行って管理画面のメニューの折り返しを無くすことができました。

 

すっきりー!(・∀・)

 

コピペ用

最後にcssとfunction.phpに追記するphpスクリプトをまとめたものを置いておきます。

 

kanri.css

#adminmenuback,#adminmenuwrap,#adminmenu,#adminmenu .wp-submenu {
 width: 200px;
}
#adminmenu .opensub .wp-submenu {
 left: 200px;
 width:200px;
}

#wpcontent,#wpfooter {
 margin-left: 200px;
}
 

function.php

add_action('admin_enqueue_scripts', 'custom_enqueue');
function custom_enqueue() {
 wp_enqueue_style('custom_css', get_template_directory_uri() . '/kanri.css');
}