Child Theme Aufbau 2 – Shortcodes

shortcode photo

Photo by Henry. from flickr

Nachdem Sie nun schon eine Child-Theme haben, zeige ich Ihnen einige Beispiele, wie sie diese auch sinnvoll nutzen können, und das ohne viel Programmieraufwand.

Sie werden sich einige Shortcodes selbst erzeugen.

Im vorhergehenden haben Sie gelernt, eigene Styles in der Child-Theme zu hinterlegen, nun kommen wir zum Part der Funktionen. Wie Sie sicher schon ahnen, werden Funktionen in der „functions.php“ hinterlegt. Diese gibt es bisher in Ihrer Child-Theme noch nicht, daher legen wir jetzt einfach eine an.

Wichtig zum Verständnis ist Folgendes:

PHP-Code wird in die Tags „<?php“ und „?>“ eingeschlossen. Alles was sich ausserhalb der Tags befindet ist html-code. Soll also aus einer php Funktion heraus html-Code erzeugt werden, so unterbricht man die Funktion mit „?>“ erzeugt den html Code und macht mit „<?php“ weiter. Ansonsten ist die ganze functions.php in diese Tags eingeschlossen.

Somit sieht das Grundgerüst der functions.php so aus:

<?php
/*
* Functions file
* For Mantra Child Theme mantra_us
*
*
* Uwe Sprenger
*/
------ Platz für php Funktionen
?>

Alles was zwischen „/*“ und „*/“ steht ist nur Kommentar und hat keine weitere Funktion, außer der Dokumentation dessen was ihr tut. Und nun kommen wir zur ersten praktischen Anwendung:

Beispiel 1 – Ein Bannercode

Um Banner in Sidebars einzufügen gibt es das „Text-Widget“, wenn ihr aber den Bedarf habt, Banner innerhalb eines Posts oder einer Seite einzufügen, kann auch ein Shortcode helfen.

Seht euch bitte folgenden Code an:

function hosting(){ return '<a href="http://xyz.com/bannercode" target="_blank"><img src="http://xyz.com/adtracking/banner.img" border="0" width="234" height="60" alt="" /></a>'; }

add_shortcode('bannercode','hosting'); 

Der grüne Code definiert die Funktion „hosting“, die nichts anderes tut, als html-code zurück zu geben (return).  In diesem Falle alles, was zwischen „<a“ und „/a>“ steht (genauer: was zwischen den einfachen Hochkomma steht). An diese Stelle könnt ihr den Bannercode eures Partners einfügen.

Der rote Code meldet den Shortcode bei WordPress an: Wann immer [bannercode] im Text erscheint, wird dann die Funktion „hosting“ aufgerufen, und schon wird an exakt der Stelle der HTML-Code eures Partners eingefügt. Die Namen der Funktion (hosting) und den Shortcode (bannercode) könnt ihr frei wählen.

<?php
/*
* Functions file
* For Mantra Child Theme mantra_us
*
* Uwe Sprenger
*/
function hosting(){ return '<a href="http://xyz.com/bannercode" target="_blank"><img src="http://xyz.com/adtracking/banner.img" border="0" width="234" height="60" alt="" /></a>'; }
add_shortcode('bannercode','Hosting'); 

?>

Erzeugt aus diesem Code eine Datei „functions.php“ und übertragt sie in den Ordner eurer Child-Theme. Schon könnt ihr den Shortcode nutzen.

Wenn man überhaupt die Notwendigkeit hat, Code in den Textteil von Posts einzufügen, kann man einiges erreichen, indem man den WordPress Editor von Visuell auf Text umschaltet. Allerdings wird man die Erfahrung machen, dass der Editor beim Speichern diesen Code möglicherweise verändert und unbrauchbar macht. Auch dafür hilft ein kleiner Shortcode:

Beispiel 2 – Shortcode zum Einfügen von Code

Dieses Beispiel stammt von Sebastian Viereck. Der zwischen „[mycode]“ und „[/mycode]“ eingefügte code wird unverändert in den htmlcode des Posts übernommen, ohne dass der WordPress Parser diesen modifiziert. Ihr müsst allerdings darauf achten, dass ihr solche Beiträge immer im „visuellen“ Mode editiert, andernfalls kann der Parser den eingefügten Code doch wieder zerstören.

function my_code_handler($atts, $content){
    return  html_entity_decode($content);
}

add_shortcode("mycode","my_code_handler");

Nur der Vollständigkeit halber: Diese Zeilen müssen vor dem abschliessenden „?>“ Tag in die functions.php eingefügt werden 🙂

Beispiel 3 – Copyright

Die Mantra Theme verankert sich fest im Footer-Menü meiner Seite. Das wollte ich so nicht haben, ich denke ich habe hier an genügend Stellen auf die sehr gute Mantra Theme aufmerksam gemacht. Es ist nun etwas aufwändig herauszufinden, wie die Theme die Einfügung in das Footer-Menü macht, aber wenn man das herausgefunden hat, ist es sehr einfach, das wieder rückgängig zu machen:

// Mantra Copyright entfernen

function unhook() {
 remove_action( 'cryout_footer_hook','mantra_site_info',12);
 }

add_action('init','unhook');

Das funktioniert wie folgt: Die Funktion „unhook“ wird in die Liste der INIT-Aktionen eingefügt.  Sie wird also bei jeder Abarbeitung der functions.php ausgeführt. Sie macht dann nichts anderes,  als die bereits beauftragte „Footer“ Action wieder aus der Liste zu entfernen.

Wie sie an diesen Beispielen sehen können, kann man durchaus auch Code-Schnipsel verwenden, die man selbst nicht ganz  durchschaut, auf die man aber bei der Recherche im Internet gestoßen ist.

Im nachfolgenden Post finden Sie ein ähnliches Beispiel, diesmal aber etwas aufwändiger:

Child Theme Step 3 – The LOOP

Bookmark the permalink.

About Uwe Sprenger

Uwe Sprenger ist ein IT Generalist, der in seiner Freizeit immer gerne neue Möglichkeiten ausprobiert. Und so ist hier dieses Blog zu Wordpress im entstehen. Beruflich bin ich (zur Zeit) intensiv im Lizenz Management unterwegs.  

2 Responses to Child Theme Aufbau 2 – Shortcodes

  1. Pingback: UweS Blog - Child Theme Aufbau 1 - Das Gerüst

  2. Pingback: UweS Blog - Navigation - Das Konzept

Schreibe einen Kommentar

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

5 + drei =