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 über Shortcodes zu Artikeln und Seiten hinzufügen können. Viele Themen et Wordpress-Plugins Ermöglichen Sie es Benutzern, Funktionen in ihren Blogs mithilfe von Shortcodes hinzuzufügen. Diese Shortcodes können jedoch sehr unhandlich werden, was die Anpassung erschwert.

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 button = "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 neu in der WordPress-Entwicklung sind. Benutzer, die ihre personalisieren möchten Themen wird dieses Tutorial auch 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.

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 API von Shortcake können Sie Shortcodes in der Benutzeroberfläche registrieren. Du musstschreiben welche Attribute der Shortcode akzeptiert, die Art der Felder und welches Postformat die UI (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 jetzt mit der Bearbeitung eines Artikels beginnen, um den Shortcode verwenden zu können. Sie müssen lediglich auf die Schaltfläche Medien hinzufügen klicken. Sie sehen einen neuen Abschnitt mit dem Titel " Element einfügen Beitrag". Wenn Sie darauf klicken, werden die verschiedenen von Ihnen erstellten Shortcodes angezeigt.

insertpostelement

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

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!