Einführung in das Genesis-Framework

Es gibt viele WordPress-Frameworks. Die meisten von ihnen werden bezahlt und einige sind überraschend kostenlos wie Hybrid oder Thematic. Die meisten WordPress-Benutzer, die Frameworks verwenden, verwenden entweder Thesis oder Genesis. "Warum ein Framework verwenden?", Könnte man fragen. Es ist wegen seiner Einfachheit und Geradlinigkeit. Obwohl es schwierig ist, auf ein Framework umzusteigen, und es in der Anfangsphase zu lernen, es zu erlernen, kann sich auf jeden Fall auszahlen.

Es gibt viele Gründe, warum Sie sich für die Verwendung eines Frameworks gegenüber einem Standard-WordPress-Theme 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
  • Möglichkeit, eigene Kindermotive zu erstellen (Mehr zum Kindermotiv in einer Minute!)
  • Benutzerdefinierte Widgets und Designlayout
  • Und ja der prompte Kundenservice

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


Was sind Kinderthemen??

In einfachen Worten ist Genesis der Rahmen wie ein an einer Wand hängender Bilderrahmen. 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, in denen Sie benutzerdefinierte, untergeordnete Themen erstellen können. Die untergeordneten Themen verfügen über eigene Cascading Stylesheets, die Sie problemlos bearbeiten können. Das untergeordnete Thema hat auch eine Functions.php Datei, in der Sie Ihren eigenen benutzerdefinierten Code hinzufügen können, damit er so arbeitet, wie Sie es möchten. Das untergeordnete Design enthält tatsächlich drei Dateien und der Rest der Dateien befindet sich im übergeordneten Design.


Warum ein Framework verwenden??

Die Antwort ist einfach: Sobald Sie mit dem Framework beginnen, werden Sie sich schnell daran gewöhnen. Sie können Ihre eigenen Änderungen an einem bereits vorhandenen Thema vornehmen, das mit dem Programm geliefert wurde, oder Sie können das Traumthema selbst erstellen, das Sie schon immer wollten.


Welche: These oder Genesis?

Genesis ist für Designer und Thesis für Programmierer gedacht

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 und andere mögen das Gegenteil. Bei der Wahl zwischen diesen beiden Frameworks kann das Design ein wichtiger Faktor sein. Genesis bietet mehr Gestaltungsmöglichkeiten im Vergleich zu Thesis, aber Kindenthemen von Genesis sind im Vergleich zu Thesis weniger umfangreich. Es gibt viele Kinderthemen für Thesis im Internet, sowohl kostenlos als auch kostenpflichtig. Um also die gesamten Gestaltungsmöglichkeiten des Genesis Framework nutzen zu können, muss man bereit sein, sich mit Haken und Kurzcodes die Hände schmutzig zu machen. Einige Leute sagen auch, dass Genesis für Designer und Thesis für Programmierer gedacht ist.


Gestaltungsmöglichkeiten

Design spielt in unserem Leben eine sehr wichtige Rolle. Es ist ein sehr wichtiges Element der Natur, und wenn Sie sich in Ihrem Zimmer umsehen, wird es eine gewisse Reflexion darüber geben, wer Sie sind. Wenn Sie das Design des gesamten Envato-Netzwerks betrachten, erhalten Sie die Idee. Die Integration von Design in Websites wird heutzutage immer wichtiger. Benutzer neigen dazu, immer mehr Zeit auf Websites zu verbringen, die neue und innovative Designs aufweisen. Bei der Gestaltung Ihrer Websites bietet Genesis seinen Benutzern viele Möglichkeiten. Es gibt vorgefertigte untergeordnete Themen, die Sie bearbeiten können. Viele Layout-Optionen sind ebenfalls enthalten. Sie können die Typografie auch ändern, indem Sie Google Fonts hinzufügen und vieles mehr.


Genesis-Haken

Jedes Framework wird mit einem eigenen Hakensatz geliefert, mit dem Sie das Gesamtbild des Designs bestimmen können. Diese Hooks bieten dem Benutzer auch bei kleineren Details einen vollständigen Befehl. Außerdem können Sie es jederzeit und ganz einfach ändern. Sie zahlen also am Anfang und sparen auf lange Sicht Zeit und Arbeit. Sieht für mich nach einem schönen Deal 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 Social-Sharing-Buttons, einem Twitter-Plugin und vielem mehr aufpeppen.


Suche optimiert

