WordPress-Theme entwickeln (HowTo) - Versionsgeschichte

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

2022-03-17T09:00:59Z

Schritt z: Konfigurieren des Editors

← Nächstältere Version		Version vom 17. März 2022, 09:00 Uhr
Zeile 202:		Zeile 202:
	<?php dynamic_sidebar( 'sub_footer' ); ?>		<?php dynamic_sidebar( 'sub_footer' ); ?>
	</pre>		</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 ==		== Schritt z: Konfigurieren des Editors ==

Sebastian.kalms: /* Schritt z: Konfigurieren des Editors */

2021-10-04T09:11:32Z

Schritt z: Konfigurieren des Editors

← Nächstältere Version		Version vom 4. Oktober 2021, 09:11 Uhr
Zeile 208:		Zeile 208:
	* ersten Schritt bei der Verwaltung von Stilen für zukünftige WordPress-Versionen		* 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/		* 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 =		= FAQ =

Sebastian.kalms: /* Schritt z: Benötigte Widgets anlegen */

2021-10-04T09:10:06Z

Schritt z: Benötigte Widgets anlegen

← Nächstältere Version		Version vom 4. Oktober 2021, 09:10 Uhr
Zeile 202:		Zeile 202:
	<?php dynamic_sidebar( 'sub_footer' ); ?>		<?php dynamic_sidebar( 'sub_footer' ); ?>
	</pre>		</pre>

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

	= FAQ =		= FAQ =

Sebastian.kalms: /* Frage x */

2021-10-04T09:00:54Z

Frage x

← Nächstältere Version		Version vom 4. Oktober 2021, 09:00 Uhr
Zeile 204:		Zeile 204:

	= FAQ =		= 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 ==		== Frage x ==

	~~TBD~~

	= Troubleshooting =		= Troubleshooting =

Sebastian.kalms: /* Optional: Parent-Theme erstellen */

2021-10-04T08:59:01Z

Optional: Parent-Theme erstellen

← Nächstältere Version		Version vom 4. Oktober 2021, 08:59 Uhr
Zeile 20:		Zeile 20:


	=== Optional: ~~Parent~~-Theme erstellen ===		=== Optional: Child-Theme erstellen ===

	* über Childtheme wird vorhandenes WordPress-Theme (Parent-Theme) an die eigenen Vorstellungen angepasst		* über Childtheme wird vorhandenes WordPress-Theme (Parent-Theme) an die eigenen Vorstellungen angepasst

Sebastian.kalms: /* Style Datei anlegen */

2021-08-05T11:41:01Z

Style Datei anlegen

← Nächstältere Version		Version vom 5. August 2021, 11:41 Uhr
Zeile 39:		Zeile 39:
	Author: Sebastian Kalms		Author: Sebastian Kalms
	Author URI: httpw://www.elsterkind.de		Author URI: httpw://www.elsterkind.de
	Template: ~~GeneratePress~~		Template: generatepress
	Version: 1.0		Version: 1.0
	Text Domain: generatepress-child		Text Domain: generatepress-child

Sebastian.kalms: /* Schritt 1: Notwendige Grundstruktur anlegen */

2021-07-14T15:05:42Z

Schritt 1: Notwendige Grundstruktur anlegen

← Nächstältere Version		Version vom 14. Juli 2021, 15:05 Uhr
Zeile 12:		Zeile 12:

	== Schritt 1: Notwendige Grundstruktur anlegen ==		== Schritt 1: Notwendige Grundstruktur anlegen ==

			=== Generell: Parent-Theme erstellen ===

	* functions.php		* functions.php
	* style.css		* style.css
	* index.php (ein WordPress Theme benötigt mind. eine Template Datei (index.php)		* 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 ====

			<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 ==		== Schritt 2: SASS Architektur anlegen ==

Sebastian.kalms: Die Seite wurde neu angelegt: „= Allgemeines = * folgend zunächst nur eine lose Sammlung von Ansätze zur systematischen Entwicklung, die noch in Einklang zu bringen sind ** Atomic Web Des…“

2021-07-14T14:54:13Z

Die Seite wurde neu angelegt: „= Allgemeines = * folgend zunächst nur eine lose Sammlung von Ansätze zur systematischen Entwicklung, die noch in Einklang zu bringen sind ** Atomic Web Des…“

Neue Seite

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

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

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

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