古騰堡編輯器教程:如何使用SoundCloud嵌入區塊

如何使用SoundCloud嵌入區塊

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

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

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

如何在WordPress中嵌入SoundCloud內容

首先,我們將討論如何將SoundCloud曲目新增到WordPress文章或頁面。然後,我們將快速介紹如何新增專輯/播放列表,因為該過程類似於新增曲目。

如何在WordPress中嵌入SoundCloud音軌

轉到SoundCloud並找到要嵌入WordPress的曲目。單擊曲目以在其自己的頁面上開啟它。從頁面頂部的位址列中複製URL。

SoundCloud音軌

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

新增區塊按鈕

單擊加號以顯示區塊選擇器。在搜尋框中輸入“SoundCloud” ,然後選擇關聯的區塊。SoundCloud嵌入區塊現在將新增到您的頁面或文章中。

搜尋SoundCloud嵌入區塊

SoundCloud嵌入區塊URL輸入框

將您複製的SoundCloud地址貼上到輸入URL以在此處嵌入的欄位中單擊嵌入。你現在會看到這樣的東西:

SoundCloud嵌入區塊編輯

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

SoundCloud嵌入區塊效果預覽

SoundCloud嵌入預覽

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

SoundCloud嵌入區塊標題

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

從SoundCloud嵌入專輯或播放列表與新增曲目非常相似。在SoundCloud中,導航到要新增的專輯或播放列表,然後單擊以在其自己的頁面中開啟它。從位址列中複製URL。

在WordPress的SoundCloud嵌入框中,將位址列貼上到專用空間中。單擊嵌入

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

SoundCloud專輯或播放列表

嵌入錯誤訊息

如果您輸入的內容不是連結、連結已損壞或轉到無法嵌入的內容,您將收到如下所示的錯誤訊息:

嵌入錯誤訊息

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

SoundCloud嵌入區塊選項

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

工具欄選項

將內容新增到嵌入區塊後,單擊它會在頂部顯示一個選項工具欄。它看起來像這樣:

SoundCloud嵌入區塊工具欄選項

從左到右,以下是圖示的含義:

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

更多選項選單

SoundCloud嵌入區塊更多選項

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

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

側邊欄選項

SoundCloud嵌入區塊側欄選項

右側邊欄有兩個設定:媒體設定和高階。讓我們來看看它們。

媒體設定

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

高階

高階部分,您可以向所選區塊新增CSS區塊。這意味著您可以根據自己的喜好自定義和設定區塊的樣式(如果您瞭解 CSS,那就是)。

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

快速新增嵌入的內容

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

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

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

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

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

SoundCloud分享

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

SoundCloud分享嵌入程式碼

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

關於SoundCloud嵌入區塊的常見問題

SoundCloud是否只有音樂?

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

SoundCloud播客

我可以向SoundCloud嵌入區塊新增多條軌道嗎?

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

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

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

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

SoundCloud曲目播放起始

小結

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

評論留言