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.

Datenbank Skript Suchen und Ersetzen

Das Database Search and Replace Script in PHP ist ein wunderbares Werkzeug um eine WordPress Installation auf eine andere Domain umzuziehen.

Download von interconnectit.com

Ich habe damit bereits mehrere WordPress Installation von eine Live Server auf eine lokale XAMPP Installation umgezogen. Nach dem Ändern der URL in der wp_options Tabelle und dem Ausführen des Skriptes solltest du noch daran denken, die Permalinks deiner Seite neu zu berechnen. Dazu gehst du einfach im Backend auf Einstellungen|Permalinks und aktualisierst ohne eine Einstellung zu verändern mit der der Schaltfläche Aktualisieren deine Permalinks.

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

LaTeX in WordPress

Vielleicht hat dich auch schon mal die Frage beschäftigt, wie du vernünftig mathematische Formeln und Funktionen in deinem WordPress Blog anzeigen kannst. Die Antwort könnte das Plugin WP LaTeX sein.

Du musst lediglich deinen LaTeX Code zwischen die Shorcodes $ latex ... $ setzen:

Beispiel: Der folgende Code erzeugt die abgebildete Formel. $ latex \left(\frac{x^2}{y^3}\right)&s=3$

\left(\frac{x^2}{y^3}\right)

oder für den Kreisumfang $ latex \displaystyle U=2\cdot r\cdot\pi$

U=2\cdot r\cdot\pi

Achtung! Bitte entferne in deinem Code das Leerzeichen zwischen dem $-Zeichen und dem Wort latex.

Daum Equation EditorEine Hilfestellung beim Erstellen der Formeln ist z.B. der Daum Equation Editor. Weitere Infos findest du in dem du auf das Symbol klickst (iTunes), oder im Chrome Web Store.