Ein Test mit Gutenberg und dem Theme Twentynineteen

Update: Der Releasetermin wurde um ein paar Tage auf den 27. November verschoben.

Die neue Version WordPress 5.0 ist für den 19. 27. November angekündigt. Die wichtigste Änderung ist bekanntlich der Gutenberg, der den alten TinyMCE-Editor ablöst. Es wird ebenfalls eine neues Theme geben, welches für den Einsatz von Gutenberg optimiert ist. Ich habe einfach mal beides für dieses Blog in Stellung gebracht, um beides zu testen und mich mit den Änderungen zu beschäftigen.

Mein erstes kleines Fazit: Der Gutenberg Editor funktioniert soweit recht gut und wirkte in meinen Tests stabil und nutzbar. Das Theme Twentynineteen ist sehr minimalistisch und ideal, um sich in erster Linie mit den Gutenberg-Blöcken auseinander zu setzen.

Code Syntax Highlighting

Im Gutenberg werden die Inhalte in Blöcken strukturiert, d.h. jeder Absatz, ein Bild, eine Galerie oder eben auch ein Stück Codebeispiel ist ein Block. Gutenberg hat also bereits einen Code-Block, allerdings ohne Code Syntax Highlighting. Sythax Highlighting möchte ich haben, damit der Code besser lesbar ist.

Auf GitHub habe ich ein WordPress Plugin gefunden, welches den Code-Block um das Highlighting ergänzt: https://github.com/mkaz/code-syntax-block

Quelle vom Bild: https://github.com/mkaz/code-syntax-block/blob/master/screenshot.png

