SoundCloud Embed 블록 사용 방법

WordPress용 SoundCloud 내장 블록을 사용하여 게시물이나 페이지에 앨범, 재생 목록 또는 트랙을 추가할 수 있습니다. Gutenberg에 SoundCloud 콘텐츠를 포함하면 블록의 모양과 기능에 대한 다양한 옵션이 제공됩니다. 그렇지 않고 단순히 SoundCloud 링크를 복사하여 클래식 편집기에 붙여넣으면 음악을 선보일 수 있지만 사용자 정의 및 페이지 디자인과 관련하여 옵션이 심각하게 제한됩니다.

이 기사에서는 WordPress 게시물 또는 페이지에 SoundCloud 앨범, 재생 목록 또는 트랙을 포함하는 방법을 안내합니다. 우리는 또한 당신이 알아야 할 모범 사례, FAQ 및 팁을 다룰 것입니다.

시작하기 전에 서비스의 콘텐츠를 포함하기 위해 SoundCloud 계정이 필요하지 않지만 공개 트랙을 선택해야 합니다. 비공개 트랙은 포함할 수 없습니다. 또한 SoundCloud 내장 블록을 추가하려면 Gutenberg 블록 편집기를 사용해야 합니다. (하지만 우리는 몇 가지 대안을 다룰 것입니다.)

YouTube 채널 구독

WordPress에 SoundCloud 콘텐츠를 포함하는 방법

먼저 WordPress 게시물 또는 페이지에 SoundCloud 트랙을 추가하는 방법을 살펴보겠습니다. 그런 다음 프로세스가 트랙을 추가하는 것과 유사하므로 앨범/재생 목록을 추가하는 방법을 빠르게 설명합니다.

WordPress에 SoundCloud 트랙을 포함하는 방법

SoundCloud로 이동하여 WordPress에 포함하려는 트랙을 찾으십시오. 트랙을 클릭하여 자체 페이지에서 엽니다. 페이지 상단의 주소 표시줄에서 URL을 복사합니다.

WordPress로 이동하여 게시물 또는 페이지를 생성하거나 편집합니다. 페이지 본문에 더하기 기호 가 표시되어야 합니다. 표시되지 않으면 페이지 본문의 아무 곳이나 클릭하면 표시됩니다.

더하기 기호 를 클릭하여 블록 선택기를 불러옵니다. 검색 상자에 "SoundCloud"를 입력한 다음 연결된 블록을 선택합니다. 이제 SoundCloud 내장 블록이 페이지 또는 게시물에 추가됩니다.

복사한 SoundCloud 주소를 Enter URL to Embed Here… 라는 필드에 붙여넣습니다. Embed를 클릭합니다. 이제 다음과 같은 내용이 표시됩니다.

사이트가 게시된 후 어떻게 표시되는지 보려면 페이지 오른쪽 상단 에서 미리보기 > 바탕 화면 > 새 탭 에서 미리보기를 클릭하십시오.

원하는 경우 캡션을 추가할 수 있습니다. 포함된 트랙 아래에는 서식 옵션과 함께 캡션을 입력할 수 있는 전용 영역이 있습니다.

WordPress에 SoundCloud 앨범 또는 재생 목록을 포함하는 방법

SoundCloud에서 앨범 또는 재생 목록을 포함하는 것은 트랙을 추가하는 것과 매우 유사합니다. SoundCloud에서 추가하려는 앨범 또는 재생 목록으로 이동하고 클릭하여 자체 페이지에서 엽니다. 주소 표시줄에서 URL을 복사합니다.

WordPress의 SoundCloud 임베드 상자에서 주소 표시줄을 전용 공간에 붙여넣습니다. 삽입을 클릭합니다.

결과는 기본적으로 앨범을 추가했든 재생 목록을 추가했든 동일합니다. 앨범 또는 재생 목록의 커버 아트는 포함된 링크의 주요 부분에 표시되고 그 아래에는 스크롤할 수 있는 트랙 목록이 있습니다. 트랙 위로 마우스를 이동하고 스크롤하면 메인 커버 아트가 작아져 트랙 목록이 더 많이 노출됩니다. 이 스크린샷에서 상단 임베드는 재생 목록이고 하단 임베드는 앨범입니다.

포함 오류 메시지

링크가 아닌 항목, 깨진 링크 또는 포함할 수 없는 콘텐츠로 이동하는 항목을 입력하면 다음과 같은 오류 메시지가 표시됩니다.

링크를 다시 시도하거나 링크 로 변환을 클릭하여 차이가 있는지 확인할 수 있습니다. 그러나 두 옵션 모두 작동하지 않으면 다른 콘텐츠를 포함해야 할 수 있습니다.

SoundCloud 포함 차단 옵션

SoundCloud 포함 블록에 대한 옵션을 찾을 수 있는 두 가지 영역이 있습니다. 막대 상단과 오른쪽 사이드바. 그들이 무엇인지 살펴보겠습니다.

툴바 옵션

포함 블록에 콘텐츠를 추가한 후 이를 클릭하면 상단에 옵션 도구 모음이 나타납니다. 다음과 같습니다.

왼쪽에서 오른쪽으로 아이콘의 의미는 다음과 같습니다.

