WordPress-Theme entwickeln (HowTo)

2022-03-17T09:00:59Z

78.55.61.118: /* Schritt z: Konfigurieren des Editors */

= 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: Child-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 ====

<pre>
/*
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
*/
</pre>

==== functions.php erstellen ====

<syntaxhighlight lang="php">
<?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' );?>
</syntaxhighlight>

==== Screenshot erstellen ====

==== Child theme aktivieren ====

==== Anpassungen aus Parent Theme übernehmen ====

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

== Schritt 2: SASS Architektur anlegen ==

* https://sass-guidelin.es/de/#das-7-1-muster
* https://patternlab-handlebars-preview.netlify.com/?p=all

== 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 ===

<pre>
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'));
});
</pre>

=== Navigationen im Template integrieren ===

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

== 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 ===

<pre>
<?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' );

</pre>

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

<pre>
include '_widgets.php';
</pre>

=== Widget X im Template laden ===

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

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

== Schritt y: Theme Funktionen hinzufügen ==

Add Theme Support
* Align Wide Content: https://joshcollinsworth.com/blog/adding-gutenberg-full-and-wide-width-image-support-to-your-wordpress-theme

== Schritt z: Konfigurieren des Editors ==

* ermöglicht feinere Kontrolle
* ersten Schritt bei der Verwaltung von Stilen für zukünftige WordPress-Versionen
* https://make.wordpress.org/core/2021/06/25/introducing-theme-json-in-wordpress-5-8/

* theme.json-Datei im Top-Level-Verzeichnis des Themes erstellen
* dadurch können Themes die vorhandenen Editoreinstellungen (die voreingestellten Schriftgrößen, ob benutzerdefinierte Farben aktiviert sind usw.) sowie die neuen bei der Einführung (der Duotone voreingestellt, ob Rand- und Abstandssteuerung aktiviert sind usw.).
* dieser neue Mechanismus zielt darauf ab, all die verschiedenen add_theme_support-Aufrufe zu übernehmen und zu konsolidieren, die bisher zur Steuerung des Editors erforderlich waren

= FAQ =

== Wie werden dynamische Pfade eingebunden? ==

<pre>
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/example.jpg" alt="Example Image" style=""/>
</pre>

<pre>
<?php echo get_site_url(); ?>
</pre>

<pre>
<?php require_once get_template_directory().'/php/ek_cpt.class.php';
</pre>

== Frage x ==

= 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
* https://themecoder.de/2017/02/07/uebersicht-der-verschiedenen-template-dateien-in-einem-wordpress-theme/
* https://developer.wordpress.org/themes/basics/template-hierarchy/
* https://developer.wordpress.org/themes/template-files-section/page-template-files/page-templates/

[[Kategorie:WordPress]]
[[Kategorie:HowTo]]

wiki.sehanka.de - Benutzerbeiträge [de]

WordPress-Theme entwickeln (HowTo)