Einführung in das Genesis Framework

() translation by (you can also view the original English article)

Es gibt viele WordPress-Frameworks. Die meisten von ihnen werden bezahlt und einige sind überraschenderweise kostenlos wie Hybrid oder Thematic. Die meisten WordPress-Benutzer, die Frameworks verwenden, verwenden entweder Thesis oder Genesis. "Warum verwendet man ein Framework?", man könnte fragen. Es liegt an seiner Einfachheit und Unkompliziertheit. Obwohl es schwierig ist, zu einem Framework zu wechseln, und es in der Anfangsphase ziemlich schwierig sein kann, es zu lernen, wird es sich auf lange Sicht definitiv auszahlen.

Es kann viele Gründe geben, sich für die Verwendung eines Frameworks über ein Standard-WordPress-Theme zu entscheiden. Einige von ihnen können sein:

Sauberer und semantischer Code
Mehr Kontrolle über das Erscheinungsbild Ihrer Website
Bessere SEO-Optionen
Viele Themen zur Auswahl
Option zum Erstellen eigener untergeordneter Themen (Weitere Informationen zu untergeordneten Themen in einer Minute!)
Benutzerdefinierte Widgets und Designlayout
Und ja der schnelle Kundenservice

Ich hätte vielleicht ein paar verpasst, aber das sind so ziemlich diejenigen, die erwähnt werden mussten.

Was sind Kinderthemen?

Mit einfachen Worten, Genesis ist das Gerüst wie ein Bilderrahmen, der an einer Wand hängt. Dieser Rahmen ist leer und Sie benötigen ein Bild, damit die Betrachter es sehen können. Dieses Bild ist das untergeordnete Thema, und die Zuschauer sind Ihre täglichen Besucher auf der Website. Es gibt viele Organisationen, die Ihnen benutzerdefinierte untergeordnete Themen bereitstellen. Die untergeordneten Themen haben ihre eigenen kaskadierenden Stylesheets, die Sie problemlos bearbeiten können. Das untergeordnete Thema verfügt außerdem über eine Datei functions.php, in der Sie Ihren eigenen benutzerdefinierten Code hinzufügen und ihn nach Ihren Wünschen ausführen können. Das untergeordnete Thema enthält tatsächlich drei Dateien, und der Rest der Dateien befindet sich im übergeordneten Thema.

Warum verwendet man ein Framework?

Die Antwort ist einfach: Sobald Sie das Framework verwenden, werden Sie sich in kürzester Zeit daran gewöhnen. Sie können Ihre eigenen Änderungen an einem bereits vorhandenen Thema vornehmen oder das Traumthema erstellen, das Sie schon immer wollten.

Welches: These oder Genesis?

Genesis wurde für Designer und Thesis für Programmierer entwickelt

Die Wahl zwischen diesen beiden erstklassigen Frameworks in der WordPress-Familie ist ziemlich schwierig. Bei der Auswahl müssen Sie möglicherweise Ihre Optionen berücksichtigen. Sie können von Person zu Person variieren. Einige Leute möchten ein sehr einfaches und minimalistisches Design, andere mögen das Gegenteil. Bei der Wahl zwischen diesen beiden Frameworks kann das Design ein wichtiger Faktor sein. Genesis bietet im Vergleich zu Thesis mehr Gestaltungsmöglichkeiten, aber die Anzahl der untergeordneten Themen von Genesis ist im Vergleich zu denen von Thesis geringer. Es gibt viele untergeordnete Themen für Abschlussarbeiten im Internet, sowohl kostenlos als auch kostenpflichtig. Um die gesamten Entwurfsfunktionen des Genesis Frameworks nutzen zu können, muss man bereit sein, sich mit Hooks und Funktionscodes die Hände schmutzig zu machen. Einige Leute sagen auch, dass Genesis für Designer und Thesis für Programmierer erstellt wurde.

Optionen entwerfen

