SVGs in WordPress

Die folgende, nicht ganz originalgetreue Zeichnung des Labyrinths von Chartres habe ich in Illustrator erstellt und als SVG (Scalable Vector Graphic ) exportiert. SVG-Dateien kannst du in einem beliebigen Text-Editor öffnen und bearbeiten. Über das viewBox-Attribut und die Attribute width und height im SVG-Element kannst du ganz einfach die Größe der Zeichnung verlustfrei skalieren.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600px" height="600px" viewBox="0 0 1418 1418">...</svg>

Sicherheitsrisiko von SVG-Dateien in WordPress

WordPress zeigt normalerweise aus Sicherheitsgründen keine SVG-Dateien an. Mehr über das Sicherheitsrisiko von SVG-Dateien, die auf XML-Strukturen basieren, kannst du in diesem informativen Videobeitrag von Mario Heidreich auf YouTube erfahren.

Die Anzeige von SVG-Dateien in deinem WordPress Blog ist prinzipiell dann ein Sicherheitsrisiko, wenn nicht klar ist, wer diese SVG-Datei erstellt bzw. in deine WordPress Mediathek hochgeladen hat. Grundsätzlich kann jede SVG-Datei schädlichen JavaScript Code enthalten und damit auch deinen Rechner infizieren.

Bevor du SVG-Dateien in deinem Blog zulässt, sollte sichergestellt sein, dass nur du bzw. dir vertraute Personen sichere SVG-Dateien ohne schädlichen Code in die Mediathek hochladen können. Außerdem sollte im Idealfall die Kommentfunktion in deiner WordPress Installation deaktiviert sein. Über einen Kommentar wäre es ein Leichtes, eine SVG-Datei über ein img-Element in deine Seite einzuschleusen, auch wenn die Datei dann nicht in deiner Mediathek liegt.

Labyrinth von Chartres

Labyrinth von Chartres als SVG-Datei

Animierte SVG-Dateien

Auch der Einsatz animierter SVG-Dateien ist jetzt möglich.

Labyrinth von Chartres animiert

 

Labyrinth von Chartres animiert (24 kByte)

HowTo

Du musst lediglich zwei Änderungen in deiner WordPress Installation vornehmen. Die erste Änderung machst du in der Datei functions.php in deinem (Child-)Theme.

  • Die erste Funktion ermöglicht es über einen Hook SVG-Dateien über den Upload-Bereich von WordPress hochzuladen.
  • Die zweite Funktion verändert die Dimension von SVG-Dateien, die im Normalfall in WordPress auf 1 x 1 Pixel gestellt ist. Diese Funktion habe ich hier gefunden:

SVG images get width and height attributes with values 1

Nach dem Speichern der Änderungen in der functions.php kannst du jetzt bereits SVG-Dateien in die Mediathek importieren und in deinen Seiten und Beiträgen verwenden.

