Allgemeines

folgend zunächst nur eine lose Sammlung von Ansätze zur systematischen Entwicklung, die noch in Einklang zu bringen sind
- Atomic Web Design im Allgemeinen und Patternlab-Beispiele im Speziellen
- Saas-Architektur

Vorangegangene(r) Prozess(e)

WordPress-Theme gestalten und prototypen (HowTo)

Arbeitsschritte (Prozess)

Schritt 1: Notwendige Grundstruktur anlegen

Generell: Parent-Theme erstellen

functions.php
style.css
index.php (ein WordPress Theme benötigt mind. eine Template Datei (index.php)

Optional: Parent-Theme erstellen

über Childtheme wird vorhandenes WordPress-Theme (Parent-Theme) an die eigenen Vorstellungen angepasst
Trennung, um Theme (Parent) besser updaten zu können und dennoch die eigenen, individuellen Styles/Funktionen (Child) nicht zu verlieren
Child beinhaltet nur wenige Dateien (CSS, PHP, ???), welche die des Parent überschreiben
das funktioniert aber nicht bei allen Einstellungen

Ordner für Child-Theme anlegen

z.B.: "generatepress-child"

Style Datei anlegen

/*
 Theme Name:   GeneratePress Child
 Description:  Mein Child Theme
 Author:       Sebastian Kalms
 Author URI:   httpw://www.elsterkind.de
 Template:     generatepress
 Version:      1.0
 Text Domain:  generatepress-child
*/

functions.php erstellen

<?php
/**
* Child theme stylesheet einbinden in Abhängigkeit vom Original-Stylesheet
*/

function child_theme_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-theme-css', get_stylesheet_directory_uri() .'/style.css' , array('parent-style'));

}
add_action( 'wp_enqueue_scripts', 'child_theme_styles' );?>

Screenshot erstellen

Child theme aktivieren

Anpassungen aus Parent Theme übernehmen

https://www.webtimiser.de/wordpress-child-theme-erstellen/

Schritt 2: SASS Architektur anlegen

Schritt x: Fonts integrieren

https://google-webfonts-helper.herokuapp.com/
benötigte Fonts zusammenstellen
CSS kopieren und in Datei /base/_fonts.scss kopieren
Datein downloaden und in Ordner fonts kopieren

Schritt x: Navigation(en) anlegen

Navigationen in functions.php registrieren

add_action( 'after_setup_theme', function() {
    add_theme_support('title-tag');
    add_theme_support('post-thumbnails');

    register_nav_menu('main-menu', __('Main Navigation'));
    register_nav_menu('footer-menu', __('Footer Navigation'));
});

Navigationen im Template integrieren

            <nav>
                <?php
                wp_nav_menu( array(
                    'theme_location' => 'footer-menu',
                    'menu_class'     => 'nav navbar-nav',
                    'container'      => false
                ) );
                ?>
            </nav>

Schritt y: Komponenten entwickeln

mögliche Komponenten und Code-Snippets unter https://boltdesignsystem.com/pattern-lab/?p=components-overview

Schritt z: Benötigte Templates anlegen

Query Templates

Diese Template Dateien werden bei einem bestimmten URL Request / Query von WordPress geladen. Unter anderem für einzelne Beiträge, statische Seiten oder Archive.

index.php

Das Basis-Template, welches nur zum Einsatz kommt, wenn keine spezifische Template Datei existiert.

404.php

Wird genutzt, falls WordPress die angefragte Seite nicht in der Datenbank finden kann, egal ob es sich dabei um eine Kategorie, Seite oder Beitrag handelt.

home.php

Wird zur Anzeige der letzten Blog Beiträge (Blog Index) verwendet. Der Name ist deshalb etwas irreführend, weil das Template nicht zwangsweise auf der Startseite zum Einsatz kommt. Falls die Website eine statische Startseite in den Einstellungen konfiguriert hat, wird home.php stattdessen auf der Beitragsseite geladen.

page.php

Um eine einzelne, statische Seite anzuzeigen, wird die page.php des Themes aufgerufen.

single.php

Wird zur Ausgabe von einzelnen Beiträgen geladen.

Weitere

archive.php (wird für Kategorien, Schlagwörter, Monatsarchive oder Autorenseiten geladen)
search.php (die Suchergebnisse werden mit diesem Template dargestellt)
singular.php (Anzeige von einzelnen Posts für alle Post Types, also Beiträge, Seiten, CPTs, etc.)

Template Partials

Diese Dateien sind für die Darstellung eines bestimmten Bereichs wie dem Header, Sidebar oder Footer der Website zuständig. Sie werden in anderen Template Dateien eingebunden.

Beispiele

header.php
sidebar.php
comments.php
footer.php

Schritt Z: WooCommerce Templates anlegen (Optional)

nur bei Nutzung eines Shops
https://docs.woocommerce.com/document/template-structure/
https://docs.woocommerce.com/document/woocommerce-theme-developer-handbook/

Schritt z: Benötigte Widgets anlegen

"_widgets-php" anlegen

<?php defined( 'ABSPATH' ) or die();

const WIDGET_AREAS = array(
    'top_header_left', 'top_header_right',
    'top_footer', 'sub_footer'
);

function register_widget_areas() {
    foreach(WIDGET_AREAS as $widget_area) {
        register_sidebar( array(
            'name'          => $widget_area,
            'id'            => $widget_area,
            'before_widget' => '',
            'after_widget'  => '',
            'before_title'  => '',
            'after_title'   => '',
        ));
    }
}
add_action( 'widgets_init', 'register_widget_areas' );

"_widgets-php" in der "functions.php" inkludieren

include '_widgets.php';

Widget X im Template laden

folgenden Code an der gewünschten Stelle einfügen, z. B. "sub_footer"

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

FAQ

Frage x

TBD

Troubleshooting

Lösung 1

TBD

Nachfolgende(r) Prozess(e)

TBD via Verlinkung zu anderem(n) HowTo(s)

Quellen

Theme Basics

https://www.sitepoint.com/build-wordpress-theme-from-scratch-first-steps/

Templates

WordPress-Theme entwickeln (HowTo)