IDを付けた特定の要素にマウスオーバー（ホーバー）させると設定した音声を再生するプラグイン「Hover Sound」

サイトを開くと音が出る、どこかにマウスを合わせると音が出る・・・という機能は特に新規の訪問者からすると突然大きな音が鳴る場合があり、あまり好まれる機能ではないと思うのですが・・・ちょっとおもしろく、恐らくこれしかないプラグインだと思いますので紹介しておきます。

プラグインの名前は【Hover Sound】。読んで字のごとくという名前のプラグインです。

古いプラグインですが、テスト環境（ページ末尾に表示してます）では問題なく動作しました。

語学勉強などのサイトで特定の文字列にマウスオーバーすると読み上げるというようなシーンで活用できそうなプラグインだと思います。

【Hover Sound】プラグインの基本的な機能・できること

1. 特定のIDに対して特定の音声を再生する

本記事を参考にWordPressサイトへプラグインの導入を検討される方へ

WordPressは古くから無料で配布されているサイト作成ツール（CMS）で、随時改良が加えられており、さまざまなバージョンが存在します。

さらにWordPressを動かすためのプログラムであるPHP、サイトのデータを保存しておくためのデータベースについても様々なバージョンがあります。

そしてWordPress本体同様にプラグインについてもさまざまなバージョンが存在します。

本記事を参考にプラグインの導入をお考えの方は、以下に留意の上でインストールするようにしてください。

• テスト環境での動作に基づいた紹介記事ですので、すべての環境で正常に動作するかどうかは不明です
  ※本記事の内容についてはページ内に記載しているプラグインバージョンのものになります。現在のバージョンと異なる場合、機能や日本語対応の状況などが異なる場合があります。
  ※また、テスト環境、テストしたプラグインバージョン等の表示が本文内にない場合、ページタイトル下にある最終更新日当時の情報となりますので、現在のバージョンでは全く違う機能となっているかも知れません。
• プラグインに無料版と有料版（Pro版）がある場合、特に記載がなければ無料版の情報のみを紹介しています
• このページでプラグインを使用する際に必要なショートコードやコードなどは、コピーして使用することができますが、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。
• プラグイン本体の動作不具合や質問などは公式サイトのフォーラムなどで行ってください（ここでは質問にお答えすることはできません）

【Hover Sound】プラグインの設定画面や表示の日本語化と翻訳

【Hover Sound】プラグインは言語の変更に未対応ですので表示のまま設定することになります

【Hover Sound】プラグインのインストールと設定

インストール方法

インストールはプラグインの新規追加でプラグイン名を入力して検索してインストールするか、WordPressのプラグイン公式配布ページからダウンロード後、管理画面からアップロードインストールしてください（プラグインの公式ページは本ページ内記載のリンクをクリック、もしくは、WordPress公式サイトで検索してください）。

WordPressを使い始めて間もない方（初心者の方）は、より詳細なプラグインのインストール手順や、インストール時に起こる問題などへの対処方法をまとめた【WordPress】プラグインのインストール＆追加方法とエラー対処の方法も併せてご覧ください。

【Hover Sound】プラグインの基本的な使い方

設定画面はありません。

マウスオーバーで音声を鳴らす手順は次の通りです

1. 音声を鳴らしたいところにidを付ける
2. そのidに対して鳴らす音声を設定するショートコードをページ本文内に挿入する

idはdivタグやimageタグ、pタグなどほとんどのものに「id=”〇〇”」を付け足して、ページの中のこの部分ですという指定ができるものです。class要素とは異なり１ページ内に同じ名前（〇〇）は１回しか使えないので、音を鳴らしたいシーン分だけid名を付けていきます。

このプラグインで使用するショートコードは

[hoversound id="〇〇" url="音声ファイルのURL"]

です。

〇〇の所に本文内に指定したid名、音声ファイルのURLのところに音声ファイルのURLを入れると機能します

※下書き状態やプレビューでは動作しませんでした。公開してからそのページを開いて確認する必要があります

プラグインのテスト環境＆個人的評価

最後に【Hover Sound】を動作確認した際の環境と個人的な評価を書いておきます。導入の検討や参考になれば幸いです。

テストした環境

• テストサーバー：カラフルボックス
• WordPressのバージョン：4.9.6
• PHPのバージョン：7.0
• テーマ：Simplicity2 バージョン2.3.0g
• プラグインのバージョン：本記事で紹介しているバージョン 1.0.0／最新バージョン 1.0.0
• 公式サイト（wordpress.org上）：https://wordpress.org/plugins/hover-sound/
• 公式サイト（作者サイト）：

個人的な評価・感想ほか

1. 設定のしやすさ：★★★★★
2. 使いやすさ：★★★★★
3. おすすめ度：★★★★★

冒頭で書いた通り、突然音が鳴るというのはびっくりしますし、静かな環境で突然音が鳴ったら・・・という心配がありますので、音を鳴らす場所の手前や前後などで告知をすることをおすすめします。