使用新的（免費）音頻故事圖像插件為您的 WordPress 圖像添加音頻

如果一張圖片值一千字，那麼一張與音頻同步的圖片一定值......嗯，一千多字，對吧？ 也就是說，為 WordPress 圖像添加音頻故事是一種為您在網站上使用的圖像添加一些上下文的巧妙方法。

我所說的“音頻故事”是什麼意思？ 基本上，是與 WordPress 網站上的單個圖像同步的音頻剪輯。 在這篇文章中，我將向您展示我所說的 WordPress 音頻故事的確切含義。 然後，我將介紹如何使用名為 Audio Story Images 的免費插件將它們添加到您自己的網站。

音頻故事圖像有什麼作用？

正如我所說，音頻故事圖像允許您將音頻文件同步到您的圖像。 用戶將在所選圖像的左上角看到一個音頻圖標。 如果他們點擊圖標，音頻將立即開始播放：

潛在用途非常整潔。 我看到了藝術和實際用途：

• 在藝術方面，您可以添加旁白，解釋您網站上發布的每件藝術品背後的含義和靈感。 或者，您可以添加音樂並創造身臨其境的體驗來陪伴您的藝術。
• 在實踐方面，您可以為教程圖像添加畫外音。 因此，您不僅可以包含告訴人們點擊位置的圖像，還可以快速添加解釋整個過程的畫外音。

我相信您也可以想到此功能的許多其他利基用途。 我的清單絕不是全面的！

在我們開始之前 - 一個警告

在我向您展示如何使用這個插件之前，我想先做一個簡短的警告：

這個插件是相當新的，缺乏龐大的安裝基礎。 我們之所以推薦它，是因為我們認為該功能非常酷，而且據我們所知，沒有任何其他插件提供類似的功能。

話雖如此，因為它還沒有“通過鈴聲”可以這麼說，我們還不想完全支持它。

從好的方面來說，開發人員似乎確實對存在的少數支持線程做出了響應。 在玩這個插件時，我沒有遇到任何問題。

如何使用音頻故事圖像

我將首先向您展示如何在常規 WordPress 編輯器中使用音頻故事圖像。 然後，我將介紹它如何與 Divi 一起使用。

首先，安裝和激活音頻故事圖像。 激活它後，您就可以直接進入了。也就是說，無需配置任何設置。

該插件的工作原理如下：

您將圖像和音頻文件添加到媒體庫。 然後，您在正常的媒體庫界面中同步這兩個文件。 然後要在您的帖子中插入音頻故事，您只需使用 WordPress 編輯器中的普通添加媒體按鈕即可。

以下是如何一步一步地做到這一點......

首先將至少一張圖片和一個音頻文件上傳到您的媒體庫。 然後，轉到媒體 → 圖書館。 確保您使用列表視圖，而不是網格視圖。 您應該會看到一個新的音頻故事列。 只需單擊要向其添加音頻的圖像旁邊的附加：

然後，將彈出一個窗口，其中包含媒體庫中的所有音頻文件。 選擇所選音頻文件旁邊的單選框，然後單擊Select ：

鏈接圖像和音頻文件後，“音頻故事”列應更新以反映這種關係：

現在，您需要做的就是使用普通的“添加媒體”按鈕將該圖像插入到任何帖子或頁面中：

當您發布帖子時，您應該會在圖片上看到音頻圖標：

夠簡單了吧？ 但它是否適用於 Divi Builder？ 讓我們來了解一下……

音頻故事圖像是否適用於 Divi？

是和否。 看，我確實讓音頻故事圖像與 Divi 一起玩得很好，但不是您所期望的方式。

當然，我測試的第一件事就是使用常規的 Divi 圖像模塊從我的媒體庫中插入相同的圖像文件。 不幸的是，這不起作用。 圖像出現了，但沒有聲音。

但是後來我閱讀了插件的支持線程並意識到插件作者基本上使用 JavaScript 來覆蓋圖像上的音頻圖標。 這給了我另一個想法......

如果我從第一個示例中獲取代碼並將其放入 Divi 代碼模塊會怎樣？ 賓果遊戲，奏效了！

然後，在我想出那個方法之後，我有了另一個想法——如果我只使用一個普通的 Divi 文本模塊並使用那裡的添加媒體按鈕呢？ 這也奏效了！

因此，我將向您展示兩種方式，以防一種更適合您。

第一種方法很簡單——只需添加一個普通的文本模塊並使用“添加媒體”按鈕插入圖像：

您不會在 Visual Builder 中看到音頻圖標，但它應該會顯示在您的頁面的已發布版本中。

第二種方法比較複雜。 但這是掌握 Chrome 開發者工具的好習慣，所以我認為值得一試！

第 1 步：使用常規 WordPress 編輯器創建帖子草稿。 插入我在上面的示例中向您展示的圖像，然後預覽草稿。 確保您帖子中的唯一內容是圖片。 這將使在下一步中獲取 HTML 變得容易。

第 2 步：在草稿預覽中，如果您使用的是 Chrome（或 Firefox 中的 Inspect Element），請右鍵單擊您的音頻故事圖像並選擇“檢查”。 如果您需要幫助，請查看我們關於使用 Chrome 開發者工具的檢查功能的指南：

第 3 步：您應該會在屏幕右側看到一個窗口，其中包含許多突出顯示的代碼：

尋找

 < div class = "entry-content" > 

標籤，右鍵單擊它，然後選擇Edit as HTML ：