Im vorletzten Teil unserer Artikelserie „WordPress Theme anpassen wie ein Profi“ werden wir ein eigenes WordPress Page Template erstellen. Auch wenn es sich bei diesem Beitrag in erster Linie um ein Tutorial handelt, wie man eine Seitenvorlage in WordPress anlegen kann, soll das vorgestellte Beispiel durchaus einen reellen Anwendungsfall widerspiegeln.
Da es immer mehr Elementor User gibt, werden wir ein Landing Page Template erstellen, welches die zwei bestehenden Elementor Vorlagen „Volle Breite“ und „Canvas“ optimal ergänzt. Die Basis für unsere Vorlage bildet eines der besten WordPress und Elementor Themes – Astra.
(*) = Affiliate Links
Inhaltsverzeichnis der Artikelserie:
- Teil 1 – Theme Optionen & Theme Customizer
- Teil 2 – Eigenes CSS und Browser Entwicklertools
- Teil 3 – Eigene Shortcodes erstellen mit Plugin Post Snippets
- Teil 4 – WordPress Child Theme erstellen mit Plugin
- Teil 5 – WordPress Templates bearbeiten & verstehen
- Teil 6 – WordPress Page Template erstellen
- Teil 7 – WordPress Hooks verstehen und anwenden
Das Ziel: WordPress Page Template für eine Landing Page erstellen
Im Beitrag Elementor Templates kannst du im Detail nachlesen, wann die beiden Vorlagen „Elementor Volle Breite“ und „Elementor Canvas“ zum Einsatz kommen. Kurz gesagt verwendet man die „Canvas“-Vorlage, wenn man den Header und Footer mit Elemntor Pro stylen möchte, während die Vorlage „Volle Breite“ standardmäßig das Design der Kopf- und Fußzeile des aktivierten Themes verwendet.
Oder anders gesagt: Während das „Volle Breite“-Template sowohl mit der kostenlosen als auch mit der Pro Version von Elementor verwendet werden kann, kommt die „Canvas“-Vorlage hauptsächlich bei den Pro Usern zum Einsatz. Das Beispiel-Template aus diesem Beitrag wird sowohl mit der Pro Version als auch mit der kostenlosen Version von Elementor seine Anwendung finden.
Unsere Seitenvorlage wird die zuvor erwähnten Templates prima ergänzen, denn unsere Landing Page wird zwar einen Footer aber keinen Header haben. Wie bei einer Landing Page üblich, sollen die Besucher nämlich eine bestimmte Handlung (Call-To-Action) ausführen. Die Wahrscheinlichkeit, dass die Besucher diese Handlung durchführen ist umso höher je geringer die Ablenkung ist und je weniger Handlungsoptionen den Besuchern angeboten werden. Aus diesen Gründen ist das Ausblenden des Hauptmenüs eine gern eingesetzte Technik auf vielen Landing Pages.
Da unsere Artikelserie „WordPress Theme anpassen wie ein Profi“ heisst, werden wir nicht das Plugin Elementor erweitern, sondern das WordPress Theme Astra. Das bedeutet, alle Astra User können unser Template verwenden auch wenn sie nicht den beliebtesten Page Builder im Einsatz haben.
Legen wir also los.
Ein bestehendes Page Template kopieren
Als Basis für unser kleines Tutorial werden wir das schnellste Elementor Theme Astra verwenden. Wir kopieren daraus die Template-Datei page.php, welches für die Darstellung von Seiten verantwortlich ist.
Der Quellcode der page.php-Datei sieht folgendermaßen aus:
<?php
/**
* The template for displaying all pages.
*
* This is the template that displays all pages by default.
* Please note that this is the WordPress construct of pages
* and that other 'pages' on your WordPress site may use a
* different template.
*
* @link https://codex.wordpress.org/Template_Hierarchy
*
* @package Astra
* @since 1.0.0
*/
get_header(); ?>
<?php if ( astra_page_layout() == 'left-sidebar' ) : ?>
<?php get_sidebar(); ?>
<?php endif ?>
<div id="primary" <?php astra_primary_class(); ?>>
<?php astra_primary_content_top(); ?>
<?php astra_content_page_loop(); ?>
<?php astra_primary_content_bottom(); ?>
</div><!-- #primary -->
<?php if ( astra_page_layout() == 'right-sidebar' ) : ?>
<?php get_sidebar(); ?>
<?php endif ?>
<?php get_footer(); ?>
Dieses Template werden wir so anpassen, dass wir am Ende eine Landing Page ohne Seitenleisten und ohne Navigationsmenü erhalten.
Page Template in das Child Theme einfügen und umbenennen
Die kopierte Template-Datei page.php setzen wir in unseren Child Theme Ordner ein. Übrigens, falls du die Pro Version des Astra Themes* hast, musst du das Child Theme nicht selbst erstellen, sondern kannst es bequem aus deinem Astra Account herunterladen. Die eingefügte page.php-Datei müssen wir nun umbenennen. Wir geben dem Template den Dateinamen landing-page.php.
[vorsicht]Achte darauf, dass du als Dateiname nicht eines der bereits vordefinierten Template Files verwendest. Bei der Benennung der Datei solltest du auch den Präfix „page-“ vermeiden. Würden wir z. B. unser Page Template page-landing.php nennen, würde WordPress dieses Template nur dann verwenden, wenn die Seite den Titel bzw. den Slug „Landing“ besitzt.[/vorsicht]
Die Ordnerstruktur unseres Astra Child Themes:
Page Template anpassen
Name des Templates festlegen
Nach dem Öffnen der Datei landing-page.php müssen wir als allererstes den Kommentar im Header anpassen, damit WordPress merkt, dass es sich hierbei um ein Page Template handelt. Die wichtigste Zeile dabei ist Template Name: Landing Page (hier einfach den Namen deines Templates eingeben). Die anderen Angaben sind optional.
Der Kommentar im Header unserer Seitenvorlage:
<?php /** * Template Name: Landing Page * * The template for displaying all landing pages. * * @link https://codex.wordpress.org/Template_Hierarchy * * @package Astra * @since 1.0.0 */
Quellcode anpassen
Nun können wir das Template nach unseren Bedürfnissen anpassen. Da die Seitenleisten ebenfalls zur Ablenkung des Users beitragen würden, entfernen wir im ersten Schritt den Quellcode sowohl für die linke (left-sidebar) als auch für die rechte Seitenleiste (right-sidebar). Als nächstes wollen wir die Kopfzeile loswerden. Am einfachsten wäre es nun, die Funktion „get_header()“ zu löschen. Wir dürfen jedoch nicht den kompletten Header entfernen. Denn es gibt gewisse Metadaten, die auf keiner Unterseite fehlen dürfen und auf jeden Fall in den head-Bereich einer Seite hineingehören.
Außerdem möchten wir von der tollen Bauweise des Astra Themes profitieren und evtl. in Zukunft eines der vielen Hooks verwenden. Auch im Header befinden sich WordPress Hooks, um beispielsweise einfach einen (HTML) Code vor oder nach dem Header hinzuzufügen. Um diese Vorteile auch auf unserer Landing Page zu genießen, werden wir deshalb schnell ein eigenes Header Template erstellen und dabei als Vorlage natürlich die Header-Datei von Astra verwenden.
Ein Page Template für einen Custom Header erstellen (optional)
Wir kopieren dafür die header.php-Datei aus dem Astra Theme Ordner und fügen es in unseren Child Theme Ordner ein. Danach benennen wir diese Datei in header-custom.php um. Nun öffnen wir die Datei header-custom.php und löschen die Zeile, in der es heißt:
<?php astra_header(); ?>
Aktuell befindet sich dieser Code in Zeile 34. Der Custom Header hat nun keine Navigation mehr und ist auch schon fertig.
Das Landing Page Template fertigstellen
Den gerade erstellten Custom Header müssen wir jetzt nur noch in unserem Landing Page Template aufrufen. Dafür ergänzen wir in unserer Landing Page Template Datei den Aufruf „php get_header“ um den Begriff ‚custom‘. Der Aufruf sieht nun wie folgt aus:
<?php get_header( 'custom' ); ?>
Und das ist unser gesamtes Page Template ohne die linke und die rechte Seitenleiste sowie mit einem Custom Header, der die Navigation ausgeblendet hat:
<?php
/**
* Template Name: Landing Page
*
* The template for displaying all landing pages.
*
* @link https://codex.wordpress.org/Template_Hierarchy
*
* @package Astra
* @since 1.0.0
*/
get_header( 'custom' ); ?>
<div id="primary" <?php astra_primary_class(); ?>>
<?php astra_primary_content_top(); ?>
<?php astra_content_page_loop(); ?>
<?php astra_primary_content_bottom(); ?>
</div><!-- #primary -->
<?php get_footer(); ?>
Das eigene Landing Page Template anwenden
Um eine neue Landing Page zu erstellen, gehen wir im WordPress Adminbereich auf Seiten > Erstellen und wählen bei den Seiten-Attributen das Template „Landing Page“ aus:
Page Template testen
Am Ende der Umsetzung steht immer das Testen. Dabei ist mir aufgefallen, dass unser frisch angelegtes Template einen kleinen Schönheitsfehler hat. Wenn man nämlich bei Astra ein Layout mit einer Seitenleiste auswählt (ich hatte es global über den Customizer so definiert), wird zwar die Seitenleiste nicht angezeigt, der Inhaltsbereich geht jedoch nicht über die komplette Breite. Genauer gesagt, besitzt der Container mit der ID „primary“ bei eingeschalteter Seitenleiste eine Breite von 70%. Dieser Container sollte jedoch immer 100% breit sein.
Seitenlayout für Landing Page final definieren
Um das zu erreichen, müssen wir eine CSS-Klasse unserem Quellcode hinzufügen und die Breite dieser Klasse auf 100% setzen. Der div-Container mit der ID „primary“ befindet sich zwar in unserem Landing Page Template, die dazugehörigen CSS-Klassen werden aber dynamisch mit der Funktion „astra_primary_class“ vergeben. Wir wenden hier einen kleinen Trick an, indem wir eine Ebene höher gehen und dem Container, der den primary-Container umhüllt die neue Klasse „landing-page“ geben.
Dieser Container hat bereits die CSS-Klasse „ast-container“ und befindet sich in unsere header-custom.php Datei. Wir ergänzen den Code um die CSS-Klasse landing-page (siehe mittlere Zeile im folgenden Code-Ausschnitt):
<div id="content" class="site-content"> <div class="ast-container landing-page"> <?php astra_content_top(); ?>
Nun müssen wir nur noch die Breite der neuen CSS Klasse auf 100% setzen. Das machen wir ganz einfach über den Customizer und die Option „Zusätzliches CSS“. Dort fügen wir den folgenden CSS-Code ein:
.landing-page #primary {
width: 100%;
}
Und schon geht unsere Seitenvorlage immer über die komplette Breite, unabhängig davon ob eine Seitenleiste ausgewählt wurde oder nicht.
Conditional Tags im eigenen Page Template verwenden
Eigene Page Templates sind auch optimal dafür geeignet, Conditional Tags zu verwenden. Wenn wir z. B. eine Landing Page für ein Gewinnspiel erstellen möchten, könnten wir eine weitere Header-Datei speziell für diese Seite erstellen (z. B. mit einer Begrüßungsnachricht). Mit dem folgenden Code würden wir den Gewinnspiel Header nur auf der Landing Page mit dem Namen „Gewinnspiel“ laden. Auf allen anderen Landing Pages wäre unser Custom Header zu sehen.
<?php if ( is_page( 'Gewinnspiel' ) ) : get_header( 'gewinnspiel' ); else: get_header( 'custom' ); endif;
Der Dateiname für den Gewinnspiel-Header würde in diesem Fall header-gewinnspiel.php lauten.
Fazit
Die Notwendigkeit ein eigenes WordPress Page Template zu erstellen, hat in den letzten Jahren etwas abgenommen. Page Builder wie Elementor und immer bessere Themes machen es einfach, mit nur wenigen Klicks jedes beliebige Layout für die einzelnen Unterseiten auszuwählen. Das Hueman Theme, welches aktuell auf diesem Blog verwendet wird, bietet z. B. sieben verschiedene Layout-Optionen an. Trotz dieser vielen Möglichkeiten kommt es doch immer wieder vor, dass sich Anforderungen an das Layout nur durch ein eigenes Page Template umsetzen lassen.
Was ebenfalls für WordPress Templates spricht, ist die Performance. Betrachtet man die Ladezeiten ist es besser, die Inhalte mit einem WordPress Page Template und dem WordPress Editor zu generieren als mit einem Page Builder Template. Es wird also auch in Zukunft noch Anwendungsfälle für selbst erstellte WordPress Templates geben.
