簡単便利！Wordpressのグローバルメニューでツールチップを使いたい時はこのプラグイン【SIMPLE TOOLTIPS】

意外と知っておくと便利なツールチップ。
グローバルメニューをスタイリッシュに表示したい時に英語表記することが多々あるのですが、年齢層高めのユーザーがターゲットの場合、日本語表示も欲しいという声をいただきます。
そんなときにツールチップがあれば、英語表記だけどマウスオーバー時にちゃんと日本語で案内できるので、クライアント様の要件を満たせることが多いです。

みなさまも覚えておくと、ちょっとサイトデザインの幅が広がりますよ。

プラグインを新規追加

まずは、Wordpressにプラグインを追加しましょう。
今回ご紹介するのは「Simple Tooltips」です。

なので、Wordpressのダッシュボードの
「プラグイン」→「新規追加」→右上の検索ボックスに「Simple Tooltips」と入力しましょう。

すると「Simple Tooltips」が表示されますので、
インストール→有効化

をクリックします。

グローバルメニューにツールチップを設定

では早速、このプラグインを使ってグローバルメニューにツールチップを追加しましょう。
現在ご覧の弊社onWEBのサイトでは、グローバルメニューが英語表記となっています。
こちらに日本語表記のツールチップを導入し、ユーザーの利便性を高めたいと思います。

ツールチップ設定

まず、ダッシュボードの左メニューの「設定」→「Simple Tooltips」をクリックします。

Background Color

ツールチップの背景色の変更

Text Color

ツールチップの文字色の変更

Max Width

最大幅の設定

Opacity

ツールチップの背景透過度の設定

Position

ツールチップの配置場所

Disable On Mobile

モバイル時にツールチップを表示するかしないかの設定

Menu Selectors (Advanced)

グローバルメニューに設定する際にクラス名を指定
今回の重要なポイントです

背景色や文字色などは、サイトに合わせて設定してください。

では、グローバルメニューにツールチップを使用していきましょう。

まず、ツールチップを入れたい、グローバルメニューのクラス名を確認してください。
※弊社onWEBでは「headMainMenu」になります。

クラス名が確認できたら、上記「Menu Selectors (Advanced)」の項目に先ほどのクラス名を記入ください。

その際、「.」を入れるのをお忘れなく。