• 변환 대상: SoundCloud 포함 블록을 단락, 열 또는 그룹으로 변경할 수 있습니다. 생각할 수 있는 유일한 옵션은 블록의 배경색을 변경할 수 있기 때문에 Group one입니다. 그것에 대해 신경 쓰지 않는다면 그대로 두십시오. 사용하기가 약간 까다롭습니다.
• 드래그: 드래그 아이콘 위로 마우스를 가져가면 커서가 작은 손 모양으로 바뀝니다. 페이지에서 삽입 블록을 원하는 위치에 마우스 왼쪽 버튼으로 클릭하고 끌어다 놓습니다.
• 위로 이동 및 아래로 이동: 위쪽 화살표 는 블록을 한 칸 위로 이동하고 아래쪽 화살표 는 한 칸 아래 로 이동합니다.
• 정렬 변경: 포함 블록을 왼쪽, 중앙 또는 오른쪽으로 정렬합니다. 왼쪽이나 오른쪽으로 맞추면 작아집니다. 테마에 따라 포함 블록을 더 크게 만들 수 있는 전폭 및 광폭 옵션이 있을 수도 있습니다.
• URL 편집: SoundCloud URL을 교체하여 다른 앨범, 재생 목록 또는 트랙을 포함합니다.
• 옵션: 마지막 아이콘은 추가 옵션이 있는 드롭다운 메뉴를 표시합니다.

추가 옵션 메뉴

해당 옵션 드롭다운에는 이해하기 쉬운 몇 가지 옵션이 있습니다. 위에서 아래로 다음과 같습니다.

• 추가 설정 숨기기 : 오른쪽의 설정 사이드바를 숨기거나 표시합니다.
• 복사: 블록을 복사하여 원하는 곳에 붙여넣습니다.
• 복제: 블록을 복제하면 원본 블록 바로 아래에 복사본이 만들어집니다.
• 앞에 삽입: 선택한 블록 앞에 블록을 추가합니다.
• 뒤에 삽입: 선택한 블록 뒤에 블록을 추가합니다.
• 이동: 키보드의 화살표 버튼을 사용하여 페이지를 이동할 수 있는 파란색 막대가 표시됩니다. 원하는 위치에 배치했으면 Enter/Return 을 클릭하여 포함 블록을 해당 위치로 이동합니다.
• HTML로 편집 : 블록의 HTML 코드를 편집합니다.
• 재사용 가능한 블록에 추가 : 선택한 블록을 재사용 가능한 블록 목록에 추가합니다. 이를 통해 다른 게시물이나 페이지 또는 현재 게시물이나 페이지의 다른 섹션에 쉽게 추가할 수 있습니다.
• 그룹: 위에서 언급한 그룹 옵션과 마찬가지로 블록의 배경색을 변경할 수 있습니다.
• 블록 제거: 페이지에서 블록을 삭제합니다.

사이드바 옵션

오른쪽 사이드바에는 미디어 설정과 고급의 두 가지 설정이 있습니다. 그것들을 살펴보자.

미디어 설정

미디어 설정 섹션에서 더 작은 장치 에 맞게 크기 조정을 켜면 포함 블록이 화면 크기에 따라 자동으로 크기가 조정됩니다. 이것은 모바일 장치에서 콘텐츠를 보는 사람들에게 특히 중요하므로 이 옵션을 활성화하는 것이 좋습니다.

고급의

고급 섹션에서 선택한 블록에 CSS 블록을 추가할 수 있습니다. 즉, 원하는 대로 블록을 사용자 정의하고 스타일을 지정할 수 있습니다(CSS를 알고 있는 경우).

SoundCloud Embed Block을 효과적으로 사용하기 위한 모범 사례 및 팁

포함된 콘텐츠를 빠르게 추가

포함된 SoundCloud 콘텐츠를 어디로 이동할지 정확히 알고 있다면 URL을 페이지에 붙여넣기만 하면 됩니다. 수동으로 블록을 추가하는 것과 동일한 옵션을 사용하여 SoundCloud 내장 블록이 자동으로 생성됩니다.

클래식 편집기를 사용하여 SoundCloud 콘텐츠 포함

WordPress 클래식 편집기로 작업하는 것을 선호하는 경우에도 SoundCloud 콘텐츠를 포함할 수 있습니다. 게시물이나 페이지의 본문에서 원하는 위치에 링크를 복사하여 붙여넣기만 하면 됩니다. 그러면 콘텐츠가 자동으로 포함됩니다. 그러나 Gutenberg 블록과 동일한 도구 모음 옵션이 없습니다.

다양한 사용자 지정에 포함 코드 사용

WordPress에 SoundCloud 콘텐츠를 포함하는 또 다른 방법은 포함 코드를 사용하는 것입니다. 포함하려는 SoundCloud 콘텐츠로 이동하고 공유 버튼을 클릭합니다.

팝업에서 포함된 콘텐츠의 모양을 변경할 수 있습니다. 이 예에서는 재생/일시 정지 버튼을 하늘색으로 변경하고 임베드 상자의 높이를 조정했습니다.

완료되면 포함 코드를 복사한 다음 WordPress의 HTML 블록에 붙여넣습니다. 페이지를 미리 볼 때 콘텐츠가 어떻게 표시되는지 확인할 수 있습니다.

SoundCloud Embed Block에 대한 FAQ

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가지 최고의 오디오 플레이어 플러그인이 포함된 기사에도 관심이 있을 수 있습니다. 확인 해봐!

Shutterstock.com의 apghedia 추천 이미지