WordPress Shortcode erstellen - Top Related Post
WPC - Dein WordPress Blog

WordPress Shortcode erstellen – Top Related Post

Wenn du dich jetzt fragst, wozu braucht man eigentlich noch diesen Artikel? Es gibt doch eine viel einfachere Alternative Shortcodes zu erstellen, nämlich mit Plugins wie Shortcoder, Post Snippets oder Code Snippets. Dann würde ich sagen: Du hast absolut recht! Falls du eine gute Anleitung suchst, wie du eigene Shortcodes einfach mit dem Plugin Post Snippets erstellen kannst, musst du WPC nicht verlassen.

Dieser Artikel, den du gerade liest, dürfte für dich trotzdem interessant sein, wenn du zu der folgenden Zielgruppe gehörst. Zum einen zeigt er den Code-Freunden und WordPress Usern, die versuchen ihre Seite schlank zu halten und nicht wegen ein paar Zeilen Code gleich ein Plugin installieren wollen, den Standard Weg einen Shortcode zu erstellen. Gleichzeitig kannst du aber auch das Resultat dieses Beitrags auf deinem Blog anwenden und damit das Ranking deiner Website verbessern, indem du die Verweildauer der Besucher auf deiner Seite verlängerst und zur selben Zeit die Absprungrate verkürtzt.

Inhaltsangabe des Artikels:

  • In welche Datei gehört der Code für den Shortcode?
  • Einfachen Shortcode erstellen ohne Attribute
  • WordPress Shortcode erstellen mit Attributen (Top Related Post)
  • Wie finde ich in WordPress die ID einer Seite / eines Beitrags?

In welche Datei gehört der Code für den Shortcode?

Wenn man den Shortcode ohne Plugin erstellt, stellt sich zuerst die Frage, wo man den Code für den Shortcode einfügen sollte?

Folgende Optionen stehen zur Auswahl:

1. Direkt in der functions.php Datei deines Child Themes.

2. In einer separaten php-Datei (z. B. shortcodes.php), die dann in der functions.php Datei deines Child Themes aufgerufen wird. Um die Datei shortcodes.php in der functions.php Datei des Child Themes aufzurufen, trage einfach die folgende Zeile in die functions.php Datei ein.

Externe Datei in der functions.php Datei des Child Themes aufrufen:

require_once( get_stylesheet_directory() . 'shortcodes.php');

3. In einem eigenen Plugin (dazu bald mehr hier auf WPC)

Nachdem wir das „Wo“ geklärt haben, wenden wir uns dem „Wie“ zu.

Vorsicht!

Wenn du neue Shortcodes generierst, solltest du darauf achten nicht die bereits verwendeten Namen wie audio, video, embed, gallery, caption und playlist zu verwenden

Sehen wir uns nun den erforderlichen Quellcode für die verschiedenen Shortcode-Typen (mit und ohne Attribute) an. Um einen neuen Shortcode zu registrieren, verwendet man immer die gleiche Funktion:

add_shortcode('shortcodename', 'my_function' );

Die Funktion „my_function“ ist eine sogenannte Callback Funktion und definiert, was an der Stelle des Shortcodes in der Frontansicht der Seite angezeigt werden soll.

Einfachen Shortcode erstellen ohne Attribute

Beispiel: Gleichen Text mehrmals verwenden

Diesen Typ Shortcode verwendet man in der Regel immer dann, wenn der hinterlegte Code nicht angepasst werden soll. Oder wenn man das Website Element im Vorfeld bereits konfiguriert hat und am Ende den fertigen Shortcode erhält, so wie es bei den Kontaktformular-Plugins der Fall ist. Für das Beispiel eines einfachen Shortcodes nehme ich einen Satz, den ich an bestimmten Stellen auf meiner Website einfügen möchte:

Wenn dir dieser Beitrag gefällt und du über neue Beiträge informiert werden möchtest, kannst du gerne den WPC Newsletter abonnieren. Du erhältst auch als Dankeschön kostenlos das E-Book Online Business starten mit WordPress.

Um daraus einen einfachen Shortcode zu erstellen, ist der folgende Code erforderlich:

// Die Funktion, die den Shortcode [newsletter] ersetzen wird
function wpc_newsletter( $atts ){
  return '<em>Wenn dir dieser Beitrag gefällt und du über neue Beiträge informiert werden möchtest, kannst du gerne den WPC Newsletter abonnieren. Du erhältst auch als Dankeschön kostenlos <a href="https://wpconsultant.de/kostenloses-ebook-online-business-starten-mit-wordpress/" target="_blank" rel="noopener">das E-Book Online Business starten mit WordPress</a>.</em>';
}