Design spielt eine sehr wichtige Rolle in unserem Leben. Es ist ein sehr wichtiges Element der Natur und wenn Sie sich in Ihrem Zimmer umschauen, wird es ein gewisses Spiegelbild dessen haben, wer Sie sind. Wenn Sie sich das Design des gesamten Envato-Netzwerks ansehen, werden Sie auf die Idee kommen. Die Integration von Design in Websites wird heutzutage immer wichtiger. Benutzer verbringen immer mehr Zeit auf Websites mit neuen und innovativen Designs. Bei der Gestaltung Ihrer Websites bietet Genesis seinen Benutzern viele Optionen. Es gibt vorgefertigte untergeordnete Themen, die Sie bearbeiten können. Viele Layoutoptionen sind ebenfalls enthalten. Sie können die Typografie auch ändern, indem Sie Google Fonts und vieles mehr hinzufügen.

Genesis Hooks

Jedes Framework verfügt über einen eigenen Satz von Haken, mit denen Sie die Kontrolle über das gesamte Erscheinungsbild des Designs übernehmen können. Diese Hooks bieten dem Benutzer auch bei kleinen Details vollständige Befehle. Außerdem können Sie es jederzeit ganz einfach ändern. Sie zahlen also zu Beginn dafür und sparen auf lange Sicht Zeit und Arbeit. Sieht für mich nach einem guten Geschäft aus!

Es bietet Ihnen eine gute Funktionalität; Sie können viele Widgets hinzufügen und entfernen. Ihre benutzerdefinierten Widgets funktionieren mit dem Framework genauso wie mit jedem anderen Design. Sie können die Seitenleiste mit Schaltflächen zum Teilen von sozialen Medien, einem Twitter-Plugin und vielem mehr aufpeppen.

Suche optimiert

Das Framework ist gut aufgebaut und berücksichtigt SEO. Der Code ist semantisch und Sie werden niemals ein SEO-Plugin wie Yoast oder All-in-One benötigen. Laut StudioPress haben sie mit Greg Boser zusammengearbeitet, der Partner und SVP des Suchmaschinenmarketing-Kraftpakets BlueGlass Interactive ist.

Alle Optionen im Zusammenhang mit SEO sind in das Framework integriert und Sie benötigen absolut kein Plugin. Die SEO-Optionen bieten auch benutzerdefinierte kanonische URLs für Posts und Seiten. Es gibt auch eine Option für die benutzerdefinierte Weiterleitungs-URL, mit der Sie Ihren vorherigen Beitrag zu einer beliebigen URL umleiten können. Eine Sache, die mir an den SEO-Optionen am besten gefallen hat, war, dass sie benutzerdefinierte Keywords für jeden Artikel bietet, den Sie auf Ihrer Website veröffentlichen. Sie können ganz einfach Schlüsselwörter für Ihren Artikel hinzufügen, ohne zusätzliche Plugins zu benötigen. So können Suchmaschinen den Artikel anhand der benutzerdefinierten Schlüsselwörter leichter finden!

Was tun, wenn Sie irgendwann stecken bleiben?

Wenn Sie wie ich sind und den Code durchstöbern, bin ich sicher, dass Sie irgendwann stecken bleiben werden. Es besteht kein Grund zur Panik, da es unzählige Artikel und Tutorials zu Genesis gibt, die Ihnen helfen werden. Und wenn dieses spezielle Problem weiterhin besteht, können Sie sich jederzeit an den Support des StudioPress-Teams wenden. Sie werden sicherlich alle Fehler entfernen, die Sie beim Eingraben in den Code gemacht haben könnten.

Es gibt auch einige grundlegende Tutorials auf der StudioPress-Website. Sie bieten auch Video-Tutorials, die großartig und leicht zu befolgen sind, und sie werden Ihnen sicherlich helfen, mit dem Framework zu beginnen, nachdem Sie es gekauft haben. Es gibt auch viele Entwickler, die Sie einstellen können, wenn Sie zusätzliche Münzen in Ihrer Tasche haben!

Einrichten von Genesis in Ihrer WordPress-Installation

Es ist so einfach wie es nur sein kann. Extrahieren Sie den Genesis-Ordner auf Ihrem Desktop. Jetzt haben Sie einen neuen Ordner namens Genesis.

Melden Sie sich anschließend mit Ihrer FTP-Software bei Ihrem FTP-Konto an. Ich benutze FTP Zilla. Navigieren Sie zu wp-content/theme und laden Sie den zuvor extrahierten genesis-Ordner hoch. Nach Abschluss des Uploads laden wir ein untergeordnetes Thema für das Genesis Framework hoch. Sie können untergeordnete Themen von der StudioPress-Website kaufen oder selbst erstellen. Das Thema Kind fungiert im Wesentlichen als Kostüm für unsere Website. Wir können das Erscheinungsbild unserer Website ändern, indem wir unser untergeordnetes Thema bearbeiten.

