Wie erstelle ich ein WordPress Plugin?

Wie man ein eigenes Theme für WordPress erstellt habe ich in diesem Beitrag gezeigt. Im heutigen Artikel möchte ich nun zeigen wie man ein eigenes WordPress Plugin schreibt. Es geht hier in dem Artikel weder darum ein vollwertiges und überall lauffähiges, sinnvolles Plugin zu schreiben. Vielmehr möchte ich den Grundaufbau und die Vorgehensweise erklären.

Options Page

Das komplette Projekt können Sie sich HIER herunter laden.

Ziel dieses Tutorials ist es, ein Plugin zu schreiben, dass allen Bildern eines Beitrags oder einer Seite eigene Styles wie Border, Shadow und Filter zuordnet. Das Plugin soll über eine eigene Settings-Seite verfügen wo man die einzelnen Style-Vorgaben festlegen kann.

Fangen wir also an mit dem Grundgerüst des Plugins. Zuerst legt man im Verzeichnis „wp-content->plugins“ am besten ein neues Verzeichnis mit dem Namen des Plugins an. Ich habe das neue Verzeichnis „fluuux-image-effects“ genannt. In diesem Verzeichnis habe ich eine neue php Datei mit dem Namen „fluuux-image-effects.php“ angelegt.

Damit WordPress ein Plugin erkennt muss dieses über einen bestimmten header verfügen. Haben Sie vor das Plugin irgendwann mal über wordpress.org zu veröffentlichen, sollten Sie auf jeden Fall daran denken die Art der Lizenz mit anzugeben. Fügen Sie nun folgenden Quellcode am Anfang der Datei „fluuux-image-effects.php“ ein und speichern Sie die Datei ab.

 

Plugin – Header

