So verwenden Sie den SoundCloud-Einbettungsblock

Mit dem SoundCloud-Einbettungsblock für WordPress kannst du deinem Beitrag oder deiner Seite ein Album, eine Playlist oder einen Track hinzufügen. Das Einbetten von SoundCloud-Inhalten in Gutenberg bietet Ihnen viele Optionen für das Aussehen und die Funktionen des Blocks. Andernfalls, wenn Sie den SoundCloud-Link einfach kopieren und in den klassischen Editor einfügen, können Sie möglicherweise Musik präsentieren, aber Ihre Möglichkeiten sind stark eingeschränkt, wenn es um Anpassungen und Seitendesign geht.

In diesem Artikel zeigen wir Ihnen, wie Sie ein SoundCloud-Album, eine Playlist oder einen Track in einen WordPress-Beitrag oder eine WordPress-Seite einbetten. Wir behandeln auch Best Practices, FAQs und Tipps, die Sie kennen sollten.

Bevor wir loslegen, beachten Sie, dass Sie zwar kein SoundCloud-Konto benötigen, um Inhalte aus dem Dienst einzubetten, Sie jedoch öffentliche Tracks auswählen müssen – private Tracks können nicht eingebettet werden. Außerdem müssen Sie den Gutenberg-Blockeditor verwenden, um den SoundCloud-Einbettungsblock hinzuzufügen. (Wir werden jedoch ein paar Alternativen behandeln.)

Abonnieren Sie unseren Youtube-Kanal

So betten Sie SoundCloud-Inhalte in WordPress ein

Zuerst gehen wir darauf ein, wie man einen SoundCloud-Track zu einem WordPress-Beitrag oder einer WordPress-Seite hinzufügt. Dann werden wir kurz darauf eingehen, wie Sie ein Album/eine Playlist hinzufügen, da der Vorgang dem Hinzufügen eines Titels ähnelt.

So betten Sie einen SoundCloud-Track in WordPress ein

Gehen Sie zu SoundCloud und suchen Sie den Track, den Sie in WordPress einbetten möchten. Klicken Sie auf den Track, um ihn auf einer eigenen Seite zu öffnen. Kopieren Sie die URL aus der Adressleiste oben auf der Seite.

Gehen Sie zu WordPress und erstellen oder bearbeiten Sie einen Beitrag oder eine Seite. Im Hauptteil der Seite sollten Sie ein Pluszeichen sehen . Wenn Sie keines sehen, klicken Sie irgendwo im Hauptteil der Seite, und es sollte erscheinen.

Klicken Sie auf das Pluszeichen , um die Blockauswahl aufzurufen. Geben Sie „SoundCloud“ in das Suchfeld ein und wählen Sie dann den zugehörigen Block aus. Der SoundCloud-Einbettungsblock wird jetzt zu Ihrer Seite oder Ihrem Beitrag hinzugefügt.

Fügen Sie die von Ihnen kopierte SoundCloud-Adresse in das Feld mit der Aufschrift „URL zum Einbetten hier eingeben…“ ein. Klicken Sie auf Einbetten . Sie sehen jetzt etwa Folgendes:

Klicken Sie oben rechts auf der Seite auf Vorschau > Desktop > Vorschau in neuem Tab, um zu sehen, wie sie auf Ihrer Site aussehen wird, sobald sie live ist.

Sie können eine Beschriftung hinzufügen, wenn Sie möchten. Unterhalb der eingebetteten Spur befindet sich ein eigener Bereich, in dem Sie eine Beschriftung sowie Formatierungsoptionen eingeben können.

So betten Sie ein SoundCloud-Album oder eine Playlist in WordPress ein

Das Einbetten eines Albums oder einer Playlist von SoundCloud ist dem Hinzufügen eines Titels sehr ähnlich. Navigieren Sie in SoundCloud zu dem Album oder der Wiedergabeliste, die Sie hinzufügen möchten, und klicken Sie darauf, um sie auf einer eigenen Seite zu öffnen. Kopieren Sie die URL aus der Adressleiste.

Fügen Sie im SoundCloud-Einbettungsfeld in WordPress die Adressleiste in den dafür vorgesehenen Bereich ein. Klicken Sie auf Einbetten .

Das Ergebnis ist im Grunde das gleiche, egal ob Sie ein Album oder eine Playlist hinzugefügt haben. Das Cover des Albums oder der Playlist wird im Hauptteil des eingebetteten Links angezeigt und darunter befindet sich eine Liste mit Titeln, durch die Sie scrollen können. Wenn Sie mit der Maus über die Tracks fahren und scrollen, wird das Hauptcover verkleinert, um mehr von der Trackliste anzuzeigen. In diesem Screenshot ist die obere Einbettung eine Playlist, während die untere Einbettung ein Album ist.

Die Embed-Fehlermeldung

