Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressの投稿とページにツールチップを追加する方法

編集メモ: WPBeginner のパートナーリンクから手数料を得ています。手数料は編集者の意見や評価に影響を与えません。編集プロセスについて詳しく知る。

WordPressの投稿やページにツールチップを追加したいですか?

ツールチップとは、特定の単語にマウスオーバーしたときに表示される追加情報のことです。コンテンツを明確にするのに役立つ方法です。

この投稿では、投稿やページにWordPressのツールチップを追加する方法を紹介します。

Add tooltips to your WordPress posts and pages

なぜWordPressの投稿やページにツールチップを表示するのか?

ツールチップは、WordPressサイトのエリアにマウスオーバーするとポップアップ表示される小さなボックスに便利な情報を表示します。コンテンツにわかりやすさを加えるのに最適です。

ツールチップを使って、難しい単語の定義を追加したり、重要な事実を強調したり、情報の出典を明らかにしたりすることができます。脚注のように、ユーザーエクスペリエンスを向上させ、訪問者との信頼関係を築くのに役立ちます。

しかし、ツールチップは決して重要な情報に使うべきではない。あなたの投稿には、たとえ読者がツールチップを読まなくても、万が一に備えて必要なものはすべて書いておくべきです。

また、ツールチップを使い過ぎないように注意する必要があります。ツールチップがサイト訪問者の気を散らし、ユーザー体験を台無しにしてしまう可能性があります。

それでは、WordPressの投稿やページにツールチップを追加する方法を見ていきましょう。

WordPressの投稿とページにツールチップを追加する方法

まず最初にWordPress Tooltipsプラグインをインストールして有効化します。さらに詳しく知りたい方は、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

プラグインを有効化すると、投稿やページにツールチップを追加する方法がいくつかあります。一つ目は、特定のキーワードに自動的にツールチップを追加する方法です。

キーワードに自動的にツールチップを追加する

新しいツールチップを作成するには、すべてツールチップ ” 新規追加に移動するだけです。タイトルを追加することから始める必要があります。

このタイトルはキーワードであり、ツールチップはあなたの投稿やページ内のキーワードが表示される場所に自動的に表示されます。サイト内の複数の場所に手動でツールチップを追加する必要がないため、時間を大幅に節約することができます。

他の単語もツールチップに表示させたい場合は、画面右の類義語セクションに入力することができます。複数の類義語を入力する場合は、パイプ記号|で区切ってください。

Add a New Tooltip

次に、コンテンツ・セクションにツールチップを追加します。ツールチップの長さは、ほんの数語かもしれないし、画像やその他のメディアを使った数段落のリッチコンテンツかもしれない。しかし、あなたが書いているのは投稿全体のコンテンツではなく、ツールチップのためのコンテンツであることを念頭に置いて、どの画面でも読みやすいように、できるだけ簡潔に書きましょう。

完了したら、画面右の「公開する」ボタンをクリックしてください。これで、ツールチップのタイトルと類義語があれば、投稿日やページにツールチップが自動的に表示されるようになります。

Preview of Tooltip Automatically Added to a Keyword

ショートコードを使ってツールチップを追加する

ツールチップを追加するもう一つの方法は、投稿やページのコンテンツにショートコードを追加することです。

この方法は、短いツールチップや、サイト上のすべての一致キーワードではなく、一度だけツールチップを表示したい場合に適しています。

ショートコードに慣れていない方は、WordPressでショートコードを追加する方法の初心者ガイドでさらに詳しく説明しています。

ツールチップ・ショートコードを追加するには、まず、ツールチップを追加したい投稿またはページをコンテンツエディターで開く必要があります。次に、ツールチップを表示したい場所にこのショートコードを追加します:

[tooltips keyword="YOURKEYWORD" content="YOURTOOLTIPCONTENT"]

YOURKEYWORDをツールチップに追加したい語句に置き換え、YOURTOOLTIPCONTENTをツールチップに追加したいテキストに置き換えるだけです。ショートコードが正しく動作するように、必ず引用符を残してください。

Adding a Tooltip Using Shortcode

ページをプレビューして、ツールチップの動作を確認することができます。

これがデモサイトでの外観です。

Preview Tooltip Added Using Shortcode

ツールチップから用語集を作る

各ツールチップは、辞書や用語集にあるようなキーワードの説明です。ツールチップを追加していくと、基本的な用語集を作るようなものです。

そのため、WordPress Tooltipsプラグインを使えば、サイトにツールチップの用語集を表示することができます。表示させたい投稿やページに[glossary]ショートコードを追加するだけです。

Adding the Glossary Shortcode

投稿やページを公開した後、サイトにアクセスして用語集を見ることができます。

これがデモサイトでの外観です。プラグインのツールチップリストに追加したツールチップは含まれていますが、ショートコードを使用して作成したツールチップは含まれていません。

Preview of Tooltip Glossary

用語集をカスタマイズしたい場合は、WordPressダッシュボードのツールチップ ” 用語集の設定メニューから行うことができます。

用語集をどのように表示するか、何を含めるかについて調整できるオプションがたくさんあります。

Tooltip Glossary Settings

例えば、用語集に画像を表示するかどうかを選択したり、表示したくないツールチップのIDをリストアップすることができます。

このチュートリアルで、WordPressの投稿やページにツールチップを追加する方法をご理解いただけたでしょうか。また、メールマガジンの作成方法や、無料のホスティングサイトの比較もご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

15件のコメント返信を残す

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. sasa says

    I installed plugin and add new tooltip, entered content and now i dont know how to add it on a link

  3. netcaststudio says

    After installing the plugin the import of comments didn’t complete after 6 hours of running. Any thoughts?

  4. dbroadaway says

    Thanks for the write-up, but I have two unrelated questions:

    1: What is that Twitter icon next the Tooltip icon?

    2: I love your left-hand floating/static social media shares. Is that custom or a plugin/service?

    Thanks.

  5. Jaxov says

    @wpbeginner ;-) Offtopic: How happy are you with livefire comment system?

    How is it compared to other solutions? Also does it allow guest comments without registration?

  6. Jaxov says

    @Crysislevel I agree! Thanks for this.

    Btw you should maybe create an example page or preview in such posts so that we can see how it actually looks live.

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。