いつもだったら気にしない事、いや気にしてない事でしたが、ある程度自分の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');
}
のたぱ