Wenn Sie etwas eingeben, das kein Link, ein defekter Link ist oder zu Inhalten führt, die nicht eingebettet werden können, erhalten Sie eine Fehlermeldung, die wie folgt aussieht:

Sie können den Link erneut versuchen oder auf In Link konvertieren klicken, um zu sehen, ob dies einen Unterschied macht. Wenn jedoch keine der beiden Optionen funktioniert, müssen Sie möglicherweise andere Inhalte einbetten.

SoundCloud-Einbettungs-Blockoptionen

Es gibt zwei verschiedene Bereiche, in denen Sie Optionen für den SoundCloud-Einbettungsblock finden: Am oberen Rand der Leiste und in der rechten Seitenleiste. Lassen Sie uns durchgehen, was sie sind.

Symbolleistenoptionen

Sobald Sie dem Einbettungsblock Inhalt hinzugefügt haben, wird durch Klicken darauf eine Optionsleiste oben angezeigt. Es sieht aus wie das:

Von links nach rechts bedeuten die Symbole Folgendes:

• Transformieren in: Sie können den SoundCloud-Einbettungsblock in einen Absatz, eine Spalte oder eine Gruppe ändern. Die einzige Option, an die Sie denken sollten, ist die Gruppe eins, da Sie die Hintergrundfarbe des Blocks ändern können. Wenn Ihnen das egal ist, lassen Sie es in Ruhe – es ist ein wenig schwierig zu bedienen.
• Ziehen: Bewegen Sie den Mauszeiger über das Ziehen- Symbol, und Ihr Cursor verwandelt sich in eine kleine Hand. Klicken Sie mit der linken Maustaste auf den Einbettungsblock und ziehen Sie ihn an die gewünschte Stelle auf der Seite.
• Nach oben und nach unten bewegen: Der Aufwärtspfeil bewegt den Block um ein Feld nach oben und der Abwärtspfeil bewegt ihn um ein Feld nach unten.
• Ausrichtung ändern: Richten Sie den Einbettungsblock links, zentriert oder rechts aus. Wenn Sie es nach links oder rechts ausrichten, wird es kleiner. Abhängig von Ihrem Thema haben Sie möglicherweise auch Optionen für volle Breite und breite Breite, wodurch der Einbettungsblock möglicherweise größer wird.
• URL bearbeiten: Ersetzen Sie die SoundCloud-URL, um ein anderes Album, eine andere Wiedergabeliste oder einen anderen Titel einzubetten.
• Optionen: Das letzte Symbol öffnet ein Dropdown-Menü mit zusätzlichen Optionen.

Das Menü Weitere Optionen

Dieses Dropdown-Menü enthält eine Handvoll leicht verständlicher Optionen. Von oben nach unten sind sie wie folgt:

• Weitere Einstellungen ausblenden : Blenden (oder zeigen) Sie die Einstellungs-Seitenleiste auf der rechten Seite ein.
• Kopieren: Kopieren Sie den Block und fügen Sie ihn an einer beliebigen Stelle ein.
• Duplizieren: Duplizieren Sie den Block, wodurch eine Kopie davon direkt unter dem Original erstellt wird.
• Vorher einfügen: Fügen Sie einen Block vor dem ausgewählten hinzu.
• Einfügen nach: Fügt einen Block nach dem ausgewählten hinzu.
• Verschieben nach: Dies zeigt einen blauen Balken an, den Sie mit den Pfeiltasten Ihrer Tastatur auf der Seite verschieben können. Nachdem Sie ihn an der gewünschten Stelle platziert haben, klicken Sie auf Enter/Return , um den Einbettungsblock an diese Stelle zu verschieben.
• Als HTML bearbeiten : Bearbeiten Sie den HTML-Code des Blocks.
• Zu wiederverwendbaren Blöcken hinzufügen: Fügen Sie den ausgewählten Block zu Ihrer Liste der wiederverwendbaren Blöcke hinzu. Auf diese Weise können Sie es ganz einfach zu einem anderen Beitrag oder einer anderen Seite oder zu einem anderen Abschnitt des aktuellen Beitrags oder der Seite hinzufügen.
• Gruppen: Wie der Konzern Option oben erwähnt, auf diese Weise können Sie die Hintergrundfarbe des Blocks ändern.
• Block entfernen: Löschen Sie den Block von der Seite.

Seitenleistenoptionen

Die rechte Seitenleiste hat zwei Einstellungen: Medieneinstellungen und Erweitert. Gehen wir sie durch.

Medieneinstellungen

Wenn Sie auf Resize für kleinere Geräte in den Medien Abschnitt Einstellungen wechseln, wird der Einbettungs Block automatisch auf die Größe des Bildschirms resize abhängig. Dies ist besonders wichtig für Personen, die Ihre Inhalte auf einem Mobilgerät anzeigen. Daher empfiehlt es sich, diese Option zu aktivieren.

Fortschrittlich