Das ist es so ziemlich. Sie haben gerade Ihr erstes WordPress-Theme mit dem Genesis Framework eingerichtet.

Styling Ihrer Genesis mit Responsive Childtheme

Anstatt Ihr eigenes untergeordnetes Thema von Grund auf neu zu erstellen, können Sie ein untergeordnetes Beispielthema von der StudioPress-Website herunterladen. Es enthält den gesamten Basiscode, damit es wie eine Webseite aussieht. Die meisten Änderungen, die Sie vornehmen werden, betreffen die Dateien "styles.css" und "functions.php". Das Beste am untergeordneten Beispielthema ist, dass sein Layout ansprechend ist, was ziemlich süß ist, wenn man bedenkt, dass es kostenlos ist.

Gestalten Sie sich ein Kinderthema

Der erste Schritt besteht darin, sich ein untergeordnetes Thema in Photoshop oder Gimp zu entwerfen. Ich werde das alte WordPress Kubrick-Thema für dieses Tutorial als Beispiel erstellen. Der Grund, warum ich das Kubrick-Thema verwende, ist, dass es einfach und leicht zu befolgen ist. Sie können auch Ihre eigene Website in Photoshop entwerfen und in ein untergeordnetes Thema für Genesis konvertieren.

Entwerfen Sie den Header

Wir arbeiten uns vor, indem wir zuerst die Hintergrundfarbe der Website ändern. In der Bilddatei sehen Sie, dass der Hintergrund grau skaliert ist. Daher fügen wir der CSS-Datei des untergeordneten Beispielthemas einige Stile hinzu. Stellen Sie sicher, dass Sie die Datei des untergeordneten Beispielthemas und nicht die des Genesis Frameworks bearbeiten. Jetzt fügen wir den folgenden Code in unsere Datei styles.css ein und speichern ihn.

1	body{
2	color : # d5d6d7;
3	}

Denken Sie daran, dass das untergeordnete Thema bereits ein eigenes Design hat. Alles, was Sie tun müssen, ist, die passende Div oder Klasse zu finden und ihr Styling hinzuzufügen.

Stilisieren Sie auf ähnliche Weise den Header Ihrer Website. Ich werde den CSS-Code hinzufügen, um den Header zu gestalten und den Text mit dem folgenden Code zu zentrieren.

#wrap {
	box-shadow: 0 0 5px #999999;
	margin: 15px auto;
	padding: 0;
	width: 960px;
}

#header {
	background: none repeat scroll 0 0 #FFFFFF;
	border-radius: 5px 5px 0 0;
	margin: 0 auto;
	min-height: 140px;
	padding: 10px 10px 0;
}

#title-area {
	background: none repeat scroll 0 0 #73A0C5;
	border-radius: 5px 5px 5px 5px;
	float: left;
	overflow: hidden;
	padding: 30px 0;
	text-align: center;
}

Typografie

Jetzt konzentrieren wir uns darauf, die allgemeine Typografie der Website zu erstellen. Damit der Titel in einer weißen Farbe angezeigt wird, finden Sie das div von "title" und den Hex-Code für die weiße Farbe. In ähnlicher Weise fügen wir dem div von "description" weiße Farbe hinzu.

#title a, #title a:hover {
	color: #FFF;
	padding: 0 0 0 20px;
	text-decoration: none;
}
#description {
	color: #FFF;
	font-size: 14px;
	padding: 0 0 0 20px;
}

Ich mag die Typografie des Beispielkind-Themas, also werde ich dies so lassen, wie es ist. Das Beste an Genesis ist, dass Google Fonts verwendet werden. Dies erleichtert es Ihnen, verschiedene Stile in Ihre Website zu integrieren, ganz nach Ihren Wünschen. Google Fonts sind kostenlos und Sie können das Thema auf Ihrer Website verwenden. Weitere Informationen zur Verwendung von Google-Schriftarten finden Sie hier.

Navigation und Seitenleiste

