Wordpress Plugin erstellen

WordPress Plugin erstellen

WordPress Plugin erstellen

Ein WordPress Plugin erstellen ist eigentlich ganz einfach. Es gibt zwar bereits tausende Plugins für WordPress, doch findet man manchmal einfach nicht das passende WordPress Plugin, das genau auf seine Bedürfnisse zugeschnitten ist. Man könnte jetzt ein anderes WordPress Plugin entsprechend anpassen, hat aber dann das Problem, dass bei Updates der eigene Code wieder überschrieben ist. Hier bietet es sich tatsächlich an, ein eigenes WordPress Plugin zu erstellen.

Wie erstelle ich ein WordPress Plugin?

Ich zeige euch, wie ihr ein WordPress Plugin erstellt. Als Beispiel nehme ich mein WordPress Plugin namens YARSS (Yet Another RSS plugin). Ein Plugin, mit dem RSS Feeds auf Seiten und Posts und als Widget angezeigt werden können, in dem BBCode geparsed wird. WICHTIG: Man sollte sich zuerst einen eindeutigen Namen aussuchen, der noch nicht vorhanden ist. Das kann man einfach überpüfen, in dem man auf der WordPress Plugin Seite nach dem entsprechenden Namen sucht. Ist kein Plugin mit diesem Namen vorhanden, kann man getrost diesen wählen. Wie ihr das Plugin dann allen Benutzern von WordPress zur Verfügung stellt, zeige ich euch in einem anderen Beitrag.

Im Verzeichnis /wp-content/plugins sind alle installierten WordPress Plugins. Um ein neues WordPress Plugin zu erstellen, erzeugen wir zunächst ein Verzeichnis mit dem Namen des neuen Plugins. In unserem Fall benennen wir das Verzechnis yarss. In diesem Verzeichnis erstellen wir eine neue php Datei namens yarss.php. Aus dieser Datei wird der Name usw. von WordPress geparsed.

<?php
/**
* Plugin Name: YARSS
* Plugin URI: http://wordpress.org/plugins/yarss/
* Description: You can add a shortcode into your posts to display RSS feeds that may include bbcode.
* Version: 1.0
* Author: Alexander Jungwirth
* Author URI: http://www.webdesgn-manching.de
* License: GPLv2
*/

/*  Copyright 2016 Alexander Jungwirth (email : alex.jungwirth [at] gmail [dot] com)

    THIS PROGRAM IS FREE SOFTWARE; YOU CAN REDISTRIBUTE IT AND/OR MODIFY
    IT UNDER THE TERMS OF THE GNU GENERAL PUBLIC LICENSE AS PUBLISHED BY
    THE FREE SOFTWARE FOUNDATION; EITHER VERSION 2 OF THE LICENSE, OR
    (AT YOUR OPTION) ANY LATER VERSION.

    THIS PROGRAM IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
    BUT WITHOUT ANY WARRANTY; WITHOUT EVEN THE IMPLIED WARRANTY OF
    MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE.  SEE THE
    GNU GENERAL PUBLIC LICENSE FOR MORE DETAILS.

    YOU SHOULD HAVE RECEIVED A COPY OF THE GNU GENERAL PUBLIC LICENSE
    ALONG WITH THIS PROGRAM; IF NOT, WRITE TO THE FREE SOFTWARE
    FOUNDATION, INC., 51 FRANKLIN ST, FIFTH FLOOR, BOSTON, MA  02110-1301  USA

    Supported shortcodes: 
    - [img arc="" <attributes>]
    - [b]...[/b]
    - [i]...[/i]
    - [u]...[/u]
    - [code]...[/code]

*/

Sehen wir uns die einzelnen Zeilen an.

Plugin Name: Der Name des Plugin, so wird er in der Liste der Plugins angezeigt. Die URI entspricht dem Pfad es späteren Repositorys, also http://wordpress.org/plugins/<plugin_name>.
Description: Eine kurze Beschreibung des Plugins.
Version: die Version des Plugins, also mit dem ersten Upload die 1.0 (außer man will eine BETA draus machen).
Author und Author URI sind selbsterklärend.
License: Die Lizenz ist im Normalfall GPLv2.
Im nachfolgenden stehen Informationen zur Lizenz und einige Informationen zur Benutzung.

Kommen wir jetzt zum eigentlichen Programmcode. Wir können die Datei z.B. objektorientiert aufbauen, d.h. also mit Klasse, Methode, Eigenschaft usw. usw. In diesem Fall wäre das mit Kanonen auf Spatzen geschossen. Daher erstellen wir nur Funktionen – zumindest beim Shortcode. Beim Widget brauchen wir die Funktionen der WordPress Klasse WP_Widget, daher müssen wir eine Klasse erstellen und die WordPress Klasse vererben.

Shortcode: Einbinden in mein WordPress Plugin

Wir brauchen zwei Teile. Erstens den Bereich für den Shortcode in den Beiträgen und Seiten, und einen Bereich für das Widget. Sehen wir zunächst den Shortcode Bereich an.

// the shortcode for posts and pages
if ( !function_exists( 'yarss_shortcode' ) ) {
    function yarss_shortcode( $atts ) {
        include_once(ABSPATH . WPINC . '/rss.php');
        $attributes = shortcode_atts( array( 
            "url" => "/rss/rss.txt",
            "bbcode" => "false",
            "items" => 20,
            "date" => "true",
            "summary" => "true"
        ), $atts );

        $rss = fetch_feed( $attributes["url"] );

        $items = $rss->get_item_quantity( $attributes["items"] );
        $rss_feed = $rss->get_items( 0, $items );

        $data = "<ul class=\"yarss\">";

        if ( $items == 0 ) {
            $data .= "<li>" . __( 'No items found.', 'yarss' ) . "</li>";
        } else {
            foreach( $rss_feed as $item ) {
                if ( $attributes["bbcode"] == "true") {
                    $description = preg_replace("/\[img(.*?)\]/", "<img $1>", $item->get_description() );
                    $description = preg_replace("/\[b\](.*?)\[\/b]/", "<strong>$1</strong>", $description );
                    $description = preg_replace("/\[i\](.*?)\\[\/i\]/", "<em>$1</em>", $description );
                    $description = preg_replace("/\[u\](.*?)\[\/u\]/", "<u>$1</u>", $description );
                    $description = preg_replace("/\[code\](.*?)\[\/code\]/", "<pre>$1</pre>", $description );
                } else {
                    $description = preg_replace("/\[img(.*?)\]/", "", $item->get_description() );
                    $description = preg_replace("/\[b\](.*?)\[\/b]/", "$1", $description );
                    $description = preg_replace("/\[i\](.*?)\\[\/i\]/", "$1", $description );
                    $description = preg_replace("/\[u\](.*?)\[\/u\]/", "$1", $description );
                    $description = preg_replace("/\[code\](.*?)\[\/code\]/", "$1", $description );
                }
                $data .= "<li>";
                $data .= "<a href=\"" . esc_url( $item->get_permalink() ) . "\" title=\"\" target=\"_blank\">" . esc_html( $item->get_title() ) . "</a>";
                if ($attributes["date"] == "true") $data .= "<span class=\"yarss-date\">" . sprintf( __( "%s o'clock",  "yarss" ), $item->get_date('d.m.Y H:i') )  . "</span>";
                if ($attributes["summary"] == "true") $data .= "<div class=\"yarss-summary\">" . $description . "</div>"; 
                $data .= "</li>";

            }
        }

        $data .= "</ul>";

        return $data;
    }
}

Die Funktion yarss_shortcode( $atts ) kümmert sich also um das parsen des Shortcodes, die Parameters werden als $atts übergeben.

Ich bediene mich der WordPress eigenen Bibliothek für RSS Feeds (rss.php). Als nächstes setze ich die Standardwerte der Parameter mittels der Funktion shortcode_atts(). url gibt die URL des RSS Feeds an. bbcode schaltet das Parsing des BBCodes an oder ab. items beschreibt die maximale Anzahl an Feed Items. Ist date auf true gesetzt, wird das Datum mit ausgegeben. Ist summary auf false gesetzt, wird nur die Überschrift anzeigt.
Jetzt lese ich die RSS Feeds der in den Parametern übergebenen url mit der Funktion fetch_feed() aus. Sind keine Feeds vorhanden – was mit get_item_quantity() erledigt wird – geben wir aus, dass keine gefunden wurden. Ansonsten beginnen wir mit der Schleife für das parsen der einzelnen Feeds.

Mit der PHP Funktion preg_replace() wird innerhalb der Description des Feeds, den wir uns mit get_description() holen, der BBCode geparsed und mit HTML Code ausgetauscht. Sollte kein bbcode Pasring gewüscht sein, was mittels Parameter mitgegeben wird, wir der BBCode entfernt.

Wir brauchen jetzt eine Funktion, mit der wir die Sprachdatei und ein Stylesheet laden.

// initialize
function init_yarss() {
    // languages
    load_plugin_textdomain( 'yarss', false, dirname( plugin_basename(__FILE__) ).'/lang/' );
    // stylesheet
    wp_register_style( 'yarss-style', plugins_url('css/style.css', __FILE__) );
    wp_enqueue_style( 'yarss-style' );
}

