WordPress Templates entwickeln (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

Datei:Cpt leistungen index.jpg

CPT Liste von Einträgen

Datei:Cpt leistungen edit.jpg

CPT Editieren eines Eintrags

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.

Datei:Cpt leistungen show.jpg

CPT Ansicht im Frontend

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 5b: 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 4: 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 4a: 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 4b: 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]