Ich stelle vor: Mein Evolution WordPress Framework

Das Evolution WordPress Framework

Andreas Hecht

ist WordPress-Entwickler und bietet dir WordPress-Sicherheit für deine Website. Zudem entwickelt er...

Ein neues WordPress Theme Framework hat das Licht der Welt erblickt und in diesem Beitrag möchte ich dir das Evolution WordPress Framework eingehend vorstellen. Für Theme-Entwickler bietet es eine Menge Vorteile. Blogger hingegen freuen sich über ein schickes Design für ihre Website.

Das Evolution WordPress Framework vorgestellt

Wir stellen vor: Das Evolution WordPress Framework

Ein Screenshot der Evolution Demo-Seite

Die Idee zu einem wirklich guten Framework zur Entwicklung neuer Themes trage ich schon lange mit mir herum. Einige Dinge waren mir bei der Entwicklung besonders wichtig:

  • Fehler bei Updates auszuschliessen
  • Absolute Performance
  • Vollständig basiert auf WordPress Action Hooks
  • Ein schickes Design
  • Automatische Updates wie bei WordPress
  • Eine optimale WooCommerce-Unterstützung
  • Mobile First Design
  • Optimale Child-Theme Unterstützung
  • Open Source und damit kostenlos

Ein Jahr Entwicklungszeit ließen alle Punkte Realität werden und darauf bin ich schon stolz. Entstanden ist ein wirklich schickes, schnelles und sicheres Theme, das ohne Probleme auf jeder Website auch als Blog-orientiertes Theme eingesetzt werden kann.

Doch die waren Vorzüge des Evolution WordPress Framework liegen unter der Haube.

Die Fehleranfälligkeit bei der Standard-Theme-Entwicklung

Wer kennt das Problem als Entwickler nicht: wenn bei der Entwicklung einer Website eine Parent- / Child-Theme-Kombination eingesetzt werden soll, steigt gerade bei größeren Umbauten die Fehleranfälligkeit bei Updates des Parent-Themes enorm an.

Vielfach werden Template-Dateien aus dem Parent-Theme in den Child-Theme Ordner gelegt und diese dann überarbeitet. Auch bei einer WooCommerce-Entwicklung ist das Überschreiben von Templates gängige Praxis.

Genau hier beginnt die Fehleranfälligkeit. Bei größeren Releases bemängelt WooCommerce dann veraltete Template-Dateien im Theme-Ordner, die mühsam wieder händisch angepasst werden müssen.

Doch diese Funktion besitzt ein normales WordPress-Theme nicht. Gibt es hier Konflikte, kann das nach einiger Zeit sogar zu weißen Seiten aufgrund schwerwiegender Fehler führen. Doch das muss nicht sein. Denn moderne Theme-Entwicklung geht anders!

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht

Evolution: Theme-Entwicklung mit WordPress Action Hooks

Eine Loop des Evolution WordPress Framework

Automattic macht es allen Entwicklern vor und nutzt im beliebten Plugin WooCommerce, sowie im bekannten Shop-Theme Storefront extensiv die WordPress Action Hooks.

Mein Evolution WordPress Framework basiert vollständig auf diesen Action Hooks, denn sie bieten unglaubliche Vorteile. Hast du erst einmal die Funktionsweise begriffen, wird du schnell zu der Überzeugung kommen, dass es keine bessere Möglichkeit zur Entwicklung von Themes gibt.

Schauen wir uns kurz die index.php von Evolution an:

Die Index.php vom Evolution WordPress Framework

Die Index.php von Evolution. Hooks ohne Prioritäten sind frei zu deiner Verfügung.

Übrigens ist Evolution sehr gut dokumentiert, jede Template-Datei verweist auf die genutzten Hooks und die Dateien, die du für die Überarbeitung ansehen musst.

Die index.php ist hier stellvertretend für alle Template-Dateien. Sie alle nutzen die Action Hooks – in diesem Fall do_action( 'evolution_do_main' );. Alle relevanten Funktionen sind in diesem einen Action Hook hinterlegt und werden durch ihn angezeigt.

