So erstellen Sie benutzerdefinierte WordPress-Vorlagen manuell – Ein Leitfaden

Wenn Sie mit dem Design Ihrer Website nicht zufrieden sind und Ihr gewähltes Thema nicht die erforderlichen Anpassungsoptionen bietet, ist es möglicherweise an der Zeit, Ihre eigene benutzerdefinierte Vorlage zu erstellen! Abhängig von Ihren Anforderungen kann diese WordPress-Vorlage eine benutzerdefinierte Beitragsvorlage, eine Seitenvorlage oder eine Kategorieansicht sein.

Eines der aufregenden Dinge an WordPress ist, dass Sie unabhängig davon, wie Ihre WordPress-Website erstellt wurde, jederzeit das Layout oder Design ändern können. Dies kann durch Überschreiben einer vorgefertigten Vorlage oder durch Erstellen einer eigenen erfolgen. WordPress bietet eine enorme Flexibilität und gibt Ihnen die Möglichkeit, Ihre eigene Vorlage für alles zu erstellen.

Trotz der Tatsache, dass das Erstellen eines eigenen Templates eine Fülle von Gestaltungsmöglichkeiten eröffnet, würden die meisten WordPress-Benutzer wahrscheinlich vor der Herausforderung zurückschrecken, da sie befürchten, dass das Erstellen eines eigenen benutzerdefinierten WordPress-Templates zu komplex ist. In dieser zweiteiligen Artikelserie werden wir uns mit beiden Möglichkeiten befassen, die Ihnen offen stehen. Zuerst werden wir uns in diesem Artikel ansehen, wie Sie eine benutzerdefinierte WordPress-Vorlage manuell codieren können (was die ultimative Flexibilität bietet), und dann werden wir untersuchen, wie Sie beliebte Seitenersteller verwenden können, um einige der erforderlichen schweren Aufgaben zu bewältigen beim Erstellen einer benutzerdefinierten WordPress-Vorlage.

In diesem Artikel sehen wir uns an, wie Sie benutzerdefinierte Vorlagen für Seiten, Beiträge und sogar Beitragskategorien erstellen können. Sehen wir uns zunächst an, warum Sie eine benutzerdefinierte Vorlage benötigen.

Hinweis: Dieser Artikel setzt Grundkenntnisse in HTML, CSS und PHP voraus.

Wann benötigen Sie eine benutzerdefinierte WordPress-Vorlage?

Vielleicht sind Sie sich noch nicht sicher, warum Sie eigentlich eine benutzerdefinierte WordPress-Vorlage verwenden sollten. Am einfachsten lässt sich dies anhand eines Beispiels erklären.

Stellen Sie sich vor, Sie haben eine Website für Ihr Unternehmen. Das Theme ‚Twenty Twenty‘ ist aktiviert und alle notwendigen Seiten und Beiträge sind bereits erstellt und mit Inhalten (Text und Bilder), einem Auszug und einem Beitragsbild gefüllt.

Die allgemeinen Einstellungen sind ebenfalls konfiguriert und Sie haben eine Reihe von Änderungen über den Customizer vorgenommen (z. B. Linkfarben, Cover-Vorlagen-Overlay-Farbe usw.)

Außerdem wurde ein Menü mit 5 Punkten erstellt: Homepage – Firmenprofil – Dienstleistungen – Über uns – Kontakt

Im Abschnitt Dienste gibt es ein Untermenü: Dienst 1 – Dienst 2 – Dienst 3.

Aus der Sicht eines WordPress-Entwicklers haben Sie also im Wesentlichen:

• Vier Standardseiten ( Homepage – Firmenprofil – Über uns – Kontakt )
• Eine Archivseite ( Services )
• Drei Beitragsseiten ( Service 1 – Service 2 – Service 3 )

Standardmäßig haben alle 3 Service-Post-Seiten das gleiche Layout. Die einzige Option, die Sie derzeit haben, um diese einzelnen Posts zu unterscheiden, indem Sie eine der drei Vorlagen auswählen, die über die Post-Attribute-Einstellung bereitgestellt werden.

