CMSstash

WordPress: Vom Blog zum Website-Builder

Autor: Sebastian Schürmanns

WordPress ist derzeit mit einem Anteil von über 50 Prozent das marktbeherrschende CMS für Webseiten. Das im Jahr 2003 als Blog-Software gestartete Open-Source-Projekt ist inzwischen zu einem extrem flexiblen und erweiterbaren Content-Management-System gereift. Nicht nur Millionen von Blogs werden mit dem System betrieben, sondern auch unzählige Corporate Websites und viele ausgereifte Publishing-Projekte etablierter Verlage.

Screenshot der WordPress Startseite

Ein Geheimnis des Erfolges von WordPress: Die Community hat es verstanden, das System sehr flexible zu gestalten und gleichzeitig die Einstiegshürden für Autoren und für Code-Einsteiger extrem niedrig zu halten. Dadurch kann beinahe jeder mit WordPress zumindest irgend etwas auf die Beine stellen. Die berühmte 5-Minuten-Installation ist dafür ebenso ein Symbol wie die über 40.000 Plugins und die unzählbaren Themes. Mit seiner hohen Flexibilität und seinem Self-Service-Ansatz ähnelt WordPress heute in vieler Hinsicht einem selbstgehosteten Website-Builder, und mit diesem Konzept ist das System derzeit mehr oder weniger konkurrenzlos.

Die hohe Verbreitung, die Flexibilität und die spezifische Historie von WordPress haben allerdings auch ihre Schattenseiten. Die Qualität des Codes wird häufig kritisiert, immer wieder werden große Sicherheitslücken entdeckt und die eher chaotisch gewachsene Komplexität machen das System anfällig, teilweise inkonsistent und träge. Dennoch kann WordPress angesichts des enormen Erfolges mit seiner Strategie nicht ganz falsch liegen.

Die erste stabile Version von WordPress ist von seinem Gründer Matt Mullenweg im Januar 2004 veröffentlicht worden. 15 Jahre später steht WordPress mit der Version 5 und der Einführung des neuen Gutenberg-Editors möglicherweise an einem Scheideweg. Gutenberg bedeutet eine weitreichende Modernisierung und bietet viele Chanchen, allerdings erhöht der neue Editor auch die Anforderungen an Entwickler und greift tief in die Arbeitsgewohnheiten von Autoren ein.

WordPress für Autoren

WordPress hat eine funktionsreiche, vergleichsweise jedoch nutzerfreundliche Autoren- und Administrations-Oberfläche. Zu den Standard-Werkzeugen für Autoren und Administratoren zählen eine Medien-Bibliothek, ein mächtiges Kommentar-System und natürlich die üblichen Content-Features wie statische Seiten, dynamische Posts, Entwürfe, Versionierungen, Taxonomien und vieles mehr. Zusätzlich gibt es mit den Plugins, den Themes, den konfigurierbaren Menüs und den Theme-Widgets zahlreiche Features, die eine weitgehende Individualsierung der Webseite ermöglichen und WordPress den Charackter eines Website-Builders geben.

Screenshot des WordPress Dashboards

Aufgrund der hohen Flexibilität und der vielen Erweiterungsmöglichkeiten ist die Einrichtung einer Webseite mit WordPress nicht mehr so trivial wie früher. Um die Individualisierung der Seite zu erleichtern, hat sich WordPress unter dem Menü-Punkt "Customize" für einen Perspektiv-Wechsel entschieden, bei dem der Nutzer in eine Frontend-Vorschau gelangt und dort die Webseite im WYSIWYG-Modus mit einem Konfigurations-Menü am linken Rand anpassen kann. Der Modus ist ein Versuch, die gewachsene Komplexität des Systems in einer Ansicht zu bündeln, allerdings wirkt der Perspektiv-Wechsel auch ein wenig unvermittelt. Dennoch ist die Handhabung des Systems im Vergleich zu anderen CMS mit einer vergleichbar langen Historie recht intuitiv.

Neben diesem Frontend-Modus für die Konfiguration hat WordPress bei der Erstellung von Inhalten bislang auf einen klassischen HTML-Editor (TinyMCE) gesetzt. Mit der Version 5 steigt WordPress jedoch endgültig auf den neuen Editor Gutenberg um. Der Gutenberg-Editor ähnelt in der Handhabung modernen Editor-Tools, wie man sie von Squarespace oder auch von Slack kennt (unter WordPress.org findet man eine Online-Demo). Der Gutenberg-Editor folgt der bekannten Idee, dass eine Seite aus einer Vielzahl flexibler Content-Blöcke besteht.

Der Gutenberg-Editor von Wordpress

Die Meinungen über den Gutenberg-Editor driften stark auseinander. Grundsätzlich ist diese neue Form des Editings keine Erfindung von WordPress. Im Gegenteil: Vergleichbare Editoren haben sich in den letzten Jahren bei vielen modernen Systemen durchgesetzt und erfreuen sich allgemeiner Beliebtheit. Bei Gutenberg sind jedoch zahlreiche Arbeitsschritte wesentlich umständlicher geraten als nötig. Um beispielsweise eine Überschrift einzufügen muss der Autor erst einmal den Überschriften-Block suchen und dann die passende Überschrift auswählen. Das ist mindestens ein Klick zu viel, und in der täglichen Arbeit summieren sich überflüssige Klicks schnell bis an die Grenze des Erträglichen. Dass WordPress ausgerechnet bei einem Editor die primären Autoren-Bedürfnisse etwas aus den Augen verloren hat, ist verwunderlich, zumal die Autoren bislang die größten Fürsprecher für WordPress waren. Andererseits sind die aktuellen Schwächen von Gutenberg vergleichsweise leicht zu beheben.

Durch die etwas aufgehitzte Diskussion wird ein zentraler Aspekt von Gutenberg leider häufig übersehen. Denn der Editor ist keinesfalls nur ein Versuch, neue Trends und Technologien zu adaptieren. Vielmehr versucht WordPress mit Gutenberg eine zentrale Schwäche auszugleichen. Denn die meisten anderen Content Management Systeme der höheren Liga verfügen über konfigurierbare Eingabefelder. Diese Field-Builder ermöglichen eine individuelle Modellierung des Contents, sodass die Autorenoberflächen immer exakt auf die Erfordernisse der jeweiligen Webseite abgestimmt sind. So eine Content-Modellierung war mit WordPress bislang nur sehr begrenzt möglich. Durch das Fehlen eines Field-Builders musste jede noch so banale Anforderung mit einem ausufernden System aus Plugins, Widgets oder Konstrukten wie den Shortcodes und den Custom Fields realisiert werden. Mit Gutenberg wird sich das schlagartig ändern, denn abgesehen von den vielen Content-Typen, die der Editor per Default mitliefert, ist Gutenberg auch mehr oder weniger beliebig erweiterbar. Daher bleibt für WordPress zu hoffen, dass die Umstellung auf Gutenberg gelingt.

WordPress für Entwickler

WordPress startete als PHP-System mit einem prozeduralen Code-Stil. Mit der Zeit ist WordPress zwar in Teilen auf Objekt-Orientierung umgestiegen, im Gegensatz zu vielen anderen Systemen dominiert jedoch bis heute in vielen Bereichen ein eher prozeduraler Stil. Das hat dem CMS in der Vergangenheit viel Kritik eingebracht, allerdings auch die Einstiegshürden für Anfänger niedrig gehalten. Mit der Einführung des Gutenberg-Editors auf Basis von React.js werden sich die Anforderungen an Entwickler allerdings erhöhen.

WordPress ist dank der berühmten 5-Minuten-Installation schnell und einfach lauffähig. Man muss lediglich den WordPress-Ordner herunterladen, eine Datenbank erstellen (MySQL oder MariaDB), dann die WordPress-Datei wp-config-sample.php in wp-config.php umbenennen und die Datenbank-Zugänge in die wp-config.php eintragen. Zum Schluss besucht man seine-domain.com und füllt die Formulare für die Installations-Routine aus. Viele Webhoster bieten bei ihren Packeten bereits eine Installation per Knopfdruck an, sodass man sich selbst diese Routine sparen kann.

Vorsicht ist allerdings bei einer Migration von WordPress geboten, zum Beispiel von der lokalen Umgebung in die Live-Umgebung. Denn WordPress speichert zahlreiche Referenzen des Domain-Namens in der Datenbank, was sicherlich zu den eher schmutzigen Details des Systems gehört. In solchen Fällen hilft eine Anleitung für Migrationen.

Bei der Erstellung von Themes kommt gewöhnliches PHP und HTML zum Einsatz, eine eigene Template-Sprache wie beispielsweise Twig wird nicht verwendet. Auch bei den Themes ist der Code-Stil wieder überwiegend prozedural. Der typische WordPress-Loop sieht wie folgt aus:

<?php if ( have_posts() ) : ?>
    <div class="hfeed">
        <?php while ( have_posts() ) : the_post(); ?>
            <article id="post-<?php the_ID() ?>" class="<?php post_class() ?>">
               <h3><?php the_title(); ?></h3>
            </article>
        <?php endwhile; ?>
    </div>
<?php endif; ?>

Es gibt einen endlosen Katalog an Template-Tags, die ein Entwickler bei der Erstellung eines Themes nutzen kann. Für die Darstellung von Schlagwörtern gibt es beispielsweise nicht nur einen einzigen Template-Tag, sondern gleich ein ganzes Dutzend Tags, wobei die einzelnen Tags semantisch nur schwer zu deuten sind. Würde man ein Objekt oder eben ein Array aus Objekten erwarten, das einheitlich für die Darstellung einer Tag-Liste genutzt werden kann, muss man bei WordPress teilweise weitere Funktionen bemühen, um an die gewünschten Infos zu kommen. Beispiel:

$tags = get_tags();
foreach ( $tags as $tag ) {
    $tag_link = get_tag_link( $tag->term_id );
    $html = "<a href='{$tag_link}' title='{$tag->name} Tag' class='{$tag->slug}'>{$tag->name}</a>";
}

Genauso könnte man über ein anderes Template-Tag eine fertige HTML-Liste mit Schlagwörtern ausspucken:

<?php the_tags( '<ul><li>', '</li><li>', '</li></ul>' ); ?>

Für Einsteiger mag diese Auswahl hilfreich sein, um das gewünschte Ergebnis nur über Copy & Paste zu erreichen. Der ein oder andere Entwickler könnte sich über das WirrWarr jedoch grämen.

Plugins werden bei WordPress wie in fast allen Content Management Systemen über ein Event-System realisiert, allerdings ist auch das Event-System von WordPress prozedural aufgebaut. Es läuft bei WordPress unter dem Begriff Hooks, wobei zwischen "Action-Hooks" und "Filter-Hooks" unterschieden wird. Die Arbeit mit einem Event-System im prozeduralen Stil sieht zum Beispiel so aus:

function email_friends($post_ID) {
    $friends = 'bob@example.org,susie@example.org';
    mail($friends, "sally's blog updated", 
      'I just put something on my blog: http://blog.example.com');
    return $post_ID;
}
add_action( 'publish_post', 'email_friends' );

Mit der Funktion add_action wird das Plugin im Event-System registriert, als erstes Argument wird der Event-Name (bzw. Hook-Name) angegeben, anschließend folgt der Name der Plugin-Funktion.

Mit der Einführung von Gutenberg wird das bekannte Plugin-System um Gutenberg-Plugins erweitert. Bei der Erstellung eines neuen Gutenberg-Plugins bzw. eines neuen Gutenberg-Blocks beginnt der Entwickler wie gewohnt mit einem PHP-Plugin. Mit dem PHP-Plugin werden die JavaScript- und CSS-Dateien für das Gutenberg-Plugin geladen werden. Dazu stehen die neuen Funktionen enqueue_block_editor_assets zum Laden der Editor-Assets und enqueue_block_assets zum Laden der Frontend-Assets zur Verfügung.

Das eigentliche Gutenberg-Plugin wird dann in JavaScript erstellt. WordPress hat sich dabei bemüht, den Stil der üblichen WordPress-Plugins auf React zu übertragen. Dennoch wird man nicht darum herumkommen, sich mit der Funktionsweise von React wie Methoden oder Props auseinanderzusetzen. Ein Grundgerüst für ein Plugin kann zum Beispiel so aussehen:

registerBlockType( 'cgb/block-random-image', {
    title: __( 'Random Image' ),
    icon: 'format-image',
    category: 'common',
    keywords: [
        __( 'random' ),
        __( 'image' )
    ],
    edit: function( props ) {
        return (
            <div className={ props.className }>
                <h3>Random image block (editor)</h3>
            </div>
        );
    },
    save: function( props ) {
        return (
            <div>
                <h3>Random image block (front end)</h3>
            </div>
        );
    }
} );

Die Methoden save und edit sind relativ selbsterklärend und werden beim Speichern und beim Editieren eines Blocks aufgerufen. Ein echter Einstieg in die Gutenberg-Entwicklung sprengt hier den Rahmen. Ein guter Startpunkt ist jedoch das Gutenberg-Handbuch, das künftig wohl jeder WordPress-Entwickler kennen sollte.

WordPress für Nicht-Entwickler

WordPress hat sich schon immer an den Endnutzer gewendet und einen einfachen Einstieg garantiert. Mit einer schnellen Installation, mit unzähligen Themes und tausenden Plugins kann so gut wie jeder eine eigene WordPress-Seite betreiben und zu einem gewissen Grad individualisieren. Durch die riesige Auswahl und die gewachsene Komplexität kann eine WordPress-Seite in Eigenregie allerdings auch sehr viel Zeit in Anspruch nehmen.

Als Code-Einsteiger kann man über die Verwendung von Template-Tags relativ schnell Erfolge sehen und für so ziemlich jedes Problem irgendwo eine Hilfestellung finden. Allerdings verleitet das recht laxe System von WordPress auch schnell zu einem fahrigen Code-Stil und vermittelt nicht immer die aktuellen Best Practices. Mit der Einführung des Gutenberg-Editors werden in Zukunft recht tiefe Kenntnisse in JavaScript und dem React-Framework vorausgesetzt, sofern man die Möglichkeiten des neuen Editors ausschöpfen will.

Kosten

WordPress ist Open-Source und komplett kostenfrei. Zusätzlich gibt es natürlich einen riesigen Markt für Plugins, Themes und Dienstleistungen. Viele davon sind ebenfalls kostenlos, andere sind kostenpflichtig, wieder andere folgen dem Freemium-Modell: Man bekommt die Basis-Version kostenlos und zahlt dann für fortgeschrittene Funktionen.

Empfehlung: Wann macht WordPress Sinn?

In der Praxis wird mit WordPress nahezu alles gebaut: Vom simplen One-Pager über Shops bis hin zu kompletten Magazin-Projekten von etablierten Verlagen. Die marktbeherrschende Stellung, die enorme Flexibiltät und das breite Dienstleister-Angebot sind überzeugende Argumente. Hinzu kommt, dass sich viele Anwender und sogar Entwickler kaum mit Alternativen beschäftigen und schon aus Gewohnheit auf WordPress zurückgreifen.

Dennoch kann man den Einsatz von WordPress in vielen Fällen in Frage stellen:

Sinnvoll ist der Einsatz von WordPress bei dynamischen Publishing-Projekten wie Blogs und Magazinen, in vielen Fällen auch bei mittelkomplexen Business-Auftritten. Außerdem bietet WordPress genug Flexibilität, um auf einem vergleichsweise niedrigen Level verschiedene Konzepte auszuprobieren und nach Marktlücken zu suchen. Man kann mit einem Blog starten, im Erfolgsfall (mit viel Arbeit) einen Shop hinzufügen oder es mit einer Community versuchen. Hat man ein tragfähiges Konzept gefunden, kann man immer noch einen Technologie-Wechsel in Erwägung ziehen. Wer allerdings schon ein klares und funktionierendes Konzept hat und sich ohnehin auf Entwicklungs-Kosten einstellt, der dürfte in vielen Fällen mit anderen Systemen besser fahren.

Auch andere Experten lesen gerne gute Inhalte und freuen sich, wenn Du diesen Artikel zum Beispiel über Twitter teilst. Auf Twitter gibt es außerdem von @CMSstash tägliche Updates.

Zuletzt aktualisert: 30.11.2018