Springe zum Hauptinhalt

Wie eine Shortcode-Schnittstelle auf Wordpress hinzufügen

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Wenn Sie eine WordPress-Site für einen Client entwickeln, haben Sie wahrscheinlich Shortcodes für diesen Client. Das Problem ist, dass viele Neulinge nicht wissen, wie man einen Shortcode hinzufügt, und wenn Parameter hinzugefügt werden, wird es noch komplizierter. Shortcake bietet Benutzern eine einfache Lösung zum Hinzufügen von Shortcodes zu WordPress.

In diesem Tutorial werde ich Ihnen zeigen, wie Sie eine Shortcode-Oberfläche in WordPress hinzufügen, um das Hinzufügen von Artikeln und Seiten zu vereinfachen.

Was ist Shortcake?

WordPress bietet eine Funktion, mit der Sie ausführbaren Code in Posts und Seiten über Shortcodes hinzufügen können. Verschiedene WordPress-Themes und -Plugins ermöglichen es Benutzern, ihren Blogs mithilfe von Shortcodes Funktionen hinzuzufügen. Die Verwendung dieser Shortcodes kann jedoch sehr schwierig werden, was die Anpassung schwierig macht.

Wenn beispielsweise bei einem einfachen WordPress-Thema ein Shortcode zum Einfügen einer Schaltfläche vorhanden ist, muss der Benutzer wahrscheinlich etwa fünf Parameter für den Shortcode wie folgt eingeben:

[URL-Schaltfläche = "http://example.com" title = "Weitere Informationen" color = "lila" target = "newwindow"]

Hier kommt Shortcake ins Spiel, da Sie Ihre Shortcodes besser verwalten können.

shortcake-Bäckerei-Plugin

erste Schritte

Dieses Tutorial richtet sich an Benutzer, die mit der Entwicklung von WordPress noch nicht vertraut sind. Benutzer, die ihre Designs anpassen möchten, werden dieses Tutorial ebenfalls interessant finden.

Zunächst müssen Sie die Erweiterung installieren und aktivieren Shortcace (Short IU).

Sie sollten jetzt einen Shortcode haben, der einige Parameter akzeptiert. In diesem Tutorial erstellen wir einen einfachen Shortcode, mit dem Benutzer Schaltflächen in ihre WordPress-Beiträge und -Seiten einfügen können. Dies ist ein einfaches Beispiel für unseren Shortcode, und Sie können diesen Code hinzufügen in Ihrem Plugin oder in der functions.php-Datei Ihres Child-Themes.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

add_shortcode ('cta-button', 'cta_button_shortcode'); Funktion cta_button_shortcode ($ atts) {extract (shortcode_atts (Array ('title' => 'Title', 'url' => ''), $ atts)); return ' '. $ title. ' '; }}

Sie benötigen wahrscheinlich auch einen CSS-Code für die Schaltfläche.

.cta-Taste {padding: 10px; font-size: 18px; Rand: solid 1px #FFF; Grenzradius: 7px; Farbe: #FFF; background-color: #50A7EC; }

Auf diese Weise wird die betreffende Schaltfläche angezeigt. Der Benutzer muss den folgenden Shortcode eingeben:

[cta-button title = ”Jetzt herunterladen” url = ”http://example.com”]

Jetzt haben Sie einen Shortcode, der die Parameter akzeptiert, wir werden jetzt eine Schnittstelle dafür erstellen.

Wie eine Schnittstelle zu einem Shortcode mit ShortCacke registrieren

Mit der Shortcake-API können Sie Shortcodes in der Benutzeroberfläche speichern. Sie müssen beschreiben, welche Attribute der Shortcode akzeptiert, welche Art von Feldern und welches Post-Format die Benutzeroberfläche anzeigt.

Hier ist ein Beispiel für einen Code, mit dem Sie einen Shortcode in der Shortcake-Benutzeroberfläche registrieren können.

shortcode_ui_register_for_shortcode (/ ** Ihr Shortcode * / 'cta-button', / ** Die Bezeichnung Ihres Shortcodes und sein Symbol * / array (/ ** Die Bezeichnung ist erforderlich. * / 'label' => 'Add Button', / ** Icone. Src oder dashicons- $ icon. * / 'ListItemImage' => 'dashicons-lightbulb', / ** Shortcode-Attribute * / 'attrs' => array (/ ** * Alle Felder, die Werte akzeptieren Benutzer haben ihr eigenes Array wie folgt definiert. * Dieser Shortcode akzeptiert zwei Parameter, die URL und den Titel. * Wir definieren die Benutzeroberfläche für den Titel. * / array (/ ** Diese Bezeichnung wird auf der Benutzeroberfläche angezeigt * / 'label' => 'Title', / ** Dies ist das Attribut, das für den Shortcode verwendet wird. * / 'attr' => 'title', / ** Definiere den Typ des Feldes, wird unterstützt: Text , Kontrollkästchen, Textbereich, Radio, Auswahl, E-Mail, URL, Nummer und Datum. * / 'Typ' => 'Text', / ** Beschreibung hinzufügen 'Beschreibung' => 'Beschreibung',), / ** Wir Definieren wir nun eine Benutzeroberfläche für das Linkfeld * / array ('label' => 'URL', 'attr' => 'url', 'type' = > 'text', 'description' => 'Full URL',),),), / ** Das Post-Format, in dem die Benutzeroberfläche angezeigt werden soll * / 'post_type' => array ('post', 'page' ),));

Das ist alles, was Sie tun müssen, um den Shortcode auf der Benutzeroberfläche anzuzeigen. Sie können nun mit der Bearbeitung eines Artikels beginnen, um den Shortcode verwenden zu können. Alles, was Sie tun müssen, ist auf die Schaltfläche Medien hinzufügen zu klicken. Sie sehen einen neuen Abschnitt mit dem Titel „Element einfügen Beitrag“. Wenn Sie darauf klicken, können Sie die verschiedenen Shortcodes sehen, die Sie erstellt haben.

insertpostelement

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

Wenn Sie auf das Symbol klicken, wird die Benutzeroberfläche angezeigt, mit der Sie den Shortcode anpassen können.

shortcodeui

Wie ein Shortcode mit mehreren Feldern hinzufügen

Im ersten Beispiel haben wir einen ziemlich einfachen Shortcode verwendet. Jetzt werden wir die Dinge etwas komplizierter und nützlicher machen. Wir werden einen Shortcode hinzufügen, mit dem Benutzer die Farbe der Schaltfläche auswählen können.

Wir werden zuerst den Shortcode hinzufügen. Es ist im Wesentlichen der gleiche Code wie oben, die einzige Ausnahme ist, dass wir ein Feld für die Farbe hinzufügen.

add_shortcode ('mybutton', 'my_button_shortcode'); Funktion my_button_shortcode ($ atts) {extract (shortcode_atts (Array ('Farbe' => 'blau', 'Titel' => 'Titel', 'url' => ''), $ atts)); return ' '. $ title. ' '; }}

