WordPress Shortcode ohne Plugin

Lange Zeit habe ich für meine Blogbeiträge auf meiner anderen Website bdfg-chemnitz.de das WordPress Plugin Shortcode ultimate benutzt.

Prinzipiell gibt es dagegen auch nichts einzuwenden, allerdings war es mit für meine Zwecke etwas überdimensioniert. Ich wollte lediglich drei Dinge damit realisieren:

• Inhaltsverzeichnis
• Amazon Affiliate Werbehinweis
• Attention/ Hinweisbox zum Hervorheben wichtiger Texte

Ich dachte mir, so schwer kann das doch nicht sein und tatsächlich, so schwer war es auch nicht.

Ich möchte euch hier zeigen, wie ihr ein WordPress Shortcode für das Inhaltsverzeichnis erstellt und diesen ohne ein Plugin auf eurer Seite integriert. Die Integration erfolgt über ein Child Theme.

Der WordPress Shortcode

In meiner Realschulzeit hat unser Physiklehrer versucht, uns einen anderen Ansatz zu dem allseits bekannten: gegeben, gesucht, Lösung Schema beizubringen.

Er fing an mit der Lösung. Aus diesem Grund gibt es hier erst einmal das fertige Inhaltsverzeichnis zum Staunen:

In WordPress gibt es zwei verschiedene Arten von Shortcodes, die wir verwenden können:

• Das eine sind Shortcodes die wir irgendwo in einen Text einfügen und diese dann ihr Werk verrichten. [shortcode]
• Das andere sind umschließende Shortcodes mit “Content dazwischen” [shortcode]Content[/shortcode]

Letzteres wollen wir für unser Inhaltsverzeichnis verwenden. WordPress selbst, bietet zum Erstellen von Shortcodes ein sehr einfaches Tool an. An sich ist das Tool ziemlich selbsterklärend.

• https://generatewp.com/shortcodes/

Eine ausführliche Videoanleitung dazu findest du hier:

Eine sehr schöne Seite für weiterführende Informationen zum Thema Shortcode Programmierung findest du hier. Mir hat die Seite beim Verständnis sehr geholfen.

Doch kommen wir nun Endlich zu unserem Inhaltsverzeichnis zurück.

Shortcode Inhaltsverzeichnis PHP Code

Ich setze an dieser Stelle voraus, dass du bereits ein Child Theme verwendest. Wenn nicht solltest du das unbedingt tun, denn es bietet dir eine Menge Vorteile.

Besitzt du ein Child Theme so enthält dieses in der Regel zumindest eine Style.css und eine Function.php Datei.

Als Erstes widmen wir uns dem Code für den Shortcode selbst. Dieser wird in der Function.php gespeichert. Unter den “Design” Einstellungen deines Themes sollte es den “Punkt Theme-Editor” geben. Dort kannst du die Style und Function Datei deines Themes bearbeiten.

An dieser Stelle solltest du unbedingt aufpassen, dass du im PHP Teil deines Codes keine Fehler machst, das kann sonst zu einem schweren Fehler auf deiner WordPress Seite führen.

In diesem Fall musst du die entsprechende Datei über den FTP Server deines Webhosters direkt bearbeiten.

<?php
/** Custom Shortcodes **/
/** Inhaltsverzeichnis **/
function custom_shortcode_inhaltsverzeichnis( $atts , $content = null ) {

	$ausgabe = '<div class="BeInhaltBody">';
	$ausgabe = $ausgabe.'<p class="BeInhaltHaedder"><strong>Inhaltsverzeichnis</strong></p>';
	$ausgabe = $ausgabe.$content;
	$ausgabe = $ausgabe.'</div>';
		
	return $ausgabe;
}
add_shortcode( 'BeInhalt', 'custom_shortcode_inhaltsverzeichnis' );

An sich ist der Code nicht schwer zu verstehen, alles was nach /** steht, sind erstmal Kommentare.

Der eigentliche Funktionsname spielt so weit keine Rolle, ihr solltet nur darauf achten, das ihr später noch nachvollziehen könnt, was euer Shortcode eigentlich anstellen soll.

Mit add_shortcode generiert ihr euren Shortcodehook. ‘BeInhalt’ ist in meinem Fall der Name des Shortcodes [‘BeInhalt’] um diesen Auf meinen Seiten aufzurufen. Das zweite Attribut ist einfach der Funktionsname.

Mittels der Variable $ausgabe generieren wir unseren Inhalt. Die Variable $content nimmt alle Inhalte auf, die zwischen den Shortcodetags stehen[sc] $content [/sc]. Return $ausgabe gibt uns den erzeugten Inhalt dann auf unsere Seite zurück.

Die Variable $ausgabe beinhaltet schlussendlich einen Textstring, der aus HTML Elementen besteht. In diesen Elementen erzeugen wir verschiedene Container mit Klassen Selektoren, die wir anschließend mit unserem CSS Code ansprechen können.

Schlussendlich sieht die erzeugte HTML Struktur etwa wie folgt aus:

<div class="BeInhaltBody">
   <p class="BeInhaltHeadder"><strong>Inhaltsverzeichnis</strong></p>
   <p> $content </p>
</div>

Ich setzte anschließend immer noch Anker in meine Überschriften sowie die einzelnen Anstriche im Inhaltsverzeichnis als darauf verweisende Links. Zum Beispiel wie hier in unserem Anfänger Badmintonschläger Beitrag.

Shortcode Inhaltsverzeichnis CSS Code

In das Stylesheet unseres Child Themes können wir nun folgenden Code einfügen und nach Belieben bearbeiten.

So einfache Anpassungen in CSS sind ja irgendwie selbsterklärend, deswegen möchte ich da gar nicht so viel dazu schreiben.

Für alle die noch nie etwas damit zu tun hatten noch ein paar kleine Hinweise:

• backround – Hintergrundfarbe
• color – Textfarbe
• border – Rahmen
• list-style – ersetzt das Listen Aufzählungszeichen
• margin – Abstand zum nächsten Element
• padding – innerer Abstand, siehe Boxmodell

/** Inhaltsverzeichnis ---------------------------------------- **/
.BeInhaltBody
{ 
	background: white;
	border: 1px solid #a8540a;
	border-radius: 2px;
	margin: 0px;
	padding: 0px;
	max-width: 350px; 
	min-width: 260px;
}
.BeInhaltBody ul{
	list-style: "» " !important;
}
.BeInhaltBody .BeInhaltHaedder 
{
	color: white;
	background: #ff6929;
	border-radius: 2px;
	padding: 0.5em 1.0em 0.5em 1.0em;
	margin-bottom: 0;
}