WordPress Shortcodes richtig nutzen

Startseite » Artikel » WordPress Shortcodes richtig nutzen

Shortcodes in WordPress: Ein wichtiger Aspekt der Arbeit mit WordPress ist das Erstellen von benutzerdefinierten Funktionen, die den Funktionsumfang der Website erweitern und das Design verbessern. Eine solche Funktion sind Shortcodes, mit denen Entwickler benutzerdefinierten HTML-Code erstellen und in Beiträgen oder Seiten verwenden können. Shortcodes können nützlich sein, um wiederkehrende Aufgaben wie das Einbetten von Videos oder das Hinzufügen von Formularen zu automatisieren, oder um die Struktur der Website zu verbessern, indem sie das Design auf konsistente Weise verbessern.

In diesem Artikel erfahren Sie, wie Sie benutzerdefinierte Shortcodes in WordPress erstellen und verwenden können. Wir werden uns auf die Grundlagen konzentrieren und Ihnen eine Schritt-für-Schritt-Anleitung geben, damit Sie loslegen können. Wir werden auch einige fortgeschrittene Themen ansprechen, um Ihnen zu zeigen, wie Sie Shortcodes in Widgets, benutzerdefinierten Post-Typen und Seitenvorlagen verwenden können.

Übersicht über die Shortcodes

1. Einführung in Shortcodes in WordPress

Shortcodes sind eine leistungsfähige Funktion in WordPress, die es Entwicklern ermöglicht, benutzerdefinierten HTML-Code zu erstellen und in Beiträgen oder Seiten zu verwenden. Ein Shortcode ist im Grunde ein Platzhalter-Text, der in den Inhalt eines Beitrags oder einer Seite eingefügt wird und durch den tatsächlichen HTML-Code ersetzt wird, wenn die Seite oder der Beitrag aufgerufen wird. Auf diese Weise können Sie komplexe Funktionen und benutzerdefinierte Inhalte in WordPress integrieren, ohne dass Sie sich mit dem Schreiben von PHP-Code befassen müssen.

Beispielnutzung:

Ein Beispiel für einen Shortcode ist der -Shortcode in WordPress. Wenn Sie diesen Shortcode in den Inhalt eines Beitrags oder einer Seite einfügen, wird er durch den tatsächlichen HTML-Code für die Galerie ersetzt. Sie können auch benutzerdefinierte Shortcodes erstellen, um Ihren eigenen HTML-Code zu verwenden und die Funktionalität Ihrer Website zu erweitern. In den nächsten Abschnitten erfahren Sie, wie Sie benutzerdefinierte Shortcodes in WordPress erstellen können.

2. Erstellung eines benutzerdefinierten Shortcodes

Um einen benutzerdefinierten Shortcode in WordPress zu erstellen, müssen Sie zuerst eine Funktion erstellen, die den HTML-Code oder die Funktionalität enthält, die Sie einfügen möchten. Diese Funktion wird dann in eine kurze Zeichenfolge eingefügt, die als der Shortcode selbst dient.

Erster Schritt:

Der erste Schritt besteht darin, eine Funktion zu erstellen, die den Code enthält, den Sie in Ihrem Shortcode verwenden möchten. Hier ist ein Beispiel für eine einfache Funktion, die den Text “Hello, World!” zurückgibt:

function my_shortcode_function() {
   return "Hello, World!";
}

Als nächstes müssen Sie diese Funktion in einen Shortcode einfügen. Um einen Shortcode in WordPress zu erstellen, müssen Sie eine Funktion mit dem Namen “add_shortcode” verwenden.

Ein Beispiel für die Verwendung von “add_shortcode“, um den obigen Code in einen benutzerdefinierten Shortcode namens [my_shortcode] zu konvertieren:

function my_shortcode_function() {
// function
   return "Hello, World!";
}
add_shortcode('my_shortcode', 'my_shortcode_function');

Jetzt können Sie den Shortcode [my_shortcode] in den Inhalt Ihrer Beiträge oder Seiten einfügen. Wenn Sie die Seite oder den Beitrag aufrufen, wird der Shortcode durch den Text “Hello, World!” ersetzt.

xxxx

Nachdem Sie einen benutzerdefinierten Shortcode erstellt haben, können Sie ihn in den Inhalt Ihrer Beiträge oder Seiten einfügen. Hier sind einige Beispiele dafür, wie Sie benutzerdefinierte Shortcodes in WordPress verwenden könne

3. Verwendung von benutzerdefinierten Shortcodes in WordPress

Einfügen von statischem Text:

Wenn Sie nur statischen Text in einem Shortcode verwenden möchten, können Sie ihn einfach als Platzhalter verwenden. Hier ist ein Beispiel:

[my_shortcode]

Dieser Shortcode wird den Inhalt Ihrer “my_shortcode_function” Funktion einfügen, den Sie zuvor definiert haben.

Übergeben von Attributen:

Sie können Ihrem Shortcode auch Attribute übergeben, um bestimmte Parameter an Ihre Funktion zu übergeben. Hier ist ein Beispiel:

[my_shortcode name="Martin" age="30"]

In diesem Beispiel wird der Name “Martin” und das Alter “30” an Ihre “my_shortcode_function” Funktion übergeben. Sie können diese Werte dann innerhalb Ihrer Funktion verwenden, um dynamischen Inhalt zu generieren.

Einbetten von HTML-Code:

Sie können auch HTML-Code in Ihrem Shortcode verwenden, um komplexere Funktionen oder Layouts zu erstellen. Hier ist ein Beispiel:

