WordPress-Theme entwickeln (HowTo)

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

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)

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

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

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

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)

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

Schritt z: Konfigurieren des Editors

FAQ

Wie werden dynamische Pfade eingebunden?

<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

Troubleshooting

Lösung 1

TBD

Nachfolgende(r) Prozess(e)

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

Quellen

Theme Basics

Templates

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