So erstellen Sie ein benutzerdefiniertes Widget in WordPress mit dem Genesis Child Theme
Veröffentlicht: 2018-02-15
Genesis ist eines der am häufigsten verwendeten WordPress-Frameworks zum Gestalten von Website-Layouts. Es ist bei Entwicklern aufgrund seiner Parent-Child-Themenarchitektur beliebt. Es ermöglicht ihnen, untergeordnete Themes gemäß ihren Anforderungen anzupassen, ohne die Kernfunktionalität des übergeordneten Themes zu beeinträchtigen.
In diesem Artikel werde ich zeigen, wie einfach es ist, das Genesis Child Theme anzupassen, indem 4 Widget-Bereiche innerhalb des Genesis Sample Theme erstellt werden, das kostenlos mit Genesis Framework geliefert wird.
1. Einrichten der Entwicklungsumgebung
Um Genesis Framework zu installieren, benötigen Sie eine WordPress-Installation, entweder lokal oder auf einem Server. Ich gehe davon aus, dass Sie WordPress bereits auf Ihrem Server installiert haben und wenn nicht, starten Sie Ihr WordPress über die Cloudways-Plattform.
Laden Sie nun die Kopie von Genesis Framework und Sample-Theme von StudioPress herunter und aktivieren Sie das Framework auf Ihrer WordPress-Website.
Hinweis: Für die Anpassung des Genesis-Themes verwende ich Sublime Text 3 als meinen Texteditor. Sie haben jedoch die Wahl, einen anderen Texteditor zu wählen.
2. Anpassung des Child-Themes
Öffnen Sie das Sample Genesis-Theme in Ihrem Texteditor und erstellen Sie eine neue Datei front-page.php im Stammverzeichnis .
Öffnen Sie nun front-page.php und fügen Sie das folgende Snippet hinzu.
<?php Genesis();
Dadurch wird Genesis Framework initialisiert.
Das Beispiel-Theme wird nicht mit front-page.php geliefert , daher muss ich diese Seite explizit erstellen, um unsere Widget-Bereiche zu registrieren.
Benutzerdefinierte Widget-Bereiche
Ich werde Widgets hinzufügen, indem ich die Datei function.php des Themes ändere, aber bevor ich tatsächlich mit dem Schreiben von Code beginne, möchte ich die Back-End-Logik erklären.
Hier deklariere ich eine Funktion, die ein Array von Parametern akzeptiert:
- id – um unseren Code zu identifizieren.
- name – wird in unserem WordPress Dashboard angezeigt.
- Beschreibung – wird auch im WordPress Dashboard angezeigt.
Hinweis: „id“ und der „name“ der Funktion sollten eindeutig sein.
Öffnen Sie nun die function.php und fügen Sie die folgenden Codeschnipsel am Ende der Datei hinzu.
Für Slider-Widget
genesis_register_sidebar( Array(
'id' => 'vorderseite-1',
'name' => __( 'Homepage Slider Widget', 'genesis-sample' ),
'description' => __( 'Dies ist ein Widget, das auf die Startseite geht.', 'genesis-sample' ),
) );Für Inhalts-Widget 1
genesis_register_sidebar( Array( 'name' => __( 'Home Content oben links', 'genesis-sample' ), 'id' => 'inhalt-1', 'description' => __( 'Top Left Home', 'genesis-sample' ), ) );
Für Inhalts-Widget 2
genesis_register_sidebar( Array( 'name' => __( 'Home Content Top Middle', 'genesis-sample' ), 'id' => 'inhalt-2', 'description' => __( 'Top Middle Home', 'genesis-sample' ), ) );
Für Inhalts-Widget 3
genesis_register_sidebar( Array( 'name' => __( 'Home Content oben rechts', 'genesis-sample' ), 'id' => 'inhalt-3', 'description' => __( 'Top Right Home', 'genesis-sample' ), ) );
Wie unten zu sehen ist, habe ich erfolgreich 3 verschiedene Widgets erstellt. Lassen Sie uns nun fortfahren und das angepasste Thema im WordPress-Dashboard hochladen.
Beachten Sie, dass die Widgets auf der Registerkarte Widgets angezeigt werden können. Ihre Aktivierung hat jedoch keine Auswirkungen auf das Frontend unseres Themes. Das liegt daran, dass ich das Markup nicht hinzugefügt habe, um diese Widgets in unserer Datei front-page.php anzuzeigen .
Um Markup zum Anzeigen von Widgets hinzuzufügen, deklariere ich eine benutzerdefinierte Funktion in der Datei front-page.php . In dieser Funktion rufe ich das Widget von seiner "ID" auf, die zuvor in der Datei function.php zusammen mit etwas HTML-Markup erstellt wurde.
Obwohl das Hinzufügen dieser Funktion immer noch nichts bewirkt, da wir diese Funktion noch nicht an eine Aktion angehängt haben.
Dazu deklariere ich eine Aktion, die einen Hook 'genesis-meta' enthält und rufe darin eine Funktion 'my_homepage_setup' auf . In dieser Funktion überprüfe ich, ob der Widget-Bereich aktiv ist oder nicht. Wenn ja, muss ich dieses Widget an einen bestimmten Ort haken und dann diese Widget-Funktion aufrufen, um das Widget-Markup anzuzeigen.
Jetzt füge ich den folgenden Codeausschnitt in die Datei front-page.php ein .
Slider-Widget
add_action( 'genesis_meta', 'my_homepage_setup');
Funktion my_homepage_setup() {
if ( is_active_sidebar( 'front-page-1' ) ) {
//* Slider-Widget hinzufügen
add_action( 'genesis_after_header', 'display_front_page_1_widget');
}
}
// Markup hinzufügen, um Slider-Widgets anzuzeigen.
Funktion display_front_page_1_widget() {
genesis_widget_area( 'front-page-1', array(
'before' => '<div class="front-page-1-widget"><div class="wrap">',
'nach' => '</div></div>',
) );
}Inhalts-Widgets (1, 2 und 3)
add_action( 'genesis_before_content', 'ng_home_page_widgets');
//* Fügen Sie die Home-Widgets an Ort und Stelle hinzu
Funktion ng_home_page_widgets() {
if ( is_front_page('') )
genesis_widget_area ('content-1', array(
'before' => '<div class="ein Drittel erstes Hometopcol toplefthome">',
'nach' => '</div>',));
if ( is_front_page('') )
genesis_widget_area ('content-2', array(
'before' => '<div class="ein Drittel hometopcol topmiddlehome">',
'nach' => '</div>',));
if ( is_front_page('') )
genesis_widget_area ('content-3', array(
'before' => '<div class="ein Drittel hometopcol toprighthome">',
'nach' => '</div>',));
}Endlich etwas CSS-Styling in Ihrer style.css-Datei
Ich füge CSS zu Stil-Widget-Bereichen hinzu. Sie können jedoch nach Belieben stylen.
Der Einfachheit halber definiere ich nur die Größe und das Padding von Inhalts-Widgets: Rahmen- und Hintergrundfarbe für Website-Container.
.first {margin-left:0px;}
.site-container {Hintergrund: #fff;}
.site-inner {padding-top:0px;}
homecontent {
Farbe: #7e7467;
Schriftgröße: 16px;
Zeilenhöhe: 1,3;
box-shadow:1px 2px 5px 0px rgba(0, 0, 0, 1);
Rand oben: 25px;
Position: relativ;}
.textwidget {Auffüllung: 12%;Textausrichtung: Mitte;}
.hometopcol {
Rand-oben: 0px;
Höhe:280px;
Rahmen: 4px festes RGB(255,69,0);}
.widgettitle {
Farbe: #c4421b;
Füllung: 15px 0px 0px 15px;
Rand-unten: 4px festes rgba(162, 152, 135, 1);
Rand-unten: 10px;
Texttransformation: keine;
Schriftgröße: 16px;}
.widgettitle:nach {
Inhalt: " ";
Position: absolut;
oben: 43px;
links: 5px;
rechts: 5px;
Rahmen: 1px festes rgba(162, 152, 135, 1);}Kehren wir zur WordPress-Website zurück und sehen wir uns die Änderungen an. Für Slider Widget verwende ich Smart Slider 3. Sie können jedes Slider-Widget Ihrer Wahl verwenden. Für Inhalts-Widgets verwende ich einfach Text.
Letzter Blick
Am Ende dieses Artikels kann ich 4 benutzerdefinierte Widgets für das untergeordnete Thema Genesis Sample erstellen. Standardmäßig enthält das Genesis-Theme kein Header-Widget, aber jetzt habe ich mein eigenes benutzerdefiniertes Widget, das für einen Schieberegler oder zum Anzeigen anderer Informationen verwendet werden kann. Die anderen 3 Inhalts-Widgets können verwendet werden, um Produkte oder Dienstleistungen oder andere Funktionen hervorzuheben.
Nach der Aktivierung aller Widgets sollte die Startseite etwa so aussehen:
Zusammenfassung
Am Anfang dieses Artikels wussten wir nur, wie man das Genesis WordPress Theme als Sample Child Theme verwendet, aber im Laufe der Zeit haben wir gelernt, wie man benutzerdefinierte Widget-Bereiche im WordPress Genesis Sample Theme erstellt und sie im Frontseitendesign positioniert.
Ich bin sicher, dieser Artikel hat Ihnen genug Selbstvertrauen gegeben, um Ihr eigenes Genesis-Child-Theme selbst anzupassen oder zu erstellen. Für Best Practices wird empfohlen, die offizielle Genesis- und WordPress-Dokumentation zu überprüfen.