Web-Content-Management mit WordPress

WordPress Kurs
00. 00 - 00. 00 2020 | 00.00 - 00:00 Uhr |

1
2
3
4
5

Eigene Templates und Template-Parts erstellen

Ein WordPress-Theme kann in verschiedene Dateien zerlegt werden. Ein Vorteil davon ist, dass wichtige Teile eines Themes, Header, Navigation, Scripts oder Footer mit einem einfachen, individuellen Template für die Darstellung des Inhalts eingelinkt werden können.

Eigene Templates und Template-Parts müssen in einem Child-Theme erstellt werden. (Anleitung Child-Theme).

Die Ordner im Child-Theme

Es muss ein Ordner für das neue Template und ein weiterer für den Template-Part erstellt werden.

  • Erstelle den Ordner "template-parts" in deinem Child-Theme
  • Erstelle einen Ordner "templates" in deinem Child-Theme
  • Screenshot

Ein eigenes Template

  • Erstelle im Ordner "templates" eine Datei für dein Template:: "template-event.php"
  • Screenshot
  • Das Template wird innerhalb des Child-Theme verwendet, das auf dem Theme "Twentytwenty" basiert. Daher wird der "Content"-Teil dieses Templates übernommen und angepasst.
    Kopiere den folgenden Code, füge ihn in deine Datei und speichere sie. 
    <?php
/* Template Name: Event Template */

get_header();
?>

<main id="site-content" role="main">

    <?php

    if ( have_posts() ) {

        while ( have_posts() ) {
            the_post();

            get_template_part( 'template-parts/content-event' );
        }
    }

    ?>

</main><!-- #site-content -->

<?php get_template_part( 'template-parts/footer-menus-widgets' ); ?>

<?php get_footer(); ?>

    Beachte, dass der "Template Name:" auf der Kommentarzeile 2, die angezeigte Template-Bezeichnung beinhaltet.
    In der der Funktion "get_template_part( 'template-parts/content-event' );" wird die Datei für die Ausgabe deines Codes verlinkt.

Template-Parts für die Anzeige deines Templates

  • Der HTML/PHP-Code für die eigentliche Ausgabe befindet sich in der im Template verlinkten Datei im Ordner: "template-parts/content-event.php"
  • Erstelle im Ordner "template-parts" eine Datei für dein Template:: "content-event.php"
  • Screenshot
  • Kopiere den folgenden Code, füge ihn in deine Datei und speichere sie. 
    <?php
/* For displaying event-content */
?>

<article <?php post_class(); ?> id="post-<?php the_ID(); ?>">

    <div class="post-inner">

        <div class="entry-content event-content">
            
            <?php
            if ( is_singular() ) {
                the_title( '<h1 class="entry-title">', '</h1>' );
                the_content( __( 'Continue reading', 'twentytwenty' ) );
            }
            ?>

        </div><!-- .entry-content -->

    </div><!-- .post-inner -->

</article><!-- .post -->

Das neue Template benutzen

  • Erstelle eine neue Seite in deiner WordPress-Installation
  • Unter "Seiten-Attribute > Template" kannst du der Seite nun deine neues "Event-Template" zuweisen.
  • Screenshot
  • Achtung! Bis jetzt hat sich dadurch noch keine sichtbare Veränderung ergeben. Es wurden bis auf die Klassen-Bezeichnung "event-content" für den Inhalt-Div noch keine Anpassungen vorgenommen. Füge folgende CSS-Regeln in deine CSS-datei im Child-Theme ein: 
    .entry-content.event-content {
    background-color: #CD2653;
    padding:24px 0px;
}
  • Speichere deine neue Seite und teste das Ergebnis im Browser.
  • Screenshot

Eigene Felder für das eigene Template

Für den weiteren Ausbau deines Templates können zusätzliche Eingabefelder in diesen Seitentyp hinzugefügt werden. Anleitung Individuelle Felder, Template und eigene Inhalte

« zurück