WordPress propose des shortcodes par défaut pour insérer de l’audio et des listes de lecture sur votre site. Cela sera très utile lorsque vous hébergez quelques fichiers audio sur votre propre serveur. Mais la plupart d’entre nous ne sommes pas des musiciens pour composer notre propre son et l’utilisation de l’audio de quelqu’un entraînera une violation du droit d’auteur. Voici que des tiers comme SoundCloud offrent des services d’hébergement audio et permettent aux utilisateurs publics de partager la musique sous des licences convenues. De plus, lorsque vous avez un grand nombre de fichiers audio, c’est une bonne idée de les héberger en dehors de votre serveur. Cela aidera non seulement à améliorer la vitesse de chargement des pages de votre site, mais aussi à atteindre un public plus large.
Dans cet article, nous expliquerons comment intégrer une playlist SoundCloud dans votre site WordPress – les deux WordPress.com et WordPress.org site.
- Étape 1 – Créez une Playlist dans SoundCloud
- Étape 2 – Obtenez le code d’intégration pour la liste de lecture
- Étape 2.1 – Intégrer le code pour WordPress.com Utilisateurs
- Étape 2.2 – Intégrer le code pour WordPress.org Utilisateurs
- Étape 3 – Insertion du code d’intégration SoundCloud dans WordPress
- Insertion de l’URL de partage dans WordPress
- Points à retenir
Étape 1 – Créez une Playlist dans SoundCloud
Inscrivez-vous gratuitement à un compte SoundCloud et créez une playlist avec vos morceaux préférés. Affichez toutes vos listes de lecture sous le menu « Collection > Listes de lecture » comme indiqué ci-dessous:
Affichage des listes de lecture dans SoundCloud
Étape 2 – Obtenez le code d’intégration pour la liste de lecture
Cliquez sur la liste de lecture que vous souhaitez partager sur votre site WordPress. Vous verrez la liste des pistes ajoutées dans la playlist et cliquez sur le bouton « Partager » « . Vous pouvez également activer ou désactiver le mélange de listes de lecture ici.
Partage de la Playlist SoundCloud
Un écran contextuel proposera trois options de partage : Partager, Intégrer et Envoyer un message. Allez dans l’onglet « Intégrer », choisissez le design d’affichage et obtenez le code d’intégration pour votre site WordPress.
Étape 2.1 – Intégrer le code pour WordPress.com Utilisateurs
SoundCloud a un shortcode pris en charge uniquement pour WordPress.com utilisateurs. Choisissez la case à cocher « Code WordPress » pour obtenir le shortcode pour votre WordPress.com site.
Obtenir le Code d’intégration pour WordPress
Le code d’intégration pour WordPress.com les utilisateurs ressembleront à quelque chose comme ci-dessous:
Faites défiler jusqu’à l’écran et cliquez sur « Plus d’options » pour changer la couleur et activer ou désactiver la lecture automatique de votre liste de lecture.
Activation de la Lecture automatique
Affichez l’aperçu de votre liste de lecture et copiez le code affiché dans la zone de texte sous « Code et aperçu ».
Étape 2.2 – Intégrer le code pour WordPress.org Utilisateurs
Si vous avez un auto-hébergé WordPress.org le site s’assure ensuite de désactiver la case à cocher « Code WordPress » et d’obtenir le code d’intégration. Ce devrait être un code iframe comme indiqué ci-dessous:
<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>
Étape 3 – Insertion du code d’intégration SoundCloud dans WordPress
Si vous avez le code d’intégration pour WordPress.com ou WordPress.org le processus d’insertion est le même et simple. Collez simplement le code d’intégration dans votre publication ou page similaire à tout contenu de texte sous l’éditeur « Texte ». Vous devez publier votre site pour voir le lecteur audio dans WordPress.com le site lors du passage à l’éditeur « Visuel » affichera le lecteur audio dans WordPress.org site. Voici un exemple réel de lecteur SoundCloud sur WordPress.org site.
Les propriétés de largeur, de hauteur et de lecture automatique du lecteur peuvent être directement modifiées dans le code d’intégration. Il est également possible de changer l’apparence du lecteur en ajoutant le paramètre « visual=true ». Par exemple, le lecteur par défaut ci-dessus peut être modifié comme ci-dessous en utilisant le code donné:
< iframe width = »100% » height= »300″ scrolling= »non » frameborder= »oui » src= »https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/299620824&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true »></iframe>
Vous pouvez ajouter le lecteur dans la zone du widget de la barre latérale et du pied de page en collant le code à l’aide du widget « Texte ».
Insertion de l’URL de partage dans WordPress
Il est également possible d’insérer un lecteur audio à l’aide de l’URL de partage. Lorsque vous cliquez sur le bouton « Partager », copiez simplement l’URL sous l’onglet « Partager » et collez-la sur votre éditeur « Visuel » WordPress.
Code URL de partage SoundCloud
Appuyez sur Entrée pour voir que WordPress convertit automatiquement cette URL en une liste de lecture comme ci-dessous.
Points à retenir
- SoundCloud permet de partager des pistes audio individuelles, des listes de lecture et le profil de votre compte sur votre site WordPress.
- Vous pouvez utiliser à la fois la méthode share URL et la méthode embed code.
- La méthode d’URL de partage est bonne pour partager vos propres listes de lecture avec une image de profil large. Le code d’intégration est recommandé pour la lecture des fichiers audio des autres.
- L’URL de partage doit être collée sur l’éditeur « Visuel » et le lecteur peut être vu sur l’éditeur.
- Code d’intégration pour WordPress.le site com doit être collé sur l’éditeur « Visuel » et le lecteur audio ne sera visible que sur le site publié.
- Code d’intégration pour WordPress.org le site doit être collé sur l’éditeur de « texte » et le lecteur peut être vu sur l’éditeur.
- WordPress.com prend en charge les shortcodes SoundCloud tout en WordPress.org ne le fait pas. Assurez-vous donc d’obtenir le code d’intégration correct pour votre lecteur audio.
- Le lecteur peut être personnalisé en modifiant les paramètres par défaut dans le code d’intégration. Mais le lecteur inséré via une URL de partage ne peut pas être personnalisé.
- WordPress.org dispose de nombreux plugins gratuits pour créer un shortcode SoundCloud et intégrer la liste de lecture.