Mit load_plugin_textdomain() laden wir die Sprachdatei und geben Ihr einen interen Namen. Das Stylesheet wird mit wp_register_style() geladen und mit wp_enqueue_style() scharf geschalten.

Jetzt haben wir zwar zwei tolle Funktionen, diese werden aber noch nicht ins WordPress geladen.

add_action( 'wp_enqueue_scripts', 'init_yarss' );
add_shortcode( 'yarss', 'yarss_shortcode' );

Mit add_action() führen wir die Funktion init_yarss() aus, mit add_shortcode() fügen wir unseren Shortcode hinzu. Dabei ist der erste Parameter der Name des Shortcodes. Der Aufruf in einem Beitrag oder einer Seite wäre dann also z.B. Der RSS Feed konnte nicht erreicht werden..

Widget: So einfach implementiere ich es ins Backend

Kommen wir also jetzt zum Widget.

// Creating the widget 
if ( !class_exists( 'yarss_widget' ) ) {
    class yarss_widget extends WP_Widget {

        function __construct() {
            parent::__construct(
                'yarss_widget', 
                __('YARSS', 'yarss'), 
                array( 'description' => __( 'Add RSS Feeds to the Sidebar.', 'yarss' ), ) 
            );
        }

        // Creating widget front-end
        // This is where the action happens
        public function widget( $args, $instance ) {
            $title = apply_filters( 'widget_title', $instance['title'] );
            // before and after widget arguments are defined by themes
            echo $args['before_widget'];
            if ( ! empty( $title ) ) echo $args['before_title'] . $title . $args['after_title'];

            echo yarss_shortcode($instance);

            echo $args['after_widget'];
        }

        // Widget Backend 
        public function form( $instance ) {
            $title = ( isset( $instance[ 'title' ] ) ) ? $instance[ 'title' ] : $title = __( 'New title', 'yarss' );
            $url = ( isset( $instance[ 'url' ] ) ) ? $instance[ 'url' ] : $url = __( 'URL to the RSS feed', 'yarss' );
            $items = ( isset( $instance[ 'items' ] ) ) ? $instance[ 'items' ] : $items = __( 'number of items', 'yarss' );
            ?>
            <p>
                <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:', 'yarss' ); ?></label> 
                <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
            </p>
            <p>
                <label for="<?php echo $this->get_field_id( 'url' ); ?>"><?php _e( 'URL to the RSS feed:', 'yarss' ); ?></label> 
                <input class="widefat" id="<?php echo $this->get_field_id( 'url' ); ?>" name="<?php echo $this->get_field_name( 'url' ); ?>" type="text" value="<?php echo esc_attr( $url ); ?>" />
            </p>
            <p>
                <label for="<?php echo $this->get_field_id( 'items' ); ?>"><?php _e( 'Number of items:', 'yarss' ); ?></label> 
                <input class="widefat" id="<?php echo $this->get_field_id( 'items' ); ?>" name="<?php echo $this->get_field_name( 'items' ); ?>" type="number" value="<?php echo esc_attr( $items ); ?>" />
            </p>
            <p>
                <input class="checkbox" type="checkbox" <?php checked( $instance[ 'date' ], 'true' ); ?> id="<?php echo $this->get_field_id( 'date' ); ?>" name="<?php echo $this->get_field_name( 'date' ); ?>" /> 
                <label for="<?php echo $this->get_field_id( 'date' ); ?>"><?php _e( 'display the date', 'yarss' ); ?></label>
            </p>
            <p>
                <input class="checkbox" type="checkbox" <?php checked( $instance[ 'summary' ], 'true' ); ?> id="<?php echo $this->get_field_id( 'summary' ); ?>" name="<?php echo $this->get_field_name( 'summary' ); ?>" /> 
                <label for="<?php echo $this->get_field_id( 'summary' ); ?>"><?php _e( 'display the summary', 'yarss' ); ?></label>
            </p>
            <p>
                <input class="checkbox" type="checkbox" <?php checked( $instance[ 'bbcode' ], 'true' ); ?> id="<?php echo $this->get_field_id( 'bbcode' ); ?>" name="<?php echo $this->get_field_name( 'bbcode' ); ?>" /> 
                <label for="<?php echo $this->get_field_id( 'bbcode' ); ?>"><?php _e( 'enable bbcode in summary', 'yarss' ); ?></label>
            </p>

            <?php 
        }

        // Updating widget replacing old instances with new
        public function update( $new_instance, $old_instance ) {
            $instance = array();
            $instance[ 'title' ] = ( ! empty( $new_instance[ 'title' ] ) ) ? strip_tags( $new_instance['title'] ) : '';
            $instance[ 'url' ] = ( ! empty( $new_instance[ 'url' ] ) ) ? strip_tags( $new_instance['url'] ) : '';
            $instance[ 'items' ] = ( ! empty( $new_instance[ 'items' ] ) ) ? strip_tags( $new_instance['items'] ) : '10';
            $instance[ 'bbcode' ] = ( $new_instance[ 'bbcode' ] == "on" ) ? "true" : "false";
            $instance[ 'date' ] = ( $new_instance[ 'date' ] ) ? "true" : "false";
            $instance[ 'summary' ] = ( $new_instance[ 'summary' ] ) ? "true" : "false";
            return $instance;
        }

    } 
}

Da wir uns der Klasse WP_Widget bedienen müssen, brauchen wir auch eine Klasse, in der wir die WP_Widget Klasse vererben. In der Konstruktor Funktion greifen wir auf den Konstruktor der geerbten Klasse zu. Hierbei muss als erster Parameter der Name der Klasse verwendet werden, dann der Name des Widget und eine Beschreibung.

Die Funktion widget() ist für die Darstellung im Frontend zuständig, die Funktionen form() und update() für die im Backend. In widget() bedienen wir uns unserer eigenen Funktion yarss_shortcode() und geben diese mit einem einfach echo Befehl aus.

Für das Backend wollen wir einen Titel, die URL und die maximale Anzahl an Items als Textfeld, bbcode, date und summary als Checkbox für true und false. Die jeweiligen Werte für das Widget werden in dem array $instance übergeben und wir können diese entsprechend auswerten.

update() kümmert sich dann letztendlich um das Ändern der Einstellungen im Backend.

Jetzt brauchen wir wieder eine Funktion, die die Klasse initialisiert.

// Register and load the widget
if ( !function_exists( 'yarss_load_widget' ) ) {
    function yarss_load_widget() {
        load_plugin_textdomain( 'yarss', false, dirname( plugin_basename(__FILE__) ).'/lang/' );
        register_widget( 'yarss_widget' );
    }
}

Und natürlich müssen wir WordPress jetzt noch sagen, dass die Funktion ausgeführt werden soll.

add_action( 'widgets_init', 'yarss_load_widget' );

Jetzt brauchen wir also noch die Sprachdatei und das Stylesheet. Wir das Anlegen einer Sprachdatei funktioniert, erkläre ich in einem anderen Beitrag. Das CSS erstellen wir im Verzeichnis yarss/css. Hier der Inhalt der style.css:

.yarss { 
    list-style-type: none;
}

.yarss > li {
    border-bottom: 1px dotted #ddd;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.yarss > li > a {
    color: #009FE3;
    text-decoration: none;
    font-weight: 700;
    border: 0;
}

.yarss > li > a:hover {
    color: #116CB0;
}

.yarss-date {
    display: block;
    color: rgba(51, 51, 51, 0.7);
    font-size: 0.7em;
    line-height: 0.8em;
    margin-bottom: 15px;
}

.yarss-summary img {
    float: left; 
    margin: 7px 15px 15px 0px;
}

.yarss u {
    text-decoration: underline;
}

.widget-area .yarss-summary img {
    width: 100%;
}

.widget-area .yarss > li > a {
    display: block;
    text-align: center;
    line-height: 1.2em;
    margin-bottom: 5px;
}

.widget-area .yarss-date {
    line-height: 1em;
    margin-bottom: 10px;
    text-align: center;
}

Okay. Aktivieren wir jetzt erstmal unser WordPress Plugin in der Plugin Übersicht. Hierzu navigieren wir einfach auf Plugins > Installierte Plugins. Unser YARSS Plugin taucht nun in der Liste auf. Ein einfacher Klick auf Aktivieren aktiviert das WordPress Plugin. Jetzt können wir einen neuen Beitrag erstellen und in diesem den o.g. Shortcode einfügen. Und in der Widget Übersicht unter Design > Widgets können wir jetzt auch auf dieses Plugin zu greifen.

Bitte bewerten Sie meinen Beitrag

Alexander Jungwirth ist Webentwickler bei einem Ingolstädter Verlagshaus und ist Inhaber der Firma Webdesign Manching. Seine Leidenschaft ist HTML, seine Passion PHP, seine Hingabe CSS und seine Inbrunst jQuery. Alexander lebt in Manching mit seiner liebevollen Frau und seinen wunderbaren Kindern.

Schreibe einen Kommentar

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