Как встроить плейлист SoundCloud на сайт WordPress?
<
div itemprop=»articleBody»>
WordPress предлагает короткие коды по умолчанию для вставки аудио и плейлистов на ваш сайт. Это будет очень полезно, когда вы размещаете несколько аудиофайлов на собственном сервере. Но большинство из нас не музыканты, чтобы сочинять собственное аудио, и использование чьего-либо аудио приведет к нарушению авторских прав. Вот и третьи стороны, такие как SoundCloud, предлагающие услуги аудиохостинга и позволяющие публичным пользователям делиться музыкой по согласованным лицензиям. Также, когда у вас есть большое количество аудиофайлов, рекомендуется разместить их за пределами вашего сервера. Это не только поможет улучшить скорость загрузки страниц вашего сайта, но и поможет охватить более широкую аудиторию.
В этой статье мы объясним, как встроить плейлист SoundCloud в ваш сайт WordPress — как WordPress.com, так и сайт WordPress.org.
Шаг 1 — Создайте список воспроизведения в SoundCloud
Зарегистрируйтесь для получения бесплатной учетной записи SoundCloud и создайте плейлист со своими любимыми треками. Просмотрите все свои плейлисты в разделе «Коллекция> Плейлисты», Как показано ниже:
Просмотр списков воспроизведения в SoundCloud
Шаг 2. Получите код для вставки плейлиста
Щелкните список воспроизведения, которым хотите поделиться на своем сайте WordPress. Вы увидите список треков, добавленных в плейлист, и нажмите на значок «Поделиться«Кнопка». Вы также можете включить или отключить перемешивание списка воспроизведения здесь.
Обмен плейлистом SoundCloud
Появится всплывающий экран, предлагающий три варианта обмена — Поделиться, Вставить и Сообщение. Перейдите к «Встроить», Выберите дизайн дисплея и получите код для встраивания своего сайта WordPress.
Шаг 2.1 — Вставьте код для пользователей WordPress.com
SoundCloud имеет шорткод, поддерживаемый только для пользователей WordPress.com. Установите флажок «Код WordPress», Чтобы получить шорткод для вашего сайта WordPress.com.
Получение кода встраивания для WordPress
Код встраивания для пользователей WordPress.com будет выглядеть примерно так:
[soundcloud url="https://api.soundcloud.com/playlists/299620824" params="auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true" width="100%" height="450" iframe="true" /]
Прокрутите вниз до экрана и нажмите «Больше вариантов», Чтобы изменить цвет и включить или отключить автовоспроизведение вашего списка воспроизведения.
Включение автозапуска
Просмотрите предварительный просмотр вашего списка воспроизведения и скопируйте код, показанный в текстовом поле в разделе «Код и предварительный просмотр».
Шаг 2.2 — Вставьте код для пользователей WordPress.org
Если у вас есть собственный сайт WordPress.org, обязательно отключите параметр «Код WordPress»И получите код для встраивания. Это должен быть код iframe, как показано ниже:
<iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/299620824&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
Шаг 3 — Вставка кода встраивания SoundCloud в WordPress
Независимо от того, есть ли у вас код для встраивания WordPress.com или WordPress.org, процесс вставки одинаков и прост. Просто вставьте код для встраивания в свое сообщение или страницу, аналогично любому текстовому содержанию в разделе «Текст» редактор. Вы должны опубликовать свой сайт, чтобы увидеть аудиоплеер на сайте WordPress.com при переключении на «Визуальный»Редактор отобразит аудиоплеер на сайте WordPress.org. Ниже приведен реальный пример проигрывателя SoundCloud на сайте WordPress.org.
Свойства ширины, высоты и автовоспроизведения плеера можно напрямую изменять в коде внедрения. Также возможно изменить внешний вид плеера, добавив параметр «visual = true». Например, указанный выше проигрыватель по умолчанию можно изменить, как показано ниже, с помощью данного кода:
<
div class=»su-row»>
Вы можете добавить проигрыватель в область виджетов боковой панели и нижнего колонтитула, вставив код с помощью «ТекстВиджет.
Вставка URL-адреса общего ресурса в WordPress
Также можно вставить аудиоплеер, используя URL-адрес общего доступа. Когда вы нажимаете на «Поделиться» кнопку, просто скопируйте URL-адрес под «Поделиться» вкладка и вставьте ее в свой WordPress «Визуальный» редактор.
URL-код общего доступа SoundCloud
Нажмите Enter, чтобы увидеть, как WordPress автоматически преобразует этот URL в плейлист, как показано ниже.
Что следует помнить
- SoundCloud позволяет делиться отдельными аудиодорожками, плейлистами и профилем вашей учетной записи на вашем сайте WordPress.
- Вы можете использовать как метод общего URL, так и метод встраивания кода.
- Метод «Поделиться URL» удобен для обмена собственными плейлистами с широким изображением профиля. Код внедрения рекомендуется для воспроизведения чужих аудиофайлов.
- URL-адрес общего доступа необходимо вставить в «Визуальный»Редактор и плеер можно увидеть в редакторе.
- Код для встраивания сайта WordPress.com необходимо вставить в «Визуальный» редактор, и аудиоплеер будет виден только на опубликованном сайте.
- Код для встраивания сайта WordPress.org необходимо вставить «Текст» редактор и плеер можно увидеть в редакторе.
- WordPress.com поддерживает шорткоды SoundCloud, а WordPress.org — нет. Поэтому убедитесь, что вы получили правильный код встраивания для вашего аудиоплеера.
- Плеер можно настроить, изменив параметры по умолчанию во встроенном коде. Но проигрыватель, вставленный через общий URL, не может быть настроен.
- WordPress.org имеет множество бесплатных плагинов для создания шорткода SoundCloud и встраивания списка воспроизведения.