Wenn wir jede der verschiedenen Vorlagen auswählen, sehen wir, dass sie so aussehen:

Standardvorlage

Vorlage in voller Breite

Cover-Vorlage

Wenn Sie Glück haben, wird einer dieser Stile für Sie funktionieren und Sie können diese für Ihre Website verwenden. Wenn dies jedoch nicht der Fall ist und Sie frustriert sind, dass bestimmte Elemente nicht so aussehen, wie Sie es möchten, dann machen Sie sich keine Sorgen … hier kommt die manuelle Erstellung Ihrer eigenen benutzerdefinierten WordPress-Vorlage ins Spiel.

Lassen Sie uns weitermachen und sehen, was mit einer benutzerdefinierten Vorlage erreicht werden kann.

So erstellen Sie manuell eine benutzerdefinierte WordPress-Beitragsvorlage

Im folgenden Tutorial erstellen wir eine einzelne Beitragsansicht, die vollständig personalisiert ist und in einer eigenen PHP-Datei angegeben wird. Wir werden auch eine Option namens „Meine benutzerdefinierte Beitragsvorlage“ zum Dropdown-Vorlagenmenü in den Beitragsattributen hinzufügen, die dem benutzerdefinierten Beitragslayout entspricht und unsere einzigartige Struktur darstellt.

Erster Schritt: Einführung unserer Vorlage in WordPress

Zu Beginn müssen wir eine PHP-Datei mit dem Namen „my-custom-post.php“ in Ihrem WordPress-Theme-Stammordner erstellen (in unserem Beispiel befindet sich diese in /themes/twentytwenty/).

Öffnen Sie die Datei mit Ihrem bevorzugten Texteditor (wie Sublime) und fügen Sie den folgenden Inhalt hinzu:

 <?php /* * Template Name: My custom post template * Template Post Type: post */ get_header();

Diese Zeile * Template Name: My custom post template definiert den Namen, der im Vorlagen-Dropdown-Menü angezeigt wird. Schauen Sie sich den Screenshot unten an und Sie werden sehen, wie dies aussehen würde.

Der * Template Post Type: post ist optional und definiert den Beitragstyp, für den die Vorlage als Option angezeigt wird. Da wir dies als „Beitrag“ definiert haben, wird diese Vorlage nicht im Vorlagenoptionsmenü für eine Seite angezeigt, wie im folgenden Beispiel zu sehen ist.

Die letzte Zeile: get_header(); ?> get_header(); ?> ruft den Header-Inhalt ab.

Wenn Sie zu diesem Zeitpunkt „Meine benutzerdefinierte Beitragsvorlage“ als aktive Vorlage für beispielsweise unseren Beitrag „Service 1“ auswählen, ist die Ausgabe leer. Dies ist so, wie wir es erwarten würden, da wir der Seite noch eine Struktur hinzufügen müssen. Sie würden so etwas sehen:

Hinzufügen von Struktur zu unserem benutzerdefinierten WordPress-Template

Während es durchaus möglich ist, die Struktur für unsere Seite komplett von Grund auf neu zu erstellen, kann es manchmal einfacher sein, die vorhandene Beitragsstruktur zu nehmen, die in unserer Themenvorlage verwendet wird, und diese dann zu ändern.

Wenn wir uns die WordPress-Template-Hierarchie ansehen, sehen wir, dass das Single-Post-Template je nach Theme aus der singular.php- oder single.php-Datei stammt, die sich im Theme-Ordner befindet.

Zur weiteren Verdeutlichung – wenn Posts und Seiten die gleiche Struktur verwenden, wird die singular.php-Datei verwendet, andernfalls (wie zum Beispiel im beliebten Astra-Theme) sehen Sie eine single.php-, page.php-, archive.php-Datei, die es sind kodiert, um jeweils unterschiedliche Strukturen für Posts, Seiten und Blog-Layouts bereitzustellen.