// Registriert den neuen Shortcode [newsletter]
add_shortcode( 'newsletter', 'wpc_newsletter' );

Nun kann ich mit dem Shortcode [newsletter] den hinterlegten Textbaustein an jede beliebige Stelle auf meiner Website einsetzen.

So, lasst uns jetzt mal was Cooles erstellen!

WordPress Shortcode erstellen mit Attributen

Beispiel: Top Related Post

Da die Verweildauer auf einer Website ein Rankingfaktor bei Google ist, möchte ich nun die durchschnittliche Sitzungsdauer auf meinem Blog erhöhen. Eine Möglichkeit das zu tun, ist die Verwendung von Related Posts Plugins. Es gibt auch WordPress Themes, wie das Hueman Theme, welches ich für diesen Blog verwende, die die verwandten Blogbeiträge auch ohne ein weiteres Plugin unter jedem Artikel anzeigen.

Das Problem an solchen automatisch erstellen Related Posts ist, dass sie sich an Kategorien oder an Tags (Schlagwörtern) orientieren, um verwandte Artikeln anzuzeigen. Ich möchte jedoch bei jedem einzelnen Beitrag manuell entscheiden, welchen Artikel ich meinen Lesern zum Weiterlesen anbieten möchte. Damit kann ich noch gezielter themenverwandte Beiträge verknüpfen und den User hoffentlich zum Verweilen animieren.

Das ist ein perfekter Anwendungsfall für einen Shortcode! Wir werden einen neuen Top Related Post Shortcode generieren und nur durch die Eingabe eines Attributs, nämlich der Beitrags-ID, den dazugehörigen Artikel aus der Datenbank holen.

Der erforderliche Code für unseren Shortcode lautet:

// WPC Top Related Post Shortcode
function wpc_related_post( $atts, $content ) {
  extract( shortcode_atts(
    array (
      'id' => '',
  ), $atts ));
  global $post;
  $post = get_post($id);
  $post_thumbnail_id = get_post_thumbnail_id( $post );
  $thumb = wp_get_attachment_image_src( $post_thumbnail_id, 'medium', true );
  $title = $post->post_title;
  $btn_link = get_permalink($post->ID);
  $output = '<div class="wpc-post"><a href="' . $btn_link . '" title="' . $title . '"><img class="wpc-post-img" src="' . $thumb[0] . '"></a><h4>Artikel Empfehlung: ' . $title . '</h5><p><a href="' . $btn_link . '" class="wpc-post-btn">WEITERLESEN</a></p></div>';
  return $output;
}

//Registrierung des neuen Shortcodes
add_shortcode( 'stay', 'wpc_related_post' );

Den neuen Shortcode nenne ich „stay“ ganz nach dem Motto: Lieber Leser, bleib doch noch ein wenig. Um es möglichst simple zu halten, habe ich als Attribut nur die ID des Beitrags gewählt.

Wie finde ich in WordPress die ID von einem Beitrag oder einer Seite?

Die ID einer Seite oder eines Beitrags findest du, indem du auf der jeweiligen Übersichtsseite mit der Maus über den Beitrag / die Seite fährst. Unten links im Browserfenster findest du die dazugehörige ID.

Beitrags-ID in WordPress herausfinden - Die ID des Beispielbeitrags ist 200
Beitrags-ID in WordPress herausfinden – Die ID des Beispielbeitrags ist 200

Der neue Shortcode funktioniert bereits, allerdings sieht er noch nicht so ansprechend aus. Mit ein wenig CSS passe ich das Aussehen des Top verwandten Beitrags an mein Blog Design an:

/* WPC Top Related Post Shortcode */
.wpc-post {
  min-height: 150px;
  margin: 30px 0;
  padding: 20px 0;
  border-top: 2px solid #F0F0F0;
  border-bottom: 2px solid #F0F0F0;
}

.wpc-post-img {
  float: left;
  margin-right: 20px;
}

.wpc-post p {
  margin-top: 15px;
}

.wpc-post-btn {
  color:#fff;
  font-size: 0.9em;
  letter-spacing: 1px;
  font-weight: 500;
  background-color: #D75C37;
  padding: 5px 10px;
  border-radius: 3px;
  transition: background-color 0.5s linear;
}

.wpc-post-btn:hover,
.wpc-post-btn:hover {
  background-color: #6991AC;
  color: #fff;
}

Ich kann nun den Ausdruck stay id=“Beitrags-ID“ in eckige Klammern packen und an die gewünschte Stelle im WordPress Editor einsetzen. Wenn ich als id die Nummer 2184 einfüge, erhalte ich das folgende Ergebnis:

Artikel Empfehlung: WordPress Theme anpassen Teil 3: Eigene Shortcodes erstellen mit Plugin Post Snippets

ZUM ARTIKEL

Ausblick

Möchtest du wissen, wie eine mögliche WordPress Zukunft im Bezug auf die Shortcodes aussieht, dann empfehle ich dir den 3. Teil unserer Artikelserie „WordPress Theme anpassen wie ein Profi“.

Vielen Dank fürs Teilen dieser Seite

4 Kommentare zu „WordPress Shortcode erstellen – Top Related Post“

  1. B

    Danke für diesen Beitrag mir als Anfängerin was Shortcode betrifft hat er sehr gut weitergeholfen.
    Meine Frage nun… gibt es bereits einen Beitrag wo man eigene Plugins für Shortcodes erstellen kann?
    Freundliche Grüße

    Nicole

    1. D

      Hallo Nicole,
      vielen Dank für dein Feedback! Meinst du einen Beitrag, wie man ein Plugin erstellt und in dieses Plugin dann die Shortcodes einfügt, damit man sie unabhängig vom WordPress Theme verwenden kann? So einen Beitrag gibt es auf WPC noch nicht, aber vielleicht bald 🙂 Bis es soweit ist, vielleicht möchtest du mal einen Blick auf den WordPress Pluign Boilerplate Generator (https://wppb.me/) werfen. Evtl. ist es das was du suchst.
      Schöne Grüße, Danijel

  2. S

    Ganz toller Beitrag, danke dafür! Leider kopiert er aber auch die ganzen Kommentare der „related posts“ unter den Beitrag, in dem ich diese verlinke. Hat jemand dafür vielleicht eine lösung? So kann ich den Shortcode leider nicht verwenden 🙁 Ganz liebe Grüße

    1. D

      Hallo Silvia,
      vielen Dank für dein Feedback! Es ist echt seltsam, dass die Kommentare mit kopiert werden. Ich habe es hier auf dem Blog überprüft und die Kommentare werden bei mir nicht übernommen. Ich habe auf Anhieb leider keine Lösung parat. Die global post“-Variable hat soweit ich sehen kann auch nicht die Eigenschaft, mit der man die Kommentare explizit ausblenden kann. Man müsste da genauer auf Fehlersuche gehen. Kann es vielleicht sein, dass du einen Page Builder verwendest und dort den Shortcode einsetzt?
      Schöne Grüße, Danijel

Schreibe einen Kommentar zu Silvia Kommentieren abbrechen

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

Table of Contents

QUIZ: Teste dein WordPress Wissen!

0%

Wann erschien die erste Version von WordPress?

Correct! Wrong!

Die erste Version von WordPress erschien am 27.03.2003. Damit ist WordPress älter als Facebook und Twitter.

Welches der genannten Optionen ist kein WordPress Page-Builder?

Correct! Wrong!

Gravity Forms ist eins der beliebtesten Premium Formular Plugins.

In welcher Datei befinden sich die Sicherheitsschlüssel?

Correct! Wrong!

In der wp-config.php Datei.

Wie werden WordPress Themes wie Genesis und Beans noch genannt?

Correct! Wrong!

Ein Theme Framework ist ein vorprogrammiertes Set an Funktionen und Features, um die (Child) Theme Entwicklung zu beschleunigen.

Um den Adminbereich aufzurufen, muss die eigene Domain wie folgt erweitert werden:

Correct! Wrong!

Um beispielsweise von der Domain https://wpconsultant.de den Adminbereich aufzurufen, muss die Domain wie folgt ergänzt werden: https://wpconsultant.de/wp-admin. Möglich ist auch die URL-Endung https://deine-domain.de/wp-login.php

Welche Dateien braucht ein WordPress Theme mindestens, um zu funktionieren?

Correct! Wrong!

Damit ein WordPress Theme richtig funktioniert, benötigt es mindestens 2 Dateien: index.php und style.css. Die index.php Datei ist das Standard Template für das Theme und im Header der style.css Datei werden die notwendigen Informationen über das Theme eingetragen wie z. B. Name, Autor etc.

Was ist kein typischer Anwendungsfall für eine WordPress Multisite?

Correct! Wrong!

Um eine Landing Page zu erstellen, benötigt man nicht die Multisite Installation. Dafür reicht entweder ein wenig HTML und CSS oder eins der vielen Landing Page Plugins. Mein Tipp: Mit dem kostenlosen Plugin Elementor kannst du professionelle Landing Pages schnell erstellen. Hier erfährst du mehr über WordPress Multisite - Anwendung & Installation.

Welche Sprache spricht die WordPress Software nicht?

Correct! Wrong!

Die WordPress Software basiert auf den Sprachen PHP und MySQL. 10% der Software besteht mittlerweile aus Javascript (Tendenz steigend).

Was ist kein typischer Anwendungsfall für ein Child-Theme?

Correct! Wrong!

Eine Kopie der gesamten Website erstellt man z. B. mit dem Plugin Duplicator. Die verschiedenen Anwendungsfälle eines Child Themes und die richtige Erstellung erfährst du in dem Artikel WordPress Child Theme erstellen 2020.

Was ist ein WordPress Loop?

Correct! Wrong!

Eine Funktion, die Daten aus der Datenbank holt und sie verändert, bevor sie im Browser angezeigt werden, nennt man in WordPress einen Filter bzw. einen Filter-Hook. Eine Aktion, die an einer bestimmten Stelle im Programmablauf ausgeführt wird nennt man Action oder Action-Hook. Ein Loop ist ein PHP Code, der vordefinierte Beiträge (oder Custom Post Types) aus der Datenbank holt, um sie auf speziellen Template Dateien innerhalb eines Themes anzuzeigen.

In welchen Ordner (Verzeichnis) werden Medien wie z. B. Bilder hochgeladen?

Correct! Wrong!

In der Regel besteht der uploads-Ordner aus den einzelnen Jahres-Ordnern, die wiederum aus mehreren Monats-Ordnern bestehen.

Welches Feature ist keine Empfehlung für das WordPress Hosting (gemäß wordpress.org)?

Correct! Wrong!

Auf wordpress.org unter Requirements findest du die Empfehlung für das WordPress Hosting. Hier auf WPC findest du auch meine Hosting Empfehlung für 2020.

Welche Einstellungen gehören nicht in die wp-config.php Datei?

Correct! Wrong!

Die Integration von Javascript- und CSS-Dateien in das jeweilige Theme erfolgt in der functions.php Datei und zwar mittels wp_enqueue_scripts bzw. wp_enqueue_style.

Welche Rolle gehört nicht zu den 6 Standard User-Rollen?

Correct! Wrong!

Die 6 User Rollen in WordPress sind: Super Admin, Administrator, Editor, Author, Contributor und Subscriber.

Was kann man unter dem Menüpunkt "Einstellungen" im Adminbereich nicht tun?

Correct! Wrong!

Website Daten exportieren erfolgt unter dem Menüpunkt "Werkzeuge".

WordPress Quiz
Kein Grund zur Sorge!

Schau doch öfters mal hier auf WPC vorbei und melde dich am besten gleich für unseren Newsletter an! Du kannst auch den WPC YouTube Kanal abonnieren mit vielen kostenlosen WordPress und Elementor Tutorials. Und falls es ein bisschen mehr sein darf, gibt es da noch den WordPress Kurs von WPC ;-)
Gar nicht so schlecht!

Du weißt schon einiges über WordPress! Um dein Wissen noch weiter auszubauen, empfehle ich dir die Beiträge hier auf WPC, meinen YouTube Kanal mit vielen kostenlosen WordPress und Elementor Tutorials und natürlich meinen WordPress Kurs von WPC :-)
Wow! Das kann sich sehen lassen!

Herzlichen Glückwunsch! Du bist auf dem besten Weg, ein WordPress Experte zu werden. Bleib am Ball, am besten mit den Beiträgen hier auf WPC, meinem YouTube Kanal mit vielen kostenlosen WordPress und Elementor Tutorials und natürlich meinem WordPress Kurs von WPC :-)
Hast du dich gerade ein wenig gelangweilt? :-)

Aber keine Sorge, bald erscheint hier auf WPC ein Quiz für Fortgeschrittene WordPress User. Am besten du meldest dich gleich für den Newsletter an, damit du es nicht verpasst! ;-) In der Zwischenzeit kannst du ja mal dein Datenschutz-Wissen mit dem DSGVO Quiz testen.

KURS: WordPress schneller lernen!

Related Posts

Ähnliche Beiträge