function cc_mime_types($mimes) {
 $mimes['svg'] = 'image/svg+xml';
 return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');

/**
 * Removes the width and height attributes of tags for SVG
 * 
 * Without this filter, the width and height are set to "1" since
 * WordPress core can't seem to figure out an SVG file's dimensions.
 * 
 * For SVG:s, returns an array with file url, width and height set 
 * to null, and false for 'is_intermediate'.
 * 
 * @wp-hook image_downsize
 * @param mixed $out Value to be filtered
 * @param int $id Attachment ID for image.
 * @return bool|array False if not in admin or not SVG. Array otherwise.
 */
function wg_fix_svg_size_attributes( $out, $id )
{
 $image_url = wp_get_attachment_url( $id );
 $file_ext = pathinfo( $image_url, PATHINFO_EXTENSION );

 if ( ! is_admin() || 'svg' !== $file_ext )
 {
 return false;
 }

 return array( $image_url, null, null, false );
}
add_filter( 'image_downsize', 'wg_fix_svg_size_attributes', 10, 2 );

Vielleicht ist dir aufgefallen, dass Beitragsbilder vom Typ SVG jetzt noch nicht angezeigt werden. Ein Blick auf die CSS-Klassen im Entwicklermodus deines Browsers verschaffen auch hier Abhilfe.

In der styles.css Datei fügst du einfach folgende CSS-Klasse hinzu:

img.wp-post-image[src*="svg"] {
   width: 300px;
   height: auto
}

Jetzt sollten in deinen Seiten und Beiträgen auch SVG als Beitragsbilder angezeigt werden.

WP MobileWebAppViewer Plugin

Aufbau und Funktionsweise des Plugins

Funktionsweise WP MobileWebAppViewer
Funktion des WP-MobileWebAppViewer Plugins (SVG 7 kByte)

Mit dem Plugin lassen sich mobile Webapplikationen auf Seiten oder in Beiträge deines WordPress Blogs mittels Shortcode einfügen. Den Shortcode habe ich mit mehreren Attributen versehen. Wenn du überhaupt keine Attribute in den Shortcode [[webappviewer]] eingibst, wird nur ein Beispiel mit einem meiner kleinen WebAppSpiele angezeigt. Daher solltest du mindestens das Attribut src=“deineurl.xyz“ verwenden um deine gewünschte Seite in den Viewer zu laden.

Prezi Präsentation zum Plugin

 

Downloadmöglichkeiten

Download lokal  Download GitHub

Beispiel mit src-Attribut

Jeder Shortcode wird mit dem Namen des Shortcodes webappviewer in eckigen Klammern aufgerufen.

[[webappviewer src="http://m.mesch.de"]]

Beispiel mit outerstyle- und innerstyle-Attributen

Mit den outer- und innerstyle-Attributen kannst du über CSS verschiedene Layouts laden bzw. eigene Layouts erstellen. Bisher habe ich vier Styles erstellt. Das Flat Style ist das Standard-Layout und wird verwendet, wenn du kein outerstyle- und innerstyle-Attribut in deinem Shortcode verwendest.

  1. Flat Style: outerstyle=“deviceholderflat“, innerstyle=“devicedisplayflat“ (Standard)
  2. iPhone 6 Style: outerstyle=“deviceholderip6″, innerstyle=“devicedisplayip6″
  3. iPhone 5 Style: outerstyle=“deviceholderip5″, innerstyle=“devicedisplayip5″
  4. Samsung S6 Style: outerstyle=“deviceholders6″, innerstyle=“devicedisplays6″
[[webappviewer outerstyle="deviceholderip6" innerstyle="devicedisplayip6" src="http://m.mesch.de"]]

Beispiel mit width- und height-Attributen

Mit Hilfe der width- und height-Attribute kannst du die Breite und Höhe des iframe-Elements im Displaybereich (DIV-Element mit der Class innerstyle) angeben. Die Standardwerte sind: width=“375px“ und height=“667px“.

[[webappviewer width="320px" height="568px" outerstyle="deviceholderip5" innerstyle="devicedisplayip5" src="http://m.mesch.de"]]

Beispiel im iPhone 5 Mockup

[[webappviewer width="320" height="568" src="https://norbat.de/m3/" outerstyle="deviceholderip5" innerstyle="devicedisplayip5"]]

Beispiel im Samsung S6 Mockup

[[webappviewer width="380px" height="670px" outerstyle="deviceholders6" innerstyle="devicedisplays6" src="http://kamerunschaf.de"]]

Beispiel im iPhone 6 Mockup

[[webappviewer width="375px" height="667px" outerstyle="deviceholderip6" innerstyle="devicedisplayip6" src="http://getbootstrap.com"]]

Anzeige mobiler WebApps in WordPress

In diesem Beitrag zeige ich dir, wie du eine mobile WebApp in WordPress mittels DIV-Container und iFrame-Element darstellen kannst.

Grafik für das Mobilgerät

Du benötigst lediglich eine PNG-Grafik deines Smartphones oder Tablets mit transparentem Displaybereich. Ich habe hier mal ein Flat Mobile Mockup mit Illustrator erstellt. Der transparente Displaybereich ist 375px breit und 667px hoch.

Flat Mobile Mockup mit Bemaßung
Flat Mobile Mockup mit Bemaßung

Hier kannst du das Flat Mobile Mockup herunterladen.

Illustrator Datei

Flat Mobile Mockup ohne Bemaßung
Flat Mobile Mockup ohne Bemaßung

Kopieren der PNG-Datei und anpassen der style.css

Bevor du die style.css anpasst solltest du die PNG-Datei (hier bei mir FMM.png) auf deinen Webserver laden. Ich habe dazu in meinem eigenen Theme einen eigenen Ordner mit dem Namen img angelegt. Du kannst aber auch bei den Standard Themes (z.B. Twenty Thirteen) den images Ordner verwenden.

Die style.css deines Themes ergänzt du jetzt um folgende Klassen:

.mobileviewer{
 display: block;
 background: url("./img/FMM.png") no-repeat left top;
 width: 428px; /*Breite deiner PNG-Datei*/
 height: 854px; /*Höhe deiner PNG-Datei*/
 margin-bottom: 50px;
 padding-top: 21px;
}

.mobiledisplay{
 display: block;
 background: #FFFFFF;
 width: 375px;
 height: 667px;
 margin-top: 100px;
}

Einfügen der HTML-Elemente in den Beitrag

Im Textmodus deiner Seite oder deines Beitrages gibst du nun folgenden HTML-Code ein:

textmodus
Textmodus
<center>
<div class="mobileviewer">
  <div class="mobiledisplay">
    <iframe style="width: 375px; height: 667px; border: none;" src="https://deine.url"></iframe>
  </div>
</div>
</center>

Speichere deine Seite oder deinen Beitrag und schaue ihn dir auf deiner Seite an. Ein Ergebnis siehst du hier oder mit einem fotorealistischen iPhone 6 von Dave Stadler auf Dribbble hier:

Falls die WebApp nicht angezeigt wird, kann das an den Sicherheitseinstellungen deines Browsers liegen. In Google Chrome kannst du am rechten Ende der Adresszeile die Inhalte laden.

ChromeEinstellungen

Ich freue mich über deinen Kommentar!

TinyMCE Editor anpassen – Standard Schaltflächen entfernen

TinyMCE Hide Button

In diesem Beispiel zeige ich dir, wie du deinem WordPress Theme Standard Schaltflächen des TinyMCE Editors entfernen kannst.

Eine Liste aller Standard Schaltflächen findest du hier TinyMCE – Buttons/controls

Wenn du ein eigenes Theme oder ein Child-Theme eines Standard WordPress Themes verwendest, hast du in deinem Theme Ordner die Datei functions.php. Ist diese Datei in deinem eigenen Theme noch nicht vorhanden, legst du sie einfach in deinem Theme Ordner, in dem sich auch die styles.css befindet, an.

Entfernen der Standard Schaltfläche Unterstreichen

1: function nme_hide_tinymce_button($buttons)
2: {
3: $remove = array('underline');
4: return array_diff($buttons,$remove);
5: }
6: add_filter('mce_buttons_2','nme_hide_tinymce_button');

Um mehrere Schaltflächen zu entfernen kannst du einfach das Array $remove in Zeile 3 ergänzen.

3: $remove = array('underline','forecolor','pastetext');

Diese Zeile würde zusätzlich zu Unterstreichen noch die Standard Schaltfläche Textfarbe und Als Text einfügen entfernen.

TinyMCE Editor anpassen – Standard Schaltflächen hinzufügen

TinyMCE_AddButton

In diesem Beispiel zeige ich dir, wie du deinem WordPress Theme Standard Schaltflächen des TinyMCE Editors hinzufügen kannst.

Eine Liste aller Standard Schaltflächen findest du hier TinyMCE – Buttons/controls

Wenn du ein eigenes Theme oder ein Child-Theme eines Standard WordPress Themes verwendest, hast du in deinem Theme Ordner die Datei functions.php. Ist diese Datei in deinem eigenen Theme noch nicht vorhanden, legst du sie einfach in deinem Theme Ordner, in dem sich auch die styles.css befindet, an.

Standard Schaltflächen Hochgestellt u. Tiefgestellt hinzufügen

0:  <?php
1: 
2:  function nme_mce_buttons_2($buttons) { 
3:  /* ausgeblendete Standardschaltflächen einblenden */
4:  $buttons[] = 'superscript';
5:  $buttons[] = 'subscript';
6: 
7:  return $buttons;
8:  }
9:  add_filter('mce_buttons_2', 'nme_mce_buttons_2');
10:
11: ?>

In Zeile 2 beginnt die Funktion mit dem Namen nme_mce_buttons_2, die etwas später in Zeile 9 mit einem Hook des Typs Filter in deine WordPress Installation implementiert wird. mce_buttons_2 ist einer von vier möglichen Filter Hooks für den TinyMCE Editor (siehe WordPress Codex ).

Dem Array $buttons[] wird in Zeile 4 und 5 jeweils eine Standard Schaltfläche hinzugefügt.

In Zeile 7 wird der Rückgabewert der Funktion definiert, hier das Array $buttons.

Möchtest du zum Beispiel die Standard Schaltfläche für die Hintergrundfarbe deinem Editor hinzufügen, kannst du in Zeile 6 einfach folgende Zuweisung an das Array ergänzen:

6: $buttons[] = 'backcolor';

Ergebnis:

TinyMCE backcolor

NextGEN Gallery – Plugin für WordPress

Eine schönes Plugin um Galerien und Diashows auf WordPress Seiten zu erstellen und Bilder zu verwalten. Das Plugin macht einen aufgeräumten und strukturierten Eindruck. Der Funktionsumfang ist für ein kostenloses Plugin immens. Die Konfiguration ist intuitiv und erschließt sich an den meisten Stellen von selbst. Wer nicht weiter kommt findet in den FAQs im Regelfall die Antworten auf seine Fragen.

Es gibt Mais Baby (Slideshow einer NextGEN Galerie)

Das Plugin findest du auf der offiziellen WordPress Site : NextGEN Gallery

Header Image Slider für WordPress

Mit dem Plugin Header Image Slider für WordPress lässt sich im TwentyEleven-Theme sehr einfach eine Slider-Funktion nachrüsten. Du siehst diese Funktion im Kopf (Header) meiner Seite.

Das Plugin kannst du direkt unter Plugins installieren oder die Zip-Datei herunterladen und dann im Verzeichnis plugins unter wp-content entpacken.

Im Bereich Plugins muss dann nur noch das Plugin aktiviert werden.

Header Image Slider für WordPress

Über das Menü Design | Kopfzeile lassen sich die Einstellungen des Plugins durchführen.

Menue Kopfzeile

Mittels der Schaltfläche Settings kannst du die Einstellungen (Slider Options) für das Plugin konfigurieren.

Konfigurationsbereich

Konfigurationsmenue