メニューバーをアイコン表示に～WordPress Twenty Eleven改造

以前、管理バーを常時表示させてメニューバーに転用する改造作業を行いました。ところが、各項目の幅が文字数によって決まるためタップしにくい項目があるので、スマホでは使いにくいです。

そこで、メニューの各項目を、40×40の正方形で表示するべく頑張ってみました。

ページ上部に高さ40pxの空白を作る

メニュー項目を1辺40pxの正方形にするということは、メニューバーの幅も40pxということです。そこで、function.phpに以下を追加します。

function mytheme_admin_bar_callback() {
    echo '<style type="text/css">
    html { margin-top: 40px !important; }
    * html body { margin-top: 40px !important; }
    </style>';
}
add_action( 'wp_head', 'mytheme_admin_bar_callback' );

各メニュー項目を40×40サイズに設定

以前の記事でも、メニューバーにメニュー項目を登録しました。

今回はそのときのfunction.phpへの書き込みを少しアレンジして、’title’に40×40の画像やCSSで40×40に整形した文字列などを入れます。具体的には次のようにしました。

function mytheme_add_about_and_login( $wp_admin_bar ) {
    $wp_admin_bar->add_node(array(
    'id' => 'HOME',
    'title' => '<img style="width:40px;" src="https://webshufu.com/top/wp-content/uploads/2012/04/e11754b14653955f5bd853089f01fb2c.jpg" alt="ウェブシュフ" />',
    'href' => home_url('/'),
    'meta' => array('class' => 'admin_bar_home')
    ));

    $wp_admin_bar->add_node( array(
    'title' => 'Menu',
    'href' => '#categories-2',
    'meta' => array('class' => 'admin_bar_menu')
    ));
    $wp_admin_bar->add_node(array(
    'id' => 'pagetop',
    'title' => '<div style="height:20px;
    color:white;
    background:purple;
    font:bold 16px/20px sans-serif;">Page</div><div style="height:20px;
    color:white;
    background:purple;
    font:bold 16px/20px sans-serif;">TOP</div>',
    'href' => '#',
    'meta' => array('class' => 'admin_bar_pagetop'),
    ));

}
add_action( 'admin_bar_menu', 'mytheme_add_about_and_login', 1000 );

管理バーのスタイルを変える

今作っているのはメニューバーですが、もともと管理バーだったものを転用しています。

そのため、スタイルは管理バーと同じくwp-includes/css/admin-bar.cssがあてられています。

これを直接いじると、管理画面の見た目が崩れる恐れがある上、wordpressのアップデート時に上書きされて、コツコツ頑張ってきたカスタマイズが水泡に帰す恐れがあります。

専用.css作成

そこで、メニューバー専用の.cssファイルを新たに作ります。

まず、wp-includes/css/admin-bar.cssをコピーして、今いじっているテーマファイル内に貼り付けます。

たとえば、twentyelevenを直接いじっているならwp-content/theme/twentyeleven/内に、hogehogeという子テーマフォルダーを作っていじっているならwp-content/theme/hogehoge/内に貼り付けます。

次に、header.phpの</head>の直前に以下のコードを挿入します。

<link rel="stylesheet" 
type="text/css" 
media="all" 
href="<?php bloginfo( 'wpurl' ); ?>/wp-content/themes/(twebtyelevenまたは子テーマフォルダー)/admin-bar.css" />

これで、メニューバー専用のcssファイルが出来ました。

28px→40px

次に内容を書き換えていきます。もともとの管理バーは高さ28pxなので、これを40pxに変えます。

テキストエディタの検索機能などを使って、admin-bar.cssで「28px」となっている部分を全て「40px」に書き換えてください。

メニュー項目のpadding調節

項目同士のpaddingは、admin-bar.css内の以下の部分で12pxに設定されています。

#wpadminbar .quicklinks a,
#wpadminbar .quicklinks .ab-empty-item,
#wpadminbar .shortlink-input{
height:40px;display:block;
padding:0 12px;margin:0
}

12pxだと隙間が開きすぎるので、好みの数値に変えます。

私はスマホで標準的な幅320pxの画面でメニュー項目が最大7つ並ぶように12pxを2.5pxに変えました。

0にすると、幅320pxの画面でメニューが8つ隙間なくぎっしりと並びます。

メニュー項目のpadding調節

最後に、メニューバーの全項目の文字を大きくして太くします。admin-bar.cssに2箇所ほど、以下の記述があります。

font:normal 13px/40px sans-serif;

これを下のように変えます。

font:bold 16px/40px sans-serif;

以上で、完成したつもりですが、画像を使った項目は見た目があまり美しくないので、CSSで整形した文字列で行こうと思います。

追伸

その後こんな感じに変えたりもしました。