Sie können die Navigation so einrichten, dass sie in den Genesis-Designeinstellungen angezeigt wird. Scrollen Sie nach unten zu den Navigationseinstellungen und wählen Sie die Ihren Anforderungen entsprechend aus. Bevor Sie eine Navigationsleiste hinzufügen können, müssen Sie auf der Registerkarte "Darstellung" ein "Neues Menü" erstellen. Fügen Sie ein neues Menü hinzu und erstellen Sie neue Links für Ihre Seiten oder Kategorien in das neu erstellte Menü. Da es in diesem Beispiel kein Menü gibt, wird ausgewählt, dass die primäre Navigation nicht angezeigt wird.

Das Styling der Seitenleiste ist viel einfacher und erfordert keine Codierung oder nur ein wenig, je nach Ihren Anforderungen. Um verschiedene Elemente in der Seitenleiste hinzuzufügen, gehen Sie im Dashboard zum Bereich Widgets und fügen Sie ein Suchfeld hinzu. Sie können auch Neueste Beiträge, Kategorien und andere Widgets nach Ihrer Wahl hinzufügen.

Obwohl das Beispiel-Kinderthema besser gestylt ist als das ursprüngliche Design, dreht sich alles um die persönliche Meinung. Für das Styling können Sie die unteren Ränder entfernen und die Schriftgröße im CSS der Widgets verkleinern, damit sie dem ursprünglichen Design ähnelt.

Letzter Schliff

Für den letzten Schliff werden wir dem Thema eine gewisse Personalisierung hinzufügen. Dazu bearbeiten wir den Header der Datei styles.css. Es sollte zwar das erste sein, was beim Erstellen eines Themas zu tun ist, aber aus irgendeinem seltsamen Grund mache ich dies normalerweise zuletzt.

Als Nächstes ändern wir den Fußzeilentext, der noch "Sample Child theme" angezeigt wird. Öffnen Sie zum Bearbeiten die Datei functions.php Ihres untergeordneten Themas und fügen Sie unten den folgenden Code hinzu.

/** Customize the credits */
add_filter( 'genesis_footer_creds_text', 'custom_footer_creds_text' );
function custom_footer_creds_text() {
	$creds = '<div class="creds"><p>';
	$creds .=  'Copyright &copy; ';
	$creds .=  date( 'Y' );
	$creds .=  ' &middot; <a href="https://mywebsite.com">Kubrik Genesis</a> &middot; Built on the <a href="http://www.studiopress.com/themes/genesis" title="Genesis Framework">Genesis Framework</a>';
	$creds .=  '</p></div>';
	return $creds;
}

Ändern Sie die mywebsite.com in Ihre gewünschte. Klicken Sie auf Speichern, laden Sie es auf den Server hoch und aktualisieren Sie Ihre Website. Ihre Einstellungen werden sofort vorgenommen.

Abschluss

Die Themenoptionen von Genesis sind im Vergleich zu denen von Thesis etwas unzureichend. Auch wenn in Genesis ein Sitemap-Generator eingebaut wäre, wäre das großartig gewesen. Aber ich denke, dass Sie nie etwas erwerben, das in jeder Hinsicht vollständig ist. Es ist nicht erforderlich, eine zusätzliche Entwicklerlizenz zu erwerben, um Genesis auf mehr als einer Website zu verwenden, sodass Sie am Ende Geld sparen. Davon abgesehen sind Sicherheit und Support erstklassig.

Für die Gestaltung Ihrer Website erscheint es einfach und unkompliziert. Die Änderungen sind normalerweise sehr einfach vorzunehmen. Sie erhalten ein ansprechendes Thema, an dem Sie je nach Geschmack Änderungen vornehmen können. Sie können Tausende von Google Fonts für Ihre Website verwenden. Sie können Ihre Website so farbenfroh gestalten, wie Sie möchten. Es gibt auch einige raffinierte Themen von StudioPress mit künstlerischem Flair. Sie erhalten gute und leistungsstarke SEO-Optionen für Ihre Website. Für mich ist es ein ziemlich abgerundetes Angebot. Alles in allem ist es also ein schönes Framework und Sie können es in sehr kurzer Zeit lernen. Wie haben Sie Genesis gefunden? Lass es uns in den Kommentaren unten wissen.