おすすめのwordpressメニュープラグイン(HelloBar系)

Kuniyoshi Takemoto

10年前

This post is also available in: English-US (英語)

wordpressで上部のヘッダー部分が画面スクロールと一緒についてくるプラグイン(HelloBar系)の紹介です。
主にナビゲーションメニューや、CTA(コールトゥーアクション)などの用途に便利です。

Contents

1 有名なのは HelloBar
2 WordPress Notification Bar
3 Sticky Header by ThematoSoup
- 3.1 導入方法
  - 3.1.1 1.表示するカスタムメニューの作成
  - 3.1.2 2.StickyHeaderプラグインの設定
- 3.2 追加)複数のナビゲーションバーを表示したい場合

有名なのは HelloBar

おそらく有名なのは Hello Bar というサービスなんですが、最初の25クリック/月までは無料で、その後は下記の画像のように100クリック/月で4.95ドルからという料金体系になっています。
非常に高機能なので予算に余裕がある方にはおすすめです。

old-hellobar-price

WordPress Notification Bar

文章とCTA(コールトゥーアクション)へのリンクの１セットだけで良い！という方におすすめのプラグイン。
設定メニューから色と文章、リンク先などが簡単に設定できます。ただし、１セットのみの表示なのでナビゲーションメニューの代替にはなりません。

Sticky Header by ThematoSoup

ロゴの設定・バーの背景色・指定px以下でのバーの無効化・指定pxスクロールでのバーの表示...などなど、簡単な設定で色々な機能が使えます。
使い方によっては、CTA(コールトゥーアクション)だけの使い方や、ナビゲーションメニューの代替も可能です。

導入方法

記事執筆時点で当サイトにて導入していますので、簡単な導入方法だけ紹介します。
ナビゲーションメニュー・CTA(コールトゥーアクション)の両方をフレキシブルに使うことが可能です。

1.表示するカスタムメニューの作成

今現在あるカスタムメニューをそのまま使用する場合には、この手順は不要です。
新たなカスタムメニューを使用する場合、カスタムメニュー(外観＞メニュー＞新規メニューを作成)を作成します。

2.StickyHeaderプラグインの設定

TwentyTwelveの場合 外観＞カスタマイズより、StickyHeaderのカスタマイズメニューが表示されていると思います(プラグイン一覧よりStickyHeaderのsettingからも移動できます)。

Menu：作成したカスタムメニュー、もしくは今現在あるメニューを割り当てます。
Sticky Header max width (in pixels)：Sticky Headerの最大横幅。pxで指定。
Make visible when scrolled to (in pixels)：指定したピクセルから表示を開始します。pxで指定。
Hide if screen is narrower than (in pixels)：指定ピクセルよりも小さければSticky Headerを表示しません。pxで指定。

追加)複数のナビゲーションバーを表示したい場合

上記の導入方法に加えて、複数のナビゲーションバーを表示したい場合の手順です。

1.function.phpにカスタムメニューの表示場所を記述

wordpressの wp_nav_menu() という関数を使います。下記の例はtwentytwelveテーマの場合です。

// This theme uses wp_nav_menu() in one location. // 元々あるコード
//register_nav_menu( 'primary', __( 'Primary Menu', 'twentytwelve' ) ); // 元々あるコード
register_nav_menus ( array (
  'primary' => __( 'Primary Menu', 'twentytwelve' ), // オリジナルのメニュー
  'secondary' => __( 'Secondary Menu', 'twentytwelve' ) // 追加したメニュー
));

2.作成したカスタムメニューを割り当てる

次に「1.表示するカスタムメニューの作成」に加えて、位置の管理(外観＞メニュー＞位置の管理)より、Secondary Menuに作成したカスタムメニューを割り当てて、変更を保存します。

3.テーマファイルにカスタムメニューの表示場所を追加

テーマファイルの任意の位置(bodyタグ内)に下記のようなコードを追加し、Secondary Menuを表示します。

<div class="sticky">
<?php wp_nav_menu( array( 'theme_location' => 'secondary', 'menu_class' => 'navbar' ) ); ?>
</div><!-- class="sticky" -->

Tags: wordpressカスタマイズ