Wenn Sie eine Website mit dem Genesis-Beispielthema oder einem anderen auf dem Genesis-Framework basierenden Thema erstellen, kann es sein, dass Sie eine Seite erstellen müssen, die keinen Seitentitel am Anfang hat. Besonders wenn die Seite mit Bildern oder anderen visuellen Inhalten beginnt.
Theoretisch können Sie den Seitentitel im Genesis-Beispiel-Theme auf zwei Arten entfernen:
- Die eine Möglichkeit ist, die Seiten-ID der gewünschten Seite herauszufinden und dann den Titel mit CSS auszublenden. Das würde die Arbeit erledigen, aber der Titel würde immer noch im Hintergrund geladen werden, und dann müsste zusätzliches CSS geladen werden. Machbar, aber nicht gut.
- Bessere Lösung: Erstellen Sie eine benutzerdefinierte Seitenvorlage, die den Seitentitel überhaupt nicht enthält. Das Eliminieren des Elements ist viel effizienter als das Ausblenden.
Diesmal zeige ich Ihnen eine einfache Lösung, wie Sie eine benutzerdefinierte Seitenvorlage im Genesis-Muster-Theme erstellen und wie Sie sie für die gewünschten Seiten im WordPress-Admin einstellen können. Hier ist unser Plan:
- erstellen einer benutzerdefinierten Seitenvorlage im Genesis-Muster-Theme
- entfernen Sie den Seitentitel in der benutzerdefinierten Seitenvorlage
- css hinzufügen, um Leerraum (padding) zwischen dem Seitenkopf und dem Inhalt zu entfernen, nachdem der Seitentitel entfernt wurde (optional)
Wie erstellt man eine benutzerdefinierte Seitenvorlage im Genesis-Beispiel-Theme?
Standardmäßig hat das Genesis Beispielthema eine benutzerdefinierte Seitenvorlage. Sie heißt Landing und befindet sich im Ordner /page-templates.
Die Seitenvorlage Landing entfernt Kopfzeile, Fußzeile, Menü und andere Teile des Standard-Layouts von Genesis und lässt nur das absolute Minimum übrig – den Seiteninhalt. Hier sehen Sie, wie die Vorlage aussieht:
<?php
/**
* Genesis Sample.
*
* This file adds the landing page template to the Genesis Sample Theme.
*
* Template Name: Landing
*
* @package Genesis Sample
* @author StudioPress
* @license GPL-2.0-or-later
* @link https://www.studiopress.com/
*/
add_filter( 'body_class', 'genesis_sample_landing_body_class' );
/**
* Adds landing page body class.
*
* @since 1.0.0
*
* @param array $classes Original body classes.
* @return array Modified body classes.
*/
function genesis_sample_landing_body_class( $classes ) {
$classes[] = 'landing-page';
return $classes;
}
// Removes Skip Links.
remove_action( 'genesis_before_header', 'genesis_skip_links', 5 );
add_action( 'wp_enqueue_scripts', 'genesis_sample_dequeue_skip_links' );
/**
* Dequeues Skip Links Script.
*
* @since 1.0.0
*/
function genesis_sample_dequeue_skip_links() {
wp_dequeue_script( 'skip-links' );
}
// Removes site header elements.
remove_action( 'genesis_header', 'genesis_header_markup_open', 5 );
remove_action( 'genesis_header', 'genesis_do_header' );
remove_action( 'genesis_header', 'genesis_header_markup_close', 15 );
// Removes navigation.
remove_theme_support( 'genesis-menus' );
// Removes site footer elements.
remove_action( 'genesis_footer', 'genesis_footer_markup_open', 5 );
remove_action( 'genesis_footer', 'genesis_do_footer' );
remove_action( 'genesis_footer', 'genesis_footer_markup_close', 15 );
// Runs the Genesis loop.
genesis();Um eine neue Seitenvorlage zu erstellen, duplizieren wir die Datei landing.php und legen sie in das gleiche Verzeichnis, nur mit einem anderen Namen. Zum Beispiel – ohne_title.php.
Aus der Landing Page-Vorlage werden viele Teile der Vorlage entfernt, die wir benötigen. Wir entfernen alles, was nicht benötigt wird, aus der Kopie und lassen nur den notwendigen Teil übrig. Hier ist, was übrig bleiben wird:
<?php
/**
* Genesis Sample.
*
* This file adds the landing page template to the Genesis Sample Theme.
*
* Template Name: Without title
*
* @package Genesis Sample
* @author StudioPress
* @license GPL-2.0-or-later
* @link https://www.studiopress.com/
*/
// Runs the Genesis loop.
genesis();Das ist alles, was wir brauchen:
- grundlegende Informationen über die Vorlage
- name der Vorlage. Ich habe Other verwendet, aber Sie können auch etwas Beschreibenderes verwenden, wie Page without title.
- Genesis-Aufruf.
Jetzt haben wir die grundlegendste Seitenvorlage, die für das Genesis-Beispiel-Theme oder jedes andere Genesis-basierte Thema möglich ist.
Wie man eine Seitenvorlage ohne Titel im Genesis Sample theme erstellt
Da wir bereits eine grundlegende Seitenvorlage haben, ist die Hälfte der Arbeit bereits getan. Jetzt müssen wir noch zwei Dinge tun.
Erstens müssen wir das gesamte Markup des Seitentitels und alle anderen Elemente, die sich im Kopfbereich des Eintrags befinden könnten, entfernen. Um genau zu sein, müssen wir diesen Code zu der Vorlage hinzufügen, die wir zuvor erstellt haben:
remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_open', 5 );
remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_close', 15 );
remove_action( 'genesis_entry_header', 'genesis_do_post_title' );
remove_action( 'genesis_entry_header', 'genesis_post_info', 12 );
remove_action( 'genesis_entry_header', 'genesis_do_post_format_image', 4 );
remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );Wir entfernen das HTML-Markup für die Kopfzeile des Eintrags, den Titel des Beitrags, zusätzliche Informationen zum Beitrag (Datum, Autor usw.), das Featured Image (falls vorhanden) und die Breadcrumbs (falls sie in der Kopfzeile des Eintrags angezeigt werden).
Zweitens müssen wir unserer neuen Vorlage die Klasse body hinzufügen, falls wir für Seiten, die diese Vorlage verwenden, ein spezielles Styling benötigen. Wir können also diesen Code verwenden:
add_filter( 'body_class', 'genesis_sample_without_title_body_class' );
function genesis_sample_without_title_body_class( $classes ) {
$classes[] = 'without-title-page';
return $classes;
}Wir fügen die zusätzliche Klasse without-title-page hinzu. Wir werden sie gleich brauchen, aber vorher sehen wir uns die endgültige Seitenvorlage ohne Seitentitel an:
<?php
/**
* Genesis Sample.
*
* This file adds the landing page template to the Genesis Sample Theme.
*
* Template Name: Without title
*
* @package Genesis Sample
* @author StudioPress
* @license GPL-2.0-or-later
* @link https://www.studiopress.com/
*/
add_filter( 'body_class', 'genesis_sample_without_title_body_class' );
function genesis_sample_without_title_body_class( $classes ) {
$classes[] = 'without-title-page';
return $classes;
}
remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_open', 5 );
remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_close', 15 );
remove_action( 'genesis_entry_header', 'genesis_do_post_title' );
remove_action( 'genesis_entry_header', 'genesis_post_info', 12 );
remove_action( 'genesis_entry_header', 'genesis_do_post_format_image', 4 );
remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );
genesis();Wenn Sie diese Vorlage im Verzeichnis /page-templates des Genesis Child-Themes speichern, können Sie die Seitenvorlage ohne Titel im WordPress-Admin auswählen. Und so weiter:
Sobald wir die Seitenvorlage ändern und die Änderungen speichern, wird der Seitentitel nicht mehr auf der Seite sichtbar sein.
Wie man Leerzeichen zwischen Kopfzeile und Seiteninhalt in Genesis entfernt
Nachdem wir den Seitentitel in Genesis Sample Theme entfernt haben, werden Sie feststellen, dass zwischen dem Seitenkopf und dem Inhalt eine große Lücke klafft. Jeder Beitrag und jede Seite hat diese Lücke standardmäßig, und in den meisten Fällen ist sie auch notwendig. Aber wenn Sie den Seitentitel entfernt haben und nun den Seiteninhalt mit Bildern beginnen wollen, möchten Sie wahrscheinlich auch diese Lücke loswerden.
Um den Leerraum zwischen Seitentitel und Inhalt in Genesis zu entfernen, öffnen Sie den Customizer im WordPress-Admin-Panel, klicken Sie auf den Reiter Additional CSS auf der linken Seite und geben Sie diesen CSS-Code ein:
.without-title-page .site-inner {
padding-top: 0px;
}Sie haben wahrscheinlich bemerkt, dass wir die zusätzliche Klasse .without-page-title verwenden, die wir zuvor in der Seitenvorlage hinzugefügt haben. Auf diese Weise können wir den CSS-Code nur für eine bestimmte Vorlage festlegen.
Von nun an werden alle Seiten, die die Seitenvorlage ohne Titel verwenden, keine Lücke zwischen Kopfzeile und Seiteninhalt haben.
