Einfache Anpassungen für Ihr untergeordnetes Genesis-Theme
Veröffentlicht: 2018-03-07Als Webdesigner freuen wir uns immer darauf, effizienter zu arbeiten. Als ich mit einer längst überfälligen Aufgabe begann, mein Portfolio neu zu gestalten, wurde ich daran erinnert, wie sehr ich WordPress liebe und wie schnell ich mit dem Genesis-Framework einsatzbereit war. Ein Framework ist im Wesentlichen eine WordPress-Theme-Struktur, die eingerichtet wird, um darauf aufzubauen. Das Genesis-Framework von StudioPress ist vergleichbar mit einem Lego-Baustein. Es macht die verschiedenen Komponenten des Themas einfach zu bearbeiten und leicht zu bewegen. Genesis ist ein sehr beliebtes Framework, da es gut unterstützt wird und es viele Tutorials gibt, die vorhanden sind, wenn Sie während des Prozesses nicht weiterkommen.
Wie wir alle wissen, bearbeiten wir den WordPress-Kern nicht. Dasselbe gilt für das Genesis-Framework; Wir bearbeiten keine der Framework-Dateien. Unsere gesamte Themenerstellung erfolgt in einem Genesis Child Theme, das Ihnen die Flexibilität gibt, die perfekte Website zu erstellen. Es wird dringend empfohlen, dass alle Gebäude in einer Testumgebung erstellt werden, wenn Sie Ihr untergeordnetes Design entwickeln oder Anpassungen vornehmen. Umfangreiche Tests sind von Vorteil, damit Sie sicher sein können, dass alles richtig aussieht und funktioniert, bevor Sie es offiziell mit der Welt teilen.
Wenn Sie Ihr untergeordnetes Design erstellen oder ändern, gibt es Anpassungen, die Sie möglicherweise vornehmen möchten, um es zu verbessern. Für einige dieser Anpassungen verwenden wir die Datei functions.php in Ihrem Child-Theme. Diese Datei ist wichtig, wenn Sie Anpassungen vornehmen.
Auf der Suche nach einem Einstiegsthema für Genesis?
Denken Sie daran, dass Sie das Genesis-Design als übergeordnetes Design installiert haben müssen, wenn Sie ein untergeordnetes Design erstellen. Dieses untergeordnete Thema hängt von der Funktionalität von Genesis ab. Sobald Sie es installiert haben, gibt es ein großartiges Starter-Design, das Sie verwenden können, wenn Sie lieber keins kaufen möchten. Dieses Genesis-Beispielthema finden Sie auf der StudioPress-Website.
Sie werden vielleicht bemerken, dass das Genesis-Beispieldesign ziemlich karg aussieht, aber zu Beginn brauchen Sie nur eine functions.php-Datei und eine styles.css-Datei, die Sie im Laufe der Zeit erstellen oder anpassen können.
Holen Sie sich Genesis Framework & StudioPress-Designs kostenlos!
Wenn Sie Ihre Websites auf Flywheel hosten, haben Sie direkt von unserem ansprechenden Dashboard aus Zugriff auf über 30 Premium-WordPress-Themen (einschließlich Genesis!). Das ist ein Wert von über 2.000 $, mit dem Sie für nur 15 $/Monat beginnen können! Erfahren Sie hier mehr.
Fügen Sie Ihren Google Analytics-Tracking-Code hinzu
Wahrscheinlich verwenden Sie irgendeine Art von Analyse, um den Verkehr für Ihre Website zu messen. Google Analytics ist ein großartiges Tool. Alles, was Sie brauchen, ist ein einzigartiger Tracking-Code und schon kann es losgehen. Die Anmeldung für ein Google Analytics-Konto ist schnell und einfach. Als zusätzlicher Bonus ist es kostenlos.
Wenn Sie bereits einen Tracking-Code haben, stellen Sie sicher, dass Sie diesen zusammen mit Ihrem neuen Design mitbringen, damit Sie ihn über die Einstellungsseite des Genesis-Designs einfügen können. Dies ist einfach zu tun, aber nicht immer leicht zu finden.
Melden Sie sich zunächst bei Ihrem WordPress-Administratorkonto an. Sobald Sie eingeloggt sind, klicken Sie auf Genesis > Designeinstellungen . Sie sehen Optionen für die Kopf- und Fußzeile. Diese wird in das Header-Feld eingefügt.
Es sollte etwa so aussehen:
Wie Sie dem obigen Screenshot entnehmen können, ist es ziemlich einfach, Ihren Tracking-Code hinzuzufügen und die Tools in Google Analytics zu verwenden, um Ihre Website-Daten anzuzeigen. Dies kann jedoch einschränkend sein, je nachdem, wie viele Daten Sie Ihnen zur Verfügung stellen möchten.
Was ist, wenn Sie neben den Angeboten von Google Analytics auch andere Geschäftsdaten sehen möchten? Wenn Sie eher ein Power-User sind, gibt es Plugins, mit denen Sie wertvolle Statistiken anzeigen können. Erwähnenswert ist Google Analytics für WordPress von MonsterInsights. Es verbindet Ihre Website mit Google Analytics, sodass Sie Leistungsdaten anzeigen können. Es gibt eine Lite- und eine Pro-Version, so dass viele Arten von Analysen verfügbar sind. Wenn Sie ein Plug-in verwenden, müssen Sie den Google Analytics-Tracking-Code wahrscheinlich nicht manuell zum Header hinzufügen und befolgen die Plug-in-Richtlinien. Oft gibt es einen Ort in den Plugin-Einstellungen, an dem Sie einen Verweis auf das Snippet hinzufügen, um sich mit Ihrem Konto zu verbinden.
Widget-Bereich hinzufügen
Vielleicht möchten Sie einen Textblock, ein Autorenfeld oder etwas hinzufügen, das nach jedem Beitrag angezeigt werden soll. Das Hinzufügen eines Widgets ist eine schnelle Möglichkeit, diese Funktionalität zu erstellen.
Das Genesis Visual Hook Guide-Plugin zeigt die verschiedenen Bereiche der Seite und ist hilfreich, wenn Sie Orte für Ihre Funktion angeben. So wissen Sie, dass Sie in der Funktion auf genesis_before_comments verweisen müssen, damit das Widget an der richtigen Stelle angezeigt wird.
Dies geschieht in der Datei functions.php. Zuerst registrieren wir unseren Widget-Bereich. Dann verwenden wir eine Funktion, um es tatsächlich zur Seite hinzuzufügen.
//* Register widget area called 'after-post'
genesis_register_sidebar( array(
'id' => 'after-post',
'name' => __( 'After Post', 'sample' ),
'description' => __( 'This is a widget area that can be placed after the post', 'sample' ),
) );
//* Hook after-post widget area located after post content
add_action( 'genesis_before_comments', 'after_post_widget' );
function after_post_widget() {
if ( is_singular( 'post' ) ) {
genesis_widget_area( 'after-post', array(
'before' => '<div class="after-post widget-area">',
'after' => '</div>',
) );
}
}
Erstellen einer benutzerdefinierten Homepage
Dies ist ein Szenario, in dem wir eine benutzerdefinierte Vorlagendatei für eine benutzerdefinierte Homepage-Datei erstellen. In diesem Beispiel werden mehrere Widget-Bereiche verwendet, um die Startseite zu erstellen. Bei der Verwendung von Widgets ist es einfach, Inhalte zu erstellen, zu pflegen und zu aktualisieren.
Wenn Ihr Thema eine front-page.php hat, enthält es bereits eine benutzerdefinierte Startseite. Wenn nicht, kann einfach eine mit dem Namen front-page.php erstellt werden.
Nach der Erstellung müssen Sie lediglich den folgenden Code in front-page.php :
<?php genesis();
Fügen Sie der Titelseite benutzerdefinierte Widget-Bereiche hinzu
Um mit dem Hinzufügen benutzerdefinierter Widget-Bereiche zu Ihrer Homepage zu beginnen, gehen Sie zu functions.php und fügen diese Bereiche hinzu. Sie können nur eine oder so viele wie nötig hinzufügen. Dieses Beispiel zeigt drei Widget-Bereiche.
Stellen Sie sicher, dass Sie diesen Code nach dem PHP-Tag einfügen.
// Register widget areas
genesis_register_sidebar ( array(
'id' => 'front-page-1',
'name' => __( 'Front Page Widget #1', 'sample' ),
'description' => __( 'This is a front page widget area', 'sample' ),
));
genesis_register_sidebar ( array(
'id' => 'front-page-2',
'name' => __( 'Front Page Widget #2', 'sample' ),
'description' => __( 'This is a front page widget area', 'sample' ),
));
genesis_register_sidebar ( array(
'id' => 'front-page-3',
'name' => __( 'Front Page Widget #3', 'sample' ),
'description' => __( 'This is a front page widget area', 'sample' ),
));
Die Widget-Bereiche werden angezeigt, wenn Sie zu Darstellung > Widgets gehen, aber sie werden noch nicht auf der eigentlichen Startseite angezeigt. Damit sie auf der Homepage angezeigt werden, ist Markup erforderlich, um das Widget tatsächlich anzuzeigen.
Erstellen Sie eine Aktion, um Widgets anzuzeigen
Damit es tatsächlich auf der Seite erscheint, müssen Aktionen und Funktionen zur front-page.php hinzugefügt werden. Dies wird geschehen, bevor wir genesis(); .
add_action( 'genesis_meta', 'digital_front_page_genesis_meta' );
/* Widget support for front page */
function digital_front_page_genesis_meta() {
if ( is_active_sidebar( 'front-page-1' ) || is_active_sidebar( 'front-page-2' ) || is_active_sidebar( 'front-page-3' ) ) {
add_action( 'genesis_after_header', 'digital_front_page_widgets');
}
}
Eine Aktion wurde angehängt und es wird überprüft, ob es ein aktives Widget gibt, und es wird bestimmt, wo es sich einklinkt. Hier kommt das Widget nach dem Header, aber es gibt viele andere Stellen, an denen Widgets platziert werden können.
Hier nur einige Beispiele:
- genesis_before_header
- genesis_before_sidebar_widget_area
- genesis_before_footer
- genesis_before_comments
Es kommt dahin, aber die wahre Magie passiert, wenn die Funktion aufgerufen wird, um das Widget anzuzeigen.
Funktion zum Hinzufügen von Widgets zur Startseite
Dieser Schritt wird häufig vor dem Anhängen einer Aktion ausgeführt, sollte aber unter dem Aktions-Snippet erfolgen. Hier wird eine benutzerdefinierte Funktion erstellt. Die Funktion genesis_widget_area wird aufgerufen.
Sie können hier beliebig viele Divs hinzufügen. Ich habe eine innere mit einer Klasse von .wrap, die ich hilfreich finde. Sie können dies so ändern, wie Sie möchten. Eine Sache für Organisationszwecke: Eine ID/Klasse zu haben, die das Widget mit einer erkennbaren Namenskonvention referenziert, ist sehr hilfreich. Dieses Array enthält Markup, das um das Widget gewickelt werden kann, was gut für das CSS-Styling ist, das so geändert werden kann, dass es sich von diesem Beispiel unterscheidet. Vergewissern Sie sich, dass Sie immer noch front-page.php , da dieses Snippet auch dort hineingehört.
//* Add widgets on front page
function digital_front_page_widgets() {
genesis_widget_area( 'front-page-1', array(
'before' => '<div id="front-page-1" class="front-page-1"><div class="wrap">',
'after' => '</div></div>',
));
genesis_widget_area( 'front-page-2', array(
'before' => '<div id="front-page-2" class="front-page-2"><div class="wrap">',
'after' => '</div></div>',
));
genesis_widget_area( 'front-page-3', array(
'before' => '<div id="front-page-3" class="front-page-3"><div class="wrap">',
'after' => '</div></div>',
));
}
Sie können dann ein Layout erstellen und Widget-Bereiche für den Homepage-Inhalt verwenden.
Hinzufügen Ihres Logos
Ein Logo ist ein notwendiges Branding-Element. Wenn Sie es also zu Ihrer Website hinzufügen, werden sich Ihre Benutzer wirklich wie zu Hause fühlen.
Wahrscheinlich hat Ihr Thema die Möglichkeit, eine Logodatei hochzuladen. Wenn Sie das Genesis Sample Theme verwenden, werden Sie dies tun. Am einfachsten gehen Sie zu Aussehen > Anpassen und Ihre Logodatei hochladen. Möglicherweise müssen Sie das CSS ein wenig anpassen und bei Bedarf Rand und Auffüllung hinzufügen.
In der Datei functions.php finden Sie möglicherweise etwas, das dem folgenden ähnelt:
// Add support for custom header add_theme_support( 'genesis-custom-header', array( 'width' => 500, 'height' => 120 ) );
Wenn Sie eine andere Größenpräferenz haben, können Sie die Werte für Breite und Höhe ändern, um sie an Ihr Logo anzupassen.
Fußzeilen-Credits ändern
Die meisten Designs enthalten standardmäßig einen Link zum Design und Copyright-Informationen. Eine schnelle und einfache Möglichkeit, die Credits der Fußzeile zu ändern, verwendet die Datei functions.php und Shortcodes. Es gibt Plugins, die eine einfache Änderung der Fußzeilen ermöglichen, sodass Sie entscheiden können, welche Methode für Sie am besten geeignet ist.
Angenommen, Sie möchten die Themeninformationen nicht in der Fußzeile haben, aber Sie möchten die Copyright-Informationen beibehalten. Dadurch wird die Fußzeile global geändert, und Sie müssen die Themeninformationen nicht mehr in der Fußzeile sehen.
//* Customize the footer credits
add_filter( 'genesis_footer_creds_text', 'my_custom_footer_creds' );
function my_custom_footer_creds(){
$creds = ' 2015 Your Name.';
return $creds;
}
Das wird funktionieren, aber was ist, wenn Sie möchten, dass die Informationen automatisch aktualisiert werden, wenn sich das Jahr ändert?
Es gibt einen Trick, um das Jahr automatisch zu aktualisieren. Durch das Einfügen des [footer_copyright] können wir ihn festlegen und vergessen.
//* Use a shortcode instead
add_filter( 'genesis_footer_creds_text', 'my_custom_footer_creds' );
function my_custom_footer_creds(){
$creds = '[footer_copyright] Your Name.';
return $creds;
}
Dabei spielt es keine Rolle, ob Sie lieber die Fußzeile im Theme aktualisieren oder dafür ein Plugin verwenden. Es hängt alles von den Vorlieben ab. Wenn Sie häufig Themen wechseln möchten, ist es sinnvoll, ein Plugin für Fußzeileninhalte zu verwenden. Der Grund dafür ist, dass Sie, wenn Sie den Analysecode in einer Designdatei haben, daran denken müssen, auf das neue Design zu aktualisieren. Ein Plugin funktioniert über alle Themen hinweg. Genesis Simple Edits ist die perfekte Lösung für so etwas. Es ist einfach zu bedienen und mit einem kleinen Ausschnitt bleibt die Fußzeile über mehrere Themen hinweg auf dem neuesten Stand.
Auf der linken Seite sehen Sie die Option für einfache Bearbeitungen unter der Überschrift Genesis. Dieses Plugin gibt Ihnen Zugriff auf eine Genesis-Einstellungsseite. Wenn Sie nach unten zu „Fußzeilenausgabe“ scrollen, sehen Sie, wie das Hinzufügen eines Shortcodes und eines Textes eine globale Änderung ermöglicht. Der Shortcode [footer_copyright] stellt sicher, dass das Copyright-Jahr immer aktuell ist.
Die Fußzeile ist nicht das einzige, was mit diesem Plugin geändert werden kann. Zusätzlich zur Fußzeile können Sie mit Simple Edits die Post-Info (Byline) und Post-Meta zu jedem Genesis-Thema ändern. Mithilfe von Text, Shortcodes und HTML in den bereitgestellten Textfeldern können Sie diese Bereiche einfach bearbeiten.
Das Hinzufügen persönlicher Akzente zu Ihrem Thema ist der unterhaltsame Teil des Designprozesses! Diese Anpassungen sind großartige Beispiele für einfache Änderungen, mit denen Sie Ihre Website personalisieren und wirklich zu Ihrer eigenen machen können.
Lerne weiter!
Laden Sie dieses E-Book herunter, um eine Liste unserer am meisten empfohlenen Plugins für Entwickler zu erhalten! Wir haben festgestellt, dass all diese Plugins einfach zu bedienen, nicht zu leistungsintensiv auf Ihrer Website und einfach absolut zuverlässig sind.
Sind Sie bereit, Ihr neues Lieblings-Plugin zu installieren? Klicken Sie unten!