How to: WordPress Plugin

<?php

/*
Plugin Name:  NRML Plugin
Plugin URI:   https://www.nrml.de
Version: 5.3
Requires at least: 5.2
Requires PHP:  7.2
Description: An example for a shortcode plugin.
Author: Deniz
Author URI:    	https://author.example.com/
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Update URI:    	https://example.com/my-plugin/
Text Domain: nrml
Domain Path:  /languages
*/
 

Somit wird unser Plugin von WordPress erkannt und kann aktiviert werden. Jedoch kann unser Plugin noch nichts und ist ziemlich nutzlos.

Deswegen bringen wir jetzt mal die Shortcode ins Spiel.

Mit der Funktion „add_shortcode" fügen wir einen Shortcode ein. Die Funktion erhält zwei Parameter, der erste (im Beispiel: 'nrml-shortcode') ist der Shortcode-Name, mit dem es im WordPress Page Builder in eckigen Klammern eingesetzt werden kann. Der zweite Parameter (im Beispiel: 'nrmlShortcodeFunction') ist der Name der Funktion, die wir jetzt als Nächstes schreiben werden.

add_shortcode('nrml-shortcode', 'nrmlShortcodeFunction');


function nrmlShortcodeFunction ($atts, $content = null, $tag = '')
{
    $a = shortcode_atts(
   		 array(
   				 'title' => 'NRML',
   				 'greetings' => 'Schöne grüße vom NRML-Team',
   				 'color' => 'black'
   	 ), $atts);

    $output = '   <div class="nrml-box" style="border:2px solid ' . esc_attr($a['color']) . ';">    
   		<h4>' . esc_attr($a['title']) . '</h4>
   		<p class="nrmlGreetings">' . esc_attr($a['greetings']) . '  </p>';
return $output;
}
 

Wie ihr seht, ist es eben die Funktion, die unseren Shortcode zum Leben erweckt.

Die shortcode_atts bieten uns die Möglichkeit einige Attribute zu definieren.

Für unser Beispiel habe ich mal drei Attribute definiert. Danach wird die Output-Variable definiert und am Ende mit Return Output beendet. Mit Return Output senden wir den Output ans Frontend und genau deswegen schreiben wir in die Output-Variable das, was der Shortcode auf dem Frontend tun soll. Im Beispiel seht ihr, wie ich in PHP Code HTML Code reinschreibe und auch wie ich die Daten in den Attributen mit der esc_attr Funktion nutze.

Natürlich können wir das ganze noch erweitern und auch in Script-Tags Javascript Code reinschreiben oder aber auch andere Dateien wie z. B. eine CSS Datei einbinden. Aber ich denke, als Einführung können wir unser Beispiel einfach halten.

Wie nutzen wir nun unser Plugin?

Als Erstes müssen wir es aktivieren.

 Mit einem Klick auf Activate wird es auch blau hervorgehoben und wir können dazu übergehen, eine Seite zu erstellen.

Hier im Pagebuilder können wir einfach unseren Shortcode mit dem Namen in der add_shortcode Funktion in eckigen Klammern schreiben und speichern. Auf dem Frontend sieht es nun so aus:

Somit haben wir erfolgreich einen kleinen WordPress Shortcode erstellt.