Evolution Entwickler-Dokumentation

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.