Im Abschnitt Erweitert können Sie dem ausgewählten Block einen CSS-Block hinzufügen. Das bedeutet, dass Sie den Block nach Belieben anpassen und stylen können (wenn Sie CSS kennen).

Best Practices und Tipps zur effektiven Verwendung des SoundCloud Embed Blocks

Schnelles Hinzufügen des eingebetteten Inhalts

Wenn Sie genau wissen, wohin der eingebettete SoundCloud-Inhalt gehen soll, können Sie die URL einfach auf der Seite einfügen. Ein SoundCloud-Einbettungsblock wird automatisch für Sie erstellt, mit denselben Optionen, als ob Sie den Block manuell hinzufügen würden.

Einbetten von SoundCloud-Inhalten mit dem Classic-Editor

Wenn Sie lieber mit dem klassischen WordPress-Editor arbeiten, können Sie trotzdem SoundCloud-Inhalte einbetten. Sie kopieren einfach den Link und fügen ihn an der gewünschten Stelle in den Textkörper des Beitrags oder der Seite ein. Dadurch wird der Inhalt automatisch eingebettet. Sie haben jedoch nicht die gleichen Symbolleistenoptionen wie beim Gutenberg-Block.

Verwenden Sie den Einbettungscode für verschiedene Anpassungen

Eine andere Möglichkeit, SoundCloud-Inhalte in WordPress einzubetten, besteht darin, den Einbettungscode zu verwenden. Gehen Sie zu dem SoundCloud-Inhalt, den Sie einbetten möchten, und klicken Sie auf die Schaltfläche Teilen .

Im Popup können Sie das Aussehen des eingebetteten Inhalts ändern. In diesem Beispiel habe ich die Play/Pause-Schaltfläche in hellblau geändert und die Höhe des Einbettungsfelds angepasst.

Wenn Sie fertig sind, kopieren Sie den Einbettungscode und fügen Sie ihn in einen HTML-Block in WordPress ein. In der Vorschau der Seite können Sie sehen, wie der Inhalt aussehen wird.

Häufig gestellte Fragen zum SoundCloud-Einbettungsblock

Hat SoundCloud nur Musik?

Nö! SoundCloud hat auch Podcasts. Das Einbetten eines Podcasts entspricht dem Einbetten eines Musiktitels. Kopieren Sie die URL und fügen Sie sie dann in das Einbettungsfeld ein. Sie können eine einzelne Episode einbetten oder, wenn Sie den Podcast in seiner Gesamtheit präsentieren möchten, auf die Hauptseite von SoundCloud gehen und die URL kopieren/einfügen.

Kann ich dem SoundCloud-Einbettungsblock mehrere Tracks hinzufügen?

Wenn Sie mehrere Songs oder Podcast-Episoden haben, die Sie auf Ihrer WordPress-Site präsentieren möchten, können Sie Ihre eigene Playlist erstellen und diese dann einbetten. Beachten Sie, dass die Datenschutzeinstellungen jedes Titels übernommen werden, auch wenn Sie die Playlist öffentlich machen (was Sie zum Einbetten benötigen). Das heißt, wenn Sie einer öffentlichen Wiedergabeliste einen privaten Titel hinzufügen, bleibt dieser Titel weiterhin privat.

https://help.soundcloud.com/hc/en-us/articles/115003449787-Creating-and-adding-tracks-to-a-playlist

Kann ich auswählen, wo ein SoundCloud-Track abgespielt wird?

Unglücklicherweise nicht. Wenn Sie bei SoundCloud-Inhalten auf die Schaltfläche Teilen klicken, wird ein Fenster geöffnet. Unten befindet sich eine Option, wo die Wiedergabe des Titels beginnen soll. Wenn Sie jedoch den zugehörigen Link kopieren und in den Einbettungsblock einfügen, wird der Track an diesem Teil nicht wirklich gestartet. Wir haben es auf verschiedene Arten versucht, aber kein Glück.

Einpacken

Die Integration von Musik oder Podcasts in Ihre Website kann das Erlebnis wertvoller machen und das Engagement verbessern. Wenn Sie Ihre eigenen Inhalte haben oder die von anderen teilen möchten, ist der SoundCloud-Einbettungsblock der einfachste Weg, dies mit den größtmöglichen Anpassungs- und Layoutoptionen zu tun. Sie können Ihrer Website ein Album, eine Wiedergabeliste, einen Podcast oder einen Musiktitel hinzufügen und Besucher anhören lassen, ohne an einen anderen Ort weitergeleitet zu werden. Und wenn sie mehr entdecken möchten, können sie sich ganz einfach durch die Inhalte auf SoundCloud klicken.

Vielleicht interessiert Sie auch unser Artikel mit den 11 besten Audioplayer-Plugins für WordPress. Hör zu!

Ausgewähltes Bild von apghedia auf Shutterstock.com