In diesem Fall können wir anhand des Designs Twenty Twenty sehen, dass die Datei singular.php die Funktion get_template_part verwendet, um das angeforderte Layout aus dem Ordner template-parts abzurufen.

 <main role="main"> <?php if ( have_posts() ) { while ( have_posts() ) { the_post(); get_template_part( 'template-parts/content', get_post_type() ); } } ?> </main><!-- #site-content -->

Der obige Code überprüft auf clevere Weise, ob der Beitrag Inhalt enthält, und druckt den Inhalt in diesem Fall unter Verwendung der Struktur, die durch die ausgewählte Vorlage angegeben ist. Dies gilt in jedem Fall unabhängig davon, ob ein Beitrag, eine Seite oder ein Archiv verwendet wird.

Jetzt können wir sehen, wie unser Design Layoutdaten aus vorhandenen Vorlagen bezieht. Wir sind jetzt bereit, mit der Erstellung unserer eigenen Vorlage zu beginnen. Um zu definieren, wie unsere Vorlage aussieht, müssen wir sie zuerst tatsächlich entwerfen. Möglicherweise möchten Sie, dass Ihre Beitragsseite im folgenden Format angelegt wird:

Sobald Sie sich für ein Layoutdesign entschieden haben, müssen Sie dieses mit HTML, CSS und PHP codieren. In diesem Artikel wird davon ausgegangen, dass Sie über ausreichende Kenntnisse dieser Sprachen verfügen und das erforderliche Layout erstellen können. Wenn wir das obige Design nehmen, würden wir einen anfänglichen Code schreiben, der, hinzugefügt zu Ihrer my-custom-post.php-Datei, so aussehen würde:

 <?php /* * Template Name: My custom post template * Template Post Type: post */ get_header(); ?> <main class="mcpt-post" role="main"> <?php if ( have_posts() ) { while ( have_posts() ) { the_post(); ?> <h2><?php the_title(); ?></h2> <div> <div><?php the_excerpt(); ?></div> <div><?php the_post_thumbnail(); ?></div> </div> <div> <div> <span class="metakey">Author: </span><?php the_author_posts_link(); ?><br> <span class="metakey">Publish Date: </span><?php the_time('F jS, Y'); ?><br> <span class="metakey">Category: </span><?php the_category(', '); ?> </div> <div><?php the_content(); ?></div> </div> <?php } } ?> </main><!-- #site-content --> <style> .mcpt-post { width: 80%; margin: 0 auto; } h2 { text-align: center; } div#content-top-left { width: 30%; float: left; font-size: 26px; font-family: book antiqua; font-style: italic; padding: 30px; color: grey; } div#content-top-right { width: 70%; float: left; } div#content-main-left { width: 30%; float: left; padding: 30px; font-family: book antiqua; } div#content-main-right { width: 70%; float: left; padding-top: 30px; font-family: tahoma; color: slategray; } span.metakey { color: grey; } </style> <?php get_template_part( 'template-parts/footer-menus-widgets' ); ?> <?php get_footer(); ?>

Es gibt Verknüpfungsfunktionen, die unser Twenty Twenty-Design für Post-Meta und andere Daten bereitstellt, die wir möglicherweise veröffentlichen möchten. Anstatt diese zu verwenden, verwenden wir die standardmäßigen WordPress-Funktionen, damit Ihre Vorlage mit jedem Thema funktioniert. Wir werden mit den folgenden arbeiten:

• the_title() – gibt den Beitragstitel wieder
• the_excerpt() – wiederholt den Beitragsauszug
• the_post_thumbnail() – gibt die Standardgröße des Post-Thumbnails aus. Sie können die the_post_thumbnail()-Optionen verwenden, um eine bestimmte ausgewählte Bildgröße auszugeben
• the_content() – Gibt den Beitragsinhalt aus

Wenn wir unsere Aktualisierungen speichern und uns jetzt den Beitrag „Service 1“ ansehen, sehen wir, wie unser benutzerdefiniertes Vorlagenlayout angewendet wird.

So erstellen Sie eine benutzerdefinierte Vorlage für WordPress-Postkategorien

Jetzt haben wir gesehen, wie relativ einfach es ist, unser eigenes Layout für Beitragsvorlagen zu erstellen. Wir können weitermachen und ähnliche Prinzipien anwenden, um unser eigenes Kategorieansicht-Layout zu erstellen.

