WordPressの投稿や固定ページにツールチップを追加すると、コンテンツを強化できます。
特定の単語にマウスカーソルを合わせたときに追加情報を提供し、メッセージを明確にし、コンテンツをよりユーザーフレンドリーにします。
ツールチップは、テキストを煩雑にすることなく、投稿に深みを加える効果的かつ簡単な方法を提供します。ツールチップを使用することで、読者を誘導し、必要に応じてより多くのコンテキストを提供できます。
この記事では、WordPressの投稿や固定ページにツールチップを追加する方法を説明します。

WordPressの投稿やページにツールチップを表示する理由
ツールチップは、WordPressサイトの領域にカーソルを合わせたときに表示される小さなボックスに役立つ情報を表示します。コンテンツに明確さを加えるのに最適な方法です。
ツールチップを使用して、難しい単語の定義を追加したり、重要な事実を強調したり、情報の出典を明らかにしたりできます。脚注のように、ユーザーエクスペリエンスを向上させ、訪問者との信頼関係を築くのに役立ちます。
ただし、ツールチップは決して必須情報に使用しないでください。読者がツールチップを読まなくても、投稿には必要な情報がすべて含まれている必要があります。万が一、読者が見逃した場合のためです。
ツールチップを使いすぎないように注意してください。そうしないと、ウェブサイトの訪問者にとって邪魔になり、ユーザーエクスペリエンスを損なう可能性があります。
これを踏まえて、WordPressの投稿やページにツールチップを追加する方法を見ていきましょう。
WordPressの投稿やページにツールチップを追加する方法
まず、WordPress Tooltipsプラグインをインストールして有効化します。詳細については、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
プラグインを有効化すると、投稿や固定ページにツールチップを追加する方法がいくつかあります。まず、特定のキーワードにツールチップを自動的に追加する方法です。
キーワードへのツールチップの自動追加
新しいツールチップを作成するには、ツールチップ » 新規追加に移動するだけです。まずタイトルを追加する必要があります。
このタイトルはキーワードであり、キーワードが投稿やページに表示されるすべての場所にツールチップが自動的に表示されます。これにより、サイト全体で複数の場所に手動でツールチップを追加する必要がなくなるため、多くの時間を節約できます。
他の単語にもツールチップを表示したい場合は、画面右側の同義語セクションに入力できます。複数の同義語を入力する場合は、パイプ記号|で区切る必要があります。

次に、コンテンツセクションにツールチップを追加します。ツールチップは数語程度の短いものから、画像やその他のメディアを含む数段落のリッチコンテンツまで様々です。ただし、ツールチップ用のコンテンツを作成しているのであり、完全な投稿を作成しているのではないことを念頭に置き、どの画面でも簡単に読めるように、できるだけ簡潔にしてください。
完了したら、画面右側の「公開」ボタンをクリックします。これで、ツールチップのタイトルと同義語が見つかった投稿やページにツールチップが自動的に表示されるようになります。

ショートコードを使用したツールチップの追加
ツールチップを追加する別の方法は、投稿やページのコンテンツにショートコードを追加することです。
この方法は、短いツールチップに適している場合や、ウェブサイト上のすべてのキーワードに一致するたびにツールチップを表示するのではなく、一度だけ表示したい場合に適しています。
ショートコードを初めて使用する場合は、WordPressにショートコードを追加する方法に関する初心者向けガイドで詳細をご確認ください。
ツールチップのショートコードを追加するには、まずツールチップを追加したい投稿またはページをコンテンツエディターで開く必要があります。次に、ツールチップを表示したい場所にこのショートコードを追加します。
[tooltips keyword="YOURKEYWORD" content="YOURTOOLTIPCONTENT"]
YOURKEYWORDをツールチップを追加したい単語またはフレーズに置き換え、YOURTOOLTIPCONTENTをツールチップに追加したいテキストに置き換えてください。ショートコードが正しく機能するように、引用符をそのまま残してください。

ツールチップが機能していることを確認するために、ページをプレビューできます。
デモサイトではこのように表示されます。