<?php
/*
 Plugin Name: (Fluuux) Image-Effects
 Plugin URI: http://www.fluuux.de/Scripts/Wordpress/Plugins
 Description: Über dieses Plugin kann man den Bildern in Beiträgen Filter, Styles und MouseOver-Effekte zuweisen.
 Version: 1.0
 Author: Enrico Sadlowski
 Author URI: http://www.fluuux.de

 This program is distributed under the GNU General Public License, Version 2,
 June 1991. Copyright (C) 1989, 1991 Free Software Foundation, Inc., 51 Franklin
 St, Fifth Floor, Boston, MA 02110, USA

 THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
 WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
 DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
 ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
 (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
 LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
 ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
  • Plugin Name: = Name des Plugins wie er der auf der Seite der installierten Plugins erscheinen soll.
  • Plugin URI: = Url zur Seite auf der man weitere Informationen zum Plugin finden kann. Erscheint als Link „Besuch die Plugin-Seite“.
  • Description: = Eine Beschreibung des Plugins
  • Version: =Version des Plugins
  • Author: = Name des Programmierers
  • Author-URI: = Homepage des Programmierers. Wird mit dem Namen des Programmierers verlinkt.

Wenn Sie das Backend jetzt aufrufen und auf die Seite „Plugins->Installierte Plugins“ gehen, können Sie bereits das Plugin mit dem Namen „(Fluux) Image-Effects“ sehen. Auf folgendem Screenshot können Sie erkennen wo die, im header gemachten Angaben, erscheinen.

Wordpress - Installierte Plugins

Hier könnte man das Plugin bereits aktivieren was aber nicht so viel bringen würde da dieses noch über keinerlei Funktionalität verfügt.

Das Plugin soll eine eigene Seite erhalten, über die man die verschiedenen Plugin-Optionen einstellen kann. Damit diese Seite aufgerufen werden kann, legen wir als erstes einmal einen neuen Menüpunkt unter „Einstellungen“ in der linken Navigationsleiste an. Dazu schreiben wir folgende Funktion.

 

Optionsmenü erstellen

//Datenbankfelder anlegen und Optionsmenü erstellen
function fluuuxImageEffects_add_menu() 
{
  $options = array(
    "fluuux_img_shadow" => true,
    "fluuux_img_shadowwidth" => 5,
    "fluuux_img_shadowcolor" => "#999",
    "fluuux_img_fade" => false,
    "fluuux_img_border" => 3,	
    "fluuux_img_borderwidth" => 3,
    "fluuux_img_bordercolor" => "#cccccc",
    "fluuux_img_filter" => "grayscale",
  );
  add_option( 'fluuux_options_vars', $options );
  add_options_page('FLUUUX - ImageEffects', 'Fluuux-ImageEffects', 9, __FILE__, 'fluuuxImageEffects_option_page');
}

Mit „add_option()“ werden neue Optionsfelder in der Datenbanktabelle „options“ angelegt insofern diese noch nicht vorhanden sind. Der erste Parameter für add_option ist der Name der Option, Parameter2 ist der Wert der vorgegeben werden soll. Auf Wert 3 und 4 habe ich verzichtet da diese optional sind. Wert 3 wird in WordPress nicht mehr verwendet und steht standardmäßig auf false. Wert 4 steht für autoload und steht standardmäßig auf true. Weitere Informationen zu den Options Mechanismen finden Sie hier.

add_options_page erwartet 5 Parameter.

  1. Titel der Seite
  2. Titel des Menüs
  3. capability
  4. ein für dieses Menü eindeutiger Name
  5. Name der Funktion die aufgerufen werden soll

Mit der Zeile „add_options_page“ wird schließlich der Menüpunkt unter „Einstellungen“ erzeugt. Vorher muss aber noch die Funktion zur Anzeige der Settings-Seite angelegt werden.

 

Options-Seite anlegen

// Options-Seite
function fluuuxImageEffects_option_page() 
{
  echo "HALLO";
}

 

Gehen Sie ins Backend und schauen Sie in der linken Menüleiste unter „Einstellungen“ Sie sollten, wie auf dem unteren Screenshot zu sehen, einen neuen Menüpunkt mit dem Namen „Fluuux-ImageEffects“ sehen. Klicken Sie auf den Menüpunkt sehen Sie eine weiße Seite auf der lediglich das Wort Hallo ausgegeben wird.

 

Options Menü

 

Um diesen Beitrag nicht übermäßig in die Länge zu ziehen, werde ich jetzt hier die komplette Funktion zur Anzeige der Options-Page posten und im Anschluss einige Dinge dazu erklären.

// Optionsseite im Adminbereich
function fluuuxImageEffects_option_page() 
{
  global $fluuux_img_shadow, $fluuux_img_shadowwidth, $fluuux_img_shadowcolor, $fluuux_img_fade, $fluuux_img_border, $fluuux_img_borderwidth, $fluuux_img_bordercolor, $fluuux_img_filter;
?>
<div class="wrap">

  <h2>FLUUUX - ImageEffects Settings</h2>
  <p>
    Hier können Sie die Einstellungen für die Bilder in Ihren Beiträgen vornehmen.<br />
    Standardmäßig werden die Bilder ohne Rand, Schatten oder irgendeinen Effekt angezeigt.<br />
    <div style="border-bottom: 1px solid silver; width:100%;"></div>
  </p>

  <div style="float:left; margin-right:50px; margin-bottom:50px; border-right:1px solid silver;">
    <h2 style="text-decoration:underline; margin-bottom:10px;">Einstellungen</h2>
    <form name="form1" method="post" action="<?php $location ?>">
      <label for="fluuux_img_shadowwidth"><input name="fluuux_img_shadow" id="fluuux_img_shadowwidth" value="1" type="checkbox"<?php if($fluuux_img_shadow==1) echo " checked=\"checked\"";?> /> <strong>Show Shadow</strong></label>
      <br />
      <div style="margin-left:15px;"> 	
        Shadow Width: <input name="fluuux_img_shadowwidth" value="<?php echo $fluuux_img_shadowwidth; ?>" type="text" maxlength="2" size="3" /> px
        <br />
        Shadow Color: <input name="fluuux_img_shadowcolor" value="<?php echo $fluuux_img_shadowcolor; ?>" type="text" maxlength="7" size="7" class="color" />
      </div>

      <div style="border-bottom:1px solid silver; margin:20px 0; width:300px;"></div>

      <label for="fluuux_img_border"><input name="fluuux_img_border" id="fluuux_img_border" value="1" type="checkbox"<?php if($fluuux_img_border==1) echo " checked=\"checked\"";?> /> <strong>Show Border</strong></label>
      <div style="margin-left:20px;">
        Border Width: <input name="fluuux_img_borderwidth" value="<?php echo $fluuux_img_borderwidth; ?>" type="text" maxlength="2" size="3" /> px<br />
        Border Color: <input name="fluuux_img_bordercolor" value="<?php echo $fluuux_img_bordercolor; ?>" type="text" maxlength="7" size="7" class="color" />
      </div>

      <div style="border-bottom:1px solid silver; margin:20px 0; width:300px;"></div>

      <strong>Filter:</strong>  
      <select name="fluuux_img_filter" size="1">
        <option value="0">Filter bei MouseOver</option>
        <option value="grayscale"<?php if($fluuux_img_filter=='grayscale') echo " selected=\"selected\"";?>>grayscale</option>
        <option value="sepia"<?php if($fluuux_img_filter=='sepia') echo " selected=\"selected\"";?>>sepia</option>
        <option value="opacity"<?php if($fluuux_img_filter=='opacity') echo " selected=\"selected\"";?>>opacity</option>
        <option value="blur"<?php if($fluuux_img_filter=='blur') echo " selected=\"selected\"";?>>blur</option>
        <option value="hue-rotate"<?php if($fluuux_img_filter=='hue-rotate') echo " selected=\"selected\"";?>>hue-rotate</option>
      </select> 
      <input name="fluuux_img_fade" value="1" type="checkbox"<?php if($fluuux_img_fade==1) echo "checked=\"checked\"";?> /> Fade Filter<br />
      <br />
      <br />
      <input type="submit" name="MM_SUBMIT" value="Save Settings" />  
      <input type="submit" name="MM_PREVIEW" value="Preview" />
      <input type="hidden" name="MM_SENT" value="1" />
    </form>
  </div>
  <div style="float:left;">
    <h2 style="text-decoration:underline; margin-bottom:10px;">Vorschau</h2>
    <?php
      if($fluuux_img_shadow==1)
        $shadow = ' -webkit-box-shadow: 0 0 '.$fluuux_img_shadowwidth.'px '.$fluuux_img_shadowcolor.';box-shadow: 0 0 '.$fluuux_img_shadowwidth.'px '.$fluuux_img_shadowcolor.';';	
      else $shadow = ' ';	
      if($fluuux_img_border==1)
        $border = ' border:'.$fluuux_img_borderwidth.'px solid '.$fluuux_img_bordercolor.';';
      else $fluuux_img_bordercolor = ' ';
      $filter = $fluuux_img_filter;	
      if($fluuux_img_fade==1) $fade = ' fade'; else $fade = ' ';

      $style = fluuuxImageEffects('<a href="#"><img style="width:325px; height:205px;'.$shadow.$border.'" src="'.plugins_url('/images/preview.jpg', __FILE__).'" class="fluuux-post-image '.$filter.$fade.' " /></a>');
      echo $style;
    ?>
  </div>
</div>
<?php
}

 

Options Page

 

Die Seite beginnt mit einem Titel gefolgt von einem Hinweistext. Danach folgt ein html-Formular mit verschiedenen CheckBoxen, Textfeldern, einer SelectBox, einem Button zum speichern der Einstellungen und einen Button für eine Vorschau der vorgenommenen Einstellungen in dem rechts zu sehenden Bild.

Ganz wichtig, damit die Seite einerseits beim öffnen der Options-Seite die Werte aus der Datenbank lädt und andererseits die Checkboxen und Textfelder auch nach einem Klick auf den Preview-Button noch den zuvor gewählten Wert zeigen, ist folgendes. Diese zeilen können wir direkt unter dem header der Seite platzieren.

//Formularwerte aus Datenbank laden und Variablen zuweisen
if (!isset($_POST['MM_SENT']))
{
  $myOptions = get_option('fluuux_options_vars');

  $fluuux_img_shadow = $myOptions['fluuux_img_shadow'];
  $fluuux_img_shadowwidth = $myOptions['fluuux_img_shadowwidth'];
  $fluuux_img_shadowcolor = '#'.$myOptions['fluuux_img_shadowcolor'];
  $fluuux_img_fade = $myOptions['fluuux_img_fade'];
  $fluuux_img_border = $myOptions['fluuux_img_border'];
  $fluuux_img_borderwidth = $myOptions['fluuux_img_borderwidth'];
  $fluuux_img_bordercolor = '#'.$myOptions['fluuux_img_bordercolor'];
  $fluuux_img_filter = $myOptions['fluuux_img_filter'];
}
//Speichern- oder Vorschau Button gedrückt
else
{
  if($_POST['fluuux_img_shadow']==1) $fluuux_img_shadow=1; else $fluuux_img_shadow=0; 
  $fluuux_img_shadowwidth = $_POST['fluuux_img_shadowwidth'];
  $fluuux_img_shadowcolor = '#'.$_POST['fluuux_img_shadowcolor'];
  if($_POST['fluuux_img_fade']==1) $fluuux_img_fade=1; else $fluuux_img_fade=0;
  if($_POST['fluuux_img_border']==1) $fluuux_img_border=1; else $fluuux_img_border=0;
  $fluuux_img_borderwidth = $_POST['fluuux_img_borderwidth'];
  $fluuux_img_bordercolor = '#'.$_POST['fluuux_img_bordercolor'];
  $fluuux_img_filter = $_POST['fluuux_img_filter'];
}

 

Speichern von Änderungen

Wenn wir nun Änderungen im Formular vornehmen und diese speichern wollen, benötigen wir folgenden Code.  Hier wird abgefragt ob der Speichern Button gedrückt wurde. Ist dem so, dann werden alle Felder in denen sich ein Wert geändert hat in der Datenbank upgedatet.

//Speichern der im Adminbereich - Optionen eingestellten Werte
if (isset($_POST['MM_SUBMIT'])) 
{
  $myNewOptions = array(
    'fluuux_img_shadow' => $_POST['fluuux_img_shadow'],
    'fluuux_img_shadowwidth' => $_POST['fluuux_img_shadowwidth'],
    'fluuux_img_shadowcolor' => esc_html($_POST['fluuux_img_shadowcolor']),
    'fluuux_img_fade' => $_POST['fluuux_img_fade'],
    'fluuux_img_border' => $_POST['fluuux_img_border'],
    'fluuux_img_borderwidth' => $_POST['fluuux_img_borderwidth'],
    'fluuux_img_bordercolor' => esc_html($_POST['fluuux_img_bordercolor']),
    'fluuux_img_filter' => $_POST['fluuux_img_filter']
  );
  update_option('fluuux_options_vars', $myNewOptions);
}

Jetzt haben wir in der linken Menüleiste einen neuen Link zur Options-Seite unseres Plugins und die Options-Seite selber angelegt. Es können Werte eingegeben, gespeichert und auch wieder ausgelesen werden. Man kann die Werte vorab in einem Vorschaubild begutachten bevor man diese in der Datenbank speichert.  Nun brauchen wir natürlich noch eine Funktion die alle Bilder unserer Beiträge so anpasst, dass diese dem Style des Vorschaubilds entsprechen.

 

Anpassen des Styles der Bilder auf den Beitragsseiten

// Funktion zum setzen des Styles der Images in den Beiträgen
function fluuuxImageEffects($content) 
{
  global $fluuux_img_shadow, $fluuux_img_shadowwidth, $fluuux_img_shadowcolor, $fluuux_img_fade, $fluuux_img_border, $fluuux_img_borderwidth, $fluuux_img_bordercolor, $fluuux_img_filter;

  $style  = 'style="';
  $filter = '';

  //show Shadow
  if($fluuux_img_shadow)
  {		
    if($fluuux_img_shadowwidth &amp;&amp; $fluuux_img_shadowcolor)
    {
      $style .= '-webkit-box-shadow: 0 0 '.$fluuux_img_shadowwidth.'px '.$fluuux_img_shadowcolor.';box-shadow: 0 0 '.$fluuux_img_shadowwidth.'px '.$fluuux_img_shadowcolor.';';
    } else $style .= '';
  } else $style .= '-webkit-box-shadow: 0 0 5px #999;box-shadow: 0 0 5px #999;';

  //show border
  if($fluuux_img_border)
  {
    $style .= ' border:';

    //Borderwidth wurde eingegeben
    if($fluuux_img_borderwidth)
      $style .= $fluuux_img_borderwidth.'px solid ';
    else $style .= '1px solid ';

    //Borderfarbe wurde eingegeben
    if($fluuux_img_bordercolor)
      $style .= $fluuux_img_bordercolor.';';
    else $style .= '#cccccc;'; //Bordercolor wurde NICHT eingegeben)
  } else $style .= '';
  $style .= '"';

  //fade filter
  if($fluuux_img_fade) $filter .= ' fluuux-fade'; else $filter .= '';

  //set filter
  if($fluuux_img_filter)
  {
    $filter .= ' '.$fluuux_img_filter;
  } else $filter .= "";

  //Neue Styleeigenschaften zuweisen
  $suche   = '<img class="';
  $ersetze = '<img '.$style.' class="fluuux-post-image'.$filter.' ';

  $content = str_replace($suche,$ersetze,$content);
  return $content;
}
add_filter("the_content","fluuuxImageEffects");

Die Funktion macht nichts weiter, als je nach eingestellter Option auf der Options Seite, bestimmte Styles zusammenzusetzen.
Am interessantesten ist die letzte Zeile, denn diese sorgt erst dafür dass diese Funktion aufgerufen wird wenn eine Beitrag oder eine Seite im Frontend aufgerufen wird. Auf der Beitragsseite wird in dem Fall nach der Zeichenkette ‚<img class=“‚ gesucht. Alle Vorkommen dieser Zeichenkette werden nun durch die gewünschten Styles ergänzt.

Da diese Funktion nicht nur Styles erstellt sondern auch die Namen von Style-Klassen aufruft, fehlt uns natürlich noch die entsprechende Stylesheet Datei in der diese Style Anweisungen enthalten sind.

Wir erstellen also eine neue Datei, am besten in einem neuen Unterordner mit dem Namen „styles“ und nennen diese „styles.css“

styles.css

.fluuux-post-image { cursor: pointer; }

.fluuux-post-image.shadow 
{
  -webkit-box-shadow: 0 0 5px #999;
  box-shadow: 0 0 5px #999;
}

.fluuux-post-image.fluuux-fade 
{ 
  -webkit-transition: all 1s ease; 
  -moz-transition: all 1s ease; 
  -o-transition: all 1s ease; 
  -ms-transition: all 1s ease; 
  transition: all 1s ease; 
}

.fluuux-post-image.grayscale { -webkit-filter: grayscale(1); }
.fluuux-post-image:hover.grayscale {-webkit-filter: grayscale(0);}

.fluuux-post-image.sepia { -webkit-filter: sepia(80%); }
.fluuux-post-image:hover.sepia {-webkit-filter: sepia(0);}

.fluuux-post-image.opacity { -webkit-filter: opacity(50%); }
.fluuux-post-image:hover.opacity {-webkit-filter: opacity(100%);}

.fluuux-post-image.blur { -webkit-filter: blur(1px); }
.fluuux-post-image:hover.blur {-webkit-filter: blur(0);}

.fluuux-post-image.hue-rotate { -webkit-filter: hue-rotate(90deg); }
.fluuux-post-image:hover.hue-rotate {-webkit-filter: hue-rotate(0);}

 

Laden der styles.css

// Stylesheets laden
function fluuux_add_my_stylesheet()
{
   wp_enqueue_style('fluuux-style', plugins_url('/styles/frontend-style.css', __FILE__));
}
add_action('init','fluuux_add_my_stylesheet'); //init weil die css im Backend benötigt wird sonst wp_enqueue_script

Das komplett Plugin können Sie HIER herunter laden.

Ich hoffe Ihnen hat dieses Tutorial etwas gefallen.
Sollte etwas fehlen oder sollte jemand Anmerkungen oder Tipps dazu haben dann würde ich mich über einen Kommentar sehr freuen.

 

Über Enrico S.

Programmierer, Webdesigner, Grafiker, Blogger, Screencaster, Arduino- und eMobility Enthusiast.

Kommentare geschlossen.