如何使用 SoundCloud 嵌入塊

使用 WordPress 的 SoundCloud 嵌入塊，您可以將專輯、播放列表或曲目添加到您的帖子或頁面。 在 Gutenberg 中嵌入 SoundCloud 內容為您提供了許多關於塊外觀和功能的選項。 否則，如果您只是將 SoundCloud 鏈接複製並粘貼到經典編輯器中，您或許可以展示音樂，但在自定義和頁面設計方面，您的選擇將受到嚴重限制。

在本文中，我們將向您介紹如何在 WordPress 帖子或頁面上嵌入 SoundCloud 專輯、播放列表或曲目。 我們還將介紹您應該了解的最佳實踐、常見問題解答和提示。

在我們開始之前，請注意，雖然您不需要 SoundCloud 帳戶來嵌入服務中的內容，但您需要選擇公共曲目 - 不能嵌入私人曲目。 此外，您必須使用 Gutenberg 塊編輯器來添加 SoundCloud 嵌入塊。 （不過，我們將介紹幾種替代方案。）

訂閱我們的 YouTube 頻道

如何在 WordPress 中嵌入 SoundCloud 內容

首先，我們將討論如何將 SoundCloud 曲目添加到 WordPress 帖子或頁面。 然後，我們將快速介紹如何添加專輯/播放列表，因為該過程類似於添加曲目。

如何在 WordPress 中嵌入 SoundCloud 音軌

轉到 SoundCloud 並找到要嵌入 WordPress 的曲目。 單擊曲目以在其自己的頁面上打開它。 從頁面頂部的地址欄中復制 URL。

轉到 WordPress 並創建或編輯帖子或頁面。 在頁面的主體中，您應該會看到一個加號。 如果您沒有看到，請單擊頁面正文中的某處，它應該會出現。

單擊加號以顯示塊選擇器。 在搜索框中輸入“SoundCloud”，然後選擇關聯的塊。 SoundCloud 嵌入塊現在將添加到您的頁面或帖子中。

將您複製的 SoundCloud 地址粘貼到輸入 URL 以在此處嵌入的字段中...單擊嵌入。 你現在會看到這樣的東西：

要查看它在您的網站上線後的外觀，請單擊頁面右上角的“預覽” >“桌面” >“在新選項卡中預覽” 。

如果您願意，可以添加標題。 嵌入軌道下方有一個專用區域，用於輸入標題和格式選項。

如何在 WordPress 中嵌入 SoundCloud 專輯或播放列表

從 SoundCloud 嵌入專輯或播放列表與添加曲目非常相似。 在 SoundCloud 中，導航到要添加的專輯或播放列表，然後單擊以在其自己的頁面中打開它。 從地址欄中復制 URL。

在 WordPress 的 SoundCloud 嵌入框中，將地址欄粘貼到專用空間中。 單擊嵌入。

無論您是添加專輯還是播放列表，結果都基本相同。 專輯或播放列表的封面藝術將顯示在嵌入鏈接的主要部分，下方將是您可以滾動瀏覽的曲目列表。 當您將鼠標懸停在曲目上並滾動時，主封面將變小以顯示更多曲目列表。 在此屏幕截圖中，頂部嵌入是播放列表，而底部嵌入是專輯。

嵌入錯誤消息

如果您輸入的內容不是鏈接、鏈接已損壞或指向無法嵌入的內容，您將收到如下所示的錯誤消息：

您可以再次嘗試鏈接或單擊轉換為鏈接以查看是否有所不同。 但是，如果這兩個選項都不起作用，您可能需要嵌入不同的內容。

SoundCloud 嵌入塊選項

您可以在兩個不同的區域找到 SoundCloud 嵌入塊的選項：沿著欄的頂部和右側的邊欄中。 讓我們來看看它們是什麼。

工具欄選項

將內容添加到嵌入塊後，單擊它會在頂部顯示一個選項工具欄。 它看起來像這樣：

從左到右，以下是圖標的含義：

• 轉換為：您可以將 SoundCloud 嵌入塊更改為段落、列或組。 唯一需要考慮的選項是Group one，因為它可以讓您更改塊的背景顏色。 如果你不關心這個，別管它——它使用起來有點棘手。
• 拖動：將鼠標懸停在拖動圖標上，您的光標會變成一隻小手。 左鍵單擊並拖動嵌入塊，將其放置在頁面上的任何位置。
• 向上和向下移動：向上箭頭會將方塊向上移動一格，向下箭頭會將其向下移動一格。
• 更改對齊方式：將嵌入塊向左、居中或向右對齊。 將其向左或向右對齊會使其變小。 根據您的主題，您可能還有全角和寬角選項，這可能會使嵌入塊更大。
• 編輯 URL：替換 SoundCloud URL 以嵌入不同的專輯、播放列表或曲目。
• 選項：最後一個圖標會顯示一個帶有附加選項的下拉菜單。

