TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

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

36

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

В этой статье мы объясним, как встроить плейлист SoundCloud в ваш сайт WordPress – как WordPress.com, так и сайт WordPress.org.

Шаг 1 – Создайте список воспроизведения в SoundCloud

Зарегистрируйтесь и получите бесплатную учетную запись SoundCloud и создайте плейлист со своими любимыми треками. Просмотрите все свои плейлисты в меню «Коллекция> Плейлисты», как показано ниже:

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

Просмотр списков воспроизведения в SoundCloud

Шаг 2 – Получите код для вставки плейлиста

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

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

Совместное использование плейлиста SoundCloud

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

Шаг 2.1 – Вставьте код для пользователей WordPress.com

SoundCloud имеет шорткод, поддерживаемый только для пользователей WordPress.com. Установите флажок «Код WordPress», чтобы получить шорткод для вашего сайта WordPress.com.

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

Получение кода встраивания для 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" /]

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

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

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

Просмотрите предварительный просмотр вашего списка воспроизведения и скопируйте код, показанный в текстовом поле в разделе «Код и предварительный просмотр».

Шаг 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». Например, указанный выше проигрыватель по умолчанию можно изменить, как показано ниже, с помощью данного кода:

Вы можете добавить проигрыватель в область виджетов боковой панели и нижнего колонтитула, вставив код с помощью виджета «Текст».

Вставка 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 и встраивания списка воспроизведения.

Источник записи: www.webnots.com
Leave A Reply

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее