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[/vorsicht]

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.

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:

[stay id=“2124″]

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“.