WordPress Templates entwickeln (HowTo)
ACHTUNG
- dieser Artikel beschäftigte sich bisher nur mit der Entwicklung eines Single- und eines Archive-Views für einen neuen/bestimmten Custom Post Type sowie der Datei mir den Funktionen für diesen (cpt-BEZEICHNER.php)
- es macht mehr Sinn den Artikel als allgemeine Übersicht für die generellen WordPress-Templates auch noch zu nutzen
Allgemeines
Übersicht
Search Result Page
- search.php
- WordPress-Suche anpassen (HowTo)
Arbeitsschritte
Schritt 1: Template- und Programm-Dateien anlegen
CPT-Datei anlegen und einbinden
cpt-BEZEICHNER.php anlegen
- via FTP auf dem Server einloggen
- für individuelle Erweiterungen, sollte eine separate Datei für den jeweiligen CPT unter /wp-content/themes/child/ angelegt werden
- zur Vereinheitlichung, soll diese cpt-BEZEICHNER.php (Bsp: cpt-leistungen.php) benannt werden
- Datei kann zu Beginn leer bleiben
cpt-BEZEICHNER.php einbinden
- Einbindung erfolgt über die functions.php des Child-Themes
- dazu folgenden Code im oberen Teil der functions.php einfügen:
require_once 'cpt-BEZEICHNER.php';
- in dieser Datei können verschiedene Erweiterungen eingefügt werden
- Beispiel dafür findet sich unter Beispiel cpt-BEZEICHNER.php
Schritt 2: Template-Dateien anlegen
Wenn man CPTs in Kombination mit ACF benutzt, kann man tief integrierte Ansichten zum Anlegen, Editieren und Anzeigen implementieren. Dadurch fühlt sich der Moderator wie in einer "normalen" WordPress-Funktion.
Es ist möglich die Standardfunktionen von WordPress (Beitragstext, Hauptbild, ...) zu erweitern oder zu ersetzen. Damit lassen sich fast alle gewünschten Inhaltsgruppen passend umsetzen.
Im Frontend können 2 Dateien für die Ansicht von CPTs angelegt werden:
- die Übersichts-/Archivseite auf der alle Einträge (z. B.: Leistungsübersicht) angezeigt werden (von dort kann zu den einzelnen Einträgen navigiert werden)
- die Detail-/Single-Ansicht auf der alle Daten des Eintrags angezeigt werden
Schritt 2a: Dateien für Einzelansicht anlegen
- View (Template) für "Single"-Ansicht (auch Einzelansicht oder Detailansicht genannt) anlegen
Programm-Datei im Child-Theme anlegen
- via FTP in Ordner "themes" --> "child" --> Datei single-BEZEICHNER.php (z. B. "single-leistungen.php") anlegen und folgenden Code integrieren
<?php defined( 'ABSPATH' ) or die(); ?>
<?php # HEADER ?>
<?php get_header(); ?>
<?php # CONTENT ?>
<div class="">
<div class="">
<h1><?php the_title(); ?></h1><!-- Titel des Custom Post Types einbinden -->
</div>
<div>
<?php echo get_the_post_thumbnail(); ?><!-- Beitragsbild des Custom Post Types einbinden -->
</div>
<div class="">
<p><?php echo get_field('xxx'); ?></p><!-- Individuelle Feld (Text einzeilig) des Custom Post Types einbinden -->
</div>
</div>
<div><a href="../">Alle Kontakte</a></div>
<?php # FOOTER ?>
<?php get_footer(); ?>
Schritt 2b: Dateien für Listenansicht anlegen
Programm-Datei im Child-Theme anlegen
- View (Template) für "Archive"-Ansicht (auch Listenansicht genannt) anlegen
- via FTP in Ordner "themes" --> "child" --> Datei archive-BEZEICHNER.php (z. B. "archive-leistungen.php") anlegen und folgenden Code integrieren
<?php defined( 'ABSPATH' ) or die(); ?>
<?php # HEADER ?>
<?php get_header(); ?>
<?php # TITLE ?>
<div class="">
<h1>Leistungen</h1>
<p>Das ist die Listenansicht aller Leistungen.</p>
</div>
<?php # CONTACTS ?>
<div class="">
<div class="">
<?php while (have_posts()) : the_post(); ?>
<a href="<?php echo get_permalink(); ?>" class="">
<div class=""><?php echo get_the_post_thumbnail(); ?></div>
<h2 class=""><?php the_title(); ?></h2>
</a>
<?php endwhile; ?>
</div>
</div>
<?php # FOOTER ?>
<?php get_footer(); ?>
Schritt 3: Templates layouten
Da diese Layouts "komplexerer" Natur sind, sind sie nicht so einfach von einem WordPress-Nutzer umzusetzen. Dort müssen die in der Datenbank eingestellten Felder ausgelesen und entsprechend aufbereitet werden. Dabei kann es sich um die normale Darstellung (Ausgabe von Texten) handeln, aber auch um tiefere Anweisungen und Rechnungen mit den gegebenen Daten.
Schritt 3a: Template für Einzelansicht layouten
- im Modus "Backend Editor" die Ansicht mit statischen Inhalten, d. h. ohne Nutzung von Platzhaltern, Shortcodes oder Loops, layouten
Schritt 3b: Template für Listenansicht layouten
Template Listenansicht statisch layouten
- im Modus "Backend Editor" die Ansicht mit statischen Inhalten layouten
- wiederkehrende Blöcke zunächst statisch darstellen und später als Partial auslagern
- betrifft z. B. (z.B. Leistung mit Titel und Teaser)
Wiederkehrende Blöcke als Partial auslagern
- Code-Teil des Partials ausschneiden
- neues Template anlegen z. B. "partial-leistung"
- Titel/Name des Datenobjekts (z.B. leistung) dynamsich durch WordPress-Shortcode einbinden via "post_title" (wenn normales WordPress-Post-Feld "Titel" verwendet wurde)
- Weitere Felder (z. B. Leistungsbeschreibung dynamsich durch Platzhalter einbinden via "leistung-beschreibung"
Template der Listenansicht um Partial ergänzen
- im Modus "Backend Editor" die Ansicht mit statischen und dynamischen Inhalten, d. h. mit Nutzung Shortcodes und Loops
- z. B. via Loop die einzelnen Datenobjekte anzeigen
[cpt-archive-loop template=partial-leistung]