Möchtest du lernen, wie man einen Shortcode in WordPress erstellt?
Zu lernen, wie man einen Shortcode in WordPress erstellt, kann eine effektive Möglichkeit sein, deine Posts und Seiten anzupassen. Wenn Sie jedoch neu in diesem Prozess sind, fällt es Ihnen möglicherweise schwer, herauszufinden, wie Sie eine solche Funktion auf Ihrer Website verwenden können.
Deshalb haben wir einen Leitfaden zusammengestellt, der Ihnen den Einstieg erleichtern soll. Indem Sie sich ansehen, wie Shortcodes funktionieren und wie Sie sie effektiv anwenden, können Sie damit beginnen, Ihre Inhalte nach Ihren Wünschen anzupassen, ohne dass zusätzliche Plugins erforderlich sind.
In diesem Artikel werden wir diskutieren, was WordPress-Shortcodes sind und warum Sie sie verwenden sollten. Dann zeigen wir Ihnen, wie Sie Ihre eigenen erstellen.
Aber vorher, wenn Sie WordPress Discover noch nie installiert haben Wie man ein Wordpress-Blog 7 Schritte für die Installation et Wie finden, zu installieren und ein Wordpress-Theme auf Ihrem Blog aktivieren
Dann zurück zu warum wir hier sind.
Was sind WordPress-Shortcodes?
WordPress-Shortcodes fungieren als Verknüpfungen, mit denen Sie Elemente schnell in einen Beitrag oder eine Seite einbetten können. Dies ist normalerweise eine einzelne Codezeile, die in eckige Klammern eingeschlossen ist. Zum Beispiel :
[exemplecodehortcode]Dieser Code zeigt eine vordefinierte Funktion im Frontend Ihrer Website an.
WordPress zuerst eingeführte Shortcodes mit der Veröffentlichung von Shortcode-API. Dies machte es den Benutzern leicht, attraktive Elemente zu ihren Posts und Seiten hinzuzufügen, wie z Google Maps oder den „Gefällt mir“-Button von Facebook.
Es existiert in WordPress Ursprünglicht sechs Shortcodes :
- Bildunterschrift: Untertitel um den Inhalt wickeln
- Galerie : Zeigt Bildergalerien an
- Audio: bettet Audiodateien ein und spielt sie ab
- vidéo : Videodateien einbetten und abspielen
- Playliste : Zeigt eine Sammlung von Audio- oder Videodateien an
- einbetten : umschließt Inline-Elemente
Sie werden auch auf zwei grundlegende Arten der Shortcode-Formatierung stoßen: self-closing et enclosing.
Kurzwahlen self-closing können für sich alleine stehen und brauchen kein schließendes Tag.
Inzwischen, enclosing umgeben den Inhalt, den Sie bearbeiten möchten, und zwingen Sie, das Tag manuell zu schließen. Sie können beispielsweise ein YouTube-Video einbetten, indem Sie die URL zwischen den Tags einschließen embed et /embed :
Dies würde beispielsweise das folgende Ergebnis erzeugen:
Einige von beste WordPress-Plugins kommen mit ihren eigenen Shortcodes. Zum Beispiel, WP-Formulare et Kontaktformular 7 haben Shortcodes, mit denen Sie schnell einbetten können Kontaktformular in einem Beitrag oder einer Seite. Sie können auch ein Plugin wie z MaxButtons um einen Button-Shortcode an beliebiger Stelle auf Ihrer Website hinzuzufügen.
Warum sollten Sie die Verwendung von WordPress-Shortcodes in Betracht ziehen?
Es gibt viele Gründe, warum Sie WordPress-Shortcodes verwenden können. Zum Beispiel ist es einfacher und schneller, als einen langen Code in HTML zu lernen und zu schreiben. Außerdem helfen sie Ihnen, Ihre Inhalte sauber und zugänglich zu halten.
Shortcodes können verwendet werden, um bestimmte Funktionen zu automatisieren, die Sie wiederholt verwenden. Zum Beispiel, wenn Sie eine Schaltfläche verwenden Aufruf zum Handeln (CTA) Für jeden Ihrer Artikel kann es eine schnelle und bequeme Lösung sein, einen dedizierten Shortcode bereit zu haben.
Es sollte erwähnt werden, dass Gutenberg-Herausgeber funktioniert auf die gleiche Weise und stützt sich auf die Verwendung von Shortcodes. Es ermöglicht WordPress-Benutzern, mehrere interaktive Funktionen durch die Verwendung von Blöcken hinzuzufügen.
Eine solche Methode ist viel anfängerfreundlicher, da Sie Inhalte direkt auf der Benutzeroberfläche hinzufügen können. Der WordPress-Blockeditor ist jedoch immer noch in seinem Angebot eingeschränkt. Glücklicherweise wird es mit einem Block geliefert Kurzwahl, mit dem Sie Ihren Seiten benutzerdefinierten Inhalt hinzufügen können.
So erstellen Sie einen Shortcode in WordPress
Wenn Sie bereits über Programmierkenntnisse verfügen, können Sie Ihre eigenen benutzerdefinierten Shortcodes erstellen. Dadurch haben Sie die volle Kontrolle über das Aussehen und die Funktionalität Ihrer Website.
Sehen wir uns an, wie man einen benutzerdefinierten WordPress-Shortcode erstellt. In diesem Tutorial fügen wir als Beispiel Social-Media-Links zu einem Artikel hinzu.
Schritt 1 – Erstellen Sie eine neue Designdatei
Bevor Sie beginnen, ist es eine gute Idee Sichern Sie Ihre WordPress-Website vollständig. Sie müssen auch eine separate Datei für Ihren benutzerdefinierten Shortcode außerhalb der Datei erstellen functions.php Ihre Wordpress-Theme. Dies bietet eine Fallback-Lösung, falls etwas schief geht.
Sie können einen Client verwenden FTP (Dateiübertragungsprotokoll) wie FileZilla um auf die Designdateien Ihrer Website zuzugreifen. Sobald Sie sich auf Ihrer Website angemeldet haben, gehen Sie zu wp-content> themen und finden Sie Ihren aktuellen Themenordner. In unserem Beispiel wird dies sein Eulenpresse:
Öffnen Sie Ihren Ordner Wordpress-Theme, klicken Sie mit der rechten Maustaste darauf und drücken Sie Neue Datei erstellen.
Benennen Sie Ihre neue Datei custom-shortcodes.php klicken Sie dann auf OK. Sie können es dann bearbeiten, indem Sie mit der rechten Maustaste darauf klicken und die Option auswählen Anzeigen/Bearbeiten :
Dadurch wird die Datei in Ihrem Standard-Texteditor geöffnet. Dann müssen Sie nur den folgenden Codeblock hinzufügen:
<?php ?>
Dadurch wird sichergestellt, dass Ihre neue Datei als PHP interpretiert wird, die Skriptsprache, auf der WordPress aufbaut.
Anschließend können Sie Ihre Änderungen speichern und die Datei schließen. Stellen Sie sicher, dass Sie das folgende Kontrollkästchen aktivieren, um sicherzustellen, dass es auf dem Server aktualisiert und auf Ihre Website angewendet wird:
Dann öffne die Datei functions.php im selben Themenordner und fügen Sie die folgende Codezeile am Ende des Dokuments hinzu:
include('shortcodes-personnalises.php');
Dadurch wird das System angewiesen, alle Änderungen, die Sie an der Datei vornehmen, einzubeziehen custom-shortcodes.php in functions.php während Sie sie trennen können. Wenn Sie fertig sind, speichern Sie Ihre Änderungen und schließen Sie die Datei.
Schritt 2 – Erstellen Sie die Shortcode-Funktion
Als Nächstes müssen Sie die Shortcode-Funktion erstellen und ihr mitteilen, was zu tun ist. Wählen Sie die Option erneut aus Anzeigen/Bearbeiten deiner Datei custom-shortcodes.php. Verwenden Sie das folgende Code-Snippet, um eine Aktion hinzuzufügen, mit der Sie Ihre Funktion verbinden können:
function subscribe_link(){
return 'Follow us on <a rel="nofollow" href="https://twitter.com/BlogPasCher">Twitter</a>';
}Als nächstes müssen Sie eine Callback-Funktion hinzufügen, die ausgeführt wird, wenn die Hook-Aktion aktiviert wird. Das Hinzufügen der folgenden Codezeile direkt nach der oben genannten teilt WordPress mit, dass Ihre Funktion ein Shortcode ist:
add_shortcode('sabonner', 'subscribe_link');Wenn Sie einen Shortcode mit der Funktion erstellen add_shortcode, weisen Sie ein Shortcode-Tag zu „ ($tag) " und ein entsprechender Funktionshaken " ($func) die jedes Mal ausgeführt wird, wenn die Verknüpfung verwendet wird.
Mit anderen Worten, wenn das Shortcode-Tag [abonnieren] ist, dann der Haken 'subscribe_link' leitet den Besucher auf die bereitgestellte URL um.
Daher den gesamten Code, den Sie in Ihrer Datei verwenden shortcodes-personnalises.php wird so aussehen:
Es ist zu beachten, dass Sie bei der Benennung von Tags nur Kleinbuchstaben verwenden sollten, obwohl Unterstriche verwendet werden können. Es ist auch entscheidend Vermeiden Sie die Verwendung von Bindestrichen, da es andere Shortcodes stören kann.
Schritt 3 – Fügen Sie den Self-Close-Shortcode zur Website hinzu
Sie können Ihren ursprünglichen Code jetzt als selbstschließenden Shortcode auf Ihrer WordPress-Seite testen. Mit dem WordPress-Blockeditor können Sie das [subscribe]-Tag direkt in den Beitrag einfügen:
Dadurch werden den Besuchern Ihrer Website die folgenden Inhalte angezeigt:
Wenn Sie mit diesem Shortcode zufrieden sind, müssen Sie nichts weiter tun. Wenn Sie es jedoch anpassen möchten, können Sie mit dem nächsten Schritt fortfahren.
Schritt 4 – Parameter zum Shortcode hinzufügen
Sie können den Shortcode anpassen "Abonnieren" für zusätzliche Funktionen zum Anzeigen anderer Social-Media-Links. Sie können dies tun, indem Sie einen Parameter hinzufügen, um die URL zu ändern.
Für einen Verwaltungsattribute hinzufügen, müssen Sie die Datei öffnen custom-shortcodes.php und fügen Sie den folgenden Code hinzu:
function subscribe_link_att($atts) {
$default = array(
'link' => '#',
);
$a = shortcode_atts($default, $atts);
return 'Follow us on '.$a['link'];
}
add_shortcode('sabonner', 'subscribe_link_att');Auf diese Weise können Sie die Links in Ihrem Shortcode-Tag anpassen, um sie dem Gutenberg-Editor hinzuzufügen. Sie können es über den vorherigen Code in der Datei einfügen benutzerdefinierte-shortcodes.php. Es sollte etwa so aussehen:
Hinzufügen der shortcode_atts()-Funktion kombiniert Benutzerattribute mit allen bekannten Attributen und alle fehlenden Daten werden durch ihre Standardwerte ersetzt. Wenn Sie fertig sind, speichern Sie Ihre Änderungen und schließen Sie die Datei.
Schritt 5 - Testen Sie die Einstellungen
Du kannst den aktualisierten Shortcode jetzt im WordPress Block Editor testen. In unserem Beispiel testen wir unsere Twitter- und Facebook-Links mit den folgenden Shortcodes:
[subscribe link='https://www.facebook.com/live.blogpascher']Facebook[/subscribe]
[subscribe link='https://twitter.com/BlogPasCher']Twitter[/subscribe]
Dies führt im Frontend zu folgendem Ergebnis:
Dieser selbstschließende Shortcode zeigt den Besuchern die direkten URLs Ihrer sozialen Profile an. Möglicherweise möchten Sie jedoch, dass diese Funktion etwas poliert aussieht.
Beispielsweise können Sie eine angehängte Version erstellen, mit der Sie den Ankertext, der den Benutzern angezeigt wird, wenn sie darauf klicken, vollständig anpassen können. Wie das geht, zeigen wir Ihnen im nächsten Schritt.
Schritt 6 – Erstellen Sie einen umschließenden Shortcode
Der umschließende Shortcode wird genauso formatiert wie das vorherige Beispiel zum automatischen Schließen. Es enthält jedoch einen zusätzlichen Parameter für die Funktion.
Zuerst müssen Sie hinzufügen $content = null, der diese Funktion als umschließenden Shortcode identifiziert. Anschließend können Sie die hinzufügen do_shortcode von WordPress, das den Inhalt nach Shortcodes durchsucht.
In der Datei custom-shortcodes.php, fügen Sie den neuen umschließenden Shortcode hinzu:
function subscribe_link_att($atts, $content = null) {
$default = array(
'link' => '#',
);
$a = shortcode_atts($default, $atts);
$content = do_shortcode($content);
return 'Suivez nous sur <a href="'.($a['link']).'" style="color: blue">'.$content.'</a>';
}
add_shortcode('sabonner', 'subscribe_link_att');Wenn Sie fertig sind, Ihre Datei custom-shortcodes.php sollte so aussehen:
Der vorherige Code hat ein Attribut " Stil " zusätzlich, wodurch der Ankertext in eine blaue Farbe geändert wird. Vergessen Sie nicht, Ihre Änderungen zu speichern, wenn Sie fertig sind.
Schritt 7 – Umschließenden Shortcode zur Website hinzufügen
Sie können jetzt Ihren Shortcode in den WordPress-Blockeditor einfügen, um das Endergebnis zu sehen:
Wie Sie bemerkt haben, können Sie die URLs Ihrer Social-Media-Seiten und den Ankertext, der dem Besucher angezeigt wird, mit diesem Wrapper-Shortcode einfach ändern. In diesem Fall haben wir gewählt " Facebook " et "Twitter" :
Dort ! Sie haben jetzt einen benutzerdefinierten Shortcode für die Abonnement-Links in Ihren Seiten und Posts erstellt. Beachten Sie, dass alle oben genannten Schritte geändert werden können, um mit der WordPress-Funktion alle möglichen verschiedenen Elemente zu erstellen Shortcodes.
Das Hinzufügen zusätzlicher Funktionen zu Ihrer WordPress-Website ist mit Shortcodes viel einfacher. Sie können sie verwenden, um Ihre bestehenden Inhalte zu personalisieren und interaktive Funktionen wie Kontaktformulare, Bildergalerien oder Abonnement-Links hinzuzufügen.
Andere empfohlene Ressourcen
Wir laden Sie außerdem ein, die unten aufgeführten Ressourcen zu konsultieren, um die Kontrolle und Kontrolle Ihrer Website und Ihres Blogs zu verbessern.
- So erstellen Sie mit Elementor eine schwebende Schaltfläche mit Z-Index
- Wann und wie Wordpress in einem Unterverzeichnis installieren
- So erstellen Sie ein einfaches Gutenberg-Block-WordPress-Plugin
- So fügen Sie benutzerdefinierte Schriftarten zu einer WordPress-Website hinzu
Zusammenfassung
In diesem Artikel haben wir gelernt, wie Sie Ihren eigenen Shortcode in WordPress erstellen. Wenn Sie Bedenken oder Vorschläge haben, teilen Sie uns dies bitte innerhalb mit commentaires.
Sie können jedoch auch unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.
In der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.
...