Du fragst dich, wo der Vorteil liegt? Es gibt sogar gleich zwei davon.

  • Absolute Update-Sicherheit
  • Unendliche Möglichkeiten bei der Theme-Entwicklung

Schauen wir uns das genauer an:

Die Arbeit mit dem Evolution WordPress Framework

Wenn du ein Theme von vorne bis hinten auf jeder Seite komplett überarbeiten willst, brauchst du eine Menge Templates, die du aus dem Parent-Theme Ordner in den Child-Theme Ordner herüber schaufelst.

Ich brauche nur zwei Dateien dafür. Die functions.php und die style.css des Child-Themes. Mit diesen zwei Dateien baue ich ein komplettes Theme um. Und das ist gar nicht schwierig, das kannst du auch. Doch am wichtigsten ist die Sicherheit bei einem Theme-Update.

Die absolute Update-Sicherheit von Evolution

Wenn du ein Child-Theme auf der Basis eines Parent-Themes entwickelst, kommen zwei Versionen einer Funktion zum Einsatz. Zum einen die Funktion im Parent-Theme, zum anderen die überschriebene Version im Child-Theme. Das geht oftmals nicht gut.

Ich habe das schon erlebt. Evolution funktioniert komplett anders. Du brauchst keine Template-Dateien zu ändern, du hinterlegst einfach eine neue Funktion im Action Hook.

Ein Beispiel: die Änderung des Kommentar-Formulars

Die Template-Datei comments.php verweist dich auf den richtigen Ordner und die Datei mit den Funktionen, die in der comments.php verwendet werden.

Der Dateipfad wäre: /inc/structure/markup/evolution-comments.php

Dort findest du die folgende Funktion:

<?php

if ( ! function_exists( 'evolution_comment_form' ) ) :
/**
 * Outputs the custom comment form
 * 
 * @hooked into evolution_comments() action
 * 
 * @since 1.0.0
 */
function evolution_comment_form() {
    
    global $post;

    $commenter = wp_get_current_commenter();
    $req = get_option( 'require_name_email' );
    $aria_req = ( $req ? " aria-required='true'" : '' );

    comment_form(
        array(
            'comment_field' => '<textarea id="comment" class="plain buffer" name="comment" rows="7" placeholder="' . esc_attr( __( 'Please be kind. Thank You!', 'evolution' ) ) . '" aria-required="true"></textarea>',
            'fields' => array(
                'author' => '<div class="form-areas"><input id="author" class="author" name="author" type="text" placeholder="' . esc_attr( __( 'Your Name', 'evolution' ) ) . '" value="' . esc_attr( $commenter[ 'comment_author' ] ) . '" ' . $aria_req . '>',
                'email' => '<input id="email" class="email" name="email" type="text" placeholder="' . esc_attr( __( 'your@email.com', 'evolution' ) ) . '" value="' . esc_attr( $commenter[ 'comment_author_email' ] ) . '" ' . $aria_req . '>',
                'url' => '<input id="url" class="url" name="url" type="text" placeholder="' . esc_attr( __( 'Your Website', 'evolution' ) ) . '" value="' . esc_url( $commenter[ 'comment_author_url' ] ) . '"></div>'
            )
        ),
        $post->ID
    );
}
endif;

Der wichtige Hook ist ebenfalls in der Datei zu finden.

<?php

add_action( 'evolution_do_comments', 'evolution_comment_form', 40 );

Die 40 ist übrigens die sogenannte Priorität. Sie steuert die Anzeige der Funktion. Je kleiner die Zahl ist, desto früher wird die Funktion im Template angezeigt.

Funktionen killen und ersetzen

Wenn du jetzt das Kommentar-Formular anders aufbauen möchtest, löscht du zuerst die Original-Funktion. Durchladen, entsichern und die Funktion einfach killen. Für immer.

<?php

remove_action( 'evolution_do_comments', 'evolution_comment_form', 40 );

Da die Funktion nicht mehr existiert, kann es auch keine Probleme bei einem Update geben. Was nicht da ist, macht keine Probleme mehr.

Schreibe jetzt deine neue Funktion und beachte dabei die WordPress Coding Standards. Verwende keine veralteten WordPress-Tags und mache die Funktion vor allem »Pluggable«.

Pluggable Functions benutzen eine kleine Abfrage, bevor eine Funktion ausgeführt wird.

<?php

if ( ! function_exists( 'evolution_comment_form' ) ) :

// Deine Funktion

endif;

Übersetzt heißt das: Falls die Funktion noch nicht existieren sollte, dann führe die Funktion aus. So viel Sicherheit vor doppelten Funktionsnamen muss einfach sein.

Deine Funktion für das Kommentar-Formular würde also so aussehen:

<?php

if ( ! function_exists( 'dein_kommentar_formular' ) ) :
/**
 * Outputs the custom comment form
 * 
 * @hooked into evolution_comments() action
 * 
 * @since 1.0.0
 */
function dein_kommentar_formular() {
    
// Deine neue Funktion
}
endif;

Nun fügst du deine Funktion an den selben Platz, den die alte Version hatte, bevor sie so früh verstarb 🙂

<?php

add_action( 'evolution_do_comments', 'dein_kommentar_formular', 40 );

Jetzt wird dein neues Kommentar-Formular angezeigt und es kann bei einem Update des Parent-Themes zu keinerlei Problemen mehr kommen. Es existiert ja nur noch deine Funktion.

Auf diese Weise kannst du jede Funktion und jedes Content-Markup ganz einfach austauschen ohne Probleme befürchten zu müssen. Und vor allem: ohne eine einzige Template-Datei anzufassen. Du musst nur die korrekten Prioritäten beachten, damit die Darstellung stimmt.

Zusätzliche Funktionen in die Action Hooks einfügen

Screenshot der single.php des Evolution WordPress Framework

Screenshot der single.php des Evolution Framework

Falls du zusätzliche Funktionen in die einzelnen Templates einfügen möchtest – zum Beispiel in die single.php – dann geht auch das sehr einfach. Verschaffe dir einen kurzen Überblick über die Prioritäten und erstelle dann deine Funktion. Belegt sind die Prioritäten 5, 10 und 30.

Vor der Loop hier im Beispiel kannst du sie mit der Priorität 8 einfügen. Dann wird sie nach dem öffnenden Markup und vor der eigentlichen Loop angezeigt. Willst du sie nach der Loop anzeigen, dann hake sie mit einer Priorität zwischen 11 und 29 ein.

<?php

    if (!function_exists( 'deine_funktion' ) ) :
/**
 * Eine zusaetzliche Funktion in der Anzeige der single.php
 * 
 * @hooked evolution_do_single()
 */
function deine_funktion() {

    // Deine Funktion - angezeigt nach der eigentlichen Loop mit Prioritaet 15
    // Mit Prioritaet 8 erfolgt die Anzeige vor der Loop
}
add_action( 'evolution_do_single', 'deine_funktion', 15 );
endif;

Neue Templates erstellen geht ebenfalls sehr einfach

Selbstverständlich kannst du auf diese Weise auch vollkommen neue Templates entwickeln. Zum Beispiel für eine statische Startseite. Erstelle eine neue Template-Datei mit dem Namen template-frontpage.php. Füge folgendes hinein:

<?php /* Template Name: Startseite */


/**
 * Hier kannst du alle Funktionen einhaken
 */ 
do_action( 'evolution_do_frontpage' );

Die Inhalte fügst du nun über die functions.php deines Child-Themes ein. Mit den Prioritäten steuerst du die Anzeige. Beginne mit dem öffnenden Markup. Willst du das Markup von Evolution verwenden, dann sieht dein Hook so aus:

<?php

add_action( 'evolution_do_frontpage', 'evolution_top_markup', 5 );

Danach käme vielleicht eine Funktion oder Loop, die die Priorität 10 bekäme und so weiter… Am Ende fügst du dann das schließende Markup ein.

Die vergebenen Hooks findest du hier: /inc/structure/evolution-hooks.php.

Auf diese Weise könntest du den kompletten Inhalt des Parent-Themes ohne jedes Update-Problem austauschen. Bestehende Websites würden einfach nur anders angezeigt werden. Cool, oder?

Die Performance des Evolution WordPress Framework

Evolution wurde auf absoluten Speed entwickelt, denn Google und deine Besucher mögen keine lahmen Websites. Eine Optimierung auf richtig schnelle Ladezeiten fängt bereits beim Code des Themes an.

Das ist auch der Flaschenhals vieler »Multi Purpose Themes«. Bedingt durch die Funktionsvielfalt, die in den meisten Fällen nicht mal annähernd genutzt wird, bläht sich der Quellcode extrem auf und es werden Dutzende von Style- und Script-Dateien geladen.

All das macht eine Website langsam. Evolution ist auf das Wesentliche reduziert. Wer mehr möchte, installiert dementsprechende Plugins. Das bietet auch bei einem Theme-Wechsel den Vorteil, dass die gewohnten Funktionalitäten immer noch vorhanden sind.

Butter bei die Fische: Evolution im Speed-Test

Die Ausgangslage:

  • Eine frische Installation ohne verlangsamende Plugins (nur Yoast SEO, kein Caching Plugin!)
  • Die Nutzung einer optimalen .htaccess Datei
  • Die Nutzung des AH Clean Code Plugins (schaltet Header-Links, Embeds, Query Strings und Emojis ab)

Das Ergebnis ist eindeutig:

Der Evolution WordPress Framework SpeedTest

Gemessen wurde der zweite Durchgang.

Evolution WordPress Framework: WooCommerce-Support

Was wäre ein Theme-Framework ohne eine Unterstützung des beliebten e-Commerce Plugins WooCommerce. Auch WooCommerce funktioniert übrigens mit Action Hooks. Es gibt also keinerlei Veranlassung die Templates des Plugins in das Child-Theme zu kopieren, um sie zu überschreiben. Denn genau das ist immer wieder die Grundlage für Probleme mit WooCommerce.

Dabei kannst du ganz einfach bestehende Funktionen des Plugins löschen und durch eigene ersetzen.

Beipiel WooCommerce Sidebar:

In den beiden meist kopierten Template-Dateien von WooCommerce – archive-product.php und single-product.php – findest du den folgenden Action Hook:

woocommerce-sidebar

Gleichzeitig siehst du die Funktion, die in den Hook eingehakt ist. Das ist die Grundlage für die folgenden Arbeiten. Registriere nun eine neue Sidebar für Widgets und nenne sie sinnigerweise »WooCommerce Sidebar«. Vergebe die ID »woocommerce«.

<?php

if (!function_exists( 'evolution_woo_sidebar_init' ) ) :
/**
 * Eine neue Sidebar nur für die Shop-Seiten registrieren
 */
function evolution_woo_sidebar_init() {

    register_sidebar( array(
        'name'          => esc_html__( 'WooCommerce Sidebar', 'evolution' ),
        'id'            => 'woocommerce',
        'description'   => esc_html__( 'Dies ist die Sidebar für deinen WooCommerce Shop.', 'evolution' ),
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget'  => '</aside>',
        'before_title'  => '<h4 class="widget-title">',
        'after_title'   => '</h4>',
    ) );
}
add_action( 'widgets_init', 'evolution_woo_sidebar_init' );
endif;

Erstelle eine neue Datei namens sidebar-woocommerce.php. Der Inhalt der Datei könnte so aussehen:

<?php
/**
 * The sidebar containing the woocommerce widget area.
 *
 * @package Evolution Framework
 */
if (   ! is_active_sidebar( 'woocommerce' ) ) {
    return;
}
?>
<?php // Wichtig: die HTML-Container kopierst du aus deiner sidebar.php ?>
<div id="secondary" class="sidebar-area" role="complementary">

    <div class="normal-sidebar widget-area">

        <?php if ( is_active_sidebar( 'woocommerce' ) ) : ?>

        <?php dynamic_sidebar( 'woocommerce' ); ?>

        <?php endif; ?>

    </div><!-- .normal-sidebar -->

</div><!-- #secondary -->

Jetzt wird es ernst: Kille die WooCommerce-Funktion

<?php

remove_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10 );

Nun hakst du deine neue Sidebar in den woocommere_sidebar Hook ein.

<?php

/**
 * Get the spezial sidebar for the WooCommerce Templates
 * 
 * @overrides the woocommerce function
 * 
 */
function evolution_woocommerce_sidebar() {
    
    get_sidebar( 'woocommerce' );
    
}
add_action( 'woocommerce_sidebar', 'evolution_woocommerce_sidebar', 10 );

Jetzt hast du eine neue Sidebar auf allen WooCommerce-Seiten, ohne das du eine Template-Datei anfassen musstest. Das funktioniert mit allen WooCommerce-Funktionen. Schau dir die Templates an (woocommerce/templates/), suche den Action Hook und tausche die Funktionen einfach aus.

Übrigens: die Seiten Warenkorb und Kasse sind keine WooCommerce-Seiten, sondern normale WP-Seiten. Das bedeutet, das auf diesen Seiten die normale Blog-Sidebar angezeigt wird. Das kannst du entweder mit dem nosidebar.php Template oder aber dem Plugin AH Display Widgets ändern. Das Plugin erlaubt dir die Beeinflussung der Anzeige von bestimmten Widgets auf bestimmten Seiten.

  |

Fazit

Die Entwicklung moderner WordPress-Themes war noch nie einfacher. Update-Sicherheit, Übersichtlichkeit und unendliche Möglichkeiten kommen im Evolution WordPress Framework zusammen. Dazu kommt noch der heftige Speed. Was will man mehr?

Andreas Hecht

ist WordPress-Entwickler und bietet dir WordPress-Sicherheit für deine Website. Zudem entwickelt er WooCommerce Shops mit Ladezeiten von unter einer Sekunde. Er schreibt seit 2012 für Dr. Web. Auf seinem Blog veröffentlicht er unter anderem nützliche WordPress-Snippets.

Hinterlasse einen Kommentar

14 Kommentare auf "Ich stelle vor: Mein Evolution WordPress Framework"

Benachrichtige mich zu:
avatar
Sortiert nach:   neueste | älteste | beste Bewertung
Mario
Gast

Hallo,

kann ich die Bilder in ´Beiträgen ausblenden?

Anna Blume
Gast

Vielen Dank für das schöne Theme. Das sieht schon mal sehr gut aus und Deine Beschreibung macht mich sehr neugierig.
Schon bevor ich es eingehend gestested habe, möchte zwei Dinge loben:
Dafür was dieses Theme alles kann, ist es erfreulich klein geraten.
Was ich selten sehe und worüber ich mich freue ist, dass für Posts und nicht nur für Sites ein No-Sidebar möglich ist.
Wenn ich jetzt für Posts noch fullwidth finde, ist es perfekt.

Sebastian
Gast

Hallo Andreas,

der Link zur Demo funktioniert auf meinem iPhone 6 (iOS 8.1) nicht. Check das doch bitte mal. Ansonsten bin ich sehr gespannt auf dein Theme.
Danke schonmal dafür 🙂

Mario Brömme
Gast

Hallo Andreas,

vielen Dank für das super Theme. Nutze es für meinen Blog und muss sagen, es ist das Beste was ich bisher hatte. Es ist wirklich sehr schnell.
Verfolge deine Artikel seit Monaten oder sogar länger. Immer wieder sehr hilfreich.
Etwas scheint aber bei mir nicht zu funktionieren…das Header-Bild. Vielleicht hast Du ein Rat für mich.

Gruß…Mario

wpDiscuz