Da unser Shortcode Schaltflächen in verschiedenen Farben anzeigt, müssen wir auch unseren CSS-Code aktualisieren.

.mybutton {padding: 10px; font-size: 18px; Rand: solid 1px #FFF; Grenzradius: 7px; Farbe: #FFF; } .blue-Taste {background-color: #50A7EC; } .orange-Taste {background-color: #FF7B00; } .green-Taste {background-color: #29B577; }

So sieht dieser Button aus.

bunt-Tasten-Short

Nachdem unser Shortcode fertig ist, besteht der nächste Schritt darin, ihn bei Shortcake zu registrieren. Wir werden den gleichen Code verwenden. Der Unterschied besteht darin, dass wir einen zusätzlichen Parameter zur Anzeige eines Farbfelds bereitstellen.

shortcode_ui_register_for_shortcode (/ ** Ihr Shortcode-Handle * / 'mybutton', / ** Ihr Shortcode-Label und -Symbol * / array (/ ** Label für Ihre Shortcode-Benutzeroberfläche. Dieser Teil ist erforderlich. * / 'label' => 'Add eine bunte Schaltfläche ', / ** Symbol oder ein Bildanhang für Shortcode. Optional. src oder Dashicons- $ icon. * /' listItemImage '=>' dashicons-flag ', / ** Shortcode-Attribute * /' attrs '=> Array (/ ** * Für jedes Attribut, das Benutzereingaben akzeptiert, wird ein eigenes Array wie folgt definiert. * Unser Shortcode akzeptiert zwei Parameter oder Attribute, Titel und URL. * Definieren wir zunächst die Benutzeroberfläche für das Titelfeld. * / array (/ ** Dies label wird in der Benutzeroberfläche angezeigt * / 'label' => 'Title', / ** Dies ist der tatsächliche attr, der in dem für den Shortcode verwendeten Code verwendet wird * / 'attr' => 'title', / ** Eingabetyp definieren. Unterstützte Typen sind Text, Kontrollkästchen, Textbereich, Radio, Auswahl, E-Mail, URL, Nummer und Datum. * / 'Typ' => 'Text', / ** Eine hilfreiche Beschreibung für Benutzer hinzufügen * / 'Beschreibung' => ' Bitte geben Sie den Schaltflächentext ',), / ** Jetzt wir definiert die Benutzeroberfläche für das URL-Feld * / array ('label' => 'URL', 'attr' => 'url', 'type' => 'text', 'description' => 'Full URL',), / ** Schließlich definieren wir die Benutzeroberfläche für die Farbauswahl * / array ('label' => 'Color', 'attr' => 'color', / ** Wir verwenden ein Auswahlfeld anstelle von Text * / 'type' => 'select', 'options' => array ('blue' => 'Blue', 'orange' => 'Orange', 'green' => 'Green',),),), / ** You kann auswählen, welche Beitragstypen den UI-Shortcode anzeigen * / 'post_type' => array ('post', 'page'),));

Das ist alles ! Wenn Sie jetzt einen Beitrag bearbeiten oder schreiben, sehen Sie den neuen Shortcode, der sich immer noch im selben Abschnitt des Medienfensters befindet.

postelements

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

Durch Klicken auf den neuen Shortcode wird die Shortcode-Anpassungsoberfläche angezeigt und Sie können die Werte angeben.

colorui

Das war's für dieses Tutorial. Ich hoffe, es hilft Ihnen dabei, eine bessere Oberfläche für Ihre Shortcodes in WordPress zu erstellen. Frohes Neues Jahr euch!

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
7 Aktien
Aktie7
tweet
Registrieren