Verwendung von Template-Engines zur Optimierung der WordPress-Theme-Entwicklung

Das Folgende ist ein Gastbeitrag von Charlie Walter. Charlie hat schon früher für uns geschrieben, wenn er nicht gerade mich extrem neidisch macht. Nun ist er zurück, um etwas völlig anderes zu teilen. Wir werden uns Methoden ansehen, die er für die Optimierung von WordPress-Theming mit Template-Engines gelernt hat.

Template-Engines sind fantastisch! Sie machen komplexe Programmiersprachen viel einfacher zu schreiben und beinhalten Funktionen, die den Entwicklungsprozess rationalisieren.

WordPress ist eine natürliche Umgebung, um zu sehen, wie Template-Engines funktionieren, nicht nur, weil es vorlagenbasiert ist, sondern auch wegen seiner Abhängigkeit von PHP. WordPress selbst wird für seine niedrige Einstiegshürde für Content-Publisher gelobt, aber das Wissen über PHP, das für starke Anpassungen erforderlich ist, macht es zu einer etwas höheren Hürde für Entwickler, die über grundlegendes Theming hinaus in das Spiel einsteigen wollen.

Wie Template-Engines funktionieren

Im Grunde ist eine Template-Engine ein Paket, das in ein Projekt integriert wird und es uns ermöglicht, eine Sprache in eine andere zu kompilieren.

Ich vergleiche es mit Sprachkenntnissen. Ja, Sie haben vier Jahre Spanischunterricht in der High School besucht und können es vielleicht auf einem guten Niveau lesen und schreiben, aber es ist immer noch sehr schwierig, einen komplexen Satz von Wörtern zusammenzustellen. Wenn Sie eine App auf Ihrem Handy hätten, die Ihr Spanglish nimmt und es in wunderschön komponiertes Spanisch übersetzt, wäre das vergleichbar mit dem, was eine Template-Engine für PHP tut.

Sehen wir uns das einfache Beispiel des WordPress-Loops in Vanilla-PHP an

<?php if ( have_posts() ) : ?>
  <?php while ( have_posts() ) : the_post(); ?>
    <article>
      <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
      <?php the_excerpt(); ?>
    </article>
  <?php endwhile; ?>
<?php else : ?>
  <p><?php _e( 'Sorry, no posts matched your criteria.' ) ?></p>
<?php endif; ?>

…und das Gleiche, aber in Twig

{% for post in posts %}
  <article>
    <h1>{{post.title}}</h1>
    {{ post.excerpt }}
  </article>
{% else %}
  <p>{{ __('Sorry, no posts matched your criteria.') }}</p>
{% endfor %}

Wenn das keinen fröhlichen, rutschenden Pinguin verdient, dann weiß ich nicht, was.

Unterschiedliche Template-Beispiele für WordPress

Ich werde mehrere Template-Engines durchgehen, die verwendet werden können, um die WordPress-Theme-Entwicklung noch unterhaltsamer zu gestalten. In jedem Fall geben wir einen Überblick über die Template-Engine selbst, ein Beispiel dafür, wie sie mit dem WordPress-Loop verwendet werden kann, und dann Ressourcen, um sie in WordPress zu integrieren.

• Jade-PHP
• Jade
• Mustache
• Timber
• Timber + Jade

---

Jade-PHP

Jade-PHP ermöglicht es, PHP in Jade-Dateien zu schreiben.

Warte! Was ist Jade?

Jade ist eine saubere, leerzeichenabhängige Syntax, die für sich genommen eine HTML-Template-Engine ist. Also, zum Beispiel, das hier…

.my-class
  a.btn(href="http://charliejwalter.net/") I'm a link

…kompiliert zu diesem

<div class="my-class">
  <a class="btn" href="http://charliejwalter.net/">I'm a link</a>
</div>

Während Jade selbst eine Abstraktion von HTML ist, ermöglicht Jade-PHP uns, PHP neben HTML zu abstrahieren, was es zu einer idealen Lösung für die WordPress-Theme-Entwicklung macht.

Die Einrichtung

WordPress-Vorlagen werden in .jade-Dateien geschrieben und dort gespeichert. Mit Grunt und dem grunt-jade-php Task können wir Jade-Dateien (.jade) in die PHP-Dateien (.php) kompilieren, die WordPress benötigt, um seine Arbeit zu tun.

Die Jade-Vorlagen haben eine Eins-zu-eins-Beziehung zu den WordPress-Vorlagen. Mit anderen Worten, wo WordPress eine page.php-Datei für die Standard-Seitenvorlage hat, würden wir eine page.jade-Datei in unser Verzeichnis aufnehmen, die unser Grunt-Task in die PHP-Datei übersetzt. WordPress wird dann die kompilierten PHP-Dateien so verwenden, als hätten wir das PHP darin geschrieben, obwohl wir nie PHP anfassen mussten. Ziemlich cool!

Hinweis: Diese PHP-Dateien müssen dort sein, wo Sie sie normalerweise ablegen.

Ein Nachteil ist, dass wir unsere Jade-Dateien lokal zu PHP kompilieren müssen, und dabei erstellt Jade-PHP für jede Vorlage ein vollständiges HTML-Dokument anstatt WordPress-Methoden wie get_header() und get_template_part() zu verwenden, um Vorlagen wiederzuverwenden. Das ist kein Problem für die Wartung, aber in Bezug auf die Leistung würden wir Code laden, der gecached werden könnte.

Die Art und Weise, wie ich meine Dateien persönlich strukturiere, ist, sowohl source als auch compiled Ordner in meinem Projekt zu erstellen, um alle Quelldateien von den kompilierten Versionen zu trennen. Der compiled Ordner ist das, was WordPress tatsächlich als Theme verwenden wird. Dateien, die nicht kompiliert werden müssen, müssen jedoch in diesen kompilierten Ordner kopiert werden. Dies kann mit grunt-contrib-copy erfolgen. Es bedeutet auch, dass wir diese Dateien watch können und uns mit livereload verbinden können, um unsere Arbeit unterwegs zu aktualisieren!

├── source
	├── header.jade
	├── index.jade
	├── footer.jade
	├── functions.php
	├── style.css
├── compiled
	├── header.php
	├── index.php
	├── footer.php
	├── functions.php
	├── style.css
├── Gruntfile.coffee
└── package.json

WordPress wird versuchen, den source Ordner als weiteres Theme zu lesen, was eine Fehlermeldung wie "Template is missing" hervorrufen wird, da es nicht alle benötigten Dateien zum Erstellen eines vollständigen Themes finden kann. Nicht ideal, obwohl man theoretisch die Quelldateien im Deployment-Prozess ausschließen könnte, um solche Meldungen zu verhindern.

Eine Sache, die man über Jade-PHP beachten sollte, ist das Fehlen einer spezifischen Syntaxhervorhebung für Atom, Sublime oder TextMate, zumindest zum Zeitpunkt des Schreibens. Das könnte für manche ein Deal-Breaker sein.

Der WordPress-Loop in Jade-PHP

:php
  if (have_posts()) :
    while (have_posts()) : the_post();

      article
        h1: a(href= the_permalink())= the_title()
        != the_excerpt()

    endwhile;

Jade-PHP Starter Theme

Laden Sie ein Jade-PHP-Starter-Theme für WordPress herunter.

Jade

Ich finde das Erstellen von WordPress-Themes immer schrecklich unordentlich, da es schwierig ist, PHP und HTML im selben Markup gut aussehen zu lassen. Wir können Jade für sich allein nutzen, um dabei zu helfen. Der Hauptunterschied zu Jade-PHP ist hier, dass unsere Assets serverseitig kompiliert werden. Das bedeutet, dass keine lokale Kompilierung erforderlich ist, da sie "on the fly" stattfindet, wenn auf die Vorlagen zugegriffen wird. Außerdem löst das das Problem, dass Vorlagen in vollständige HTML-Dokumente kompiliert werden, und ermöglicht uns, die fortgeschritteneren Template-Funktionen von Jade zu nutzen, wie z.B. das Erweitern einer Vorlage in eine andere.

Die Einrichtung

Zuerst benötigen wir den Jade-Compiler für PHP, der im Jade-Repository auf GitHub unter dem Abschnitt "Implementations in other languages" zu finden ist.

Dann erstellen wir die Datei composer.json in unserem Theme-Ordner

{
  "require": {
    "path-to-project/jade-php": "*"
  }
}

Führen Sie nun die Composer-Installation aus. Wenn Ihre Composer-Installation global ist, wäre das

composer install

Oder, wenn Composer lokal im Projekt installiert ist

php bin/composer install

Nun benötigen wir die folgenden Dateien in unserem Theme-Verzeichnis

• compiler.php
• page-data.php
• layout.jade
• index.jade
• functions.php
• index.php

Hinweis: Alle WordPress-Themes erfordern ebenfalls style.css, aber wir lassen es aus dieser und anderen Listen weg, da es keinen Einfluss auf den Einstieg in unsere Template-Engines hat.

compiler.php

Diese Datei kümmert sich darum, den Jade-Compiler in Ihre Vorlagen einzubinden, indem sie ihn überall anfordert.

<?php
  require_once('vendor/autoload.php');
  use Jade\Jade;
  return new Jade();
?>

page-data.php

Dies ist für gängige Seitenvariablen, die wir zur Wiederverwendung verfügbar machen möchten.

<?php

$data = array(
  'wp_title' => wp_title('', false),
  'wp_head' => output_buffer_contents(wp_head),
  'wp_footer' => output_buffer_contents(wp_footer),

  'template_directory_uri' => get_template_directory_uri(),
  'stylesheet_url' => get_bloginfo('stylesheet_url'),
  'home_url' => esc_url( home_url( '/' ) ),
  'blog_title' => get_bloginfo(),

  'pages' => get_pages(),
  'categories' => get_categories('show_count=0&title_li=&hide_empty=0&exclude=1')
);

// To compensate for WordPress not providing a url for each post
foreach ( $data['pages'] as $page ) {
  $page->permalink = get_permalink($page->ID);
}

// To compensate for WordPress not providing a url for each category
foreach ( $data['categories'] as $category ) {
  $category->link = get_category_link( $category->term_id );
}

return $data;

?>

layout.jade

Das Erweitern von Vorlagen in andere ist ein großer Vorteil von Jade. Dies ermöglicht uns, eine Hülle zu erstellen, die als primärer Baustein für das Layout unserer Website dienen kann, und diese dann zu modifizieren, wenn sie erweitert wird.

Dies könnte so ziemlich alles sein, aber es könnte so aussehen

doctype
html(lang='en')

head
  meta(charset="UTF-8")
  title= wp_title('')
  link(rel="stylesheet" type="text/css" href= bloginfo('stylesheet_url') media="screen")
  - wp_head();

body

  header
    a(href= esc_url( home_url( '/' ) ))= get_bloginfo()
    - get_template_part('nav')

  block content

  :php

    get_sidebar();
    wp_footer();

functions.php

Die meisten WordPress-Themes verwenden eine functions.php-Datei. In diesem Zusammenhang fügen wir eine Funktion hinzu, um das Fehlen einer get_wp_head()-Methode auszugleichen

<?php

function output_buffer_contents($function, $args = array()){
  ob_start();
  $function($args);
  $contents = ob_get_contents();
  ob_end_clean();
  return $contents;
}

?>

index.php

Dies ist die primäre Vorlage oder Homepage in den meisten WordPress-Theme-Verzeichnissen. Hier ist ein funktionierendes Beispiel für index.php, das den Jade-Compiler und Seiten-Daten enthält

$compiler = include('compiler.php');
$data = include('page-data.php');

$data['posts'] = array();

if ( have_posts() ) :

  while ( have_posts() ) : the_post();

    array_push($data['posts'], array(
      'permalink' => get_permalink(),
      'title' => get_the_title(),
      'excerpt' => get_the_excerpt()
    ));

  endwhile;

  $data['next_posts_link'] = get_next_posts_link('Older');
  $data['previous_posts_link'] = get_previous_posts_link('Newer');

endif;

echo $compiler->render('index', $data);

Hier wird der vertraute WordPress-Loop verwendet, aber anstatt das Markup innerhalb des Loops zu rendern, fügen wir Eigenschaften zu einem posts-Array auf der Seite $data hinzu, wo Jade kompilieren und den Inhalt populieren soll.

Der WordPress-Loop in Jade

Hier ist der WordPress-Loop in Jade

each post in posts
  article
    h1
      a(href= post['permalink'])= post['title']
    != post['excerpt']

Jade Starter Theme

Laden Sie ein Jade-Starter-Theme für WordPress herunter.

Mustache

Ich muss Sie fragen: Möchten Sie weniger Logik in Ihren Vorlagen? Mustache bietet einen logikfreien Ansatz für das Templating, der Sie zwingt, die Logik von den Vorlagen zu trennen, was sie effektiv entmüllt. Bonza!

Die Einrichtung

Die Einrichtung ist sehr ähnlich wie bei der Darstellung der Jade-Vorlagen. Denn der Compiler dafür kann mit Composer installiert werden.

Zuerst erstellen wir die Datei composer.json in unserem Theme-Verzeichnis

{
  "require": {
    "mustache/mustache": "~2.5"
  }
}

Führen Sie die Composer-Installation aus und fügen Sie dann einfach Folgendes zu unseren WordPress-Seitenvorlagen hinzu, um sicherzustellen, dass der Compiler ausgeführt wird

echo $mustache->render('index', $data);

Jetzt, da wir mit Mustache bewaffnet sind, müssen wir eine Datei namens mustache-compiler.php zu unserem Theme-Ordner hinzufügen, um den Compiler in unseren Vorlagen zu laden, und das, ohne einen expliziten Pfad zum views-Ordner angeben zu müssen, in dem sich unsere Quelldateien befinden werden

<?php

require_once('vendor/autoload.php');

return new Mustache_Engine(array(
   'loader' => new Mustache_Loader_FilesystemLoader(get_template_directory() . '/views')
));

?>

Der WordPress-Loop in Mustache

{{#posts}}
<h1><a href="{{permalink}}">{{{title}}}</a></h1>
{{{excerpt}}}
{{/posts}}

Mustache Starter Theme

Laden Sie ein Mustache-Starter-Theme für WordPress herunter.

Timber

Sie mögen also die bisher in diesem Beitrag vorgestellten Ideen, möchten aber vielleicht nicht die gesamte Einrichtung durchlaufen. Hier kommt Timber ins Spiel.

Timber ist als kostenloses WordPress-Plugin erhältlich und damit vielleicht die am einfachsten zu installierende der bisher behandelten Template-Engines. Tatsächlich ist Timber selbst nicht die Template-Engine, sondern verlässt sich für diese auf Twig und fungiert als die notwendige Konfiguration, um Twig-Dateien zu schreiben. Außerdem verfügt es über eine Bibliothek, die WordPress-Hooks in Twig integriert, was es genauso leistungsfähig macht wie das Schreiben von nativem PHP in WordPress.

Oh ja, und wir haben einen Artikel, der die Grundlagen für den Einstieg in Timber behandelt.

Die Einrichtung

Laden Sie das Plugin direkt aus dem WordPress-Plugin-Repository herunter und installieren Sie es.

Als Nächstes müssen wir sicherstellen, dass unser Theme-Verzeichnis die folgenden Dateien enthält

• layout.twig
• index.twig
• functions.php
• index.php

layout.twig

Dies wird der primäre Markup-Teil für unsere Website sein, der den Dokumenten-<head> und das grundlegende Layout der Website enthält. Mit anderen Worten, wir können ihn in allen unseren Twig-Vorlagendateien erweitern und bestimmte Blöcke von Vorlage zu Vorlage ändern.

Hier ist ein einfaches Beispiel mit einem ziemlich gängigen Website-Layout

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset="UTF-8">
  <title>{{wp_title}}</title>
  <link rel="stylesheet" type="text/css" href="{{theme.link}}/style.css" media="screen">
  {{wp_head}}
</head>
<body>

<header>
  {{site.name}}
</header>

{% block content %}
{% endblock %}

{{wp_footer}}

</body>
</html>

Alles, was in doppelten geschweiften Klammern {{ }} steht, sind Variablen, die Timber mit der kompilierten Ausgabe von Twig füllen wird. Und wenn wir diese Vorlage in andere Vorlagen erweitern, können wir jede Variable direkt in der Vorlage ändern, in der sie erweitert wird.

functions.php

Dies ist die gleiche Standarddatei, die mit den meisten WordPress-Themes geliefert wird. Was wir ihr hinzufügen, sind Anweisungen zur Konfiguration von Timber sowie Definitionen für alle Variablen, die wir in unseren Vorlagen aufrufen.

<?php

add_filter('timber_context', 'add_to_context');
function add_to_context($data){

  $data['menu'] = new TimberMenu();
  $data['categories'] = Timber::get_terms('category', 'show_count=0&title_li=&hide_empty=0&exclude=1');

  return $data;
}

?>

index.php

Dies ist oft die primäre Vorlage oder Homepage eines WordPress-Themes. Wir müssen die in functions.php definierten Variablen aufrufen, damit die Vorlage weiß, was gerendert werden soll, wenn Timber die Twig-Dateien nach PHP kompiliert. In diesem Fall

<?php
  $context = Timber::get_context();
  $context['pagination'] = Timber::get_pagination();
  Timber::render('index.twig', $context);
?>

Der WordPress-Loop in Timber

{% for post in posts %}
  <article>
    <h1>{{post.title}}</h1>
    {{post.get_preview}}
  </article>
{% endfor %}

Timber Starter Theme

Laden Sie ein Timber + Twig-Starter-Theme für WordPress herunter.

Timber + Jade (…Twade?)

Während Timber standardmäßig eine Template-Engine mitbringt, können wir es so konfigurieren, dass es *zusätzlich* zu Twig etwas anderes verwendet. Es mag albern erscheinen, zwei Template-Engines zusammen zu verwenden, aber wenn Sie die Funktionen von Twig mögen und den Code lieber in Jade schreiben… nun, das können wir tun!

Die Einrichtung

Wir werden die Standardkonfiguration von Timber verwenden, aber Jade lokal in Twig kompilieren. Leute kompilieren Jade mit AngularJS ständig in andere Syntaxen, warum nicht auch mit Timber?

So wird unser Theme-Ordner strukturiert sein

├── source
	├── views
		├── header.twade
		├── index.twade
	├── footer.twade
	├── index.php
	├── functions.php
	├── style.styl
├── compiled
	├── views
		├── header.twig
		├── index.twig
	├── footer.twig
	├── index.php
	├── functions.php
	├── style.css
├── Gruntfile.coffee
└── package.json

Wieder einmal wird WordPress versuchen, den source-Ordner als eigenes Theme zu laden, es sei denn, wir schließen ihn beim Deployment aus.

Sehen Sie die seltsame .twade-Erweiterung? Das sind nur Jade-Dateien, die (lokal mit Grunt) in .twig-Dateien kompiliert werden, die – Sie haben es erraten – von den .php-Dateien gelesen und serverseitig zu PHP kompiliert werden.

Der WordPress-Loop in Timber + Jade

{% for post in posts %}
h1
  a(href="{{post.permalink}}") {{post.title}}
{{post.get_preview}}
{% endfor %}

Timber + Jade Starter Theme

Laden Sie ein Timber + Jade-Starter-Theme für WordPress herunter.

Lob für Timber + Jade, ohne Twig

Alternativ zum Obigen können wir Twig ganz umgehen, um die Template-Funktionen von Jade mit der Einfachheit der Timber-Einrichtung und der funktionsreichen Bibliothek zu vereinen. Dies ist genau dieselbe Einrichtung wie bei Timber, aber wir fangen Timber::render mit Folgendem in unserem index.php ab, anstatt

<?php
  $compiler = include 'compiler.php';
  $context = Timber::get_context();
  $context['pagination'] = Timber::get_pagination();
  echo $compiler->render(get_template_directory() . '/views/index.jade', $context);
?>

Das gibt uns die Möglichkeit, den WordPress-Loop so zu schreiben:

each post in posts
  h1
    a(href= post->permalink)!= post->title
  !=post->get_preview

Hier ist ein Starter-Theme für einen reinen Timber + Jade One-Two-Punch.

Zusammenfassung

Template-Engines sind fantastisch und funktionieren großartig mit WordPress. Es ist reine Geschmackssache, welche für Ihren Kenntnisstand und die Website, die Sie erstellen, am besten geeignet ist.

Websites, die viele komplexe Ansichten erfordern, können von einer Engine profitieren, die mehr Logik in den Vorlagen bietet, wie Timber oder Jade. Erfahrene PHP-Entwickler bevorzugen vielleicht Mustache wegen seiner Fähigkeit, *die gesamte* Logik auf dem Server zu halten.

Ich habe Starter-Themes für alle in diesem Beitrag behandelten Optionen eingerichtet. Bitte nutzen Sie sie gerne, um den Ball für Ihre eigenen Projekte ins Rollen zu bringen oder einfach nur zum Experimentieren

• Jade-PHP
• Jade
• Mustache
• Timber
• Timber + Jade
• Timber + Jade (ohne Twig)

Viel Spaß beim Theming!