So fügen Sie eine Shortcode-Benutzeroberfläche in WordPress mit Shortcake hinzu

Wenn Sie eine WordPress-Website für einen Kunden entwickeln, ist es wahrscheinlich, dass Sie Shortcodes für Ihre Kunden haben. Das Problem ist, dass viele Anfänger nicht wissen, wie man Shortcodes hinzufügt, und wenn komplexe Parameter beteiligt sind, ist es noch schwieriger. Shortcake bietet eine Lösung, indem es eine Benutzeroberfläche für Shortcodes hinzufügt. In diesem Artikel zeigen wir Ihnen, wie Sie mit Shortcake eine Benutzeroberfläche für Shortcodes in WordPress hinzufügen.

Was ist Shortcake?

WordPress bietet eine einfachere Möglichkeit, ausführbaren Code innerhalb von Beiträgen und Seiten mithilfe von Shortcodes hinzuzufügen. Viele WordPress-Themes und Plugins ermöglichen es Benutzern, zusätzliche Funktionalität mithilfe von Shortcodes hinzuzufügen. Manchmal können diese Shortcodes jedoch kompliziert werden, wenn ein Benutzer Parameter zur Anpassung eingeben muss.

Zum Beispiel, in einem typischen WordPress-Theme, wenn es einen Shortcode zum Einfügen einer Schaltfläche gibt, muss der Benutzer wahrscheinlich mindestens zwei bis fünf Parameter hinzufügen. So:

[themebutton url="http://example.com" title="Jetzt herunterladen" color="purple" target="newwindow"]

Shortcake ist ein WordPress-Plugin und eine geplante zukünftige WordPress-Funktion. Es zielt darauf ab, dieses Problem zu lösen, indem es eine Benutzeroberfläche zum Eingeben dieser Werte bereitstellt. Dies wird die Verwendung von Shortcodes erheblich erleichtern.

Erste Schritte

Dieses Tutorial richtet sich an Benutzer, die neu in der WordPress-Entwicklung sind. Anfänger, die ihre WordPress-Themes gerne anpassen, werden dieses Tutorial ebenfalls hilfreich finden.

Nichtsdestotrotz, legen wir los.

Als Erstes müssen Sie das Plugin Shortcake (Shortcode UI) installieren und aktivieren.

Sie benötigen nun einen Shortcode, der einige Parameter für Benutzereingaben akzeptiert. Wenn Sie eine kleine Auffrischung benötigen, hier ist wie man einen Shortcode in WordPress hinzufügt.

Für dieses Tutorial verwenden wir einen einfachen Shortcode, der es Benutzern ermöglicht, eine Schaltfläche in ihre WordPress-Beiträge oder -Seiten einzufügen. Hier ist der Beispielcode für unseren Shortcode, und Sie können diesen verwenden, indem Sie ihn zu der functions-Datei Ihres Themes oder zu einem standortspezifischen Plugin hinzufügen.

add_shortcode( 'cta-button', 'cta_button_shortcode' );

function cta_button_shortcode( $atts ) {
       extract( shortcode_atts(
               array(
                       'title' => 'Title',
                       'url' => ''
               ),
               $atts
       ));
       return '<span class="cta-button"><a href="' . $url . '">' . $title . '</a></span>';
}

Sie müssen auch etwas CSS hinzufügen, um Ihren Button zu gestalten. Sie können dieses CSS in der Stylesheet Ihres Themes verwenden.

.cta-button {
padding: 10px;
font-size: 18px;
border: 1px solid #FFF;
border-radius: 7px;
color: #FFF;
background-color: #50A7EC;
}

So wird ein Benutzer den Shortcode in seinen Beiträgen und Seiten verwenden:

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

Jetzt, da wir einen Shortcode haben, der Parameter akzeptiert, erstellen wir eine Benutzeroberfläche dafür.

Registrierung Ihrer Shortcode-Benutzeroberfläche mit Shortcake

Die Shortcake API ermöglicht es Ihnen, die Benutzeroberfläche Ihres Shortcodes zu registrieren. Sie müssen beschreiben, welche Attribute Ihr Shortcode akzeptiert, welche Eingabefeldtypen es gibt und für welche Post-Typen die Shortcode-Benutzeroberfläche angezeigt werden soll.

Hier ist ein Beispiel-Code-Snippet, das wir verwenden werden, um die Benutzeroberfläche unseres Shortcodes zu registrieren. Wir haben versucht, jeden Schritt mit Inline-Kommentaren zu erklären. Sie können dies in die functions-Datei Ihres Themes oder in ein standortspezifisches Plugin einfügen.

shortcode_ui_register_for_shortcode(

/** Your shortcode handle */
'cta-button',

/** Your Shortcode label and icon */
array(

/** Label for your shortcode user interface. This part is required. */
'label' => 'Add Button',

/** Icon or an image attachment for shortcode. Optional. src or dashicons-$icon.  */
'listItemImage' => 'dashicons-lightbulb',

/** Shortcode Attributes */
'attrs'          => array(

/**
* Each attribute that accepts user input will have its own array defined like this
* Our shortcode accepts two parameters or attributes, title and URL
* Lets first define the UI for title field. 
*/

array(

/** This label will appear in user interface */
'label'        => 'Title',

/** This is the actual attr used in the code used for shortcode */
'attr'         => 'title',

/** Define input type. Supported types are text, checkbox, textarea, radio, select, email, url, number, and date. */
'type'         => 'text',

/** Add a helpful description for users
'description'  => 'Please enter the button text',
),

/** Now we will define UI for the URL field */

array(
'label'        => 'URL',
'attr'         => 'url',
'type'         => 'text',
'description'  => 'Full URL',
),
),
),

/** You can select which post types will show shortcode UI */
'post_type'     => array( 'post', 'page' ), 
)
);