更多選項菜單

該選項下拉菜單有一些易於理解的選項。 從上到下，它們如下：

• 隱藏更多設置：隱藏（或顯示）右側的設置邊欄。
• 複製：複製塊並將其粘貼到您喜歡的任何位置。
• 複製：複製塊，這將在原始塊的正下方製作它的副本。
• 插入前：在選定的塊之前添加一個塊。
• 在之後插入：在選定的塊之後添加塊。
• 移動到：這將顯示一個藍色條，您可以使用鍵盤的箭頭按鈕在頁面上移動。 將其放置在所需位置後，單擊Enter/Return將嵌入塊移動到該位置。
• 編輯為 HTML：編輯塊的 HTML 代碼。
• 添加到可重用塊：將所選塊添加到可重用塊列表中。 這使您可以輕鬆地將其添加到另一個帖子或頁面或當前帖子或頁面的另一個部分。
• 組：與上面提到的組選項一樣，這可以讓您更改塊的背景顏色。
• 刪除塊：從頁面中刪除塊。

側邊欄選項

右側邊欄有兩個設置：媒體設置和高級。 讓我們來看看它們。

媒體設置

如果您在“媒體設置”部分中啟用“為較小設備調整大小” ，則嵌入塊將根據屏幕大小自動調整大小。 這對於在移動設備上查看您的內容的人尤其重要，因此啟用此選項是個好主意。

先進的

在高級部分，您可以向所選塊添加 CSS 塊。 這意味著您可以根據自己的喜好自定義和設置塊的樣式（如果您了解 CSS，那就是）。

有效使用 SoundCloud 嵌入塊的最佳實踐和技巧

快速添加嵌入的內容

如果您確切地知道要將嵌入的 SoundCloud 內容放在哪裡，只需將 URL 粘貼到頁面上即可。 SoundCloud 嵌入塊將自動為您創建，所有選項都與您手動添加塊相同。

使用經典編輯器嵌入 SoundCloud 內容

如果您更喜歡使用 WordPress 經典編輯器，您仍然可以嵌入 SoundCloud 內容。 您只需將鏈接複製並粘貼到帖子或頁面正文中的任意位置即可。 這將自動嵌入內容。 但是，您不會擁有與古騰堡塊相同的工具欄選項。

使用嵌入代碼進行不同的自定義

在 WordPress 上嵌入 SoundCloud 內容的另一種方法是使用嵌入代碼。 轉到要嵌入的 SoundCloud 內容，然後單擊共享按鈕。

在彈出窗口中，您可以更改嵌入內容的外觀。 在本例中，我將播放/暫停按鈕更改為淺藍色並調整了嵌入框的高度。

完成後，複製嵌入代碼，然後將其粘貼到 WordPress 中的 HTML 塊中。 當您預覽頁面時，您將能夠看到內容的外觀。

關於 SoundCloud 嵌入塊的常見問題

SoundCloud 是否只有音樂？

不！ SoundCloud 也有播客。 嵌入播客與嵌入音樂曲目相同。 複製 URL，然後將其粘貼到嵌入框中。 您可以嵌入單個劇集，或者如果您想完整展示播客，請轉到 SoundCloud 上的主頁並複制/粘貼 URL。

我可以向 SoundCloud 嵌入塊添加多條軌道嗎？

如果您想在 WordPress 網站上展示多首歌曲或播客劇集，您可以創建自己的播放列表，然後將其嵌入。 知道每個曲目的隱私設置都會保留，即使您將播放列表設為公開（您需要這樣做才能嵌入）。 這意味著如果您將私人曲目添加到公共播放列表，該曲目仍將保持私密狀態。

https://help.soundcloud.com/hc/en-us/articles/115003449787-Creating-and-adding-tracks-to-a-playlist

我可以選擇 SoundCloud 曲目從哪裡開始播放嗎？

抱歉不行。 當您單擊 SoundCloud 內容上的共享按鈕時，會彈出一個窗口。 底部是從哪裡開始播放曲目的選項。 但是，當您將關聯的鏈接複製並粘貼到嵌入塊中時，它實際上不會從該部分開始軌道。 我們嘗試了幾種不同的方法，但沒有運氣。

包起來

將音樂或播客與您的網站集成可以使體驗更有價值並提高參與度。 如果您有自己的內容或想要分享其他人的內容，SoundCloud 嵌入塊是最簡單的方法，可提供最多的自定義和佈局選項。 您可以將專輯、播放列表、播客或音樂曲目添加到您的網站，讓訪問者收聽，而不會被重定向到其他地方。 如果他們想探索更多，他們可以輕鬆點擊 SoundCloud 上的內容。

您可能還對我們的文章感興趣，其中包含適用於 WordPress 的 11 個最佳音頻播放器插件。 一探究竟！

apghedia 在 Shutterstock.com 上的特色圖片