Share
Heute werden wir uns mit der Verwendung von Shortcodes in Verbindung mit einer Vielzahl populärer Dienste beschäftigen - einschließlich Websites wie YouTube und Flickr. Zuerst wird erneut beschrieben, wie ein Shortcode erstellt wird, und anschließend wird der Code dieses Drittanbieters in etwas so konvertiert kann wiederholt und manipuliert werden.
Wir haben bereits hier bei WPTuts + die Kurzwahlen besprochen, um die Vorteile ihrer Verwendung zu besprechen und wie diese genutzt werden können. Shortcodes sind effektiv Shortcuts (wie von WordPress selbst definiert), die es ermöglichen, ein Ergebnis wiederholt mit möglichst wenig Arbeit zu erzielen. In ihrer einfachsten Form enthält ein Shortcode Code, den Sie in einer anderen Datei in WordPress eingebunden haben. Manchmal handelt es sich dabei um ein Produkt eines Drittanbieters, beispielsweise ein YouTube-Video oder einen Flickr-Stream.
Wenn Sie mit Shortcodes nicht vertraut sind, sollten Sie diesen Artikel wahrscheinlich nicht mehr lesen und einen der anderen Artikel lesen, die wir hier bei Tuts + über Shortcodes in WordPress haben.
Ein Shortcode wird durch Hinzufügen einer Funktion zu Ihrem erstellt Functions.php und dann als Shortcode verknüpfen. Im folgenden Beispiel wird eine Verknüpfung zum AppStorm-Hub erstellt.
Accentsconagua
Funktion link_to_appstorm ($ atts, $ content = null) return 'AppStorm'; add_shortcode ('appstorm', 'link_to_appstorm'); Um es zu verwenden, verwenden wir die einfachste Form eines Kurzcodes ohne Attribute.
[appstorm]
Wir können diese Idee weiterführen, indem wir ein Attribut einführen, in dem Sie eine bestimmte AppStorm-Site angeben, zu der eine Verknüpfung erstellt werden soll.
Funktion link_to_appstorm ($ atts, $ content = null) extract (shortcode_atts (array ('site' => 'www'), $ atts)); Rückkehr 'AppStorm'; add_shortcode ('appstorm', 'link_to_appstorm'); Die Zeit, zu der der Shortcode mit einer Subdomain von AppStorm verknüpft ist. Wir geben an, welche Subdomain durch Hinzufügen von Seite? ˅ Attribut. Wenn im Kurzcode kein Attribut definiert ist, wird der Standardwert für den Kurzcode verwendet www die nur zurück zur Hauptseite führt. Das nachstehende Verwendungsbeispiel würde zu iPad.AppStorm führen.
[appstorm site = "ipad"]
Wie Sie sehen können, sind Shortcodes ziemlich selbsterklärend. Was wir jedoch tun möchten, ist dasselbe Prinzip wie bei einem Link, der aus einem Shortcode mit einem Attribut generiert wird, das in Verbindung mit einem Drittanbieter-Dienst wie YouTube oder Flickr verwendet werden soll.
Das Konvertieren eines statischen Codes eines Drittanbieters in einen Shortcode ähnelt der Methode zum Erstellen eines Links. Wir werden einfach eine Funktion erstellen, die den Code als Shortcode zurückgibt, und dann ein paar Attribute hinzufügen, um ihn anzupassen.
Der erste Schritt, den wir unternehmen sollten, ist, den regulären Embed-Code zu verwenden und daraus eine einfache Return-Funktion zu erstellen.
Funktion youtube_video ($ atts, $ content = null) return ''; add_shortcode ('youtube', 'youtube_video'); [Youtube]
Auf die gleiche Weise haben wir im ersten Beispiel den ersten, nicht variablen Link erstellt. In den obigen Code wird ein YouTube-Video eingebettet, das sich nicht ändert. Und wie das geht, ist auch ziemlich selbsterklärend.
Im Wesentlichen erzeugt der Code im vorherigen Schritt ein Ergebnis, das identisch ist, wenn der zurückgegebene Code in den Editor selbst eingefügt wurde. Wenn Sie dasselbe Video immer wieder regelmäßig einbetten, ist dieser Shortcode wahrscheinlich unbrauchbar. Daher möchten wir einige Attribute einführen, die in Parameter für den Parameter übersetzt werden sollen iframe.
Um dies zu erreichen, verwenden wir erneut die Extrakt() Funktion zum Abrufen von Attributen aus dem Kurzcode. In dem folgenden Code führen wir das in einer grundlegenden Form aus, indem wir nur ein Attribut erstellen, das die Video-ID ersetzt.
Funktion youtube_video ($ atts, $ content = null) extract (shortcode_atts (array ('id' => "), $ atts)); return ''; add_shortcode ('youtube', 'youtube_video'); [Youtube]
Genau wie beim Ersetzen der Video-ID können wir die Breite und Höhe auch gleich ändern. Dies ist die Zeit, zu der Sie sicherstellen möchten, dass Sie Standardwerte angeben, für den Fall, dass der Benutzer keinen Breiten- oder Höhenwert bereitstellt.
Funktion youtube_video ($ atts, $ content = null) extract (shortcode_atts (array ('id' => ", 'width' => '640', 'height' => '360'), $ atts)); return ''; add_shortcode ('youtube', 'youtube_video'); [Youtube]
YouTube verfügt über zusätzliche Parameter, die der URL hinzugefügt werden können, beispielsweise die automatische Wiedergabe. Natürlich können diese auch auf den zurückgegebenen Code angewendet werden, gegebenenfalls mit einem eigenen Attribut. Im Allgemeinen ist dies selbsterklärend und wird im Folgenden gezeigt (hinzugefügte Teile sind fett gedruckt).
Funktion youtube_video ($ atts, $ content = null) extract (shortcode_atts (array ('id' => ", 'width' => '640', 'height' => '360', 'autoplay' => '0 '), $ atts)); Rückkehr''; add_shortcode ('youtube', 'youtube_video'); [Youtube]
Es ist wirklich so einfach, und wie Sie in der folgenden Zusammenfassung sehen werden, kann dieselbe grundlegende Methode zum Erstellen von Kurzwahlen für andere Dienste von Drittanbietern verwendet werden.
Alle diese Einbettungen von Drittanbietern wurden mithilfe der oben beschriebenen Schritte erstellt. Natürlich können wie in Schritt 2b zusätzliche Parameter nach Belieben hinzugefügt werden.
Ein Vimeo-Video ist auf die gleiche Weise eingebettet wie ein YouTube-Video iframe mit Breiten- und Höhenvariablen. Der einzige Zusatz ist die Farbvariable zum Anpassen des Players.
Funktion vimeo_video ($ atts, $ content = null) extract (shortcode_atts (array ('id' => ", 'width' => '640', 'height' => '360', 'color' => '59a5d1 '), $ atts)); Rückkehr''; add_shortcode ('vimeo', 'vimeo_video'); [vimeo]
Das Twitter-Profil-Widget ist ein Stück JavaScript, mit einer Menge verschiedener Attribute, die alle Shortcode-Attribute im folgenden Code ersetzen. Da es so viele gibt, möchten Sie vielleicht einige entfernen und durch konstante Werte (z. B. Format) im eigentlichen JavaScript ersetzen. Sie können auch nur die Standardattribute im Array ändern und die Verwendung des Shortcodes vergessen.
Funktion twitter_widget ($ atts, $ content = null) extract (shortcode_atts (array ('username' => ", 'width' => '300', 'height' => '200', 'tweetnum' => '4 ',' shellbgcolor '=>' cccccc ',' listbgcolor '=>' eeeeee ',' textcolor '=>' 333333 ',' linkcolor '=>' 639ee3 ',' hashtags '=>' true ',' scrollbar ' => 'true', 'loop' => 'false', 'stream' => 'false', 'avatars' => 'false', 'timestamp' => 'false'), $ atts)); return ' '; add_shortcode ('twitter', 'twitter_widget'); Alle diese Shortcode-Attribute haben Standardwerte, mit Ausnahme des erforderlichen Benutzernamens. Was eigentlich in das Attribut eingefügt werden soll, ist alles selbsterklärend Hashtags in denen der Rest nur wahr / falsch ist.
[twitter]
Der Tweet-Button ist ein beliebter Social-Sharing-Button für Twitter.
Funktion tweet_button ($ atts, $ content = null) extract (shortcode_atts (array ('username' => ", 'url' =>", 'style' => 'none'), $ atts)); zurück 'Tweet'; add_shortcode ('tweetbutton', 'tweet_button'); Die ersten beiden Attribute des Tweet-Buttons sind nicht wirklich mehrdeutig. Der letzte legt den Stil für die Tweet-Schaltfläche fest horizontal, Vertikale oder keiner.
[Tweet-Taste]
Wie der Tweet-Button sind der Like-Button und der Send-Button die Social-Sharing-Buttons für Facebook. Bitte beachten Sie, dass diese Schaltflächen auch das JavaScript-SDK benötigen, das irgendwo auf der aktuellen Seite angegeben ist.
Funktion facebook_buttons ($ atts, $ content = null) extract (shortcode_atts (array ('width' => '450', 'showfaces' => 'false', 'colorscheme' => 'light', 'font' => 'arial'), $ atts)); Rückkehr ' Die verschiedenen Attribute für die Verwendung werden auf der zugehörigen Facebook-Seite erläutert. Im Wesentlichen wird die Breite jedoch in demselben Format wie zuvor beschrieben, Zeige Gesichter ist ein wahrer / falscher Wert, ob Gesichter der "Like-Ees" angezeigt werden sollen, Farbschema ist entweder dunkel oder hell und die Schrift ist eine Schrift.
Da die XFBML automatisch auf die aktuelle Seite abzielt, müssen keine Attribute verwendet werden. Dies bedeutet, dass der Shortcode so einfach wie das folgende Beispiel sein kann.
[mögen]
Mit dem Flickr-Badge können Sie Ihre neuesten Fotos von Flickr anzeigen. Leider enthält das Flickr-Widget ein eigenes CSS (obwohl Sie es leicht in Ihr Stylesheet verschieben können) und verwendet Tabellen für das Layout. Sobald Sie mit dieser Praxis sehr frustriert sind, finden Sie hier den Shortcode.
Funktion flickr_widget ($ atts, $ content = null) extract (shortcode_atts (array ('userid' => ", 'num' => '3', 'sort' => 'random', 'size' =>), $ atts)); return ' | www.flickr.com |
Das Flickr-Widget verfügt über vier grundlegende Variablen, die Benutzeridentifikation ist die Benutzer-ID (im Format 12345678 @ N01), die num ist die Anzahl der angezeigten Fotos Sortieren ist entweder aktuell oder zufällig und bezieht sich darauf, wie die gezeigten Fotos ermittelt werden Größe ist entweder s (ein kleines Quadrat), t (eine Miniaturansicht) oder m (Mittel).
[flickr]
Ich habe hoffentlich erklärt, wie man einen Shortcode im Zusammenhang mit einem Dienst eines Drittanbieters erstellt. Es ist ziemlich einfach, wir müssen nur herausfinden, wie der ursprüngliche Code funktioniert, und statische Variablen für Attribute austauschen. Dies spart Zeit, aber, was noch wichtiger ist, bedeutet, dass der Code zu einem späteren Zeitpunkt geändert werden kann, während die Parameter beibehalten werden, sodass Sie beispielsweise die Breite zu einem späteren Zeitpunkt für alle Verwendungszwecke des jeweiligen Shortcodes ändern können.