Eine einfache Möglichkeit, dies zu tun, besteht darin, die Datei index.php direkt zu bearbeiten (befindet sich in unserem Stammordner /themes/twentytwenty/). Während das direkte Bearbeiten dieser Datei für Lernzwecke in Ordnung ist, sollten Sie, wenn die Website live ist, ein untergeordnetes Design verwenden, um sicherzustellen, dass alle Aktualisierungen nicht überschrieben werden, wenn Sie Ihr Design das nächste Mal aktualisieren.

Wenn wir uns den index.php-Code ansehen, werden wir feststellen, dass er hauptsächlich mit PHP-„if“-Bedingungen gefüllt ist, die die verfügbaren Ausgaben je nach Art des Inhalts spezifizieren. Der folgende Code prüft beispielsweise, ob der Inhalt Beiträge enthält (es handelt sich um einen Beitrag, eine Seite oder ein Archiv) oder um eine Suchergebnisseite handelt, und zeigt den richtigen Inhalt entsprechend an.

 if ( have_posts() ) { . . . } elseif ( is_search() ) { . . . }

Wenn Sie diesem Tutorial mit dem Twenty Twenty-Design folgen, finden Sie den folgenden Code in Ihrer index.php-Datei:

 $i = 0; while ( have_posts() ) { $i++; if ( $i > 1 ) { echo '<hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />'; } the_post(); get_template_part( 'template-parts/content', get_post_type() ); }

In der template-parts/content.php können wir sehen, dass der Inhalt mit der Funktion ‚get_template_part‘ abgerufen wird.

Anstatt diese themenspezifischen Funktionen zu verwenden, um das Layout unserer Beitragskategorieseite festzulegen, verwenden wir stattdessen die standardmäßigen WordPress-Funktionen für jedes Element. Dies bedeutet, dass wir den obigen Code wie folgt ändern:

 while ( have_posts() ) { the_post(); include 'my-custom-category-view.php'; }