ツールチップから用語集を作成する
各ツールチップは、辞書や用語集で見つけるようなキーワードの説明です。ツールチップを追加していくと、基本的な用語集を構築しているようなものです。
これが、WordPress Tooltipsプラグインがウェブサイトにツールチップの用語集を表示できる理由です。表示したい投稿または固定ページに、単に[glossary]ショートコードを追加するだけです。

投稿または固定ページを公開した後、用語集を確認するためにウェブサイトにアクセスできます。
これはデモサイトでの表示方法です。プラグインのツールチップリストに追加したツールチップは含まれていますが、ショートコードで作成したツールチップは含まれていません。

用語集をカスタマイズしたい場合は、WordPressダッシュボードのツールチップ » 用語集設定メニューから行うことができます。
ここでは、用語集の表示方法や含める内容を調整できる多くのオプションが見つかります。

例えば、用語集に画像を表示するかどうかを選択したり、含めたくないツールチップのIDをリストしたりできます。
ボーナスヒント: 新しいツールチップについて読者にアンケートを取る
WordPressでアンケートを作成することは、訪問者からのフィードバックを得るのに非常に役立ち、彼らの関心をよりよく理解するのに役立ちます。
オンラインストアを運営している場合、人々があなたの製品やサービスにどのような機能を求めているかを学ぶために質問をすることができます。
または、WordPressブログをお持ちの場合は、アンケートは記事が役立っているか、読者が他にどのようなトピックを読みたいかを知るのに最適な方法です。
アンケートフォームは、ユーザーエクスペリエンスを向上させるための提案を収集するための汎用的なツールでもあります。

ツールチップ機能では、画面に表示されるまでに1〜2秒かかる場合があるため、サイト訪問者が実際にそれに気づいているかどうかを調査することをお勧めします。また、それが役立つのか、それとも邪魔になっているのかを知りたい場合もあります。
WPFormsは、WordPressアンケートを作成するための最高のフォームビルダーです。さまざまな回答タイプに、星評価、リッカート尺度、またはネットプロモータースコアを使用できます。
さらに、さまざまなユーザーアンケートフォームテンプレートから、ニーズに最適なものを見つけることができます。

アンケートフォームの作成についてさらに詳しく知りたい場合は、WordPressでアンケートを作成する方法に関するガイドを参照してください。
このチュートリアルで、WordPressの投稿やページにツールチップを追加する方法を学んでいただけたことを願っています。また、WordPressでカスタム投稿タイプのアイコンを追加する方法や、投稿やページのサブタイトルを追加する方法に関するガイドもご覧ください。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。

sasa
プラグインをインストールして新しいツールチップを追加し、コンテンツを入力しましたが、リンクにどのように追加すればよいかわかりません。
jawadhyder15
このプラグインは私には機能しません。
しかし、これを手動で行うと、うまくいきます!
wpbeginner
@shovan 動作します。
shovan
このプラグインはWP 3では機能しないと思います
netcaststudio
プラグインをインストールした後、6時間実行してもコメントのインポートが完了しませんでした。何か考えはありますか?
wpbeginner
そのTwitterアイコンはTwitterフォローボタンPROです – http://wpbeg.in/jMT3IT
wpbeginner
@dbroadaway Twitterアイコンは別のプラグインです。フローティングバーはスマート共有プラグインです。
dbroadaway
記事はありがとうございますが、2つの無関係な質問があります。
1: ツールチップアイコンの隣にあるTwitterアイコンは何ですか?
2: 左側にフローティング/固定されたソーシャルメディア共有が気に入りました。カスタムですか、それともプラグイン/サービスですか?
ありがとう。
wpbeginner
@Jaxov それについての記事があります。
Jaxov
@wpbeginner
Offtopic: How happy are you with livefire comment system?
他のソリューションと比較してどうですか?また、登録なしでゲストコメントは可能ですか?
wpbeginner
@mharis @Jaxov @Crysislevel この投稿をシェアしてくれてありがとう、Haris。
mharis
@Jaxov @Crysislevel デモのスクリーンショットはこちらです http://i.imgur.com/m7l10.png
Jaxov
@Crysislevel 同意します!ありがとうございます。
ところで、そのような投稿に例のページやプレビューを作成して、実際にどのように表示されるかを見られるようにした方が良いかもしれません。
Crysislevel
nice tutorial! thanx for this…i never knew how to do that!