function my_complex_shortcode_function($atts) {
   $output = "<div class='my-custom-class'>";
   $output .= "<h2>" . $atts['title'] . "</h2>";
   $output .= "<p>" . $atts['description'] . "</p>";
   $output .= "</div>";
   return $output;
}
add_shortcode('my_complex_shortcode', 'my_complex_shortcode_function');

In diesem Beispiel wird der Shortcode [my_complex_shortcode] erstellt, der einen Titel und eine Beschreibung als Attribute erwartet. Die Funktion fügt dann einen HTML-Code hinzu, der eine Box mit dem Titel und der Beschreibung erstellt.

Benutzerdefinierte Shortcodes in WordPress sind ein leistungsfähiges Tool, mit dem sich komplexe Funktionen und Layouts erstellen lassen.

4. Fortgeschrittene Verwendung von Shortcodes

Wenn Sie bereits Erfahrung mit der Verwendung von Shortcodes in WordPress haben, gibt es noch einige fortgeschrittenere Techniken, die Sie nutzen können, um benutzerdefinierte Funktionalität zu erstellen.

  1. Attribute hinzufügen: Shortcodes können Attribute haben, die von Benutzern verwendet werden können, um bestimmte Optionen anzupassen. Sie können diese Attribute in Ihrem Shortcode-Code definieren und dann in Ihrer Funktion abrufen, um spezifische Aktionen auszuführen.

Zum Beispiel können Sie einen Shortcode für die Anzeige von Produkten auf Ihrer Website erstellen und Attribute wie “Anzahl”, “Kategorie” oder “Preis” hinzufügen, um die angezeigten Produkte zu filtern.

  1. Bedingte Anzeige: Sie können auch bedingte Anweisungen in Ihre Shortcodes integrieren, um bestimmte Teile des Codes nur unter bestimmten Bedingungen anzuzeigen. Zum Beispiel können Sie einen Shortcode erstellen, der nur angezeigt wird, wenn ein bestimmter Benutzer angemeldet ist oder wenn ein bestimmter Parameter in der URL vorhanden ist.
  2. Verwendung von Shortcodes in Widgets: Standardmäßig können Shortcodes nur in Beiträgen und Seiten verwendet werden. Mit einigen zusätzlichen Funktionen können Sie jedoch auch Shortcodes in Widgets verwenden, um benutzerdefinierte Funktionalität in Ihren Sidebar- und Fußzeilenbereichen hinzuzufügen.
  3. Verwendung von Shortcodes in Vorlagen: Ähnlich wie bei Widgets können Sie auch Shortcodes in Vorlagen verwenden, um benutzerdefinierte Funktionalität in bestimmten Bereichen Ihrer Website hinzuzufügen, z. B. in der Header- oder Footer-Sektion.
  4. Verwendung von Shortcodes in anderen Plugins: Sie können auch Shortcodes in anderen Plugins verwenden, um deren Funktionalität zu erweitern. Wenn Sie beispielsweise ein E-Commerce-Plugin verwenden, können Sie einen Shortcode erstellen, um die Produkte dieses Plugins auf einer bestimmten Seite anzuzeigen.

Beispiel Fortgeschrittene Verwendung von Shortcodes:

Dieser Shortcode zeigt Produkte aus einem bestimmten Produktkategorie-Taxonomiebegriff an und bietet dem Benutzer die Möglichkeit, das Ergebnis mit den Attributen “category”, “limit” und “order” zu filtern. Der Shortcode kann dann in einer Seite oder einem Beitrag wie folgt verwendet werden:

function products_shortcode($atts) {
    // Set default attributes and parse user-submitted ones
    $atts = shortcode_atts(array(
        'category' => 'all',
        'limit' => 10,
        'order' => 'DESC'
    ), $atts);
    
    // Query products based on attributes
    $args = array(
        'post_type' => 'product',
        'posts_per_page' => $atts['limit'],
        'order' => $atts['order']
    );
    
    if ($atts['category'] !== 'all') {
        $args['tax_query'] = array(
            array(
                'taxonomy' => 'product_cat',
                'field' => 'slug',
                'terms' => $atts['category']
            )
        );
    }
    
    $products_query = new WP_Query($args);
    
    // Build output for shortcode
    $output = '<ul class="products">';
    
    while ($products_query->have_posts()) {
        $products_query->the_post();
        $output .= '<li>' . get_the_title() . '</li>';
    }
    
    $output .= '</ul>';
    
    wp_reset_postdata();
    
    return $output;
}
add_shortcode('products', 'products_shortcode');

Wenn Sie 5 Produkte aus der Kategorie “clothing” in aufsteigender Reihenfolge nach Titel anzeigenmöchten, nutzen Sie folgendes:

[products category="clothing" limit="5" order="ASC"]

Fazit

Wir haben in diesem Artikel die Grundlagen der Verwendung von benutzerdefinierten Shortcodes in WordPress behandelt. Shortcodes können eine leistungsstarke Möglichkeit sein, benutzerdefinierten HTML-Code in Ihre WordPress-Website zu integrieren und die Funktionalität Ihrer Website zu erweitern. Wir haben auch fortgeschrittene Möglichkeiten der Verwendung von Shortcodes diskutiert.

Wenn Sie bereits Erfahrung mit der Verwendung von Shortcodes haben oder neu in diesem Bereich sind, hoffen wir, dass Ihnen dieser Artikel dabei geholfen hat, das Potenzial von Shortcodes in WordPress zu verstehen und wie Sie sie in Ihrer eigenen Website verwenden können.

Haben Sie noch Fragen oder Anregungen zum Thema? Ich freue mich über Ihre Kommentare!

Autor: Volkan Sah