Wenn Sie ein Adlerauge sind, werden Sie sehen, dass wir auf eine Datei namens my-custom-category-view.php , die wir jetzt erstellen und zum Ordner unseres Themas hinzufügen müssen (ein alternativer Ansatz wäre, diese Informationen direkt hinzuzufügen zu unserer index.php -Datei, aber diese als separate Datei zu speichern ist viel ordentlicher.

Erstellen Sie eine my-custom-category-view.php Datei und fügen Sie den folgenden Code hinzu:

 <div class="article"> <div class="featured-image"><!-- FEATURED IMAGE --> <?php the_post_thumbnail(); ?> </div> <div class="content"><!-- ARTICLE HEADER --> <?php the_title( '<h3><a href="' . esc_url( get_permalink() ) . '">', '</a></h3>' ); ?> <div class="intro-text"><?php the_excerpt(); ?></div> <div class="post-meta"> <div><span class="metakey">Author: </span><?php the_author_posts_link(); ?></div> <div><span class="metakey">Publish Date: </span><?php the_time('F jS, Y'); ?></div> <div><span class="metakey">Category: </span><?php the_category(', '); ?></div> </div> </div> </div>

Sie werden sehen, dass wir das fortgeschrittenere Format der Funktion the_title() verwenden konnten, um den Titel des Beitrags anzugeben. Der Link zur einzelnen Beitragsseite wurde mit der Funktion get_permalink() generiert.

Abschließend müssen Sie Ihrer style.css-Datei nun ein zusätzliches Styling hinzufügen:

 .article { width: 80%; margin: 0 auto; font-family: book antiqua; clear: both; height: 320px; border-bottom: 1px solid darkgrey; } .article:nth-child(odd) .featured-image { float: right; } .featured-image { width: 40%; display: block; padding: 30px; float: left; } .article .content { display: block; padding: 30px; } .post-meta { margin: 0; } .post-meta div { width: 100%; } .article .content h3 { margin: 0; } .article .content h3 a { text-decoration: none; }

Mal sehen, was wir bisher erreicht haben:

Nett!

Wie Sie sehen können, gibt es jedoch noch einige Probleme bei der Bildanpassung, da sie unterschiedliche Proportionen haben. Wir können dies leicht beheben, indem wir unserem CSS einige weitere Zeilen hinzufügen, um die Bilder mittig zuzuschneiden und feste Abmessungen zu geben:

 .featured-image img { width: 350px; height: 250px; object-fit: cover; }

Auf diese Weise verwenden wir natürlich immer noch die Originalbilder, was aus Performance-Sicht nicht unbedingt optimal ist. Die beste Vorgehensweise hier ist die Verwendung von WordPress-Bildgrößen. Wenn Sie Ihr neues Seitenlayout responsive gestalten möchten, dann werfen Sie für weitere Informationen auch einen Blick auf diese ausführliche Anleitung.

Und das ist es, gut gemacht! Sie haben es jetzt erfolgreich geschafft, Ihr eigenes personalisiertes Layout und Design für die Beitragskategorieansicht zu erstellen.

So erstellen Sie eine benutzerdefinierte WordPress-Seitenvorlage

Bisher haben wir ein benutzerdefiniertes Layout für unsere Beitragsseite und auch ein benutzerdefiniertes Layout für Kategorieergebnisse erstellt. Sie können die Methoden anwenden, die beim Erstellen einer benutzerdefinierten Vorlage für Seiten verwendet werden, und es gelten genau die gleichen Prinzipien.

Bevor wir diesen Artikel jedoch beenden, werfen wir einen kurzen Blick auf eine etwas komplexere Seitenvorlage. In diesem Beispiel ziehen wir unsere Beitragsseiten in unsere Vorlage, damit wir sie so anzeigen können, wie sie auf einer Kategorieseite aussehen würden, aber mit dem zusätzlichen Vorteil der Bearbeitbarkeit, die eine Seite (anstelle einer Kategorieseite) bietet. .

Unser Ziel wird es sein, eine Übersichtsseite „Services“ zu erstellen, die unsere drei Business-Services auflistet (in diesem Beispiel Service 1, Service 2 und Service 3). Anstatt diese manuell zu unserer Seite hinzufügen zu müssen, werden sie dynamisch auf die Seite gezogen. In der Praxis müssen Sie sich darüber vielleicht keine Gedanken machen, aber die Codierungsprinzipien sind nützlich, um die von WordPress gebotene Flexibilität zu verstehen und weiter zu demonstrieren.

Erstellen Sie zunächst eine neue Datei im Ordner Ihres Designs und nennen Sie sie etwa my-services-template.php . Nachdem dies erledigt ist, fügen wir nun einige notwendige Deklarationskommentare hinzu, wie wir es zuvor mit der Vorlage für einzelne Posts getan haben. Wir werden auch die Funktion get_template_part() verwenden.

 <?php /* * Template Name: My post category template * Template Post Type: page */ get_header(); ?> <div class="clear"></div> </header> <!-- / END HOME SECTION --> <div class="site-content"> <div class="container"> <div class="content-left-wrap col-md-9"> <div class="content-area"> <main class="site-main" role="main"> <?php while ( have_posts() ) : the_post(); // standard WordPress loop. ?> <?php get_template_part( 'template-parts/content', 'cat_services' ); // loading our custom file. ?> <?php endwhile; // end of the loop. ?> </main><!-- #main --> </div><!-- #primary --> </div> <div class="sidebar-wrap col-md-3 content-left-wrap"> <?php get_sidebar(); ?> </div> </div><!-- .container --> <?php get_footer(); ?>

Die Funktion get_template_part() ist im Grunde ein Mechanismus, der es uns ermöglicht, wiederverwendbare Codeteile zu laden. In diesem Fall wird der Inhalt von template-parts/content-cat_services.php . In diese Datei fügen wir Code ein, der die Beiträge der Kategorie „Services“ ausgibt.

Zusammenfassend macht der Code in dieser Datei Folgendes:

• Geben Sie der Kategorieseite einen Titel.
• Fragen Sie die Beiträge der angegebenen Kategorie aus der Datenbank ab.
• Gehen Sie die Beiträge durch und zeigen Sie für jeden ein Layout an.

 <h1 align="center"><?php the_title(); ?></h1><!-- category page title --> <?php $args = array( 'cat'=>4, 'orderby' => 'title' ); $cat_query = new WP_Query( $args ); //Query the specified category's posts if($cat_query->have_posts()) { while( $cat_query->have_posts() ) { $cat_query->the_post(); //Loop through the posts ?> <div class="article"> <div class="featured-image"><!-- FEATURED IMAGE --> <?php the_post_thumbnail(); ?> </div> <div class="content"><!-- ARTICLE HEADER --> <?php the_title( '<h3><a href="' . esc_url( get_permalink() ) . '">', '</a></h3>' ); ?> <div class="excerpt-text"><?php the_excerpt(); ?></div> <div class="post-meta"> <div><span class="metakey">Author: </span><?php the_author_posts_link(); ?></div> <div><span class="metakey">Publish Date: </span><?php the_time('F jS, Y'); ?></div> <div><span class="metakey">Category: </span><?php the_category(', '); ?></div> </div> </div> </div> <?php wp_reset_postdata(); } } ?>

Wir werden Abfragen in einem zukünftigen Artikel genauer untersuchen. Was Sie für die Zwecke dieses Artikels wissen müssen, ist, dass $args = array( 'cat'=>4, 'orderby' => 'title' ); ruft die Beitragskategorie mit der ID-Nummer 4 (ID=4) ab. Diese Kategorienummer bezieht sich auf unsere Kategorie „Dienstleistungen“.

Wie können Sie also die ID für jede Kategorie sehen? Es ist eigentlich ganz einfach. Gehen Sie zu Menü Beiträge > Kategorien und öffnen Sie eine beliebige Kategorie, um sie zu bearbeiten. Die ID befindet sich in der URL der Kategoriebearbeitungsseite, wie unten gezeigt:

Um unsere neue Vorlage anzuzeigen, müssen wir zu Seiten gehen und eine neue Seite erstellen. Im Seitenbearbeitungsbereich müssen Sie keine Inhalte eingeben. Wählen Sie stattdessen einfach die Option „Meine Post-Kategorie-Vorlage“ im Drop-down-Vorlagenmenü „Seitenattribute“ aus.

Gehen Sie zuletzt zum Menü und fügen Sie einen „Services“-Eintrag für unsere neue Seite hinzu, um den aktuellen Service-Kategorieeintrag zu ersetzen. Das Menü sollte nun so aussehen

Mal sehen, was wir gemacht haben:

Die obige Methode zeigt, wie Sie eine benutzerdefinierte WordPress-Seitenvorlage erstellen, die eine bestimmte Kategorie einbezieht (in diesem Beispiel unsere „Services“). Wenn Sie dieselbe Vorlage jedoch für eine andere Kategorieseite auswählen, sehen Sie wieder die Beiträge der Kategorie Services, da wir dies ausdrücklich mit der Kategorie-ID (ID=4) angefordert haben. Wenn Sie also eine neue Seitenvorlage wünschen, die eine andere Kategorie enthält, müssen Sie dafür eine separate Vorlagendatei erstellen (und die Kategorie-ID entsprechend aktualisieren).

Fazit

Die Möglichkeit, Ihre eigene benutzerdefinierte Vorlage für Ihre WordPress-Website zu erstellen, gibt Ihnen die ultimative Kontrolle darüber, wie Ihre Website aussieht. Das Erstellen benutzerdefinierter Vorlagen für die Einzel- oder Kategorieansicht Ihrer Beitragstypen ist die Mühe wert. Es ermöglicht natürlich nicht nur die volle Kontrolle über die Designelemente Ihrer Website, sondern Sie können auch schnell ein bestimmtes Layout für zukünftige Seiten replizieren.

Siehe auch

• So erstellen Sie benutzerdefinierte WordPress-Vorlagen mit Page Buildern – Ein Leitfaden