Für mich persönlich lässt sich Code auf dunklen Hintergrund noch besser lesen und zusätzlich fand ich es angebracht, dass der Hintergrund über die volle Breite geht. Also habe ich mir einen Fork (https://github.com/steffenster/code-syntax-block) angelegt und dort die entsprechenden Änderungen durchgeführt.

<?php echo "Hello World"; ?>

Als ich das hatte, habe ich einfach mal jeden Beitrag durchgeklickt und überall dort, wo ein paar Codeschnipsel drin sind, den automatisch vom Gutenberg übernommenen Classic-Editor-Block in die entsprechend neuen Blöcke umwandeln lassen. Meistens ging das schon mit einem Klick recht gut, manchmal musste ich noch ein zwei mal mehr klicken, um die gewünschte Struktur umzusetzen.

Alles in allem denke ich, für alle, die WordPress in erster Linie als Blog benutzen, wird es kein Problem werden auf den neuen Editor zu wechseln. Alle, die irgendetwas darüber hinaus machen, sollten meiner Meinung nach einiges an Zeit einplanen. Das gute ist, diese Zeit muss man nicht unbedingt heute investieren. Es gibt die Möglichkeit einfach den Classic Editor auch ab WordPress 5.0 zu nutzen, in dem man sich das entsprechende Plugin installiert. Auf diese Weise kann man sich noch schön selbst aussuchen, wann man sich diese Zeit nehmen möchte. 

Shortcodes und Page Builder

Ich stecke in einem Dilemma und viele werden es kennen. Ich arbeite seit vielen Jahren mit WordPress. Ich nutze es auch schon lange nicht mehr als reines Blog-System, sondern querbeet für alles mögliche und ehrlich gesagt würde ich gern so weiter machen. Um es vorweg zu nehmen, ein Wechsel auf ein anderes System steht für mich nicht an, aber es gibt eine neue wichtige Nuss zu knacken.

Dass ich über die ganzen Jahre immer bei WordPress geblieben bin, hatte vor allem einen Grund. Es wurde immer weiter entwickelt und spannenderweise waren das immer mal wieder Entwicklungen, wie ich sie genau so auch brauchte.

Die Ansprüche sind aber weiterhin gewachsen. So bin ich aktuell dabei die Integration von BuddyPress besser zu verstehen, da ich in gleich mehreren Projekten Communityfunktionen brauche. Man merkt BuddyPress an, dass es eben doch nur angeflanscht ist, aber ich versuche damit zu dealen.

Noch größer ist aber die Herausforderung, die es mit sich bringt, dass Kommunikation heute immer mehr in Form von Kampagnen gedacht und umgesetzt wird. An dieser Stelle entsteht für mich ein ganz grundsätzliches Problem beim Thema Design. Hinter der Idee eines Blog steht ein sehr iterativer Prozess. Das heißt, ich kann auf der technischen Ebene Design und Inhalt wunderbar voneinander trennen, was in WordPress über die Themes auch wunderbar umgesetzt wurde. Ein Blog lebt vor allem davon, dass es regelmäßig etwas Neues gibt. Das Design zahlt dabei weniger in die Vermittlung des Inhalts ein, sondern eher in den gleichzeitig wirkenden Transport der jeweiligen Marke, die dahinter steht.

Wenn man sich aber mal die modernen Kampagnen-Seiten anschaut, passiert da etwas anderes. Layout und Design haben zu allererst die Aufgaben den Transport des Inhaltes zu unterstützen und wenn es gut ist, geht es sogar darum eine Dramatik zu erzeugen, die den Inhalt also erst richtig in Szene zu setzt. Im Endeffekt ist das also das Gegenteil von einem Theme, das jeden Inhalt auf jeder Seite mehr oder minder gleich in Szene setzt, der individuellen Idee, wegen mir der einer Landingpage, gar nicht gerecht werden kann.

Auf der Suche nach einer sinnvollen Lösung, die am Ende auch nicht nur ich, sondern auch andere im Team verstehen, habe ich zuerst versucht etwas über die Shortcodes in WordPress zu machen. Das Problem an den Shortcodes allerdings: ein Design-Prozess – und davon reden wir schließlich – ist auch in diesem Falle etwas visuelles und damit möchte ich die Shortcodes mindesten auch im Visual Editor anwenden. Genau das ist aber alles andere als einfach.

Für mich daher kein Wunder, dass die ganzen Page Builder, die in der letzten Zeit aufploppten und genau dieses Kampagnen-artige Bauen von Websites unterstützen, eben immer noch einen zusätzlichen Editor neben dem vorhandenen bauen oder auch gleich ins Frontend gehen.

Wie also jetzt schon erwähnt, bin ich jetzt tatsächlich bei einem Page Builder gelandet. Nicht weil die so cool sind, sondern für eine bestimmte Anwendung ihre Berechtigung erlangt haben. Ich habe mir ein paar von den vorhandenen Plugins anschaut und bin aktuell beim Live Composer. Oder sagen wir mal, das ist, so wie ich das bisher sehe, der sinnvollste Ansatz.

Was ich insgesamt an dieser Entwicklung schwierig finde, ist die zusätzliche Abhängigkeit, die ich damit eingehe. WordPress hat es durch seine Popularität bitter nötig, dass man immer dran bleibt, das System up-to-date zu halten. Bei WordPress selbst, funktioniert das sehr gut. Zusätzlich versuche ich nicht nur aus Gründen der Performance und Übersichtlichkeit, sondern auch aus Gründen der Sicherheit wirklich nur gut gepflegte Plugins zu nutzen und eben nur solche, die ich auch wirklich brauche.

Der Live Composer ist Open Source, gibt mir also die Möglichkeit, mich mit einzubringen. Und letztlich sehe ich das sogar als Bedingung, die ich an mich selbst stellen muss. Denn wenn man einmal angefangen hat, mit einem dieser Page Builder seine Seiten zu bauen, kann man diesen nicht einfach abschalten oder gegen einen anderen austauschen. Ganz oder gar nicht.

So richtig entschieden habe ich mich daher noch nicht. Ich bin noch am Sichten und Testen. Habt ihr schon Erfahrungen mit dem Page Buildern gemacht oder habt ihr für euch einen anderen Favoriten gewählt? Schreibt es mir in die Kommentare. 🙂

Reaktivierung dieses Blogs

Kurz und knapp: Seit etwas mehr als einem halben Jahr arbeite ich immer häufiger in der Rolle des Webentwicklers und die Aufgaben werden naturgemäß immer komplexer.

Letztlich heißt das, dass ich mich immer mehr mit Fragestellungen und Lösungen beschäftige, die auch für mich neu sind. Lernen ist geht einfacher gemeinsam als allein und auch sonst ist mir ein Außenhirn immer lieber als alles immer im eigenen Kopf mit mir herum tragen zu müssen.

WordPress Plugin: Open Graph Image Tag

Die aktuellen Änderungen von Facebook machen es notwendig.
Facebook generiert seit ein paar Tagen echte Einträge auf meiner Facebook-Wall, wenn ich auf irgendeiner Website den Like-Bottom drücke. Dabei werden auch diese kleinen Bilder mit generiert, die üblicherweise schon immer dann erschienen sind, wenn ich einen Link geteilt habe. Leider sucht sich der Algorithmus von Facebook immer das falsche Bild aus, es sei denn, es gibt im Header des HTML-Bereiches eine Angabe zum Open Graph Tag – „og:image“.

Ich hatte hier bereits vor einer ganzen Weile mal eine Lösung gepostet, hier mal der Code, wie daraus ein Plugin werden kann.
Es würde mich freuen, wenn sich dem mal jemand annehmen würde und ein vollwertiges Plugin draus macht.

Es setzt auf das Plugin get_the_image von Justin Tadlock, welches ebenfalls installiert werden muss. Beides zusammen gibt dann die Referenz über den Open-Graph-Image-Tag z.B. auf das erste Bild im Post oder das Artikelbild. Wer daraus ein leicht zu handhabendes Plugin macht, bekommt von mir ein persönliches Lob ausgesprochen, diese falschen Bild in meinem Stream nerven mich doch zu sehr! 🙂

<?php
/*
Plugin Name: Open Graph Image Tag
Plugin URI: http://koffeinbetriebenes.net/
Description: Fügt einen META-Tags og:image in den Header ein. Für die Ausgabe des richtigen Bildes im automatisierten Facebook-Sharing. Benötigt das Plugin "get_the_image" von Justin Tadlock
Version: 0.1
Author: Steffen Peschel, Du
Author URI: http://steffenpeschel.de/
Min WP Version: 3.0
Max WP Version: 3.0
*/

// Hier URL zum Standardbild eingeben
$URL_to_logo = "";

// Filter im Plugin 'get_the_image'
if ( function_exists( 'get_the_image' ) ) add_filter( 'get_the_image', 'sp_overwrite_image' );
function sp_overwrite_image ($image) {
	$pattern = '/src="([^"]*)"/';
	preg_match($pattern, $image, $matches);
	$src = $matches[1];
	unset($matches);
return $src;
}

// Display og:img <meta> tag
if(!is_admin()) add_action ('wp_head', 'sp_og_img');
function sp_og_img() {
	global $URL_to_logo;
	if (is_single()) {
		global $posts;
		if ( function_exists( 'get_the_image' ) ) {
			$img_url = get_the_image( array( 'echo' => false, 'size' => 'medium', 'default_image' => $URL_to_logo ) );
		} else { 
		$img_url = $URL_to_logo; 
		}
	} else { 
		$img_url = $URL_to_logo; 
	} 
echo "\n<meta property=\"og:image\" content=\"" . $img_url . "\" />\n";
}
?>

p.s. Wenn es das Plugin für diese Funktion schon gibt, auch gut. Ich verlinke das dann gern.

Twitter Button über Api-Call ohne Javascript oder iFrame

Standartmäßig wird der Twitter Button über Javascript eingebunden, alternativ gibt es die Möglichkeit ohne Javascript den Button über ein iFrame in Webseiten einzubinden. Aber auch das geht nicht ohne extra Ladezeit zu generieren. Hat man z.B. auf der Startseite die letzten 5 bis 10 Artikel und möchte auch dort schon zu jedem Artikel den Twitter Button anzeigen lassen, wird für jeden Button jeweils einmal eine komplette HTML-Seite geladen. Denn ein iFrame ist nichts anderes als eine Webseite in einer Webseite. Man kann also auch sagen, dass über eine solche Startseite nicht nur die eine eigene angezeigt wird, sondern gleich mal elf an der Zahl. Eigentlich eine ganz schlechte Wahl.

Über folgenden Tweet von Macx bin ich darauf aufmerksam geworden, dass das auch noch anders geht.

Gesucht, gefunden! Nicolas Gallagher beschreibt in seinem Blog wie man es macht. Aus Zeitmangel von mir leider noch ungetestet, klingt aber vielversprechend.
Custom Tweet Button for WordPress

How to create a custom Tweet Button for WordPress using the bit.ly and Twitter APIs. The HTML and CSS is completely customisable and there is no need for JavaScript. PHP is used to automatically shorten and cache the URL of a post, fetch and cache the number of retweets, and populate the query string parameters in the link to Twitter.

WordPress Plugin erweitert den Workflow für Kommentare

Auf WPCandy wurde jetzt das WordPress Plugin Highlighter vorgestellt, welches die Kommentarfunktion vom Textende direkt in den Text rückt. Eine ähnliche Idee hatte ich auch schon in meinem Artikel „Artikel kollaborativ erstellen“ beschrieben.

Markiert man mit dem Courser einen Text oder auch nur ein Wort auf der Seite, wird der Link “ergänzen” direkt neben dem markiertem Text eingeblendet. Klickt man diesen wird der markierte Text direkt als Zitat in das Kommentarformular kopiert und man hat sich superschnell auf eine Stelle im text bezogen.

Die Art der Einbindung von Twitter und Facebook halte ich ebenfalls für sehr anwenderfreundlich. Was mir bei der Umsetzung der Kommentarfunktion merkwürdig erscheint, ist die fehlende Intergration in die vorhandene Kommentarfunktion von WordPress. Die Highlight-Kommentare werden getrennt von den eigentlichgen WordPress-kommentaren verarbietet & dargestellt. Die Idee ist gut, aber ich würde mir das anderes wünschen.

Das jQuery Plugin Qicksand in Aktion

Anfang des Monats hatte ich drei Möglichkeiten vorgestellt das Sortieren von Inhalten mit jQuery zu animieren. Einer der drei, das jQuery Plugin Quicksand, habe ich jetzt selbst benutzt. Zum Einsatz kommt die Variante in welcher die Inhalte nicht nur neu sortiert werden, sondern vorher mittels jQuery-Funktion get() noch neu geladen werden. Durch das Nachladen konnte ich das Plugin komplett auf die normale WordPress Struktur anwenden. Animiert wird also komplett über Startseite, Archivseiten für Kategorien und Tags sowie die Single-Ansicht eines Artikels.

Leider läuft die Animation in meinem Firefox nur ruckelig, sehr viel schöner sieht es im Chromium Browser aus.

WordPress: Facebook das richtige Bild für “geteilte” Artikel mitteilen

Nachdem ich jetzt schon mehrmals darüber geschimpft habe, dass mir beim automatischen Artikel posten die falschen Bilder eingefügt werden, habe ich mich jetzt endlich mal damit beschäftigt und nachgelsesen, was man machen muss. Es ist relativ einfach, für Facebook gibt es einen extra meta-tag, der im Header eine Bildquelle angibt.

<meta property="og:image" content="<?php echo $img_url; ?>"/>

Hier mein Lösungsansatz, wie ich das in WordPress umsetze.
Für die Wahl der Bildquelle nehme ich mir das Plugin get_the_image von Justin Tadlock zu Hilfe. Über die Funktion get_the_image(); rufe ich das Plugin in meinem Theme auf. Das Plugin überprüft automatisch Custom Fields, Artkelbild oder auch den Artikel selbst nach Bildern, je nach Parametern wird eine dieser Bildquelle gewählt.

Auf Facebook wird in der Regel entweder die Startseite oder ein einzelner Artikel verlinkt. Also frage ich dies zunächst ab. Für die Startseite kann ich einfach ein generelles Bild, z.B. ein Logo, festlegen.

<?php
    if (is_single()) {
        global $posts; // da ausserhalb der Loop
        if ( function_exists( 'get_the_image' ) ) {
             $img_url = get_the_image( array( ... ) );
        }
    } else { 
        $img_url = get_bloginfo( 'template_url' ) . '/g/fbdefault.jpg'; 
    }
?>
<meta property="og:image" content="<?php echo $img_url; ?>"/>

Da das Plugin nicht nur die Bildquelle selbst ausgibt, muss ich die Ausgabe des Plugins noch über einen Filter Hook filtern. Folgende Zeilen kommen in die functions.php.

function overwrite_image( $image ) {
    $pattern = '/src="([^"]*)"/';
    preg_match( $pattern, $image, $matches );
    $src = $matches[1];
    unset( $matches );
    
    return $src;
}
add_filter( 'get_the_image', 'overwrite_image' );

Schlussendlich muss noch die Funktion get_the_image() mit ein paar Parametern gefüttert werden, damit das Ergebnis wie gewünscht erscheint.

'post_id' => $post->ID, // da ausserhalb der Loop
'echo' => false, // die Ausgabe verhindern
'default_image' => get_bloginfo( 'template_url' ) . '/g/fbdefault.jpg'
// Bildquelle festlegen, falls keine andere vorhanden ist

Noch einmal zusammen:

<?php
    if ( is_single() ) {
        global $posts; // da ausserhalb der Loop
        if ( function_exists( 'get_the_image' ) ) {
            $img_url = get_the_image( array( 
                'echo' => false, 
                'default_image' => get_bloginfo( 'template_url' ) . '/g/fbdefault.jpg',
            ) );
        }
    } else { 
        $img_url = get_bloginfo( 'template_url' ) . '/g/fbdefault.jpg'; 
    }
?>
<meta property="og:image" content="<?php echo $img_url; ?>"/>

Sicherlich kann man das auch noch schöner machen, aber es funktioniert und baut auf einem guten Plugin auf, welches z.B. auch das Cachen der Bildabfrage unterstützt.