Das Framework ist gut im Hinblick auf SEO aufgebaut. Der Code ist semantisch und Sie benötigen niemals ein SEO-Plugin wie Yoast oder All-in-One. Laut StudioPress haben sie mit Greg Boser zusammengearbeitet, einem Partner und SVP des Suchmaschinen-Marketingunternehmens BlueGlass Interactive.

Alle Optionen, die sich auf SEO beziehen, sind in das Framework integriert und Sie benötigen absolut kein Plugin. Die SEO-Optionen bieten auch benutzerdefinierte kanonische URLs für Beiträge und Seiten. Es gibt auch eine Option für Benutzerdefinierte Weiterleitungs-URL, mit der Sie Ihren vorherigen Beitrag an eine beliebige URL umleiten können. Eine Sache, die mir an seinen SEO-Optionen am besten gefallen hat, war, dass sie für jeden Artikel, den Sie auf Ihrer Website veröffentlichen, benutzerdefinierte Schlüsselwörter bietet. Sie können problemlos 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 Keywords leichter finden!


Was tun, wenn Sie irgendwann festgefahren sind

Wenn Sie wie ich sind und sich in den Code stecken, bin ich mir sicher, dass Sie irgendwann einmal festsitzen werden. Es gibt keine Notwendigkeit, in Panik zu geraten, da es unzählige Artikel und Tutorials zu Genesis gibt, die Ihnen helfen werden. Wenn das Problem weiterhin besteht, können Sie sich jederzeit an den Support des StudioPress-Teams wenden. Sie werden sicher alle Fehler entfernen, die Sie beim Eingraben in den Code gemacht haben.

Auf der StudioPress-Website gibt es auch einige grundlegende Tutorials. Sie bieten auch Video-Tutorials, die großartig und leicht zu folgen sind, und werden Ihnen sicherlich dabei helfen, das Framework nach dem Kauf zu nutzen. Es gibt auch viele Entwickler, die Sie mieten können, wenn Sie zusätzliche Münzen in der Tasche haben!


Einrichten von Genesis in Ihrer WordPress-Installation

Es ist so einfach wie es nur geht. Extrahieren Sie die Genesis Ordner auf Ihrem Desktop; Jetzt haben Sie einen neuen Ordner mit dem Namen Genesis.

Als nächstes melden Sie sich mit Ihrer FTP-Software bei Ihrem FTP-Konto an. Ich benutze FTP Zilla. Navigiere zu WP-Inhalt / Themen und laden Sie das hoch Genesis Ordner, den Sie zuvor extrahiert haben. Nachdem der Upload abgeschlossen ist, laden wir ein untergeordnetes Design für das Genesis Framework hoch. Sie können untergeordnete Themen auf der Website von StudioPress kaufen oder selbst erstellen. Das Child-Thema dient grundsätzlich als Kostüm für unsere Website. Wir können das Erscheinungsbild unserer Website ändern, indem Sie unser Child-Thema bearbeiten.

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


Gestalten Sie Ihre Genesis mit Responsive Childtheme

Anstatt ein eigenes untergeordnetes Design zu erstellen, können Sie ein untergeordnetes Beispieldesign von der StudioPress-Website herunterladen. Es enthält den grundlegenden Code, damit es wie eine Webseite aussieht. Die meisten Änderungen, die Sie vornehmen werden, betreffenstyles.css" und das "Functions.phpDateien. Das Beste an dem Beispiel für ein untergeordnetes Thema ist, dass das Layout ansprechend ist, was ziemlich süß ist, wenn man bedenkt, dass es kostenlos ist.


Gestalten Sie sich ein Kind-Thema

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


Entwerfen Sie die Kopfzeile

Wir arbeiten auf unsere Weise, indem wir zuerst die Hintergrundfarbe der Website ändern. In der Bilddatei sehen Sie, dass der Hintergrund grau hinterlegt ist. Daher fügen wir der CSS-Datei des Sample Child-Designs etwas Stil hinzu. Stellen Sie sicher, dass Sie die Datei des untergeordneten Beispieldesigns und nicht die des Genesis Framework bearbeiten. Nun fügen wir den folgenden Code in unser ein styles.css Datei und speichern Sie es.

 body color: # d5d6d7; 

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

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

 #wrap box-shadow: 0 0 5px # 999999; Marge: 15px auto; Polsterung: 0; Breite: 960px;  #header Hintergrund: Keine Wiederholungslauf 0 0 #FFFFFF; Grenzradius: 5px 5px 0 0; Marge: 0 auto; min-Höhe: 140px; Polsterung: 10px 10px 0;  # title-area Hintergrund: keine Wiederholung Blättern 0 0 # 73A0C5; Grenzradius: 5px 5px 5px 5px; Schwimmer: links; Überlauf versteckt; Polsterung: 30px 0; Text ausrichten: Mitte; 

