新しい（無料の）オーディオストーリー画像プラグインを使用して、WordPress画像にオーディオを追加します

画像が1000語の価値がある場合、音声と同期された画像は価値があるはずです…まあ、1000語以上ですよね？ つまり、WordPress画像にオーディオストーリーを追加することは、サイトで使用する画像にコンテキストを追加するための優れた方法です。

「オーディオストーリー」とはどういう意味ですか？ 基本的に、WordPressサイトの個々の画像と同期されるオーディオクリップ。 この投稿では、WordPressのオーディオストーリーが何を意味するのかを正確に説明します。 次に、Audio StoryImagesと呼ばれる無料のプラグインを使用してそれらを自分のサイトに追加する方法について説明します。

オーディオストーリー画像は何をしますか？

私が言ったように、Audio Story Imagesを使用すると、オーディオファイルを画像に同期できます。 選択した画像の左上隅に音声アイコンが表示されます。 そして、アイコンをクリックすると、オーディオの再生が即座に開始されます。

潜在的な用途はかなりきちんとしています。 私は芸術的用途と実用的用途の両方を見ています：

• 芸術面では、サイトに投稿された各芸術作品の背後にある意味とインスピレーションを説明するナレーションを追加できます。 または、音楽を追加して、アートに付随する没入型のエクスペリエンスを作成することもできます。
• 実用面では、チュートリアル画像にナレーションを追加できます。 そのため、クリックする場所を示す画像を含めるだけでなく、プロセス全体を説明するナレーションをすばやく追加することもできます。

この機能の他のニッチな用途もたくさん考えられると思います。 私のリストは決して包括的なものではありません！

始める前に–警告

このプラグインの使用方法を説明する前に、簡単な注意点を示しておきます。

このプラグインはかなり新しく、巨大なインストールベースがありません。 機能が非常にクールであり、私たちの知る限り、同様のものを提供するプラグインは他にないと考えているため、これを取り上げています。

そうは言っても、いわば「リンガーを通過」していないので、まだ完全に支持したくはありません。

プラス面として、開発者は存在するいくつかのサポートスレッドに対応しているようです。 プラグインをいじってみても、問題は発生しませんでした。

オーディオストーリー画像の使用方法

まず、通常のWordPressエディターでオーディオストーリー画像を使用する方法を紹介します。 次に、Diviでどのように機能するかについて説明します。

開始するには、オーディオストーリーイメージをインストールしてアクティブ化することから始めます。 有効にすると、すぐに開始できます。つまり、構成する設定はありません。

プラグインは次のように機能します。

画像と音声ファイルの両方をメディアライブラリに追加します。 次に、通常のメディアライブラリインターフェイスでこれら2つのファイルを同期します。 次に、投稿にオーディオストーリーを挿入するには、WordPressエディターの通常の[メディアの追加]ボタンを使用するだけです。

ステップバイステップでそれを行う方法は次のとおりです…

メディアライブラリに少なくとも1つの画像と1つのオーディオファイルをアップロードすることから始めます。 次に、[メディア]→[ライブラリ]に移動します。 グリッドビューではなく、リストビューを使用してください。 新しいAudioStory列が表示されます。 音声を追加する画像の横にある[添付]をクリックするだけです。

次に、メディアライブラリ内のすべてのオーディオファイルを含むウィンドウがポップアップ表示されます。 選択したオーディオファイルの横にあるラジオボックスを選択し、[選択：]をクリックします。

画像と音声ファイルをリンクすると、その関係を反映するように[音声ストーリー]列が更新されます。

これで、通常の[メディアの追加]ボタンを使用して、その画像を投稿またはページに挿入するだけです。

また、投稿を公開すると、画像に音声アイコンが表示されます。

簡単ですよね？ しかし、それはDivi Builderで機能しますか？ 確認してみましょう…

オーディオストーリー画像はDiviで機能しますか？

はいといいえ。 ほら、私はAudio Story ImagesをDiviでうまく再生できるようにしましたが、期待した方法ではありませんでした。

当然、私が最初にテストしたのは、通常のDivi画像モジュールを使用してメディアライブラリから同じ画像ファイルを挿入することでした。 残念ながら、それは機能しませんでした。 画像は表示されましたが、音声は表示されませんでした。

しかし、プラグインのサポートスレッドを読んだところ、プラグインの作成者は基本的にJavaScriptを使用して画像に音声アイコンをオーバーレイしていることがわかりました。 そしてそれは私に別の考えを与えました…

最初の例からコードを取得してDiviコードモジュールに入れたらどうなりますか？ そしてビンゴ、それはうまくいきました！

次に、その方法を理解した後、別のアイデアが浮かびました。通常のDiviテキストモジュールを使用して、そこで[メディアの追加]ボタンを使用するとどうなるでしょうか。 そしてそれもうまくいきました！

ですから、どちらかがあなたにとってよりうまくいく場合に備えて、両方の方法を紹介します。

最初の方法は簡単です。通常のテキストモジュールを追加し、[メディアの追加]ボタンを使用して画像を挿入するだけです。

Visual Builderには音声アイコンは表示されませんが、公開されたバージョンのページには表示されます。

2番目の方法はもっと複雑です。 ただし、Chromeデベロッパーツールをマスターするのは良い習慣なので、試してみる価値があると思います。

ステップ1：通常のWordPressエディターを使用して投稿の下書きを作成します。 上記の例で示したような画像を挿入してから、下書きをプレビューします。 投稿のコンテンツが画像のみであることを確認してください。 これにより、次のステップでHTMLを簡単に取得できるようになります。

ステップ2：下書きのプレビューで、オーディオストーリー画像を右クリックし、Chrome（またはFirefoxの要素の検査）を使用している場合は[検査]を選択します。 ヘルプが必要な場合は、Chromeデベロッパーツールの検査機能の使用に関するガイドをご覧ください。

ステップ3：画面の右側に、強調表示されたコードがたくさん含まれているウィンドウが表示されます。

探してください

 < div class = "entry-content" > 

タグを付けて右クリックし、[ HTMLとして編集]を選択します。