HCDコンサルティング(旧・中川勉社会保険労務士事務所FPウェブシュフ)のブログ

wordpressで管理バーから常時表示メニューバーを作る方法


ワードプレスでは、デフォルトのtwentyelevenをはじめとするほとんどのテーマで、ログインしてる状態では常にAdmin barが表示されます(上図)。これを改造して、どんなに下にスクロールしても常に表示されるナビゲーションメニューバーに早変わりさせることが出来ます(下図)。

管理バーを常時表示

まず、ログインしていない状態の運営者や、運営者以外の閲覧者からも管理バーが見えるようにします。

それには、以下のコードを、使用しているテーマのfunctions.phpに書き込みます。

/**
* 管理バーを常に表示する
* @return boolean
*/
function mytheme_show_admin_bar(){
    return true;
}
// show_admin_barにフィルターする。最後に処理してもらいたいので、1,000番目に登録。
add_filter( 'show_admin_bar', 'mytheme_show_admin_bar' , 1000 );

管理バーから全ての管理メニューを除去

次に、管理画面へのリンクを、バーから全て取り除きます。以下のコードを、先ほどのコードの続きに書き入れてください。

function mytheme_remove_item( $wp_admin_bar ) {
    if(!is_admin()){
    $wp_admin_bar->remove_node('wp-logo');
    $wp_admin_bar->remove_node('new-content');
    $wp_admin_bar->remove_node('comments');
    $wp_admin_bar->remove_node('appearance');
    $wp_admin_bar->remove_node('updates');
    $wp_admin_bar->remove_node('user-info');
    $wp_admin_bar->remove_node('search');
    $wp_admin_bar->remove_node('site-name');
    $wp_admin_bar->remove_node('dashboard');
    $wp_admin_bar->remove_node('edit');
    }
}
add_action( 'admin_bar_menu', 'mytheme_remove_item', 1000 );

これで、「こんにちわ○○さん」以外の全てのメニューが消えるとは思いますが、消えないものがあるときは、フッターのソースをのぞいてみてください。

li id="wp-admin-bar-*****"
というのがひとつまたはいくつかあると思うので、それぞれに対応して
$wp_admin_bar->remove_menu('*****')
をfunctions.phpに書き込んでください。すると以下のような黒無地のバーが出来ています。因みに、どこをクリックしても上スクロールしながらページトップに戻るようになっています。

バーに表示するナビゲーションメニューを好きなように登録

空になったバーに、管理ページへのリンクではなく、ナビゲーションのためのリンクを埋め込んでいけば、「常に表示されるメニューバー」の完成です。

私は、サイトトップ、ページトップ、サイドバーの最上部へのリンクを埋め込みました。function.phpには以下のコードを書き込みました。

function mytheme_add_about_and_login( $wp_admin_bar ) {
    if(!is_admin()){
        $wp_admin_bar->add_node(array(
        'id' => 'HOME',
        'title' => 'ウェブシュフ',
        'href' => home_url('/'),
        'meta' => array('class' => 'admin_bar_home')
        ));

        $wp_admin_bar->add_node( array(
        'id' => 'menu',
        'title' => 'Menu',
        'href' => '#categories-2',
        'meta' => array('class' => 'admin_bar_menu')
        ));
        $wp_admin_bar->add_node(array(
        'id' => 'pagetop',
        'title' => '↑',
        'href' => '#',
        'meta' => array('class' => 'admin_bar_pagetop'),
        ));
    }
}
add_action( 'admin_bar_menu', 'mytheme_add_about_and_login', 1000 );

こうして、冒頭で紹介した画像の通りのメニューバーが出来上がります。
‘title’には、リンクのアンカーテキストが入るのですが、この部分にimgタグで画像を埋め込むことも出来るようです。
また、バーのうちリンクが設定されていない部分をクリックすると、ページトップまでゆっくりとスクロールします。

これで、画面内に常にナビゲーションバーが存在することになり、ユーザビリティーもアップしたのではないかと思います。

(なお、カスタマイズの実験は実験用サイトで行っています。望みどおりのカスタマイズが出来たら本格的に当ブログに導入します。)

special thanks

http://8bitodyssey.com/archives/3285
http://www.webopixel.net/wordpress/319.html
http://varl.jp/note/admin-bar-hide-remove-add-menu


投稿日

カテゴリー:

投稿者:

 最終更新日:

タグ: