WordPress Theme Entwicklung mit Sage 9 Teil 2

WordPress Theme Entwicklung mit Sage 9 Teil 2

Bevor wir mit der Entwicklung nach Teil 1 anfange es sind 2 wichtige Schritte damit alles ordentlich läuft:

1. Browsersync Konfiguration

Prüfen wir über ob die Variable devUrl am Ende der File resources/assets/config.json mit unserer Dev Url übereinstimmt.


2. Server Konfiguration

Da Sage das Templating Engine Blade benutzt es ist streng empfohlen den direkten Zugriff zu blockieren.

Nginx Konfigurationsbeispiel:

location ~- \.(blade\.php)$ {
  deny all;
}

location ~- composer\.(json|lock)$ {
  deny all;
}

location ~- package(-lock)?\.json$ {
  deny all;
}

location ~- yarn\.lock$ {
  deny all;
}

Apache .htaccess Beispiel:

<FilesMatch ".+\.(blade\.php)$">
    <IfModule mod_authz_core.c>
        # Apache 2.4
        Require all denied
    </IfModule>
    <IfModule !mod_authz_core.c>
        # Apache 2.2
        Order deny,allow
        Deny from all
    </IfModule>
</FilesMatch>

Übersicht

Wie schon den letzten Beitrag angezeigt sieht die Ordnerstruktur eines Sage Templates nach der Installation so aus:

App Folder

app/setup.php hat die gleiche Rolle wie das functions.php File bei einem „klassischen“ WordPress Template. Hier können wir weitere Skripte und CSS Files registrieren sowie die Template Funktionen definieren.
z.B.:

add_action('acf/init', function() {
acf_update_setting('google_api_key', getenv('GOOGLE_KEY') );
});

So fügt man das Google API Key für ACF ein.

Unter app/filters.php und app/helpers.php findet man die Helper und Filter Funktionen, hier können das Template angepasst und erweitert werden. app/admin.php steuert die Funktionen auf dem Backend

Sage folgt die MVC (Model – View – Controller) Architektur und benutzt PSR4 Autoloading. Kurz zusammengefasst, wenn man ein neues Controller erstellt sollte man die Template Hierarchie vom WordPress benutzen, und bei der Benennung von Files und Klassen soll man die gleichen Naming Standards folgen. Sprich die Klasse in dem FrontPage.php File soll genau class FrontPage heißen.

Bereit zur Kooperation?

Deployment

Um ein Sage Template deployen zu können müssen die folgenden Schritte auf der lokalen Umgebung oder auf Server gemacht werden werden:

  1. Man muss den Befehl composer install auf seinem Rechner oder auf Remote Computer durchführen
  2. Man muss die Assets mit dem Befehl yarn build:production erstellen und das /dist Folder auf die Theme Directory hochladen

Da die meisten Webseiten über einem Shared Hosting laufen werden wir in diesem Block das Deployen über SFTP abdecken. Die restlichen Möglichkeiten findet man hier.

Ein Sage Template kann man leicht mit den folgenden Schritten auf SFTP Deployen:
yarn build:production im Theme Folder und dann composer install --no-dev. Man muss dann dass Template außerdem Folder node_modules über das SFTP Client hochladen.

In dem nächsten Teil machen wir mit dem Templateing Engine und mit dem Front End weiter.