WordPress-Theme entwickeln (HowTo)

Aus wiki.sehanka.de
Zur Navigation springen Zur Suche springen

Allgemeines[Bearbeiten]

  • 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)[Bearbeiten]

Arbeitsschritte (Prozess)[Bearbeiten]

Schritt 1: Notwendige Grundstruktur anlegen[Bearbeiten]

Generell: Parent-Theme erstellen[Bearbeiten]

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


Optional: Child-Theme erstellen[Bearbeiten]

  • ü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[Bearbeiten]

z.B.: "generatepress-child"

Style Datei anlegen[Bearbeiten]

/*
 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[Bearbeiten]

<?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[Bearbeiten]

Child theme aktivieren[Bearbeiten]

Anpassungen aus Parent Theme übernehmen[Bearbeiten]

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

Schritt 2: SASS Architektur anlegen[Bearbeiten]

Schritt x: Fonts integrieren[Bearbeiten]

Schritt x: Navigation(en) anlegen[Bearbeiten]

Navigationen in functions.php registrieren[Bearbeiten]

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[Bearbeiten]

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

Schritt y: Komponenten entwickeln[Bearbeiten]

Schritt z: Benötigte Templates anlegen[Bearbeiten]

Query Templates[Bearbeiten]

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[Bearbeiten]

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

404.php[Bearbeiten]

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[Bearbeiten]

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[Bearbeiten]

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

single.php[Bearbeiten]

Wird zur Ausgabe von einzelnen Beiträgen geladen.

Weitere[Bearbeiten]

  • 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[Bearbeiten]

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)[Bearbeiten]

Schritt z: Benötigte Widgets anlegen[Bearbeiten]

"_widgets-php" anlegen[Bearbeiten]

<?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[Bearbeiten]

include '_widgets.php';

Widget X im Template laden[Bearbeiten]

  • folgenden Code an der gewünschten Stelle einfügen, z. B. "sub_footer"
<?php dynamic_sidebar( 'sub_footer' ); ?>

Schritt y: Theme Funktionen hinzufügen[Bearbeiten]

Add Theme Support


Schritt z: Konfigurieren des Editors[Bearbeiten]

  • 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[Bearbeiten]

Wie werden dynamische Pfade eingebunden?[Bearbeiten]

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

<?php echo get_site_url(); ?>

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

Frage x[Bearbeiten]

Troubleshooting[Bearbeiten]

Lösung 1[Bearbeiten]

TBD

Nachfolgende(r) Prozess(e)[Bearbeiten]

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

Quellen[Bearbeiten]

Theme Basics

Templates

Abgerufen von „https://wiki.sehanka.de/index.php?title=WordPress-Theme_entwickeln_(HowTo)&oldid=297“