Как использовать блок внедрения SoundCloud

С помощью блока внедрения SoundCloud для WordPress вы можете добавить альбом, плейлист или трек в свой пост или страницу. Встраивание содержимого SoundCloud в Gutenberg дает вам множество вариантов того, как блок выглядит и функционирует. В противном случае, если вы просто скопируете и вставите ссылку SoundCloud в классический редактор, вы сможете демонстрировать музыку, но ваши возможности будут серьезно ограничены, когда дело доходит до настроек и дизайна страницы.

В этой статье мы расскажем, как встроить альбом, плейлист или трек SoundCloud в запись или страницу WordPress. Мы также рассмотрим передовой опыт, ответы на часто задаваемые вопросы и советы, которые вам следует знать.

Прежде чем мы начнем, обратите внимание, что, хотя вам не нужна учетная запись SoundCloud для встраивания контента из службы, вам нужно будет выбрать общедоступные треки - частные треки не могут быть встроены. Кроме того, вы должны использовать редактор блоков Gutenberg, чтобы добавить блок внедрения SoundCloud. (Тем не менее, мы рассмотрим несколько альтернатив.)

Подпишитесь на наш канал Youtube

Как встроить контент SoundCloud в WordPress

Сначала мы рассмотрим, как добавить трек SoundCloud в сообщение или страницу WordPress. Затем мы быстро рассмотрим, как добавить альбом / список воспроизведения, так как процесс аналогичен добавлению трека.

Как встроить трек SoundCloud в WordPress

Перейдите в SoundCloud и найдите трек, который вы хотите встроить в WordPress. Щелкните трек, чтобы открыть его на отдельной странице. Скопируйте URL-адрес из адресной строки вверху страницы.

Перейдите в WordPress и создайте или отредактируйте сообщение или страницу. В основной части страницы вы должны увидеть знак плюса . Если вы его не видите, щелкните где-нибудь в теле страницы, и он должен появиться.

Щелкните значок « Плюс», чтобы открыть селектор блоков. Введите «SoundCloud» в поле поиска , а затем выберите связанный блок. Блок встраивания SoundCloud теперь будет добавлен на вашу страницу или публикацию.

Вставьте адрес SoundCloud, который вы скопировали, в поле с надписью « Введите URL-адрес для вставки здесь…» Нажмите « Вставить» . Теперь вы увидите что-то вроде этого:

Чтобы увидеть, как он будет выглядеть на вашем сайте после его публикации, нажмите « Предварительный просмотр» > « Рабочий стол» > « Просмотр в новой вкладке» в правом верхнем углу страницы.

Вы можете добавить подпись, если хотите. Под встроенной дорожкой есть специальная область для ввода подписи и параметров форматирования.

Как встроить альбом или плейлист SoundCloud в WordPress

Встраивание альбома или плейлиста из SoundCloud очень похоже на добавление трека. В SoundCloud перейдите к альбому или плейлисту, который вы хотите добавить, и щелкните его, чтобы открыть на отдельной странице. Скопируйте URL-адрес из адресной строки.

В поле для встраивания SoundCloud в WordPress вставьте адресную строку в выделенное место. Щелкните Вставить .

Результат в основном один и тот же, добавили ли вы альбом или список воспроизведения. Обложка альбома или плейлиста будет отображаться в основной части встроенной ссылки, а под ней будет список треков, которые вы можете прокручивать. Когда вы наводите указатель мыши на дорожки и прокручиваете их, основная обложка будет уменьшаться, чтобы открывать больше треков. На этом снимке экрана верхняя вставка - это список воспроизведения, а нижняя вставка - это альбом.

Сообщение об ошибке встраивания

Если вы введете что-то, что не является ссылкой, это неработающая ссылка или ведет к контенту, который не может быть встроен, вы получите сообщение об ошибке, которое выглядит следующим образом:

Вы можете попробовать ссылку еще раз или щелкнуть « Преобразовать в ссылку», чтобы узнать, имеет ли это значение. Если ни один из вариантов не работает, возможно, вам придется встроить другой контент.

Параметры блока встраивания SoundCloud

Есть две разные области, где вы найдете параметры для блока внедрения SoundCloud: в верхней части панели и на правой боковой панели. Давайте разберемся, что они собой представляют.

Параметры панели инструментов

После того, как вы добавили контент в блок внедрения, щелчок по нему вызовет панель инструментов параметров вверху. Это выглядит так:

Вот что означают значки слева направо:

• Преобразовать в: вы можете изменить блок внедрения SoundCloud в абзац, столбец или группу. Единственный вариант, о котором стоит подумать, - это групповой, потому что он позволяет вам изменить цвет фона блока. Если вас это не волнует, оставьте это в покое - это немного сложно использовать.
• Перетаскивание: наведите указатель мыши на значок перетаскивания , и ваш курсор превратится в маленькую руку. Щелкните левой кнопкой мыши и перетащите блок внедрения в любое место на странице.
• Перемещение вверх и вниз: стрелка вверх перемещает блок на одну позицию вверх, а стрелка вниз - на одну позицию вниз.
• Изменить выравнивание: выровняйте блок закладных по левому, центру или правому краю. Выравнивание по левому или правому краю сделает его меньше. В зависимости от вашей темы у вас также могут быть варианты полной и широкой ширины, что может увеличить размер блока для встраивания.
• Изменить URL-адрес: замените URL-адрес SoundCloud, чтобы встроить другой альбом, список воспроизведения или трек.
• Параметры: последний значок вызывает раскрывающееся меню с дополнительными параметрами.

Меню дополнительных параметров

В этом раскрывающемся списке есть несколько простых для понимания вариантов. Сверху вниз они следующие:

• Скрыть дополнительные настройки: скрыть (или показать) боковую панель настроек справа.
• Копировать: скопируйте блок и вставьте его в любое место.
• Дублировать: продублируйте блок, чтобы сделать его копию прямо под исходным.
• Вставить перед: добавить блок перед выбранным.
• Вставить после: добавить блок после выбранного.
• Переместить в: появится синяя полоса, которую вы можете перемещать по странице с помощью кнопок со стрелками на клавиатуре. После того, как вы поместили его в нужное место, нажмите Enter / Return, чтобы переместить блок вставки в это место.
• Редактировать как HTML: редактировать HTML-код блока.
• Добавить в блоки многократного использования: добавьте выбранный блок в список блоков многократного использования. Это позволяет вам легко добавить его в другое сообщение или страницу или в другой раздел текущего сообщения или страницы.
• Группа: как и опция « Группа», упомянутая выше, позволяет изменить цвет фона блока.
• Удалить блок: удалить блок со страницы.

Параметры боковой панели

На правой боковой панели есть две настройки: Настройки мультимедиа и Дополнительно. Давайте пройдемся по ним.

Настройки мультимедиа

Если вы включите параметр « Изменить размер для небольших устройств» в разделе « Параметры мультимедиа », размер встроенного блока будет автоматически изменяться в зависимости от размера экрана. Это особенно важно для людей, просматривающих ваш контент на мобильном устройстве, поэтому рекомендуется включить эту опцию.

Передовой

В разделе Advanced вы можете добавить блок CSS к выбранному блоку. Это означает, что вы можете настроить и стилизовать блок по своему усмотрению (если вы знаете CSS).

Лучшие практики и советы по эффективному использованию блока внедрения SoundCloud

Быстрое добавление встроенного содержимого

Если вы точно знаете, куда вы хотите поместить встроенный контент SoundCloud, вы можете просто вставить URL-адрес на страницу. Блок внедрения SoundCloud будет автоматически создан для вас со всеми теми же параметрами, как если бы вы добавляли блок вручную.

Встраивание содержимого SoundCloud с помощью классического редактора

Если вы предпочитаете работать с классическим редактором WordPress, вы все равно можете встраивать контент SoundCloud. Вы просто скопируете и вставите ссылку в любом месте сообщения или страницы. Это автоматически вставит контент. Однако у вас не будет тех же параметров панели инструментов, что и в случае с блоком Гутенберга.

Используйте код встраивания для различных настроек

Другой способ встраивать контент SoundCloud в WordPress - использовать код встраивания. Перейдите к содержимому SoundCloud, которое вы хотите встроить, и нажмите кнопку « Поделиться» .

Во всплывающем окне вы можете изменить внешний вид встроенного содержимого. В этом примере я изменил кнопку воспроизведения / паузы на светло-голубой и отрегулировал высоту вставки.

Когда вы закончите, скопируйте код встраивания, а затем вставьте его в блок HTML в WordPress. Вы сможете увидеть, как будет выглядеть контент, при предварительном просмотре страницы.

Часто задаваемые вопросы о блоке встраивания 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.

Вам также может быть интересна наша статья с 11 лучшими плагинами аудиоплееров для WordPress. Проверьте это!

Изображение от apghedia на Shutterstock.com