Das ist alles, Sie können nun die Shortcode-Benutzeroberfläche in Aktion sehen, indem Sie einen Beitrag bearbeiten. Klicken Sie einfach auf die Schaltfläche Medien hinzufügen oberhalb eines Beitragseditors. Dies öffnet den Medien-Uploader, wo Sie einen neuen Eintrag 'Beitragselement einfügen' in der linken Spalte bemerken werden. Ein Klick darauf zeigt Ihnen eine Schaltfläche zum Einfügen Ihres Codes.

Wenn Sie auf die Miniaturansicht mit dem Glühbirnen-Symbol und Ihrer Shortcake-Beschriftung klicken, wird die Shortcode-Benutzeroberfläche angezeigt.

Shortcode mit mehreren Eingaben hinzufügen

Im ersten Beispiel haben wir einen sehr einfachen Shortcode verwendet. Machen wir ihn nun etwas komplizierter und viel nützlicher. Fügen wir einen Shortcode hinzu, der es Benutzern ermöglicht, eine Schaltflächenfarbe auszuwählen.

Zuerst fügen wir den Shortcode hinzu. Es ist fast derselbe Shortcode, außer dass er jetzt Benutzereingaben für die Farbe akzeptiert.

add_shortcode( 'mybutton', 'my_button_shortcode' );

function my_button_shortcode( $atts ) {
       extract( shortcode_atts(
               array(
                       'color' => 'blue',
                       'title' => 'Title',
                       'url' => ''
               ),
               $atts
       ));
       return '<span class="mybutton ' . $color . '-button"><a href="' . $url . '">' . $title . '</a></span>';
}

Da unser Shortcode Schaltflächen in verschiedenen Farben anzeigen wird, müssen wir auch unser CSS aktualisieren. Sie können dieses CSS in der Stylesheet-Datei Ihres Themes verwenden.

.mybutton {
    padding: 10px;
    font-size: 18px;
    border: 1px solid #FFF;
    border-radius: 7px;
    color: #FFF;
}

.blue-button  {
    background-color: #50A7EC;
}
.orange-button { 
background-color:#FF7B00;
} 

.green-button { 
background-color:#29B577;
}

So werden die Schaltflächen aussehen:

Jetzt, da unser Shortcode fertig ist, ist der nächste Schritt die Registrierung der Shortcode-Benutzeroberfläche. Wir werden im Wesentlichen denselben Code verwenden, mit der Ausnahme, dass wir diesmal einen weiteren Parameter für die Farbe haben und den Benutzern anbieten, aus blauen, orangen oder grünen Schaltflächen auszuwählen.

shortcode_ui_register_for_shortcode(

/** Your shortcode handle */
'mybutton',

/** Your Shortcode label and icon */
array(

/** Label for your shortcode user interface. This part is required. */
'label' => 'Add a colorful button',

/** Icon or an image attachment for shortcode. Optional. src or dashicons-$icon.  */
'listItemImage' => 'dashicons-flag',

/** Shortcode Attributes */
'attrs'          => array(

/**
* Each attribute that accepts user input will have its own array defined like this
* Our shortcode accepts two parameters or attributes, title and URL
* Lets first define the UI for title field. 
*/

array(

/** This label will appear in user interface */
'label'        => 'Title',

/** This is the actual attr used in the code used for shortcode */
'attr'         => 'title',

/** Define input type. Supported types are text, checkbox, textarea, radio, select, email, url, number, and date. */
'type'         => 'text',

/** Add a helpful description for users */
'description'  => 'Please enter the button text',
),

/** Now we will define UI for the URL field */

array(
'label'        => 'URL',
'attr'         => 'url',
'type'         => 'text',
'description'  => 'Full URL',
),

/** Finally we will define the UI for Color Selection */ 
array(
'label'		=> 'Color',
'attr'      => 'color',

/** We will use select field instead of text */
'type'		=> 'select',
    'options' => array(
        'blue'		=> 'Blue',
        'orange'	=> 'Orange',
        'green'		=> 'Green',
    ),
),

),

/** You can select which post types will show shortcode UI */
'post_type'     => array( 'post', 'page' ), 
)
);

Das ist alles, Sie können nun einen Beitrag oder eine Seite bearbeiten und auf die Schaltfläche Medien hinzufügen klicken. Sie werden Ihren neu hinzugefügten Shortcode unter 'Beitragselemente einfügen' bemerken.

Wenn Sie auf Ihren neu erstellten Shortcode klicken, wird die Shortcode-Benutzeroberfläche angezeigt, in der Sie einfach die Werte eingeben können.

Sie können den in diesem Tutorial verwendeten Code als Plugin herunterladen.

wpb-shortcake-tutorial

Wir haben das CSS beigefügt, damit Sie es studieren oder verwenden können, um Ihre eigenen Call-to-Action-Buttons in WordPress mit einer einfacheren Benutzeroberfläche hinzuzufügen. Fühlen Sie sich frei, die Quelle zu ändern und damit zu experimentieren.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie mit Shortcake eine Benutzeroberfläche für Shortcodes in WordPress hinzufügen. Möglicherweise möchten Sie sich auch diese 7 wesentlichen Tipps zur Verwendung von Shortcodes in WordPress ansehen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.