Typografie

Jetzt konzentrieren wir uns auf die Erstellung der allgemeinen Typografie der Website. Damit der Titel in weißer Farbe angezeigt wird, finden wir das Div von "title" und den Hex-Code für weiße Farbe. In ähnlicher Weise fügen wir dem Div von "Beschreibung" weiße Farbe hinzu..

 #titel a, #titel a: hover color: #FFF; Auffüllen: 0 0 0 20px; Textdekoration: keine;  #description color: #FFF; Schriftgröße: 14px; Auffüllen: 0 0 0 20px; 

Ich mag die Typografie des Sample Child-Themas, daher lasse ich es so wie es ist. Das Beste an Genesis ist, dass es Google Fonts verwendet. Dies erleichtert Ihnen die Integration verschiedener Stile in Ihre Website, ganz nach Ihren Wünschen. Google-Schriften sind kostenlos und Sie können ein Theme 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. Blättern Sie nach unten zu Navigationseinstellungen und wählen Sie die gewünschte Einstellung 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 im neu erstellten Menü. Da in diesem Beispiel kein Menü vorhanden ist, wird die primäre Navigation nicht angezeigt.

Das Sidebar-Styling ist viel einfacher und erfordert je nach Bedarf keine Codierung oder nur ein wenig. Um verschiedene Elemente in der Seitenleiste hinzuzufügen, wechseln Sie in Dashboard in den Widgets-Bereich und fügen Sie ein Suchfeld hinzu. Sie können auch die letzten Beiträge, Kategorien und andere Widgets nach Ihrer Wahl hinzufügen.

Obwohl das Sample-Child-Theme ein besseres Styling aufweist 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 Größe der Schrift im CSS der Widgets klein machen, wodurch sie dem ursprünglichen Design ähnelt.


Letzter Schliff

Zum Schluss werden wir das Thema personalisieren. Dazu bearbeiten wir den Header der styles.css. Es ist zwar das erste, was man beim Erstellen eines Themas tun sollte, aber aus irgendeinem Grund mache ich das normalerweise als letzter.

Als Nächstes ändern wir den Fußzeilentext, der immer noch das Thema "Beispiel für untergeordnetes Muster" anzeigt. Um es zu bearbeiten, öffnen Sie die Kindermotive Functions.php und fügen Sie den folgenden Code am unteren Rand hinzu.

 / ** Anpassen der Credits * / add_filter ('genesis_footer_creds_text', 'custom_footer_creds_text'); Funktion custom_footer_creds_text () $ creds = '

'; $ creds. = 'Copyright ©'; $ creds. = Datum ('Y'); $ creds. = ' · Kubrik Genesis · Aufbauend auf dem Genesis Framework '; $ creds. = '

'; $ creds zurückgeben;

Ändere das mywebsite.com zu Ihrem Wunsch. Klicken Sie auf "Speichern", laden Sie es auf den Server hoch und aktualisieren Sie Ihre Website. Ihre Einstellungen werden sofort vorgenommen.


Fazit

Die Themenoptionen von Genesis sind im Vergleich zu denen von Thesis etwas zu kurz. Auch wenn in Genesis ein Sitemap-Generator eingebaut wäre, wäre das toll gewesen. Aber ich schätze, dass Sie niemals etwas erwerben, was in jeder Hinsicht vollständig ist. Es ist nicht erforderlich, eine zusätzliche Entwicklerlizenz zu erwerben, um Genesis auf mehreren Websites zu verwenden, sodass Sie am Ende Geld sparen. Davon abgesehen sind Sicherheit und Support erstklassig.

Für die Gestaltung Ihrer Website scheint es einfach und unkompliziert zu sein. Die Änderungen sind in der Regel sehr einfach durchzuführen. Sie erhalten ein responsives Theme, an dem Sie je nach Geschmack Änderungen vornehmen können. Sie können Tausende von Google-Schriftarten für Ihre Website verwenden. Sie können Ihre Website so bunt gestalten, wie Sie es möchten. Es gibt auch einige raffinierte Themen von StudioPress mit etwas künstlerischem Flair. Sie erhalten gute und leistungsfähige SEO-Optionen für Ihre Website. Für mich ist es ein ziemlich rundes Angebot. Alles in allem ist es also ein schöner Rahmen, den Sie in kürzester Zeit lernen können. Wie haben Sie Genesis gefunden? Lass es uns in den Kommentaren wissen.