Erste Schritte mit WordPress Child Themes

Artikel geschrieben von:
  • WordPress
  • Aktualisiert: Juli 27, 2013

Sie stellen sich also vor, dass Sie Ihre Optimierungen in der WordPress-Welt beginnen und Sie viele tolle Themen gefunden haben. Es gibt sogar viele Premium-Themen, von denen die meisten den Preis wirklich wert sind (ein paar Bücher für einen professionellen Look und Code). Und die meisten Themen, die Sie finden, sind so nah, aber keiner ist genau das, was du willst. Es wäre gut, in der Lage zu sein, die Menüleiste ein wenig zu verschieben, die Schriftart zu ersetzen, einen neuen Textblock hinzuzufügen.

Wenn Ihnen das bekannt vorkommt, ist dieser Leitfaden genau das Richtige für Sie. Hier tauchen wir in die Welt der Kinderthemen ein, in der Sie so ziemlich alles tun können, ohne das fantastische Thema zu brechen, das Sie gekauft haben, oder zukünftige Updates zu verlieren, weil alles, was Sie tun, rückgängig gemacht wird.

Bearbeiten der Darstellung, ohne die Design-Dateien zu ändern

Kurz gesagt, darum geht es bei Child-Theme: Anpassen ohne Änderung der Originaldateien. Ein untergeordnetes Thema hat im Grunde die gleichen Funktionen und das Aussehen des Hauptthemas (Eltern), es sei denn, Sie sagen ausdrücklich etwas anderes.

Es enthält mindestens 2-Dateien, die style.css- und die functions.php-Datei, alle anderen Dateien werden vom übergeordneten Thema übernommen. Wenn Sie also keine neue Datei in Ihrem untergeordneten Themenverzeichnis erstellen, verwenden Sie übergeordnete Dateien.

Wir haben hier viele Möglichkeiten, aber der Hauptvorteil besteht darin, dass Sie einfach zum ursprünglichen Thema zurückkehren können, und Sie können auch Ihr Hauptthema aktualisieren, ohne Änderungen zu verlieren, da sie in einem völlig anderen Ordner ausgeführt werden.

Lass uns unsere Hände schmutzig machen

Im ersten Schritt erstellen Sie ein neues untergeordnetes Themenverzeichnis unter Ihrem / wp-content / themes / -Ordner. Nennen wir es "Zwanzig-Kind", und lassen Sie uns unsere grundlegende styles.css-Datei erstellen:

/ * Thema Name: Zwanzig Kind Thema URI: http://www.webrevenue.co Beschreibung: Kind Themen jetzt lernen Autor: Rochester Oliveira Autor URI: http://www.webrevenve.co/author/rochester/ Vorlage: twentytelve * / / * Aufruf des Hauptthemas CSS-Datei * / @import ("../ twentytelve / style.css"); / * Fügen Sie alles hinzu, was Sie wollen * /

Die Parameter sind (neben anderen optionalen Parametern weggelassen):

  • Themenname: Der Name, den Sie im Themenauswahlbildschirm sehen
  • Themen-URI: Der Link, der dort angezeigt wird
  • Beschreibung: Eine kurze Beschreibung, damit Sie sich daran erinnern, worum es geht
  • Autor: Wer hat das Child-Thema erstellt?
  • Autoren-URI: Wenn Sie mit der Website des Autors verlinken möchten
  • Vorlage: Der Hauptthema-Ordner (wenn Sie also ein anderes Thema als Hauptthema verwenden möchten, ersetzen Sie einfach diesen Parameter)

Sobald Sie diesen Code hinzugefügt haben, wird das untergeordnete Thema unter WP admin> Darstellung> Designs angezeigt. Sie können es jetzt auswählen und alle Änderungen werden auf Ihrer Website angezeigt.

Child Theme bearbeitet 101

Dies kann nutzlos sein, wenn Sie kein CSS-Wissen haben, oder? Falsch! CSS ist eigentlich ziemlich einfach und Sie können eine Menge Schnipsel finden, um Ihnen dort zu helfen. Hier sind ein paar einfache Tipps, die Sie bei Ihren Anpassungen unterstützen.

#1 Installiere Firebug

Viele Leute lieben Chrome und Safari (ich auch!), Aber für mich ist FireFox viel besser für die Entwicklung. Also, wenn Sie es verwenden möchten, empfehle ich Ihnen, auch Firebug zu installieren, was ein großartiges Werkzeug ist, um alle Selektoren zu verstehen, die im aktuellen Element aktiv sind.

Sobald Sie es installiert haben, können Sie F12 drücken oder mit der rechten Maustaste irgendwo auf der Seite klicken und "Element prüfen" auswählen. Sie sehen ein neues Fenster mit der aktuellen HTML- und CSS-Seite (und vielen anderen Registerkarten, die nützlich sind, vielleicht können wir später darüber sprechen).

In der CSS-Box sehen Sie von oben nach unten alle CSS-Regeln, die auf das aktuelle Element angewendet wurden, und die "spezifischere" Regel oben. Das ist cool, aber lass uns sehen, was du mit dieser Info machen kannst

#2 Berücksichtigung der CSS-Spezifität (oder der Selektorgewichtung)

Jede CSS-Regel hat ihren Selektor, die Eigenschaften und die Werte. Aber wenn der Browser 2 oder mehr Regeln findet, die sich auf das gleiche Element auswirken, muss er auswählen, welche davon besser geeignet ist. Wir haben normalerweise diese "Regel", um zu verstehen, was in Betracht gezogen wird:

  • ! Eine wichtige Deklaration überschreibt alles andere
  • Inline-CSS überschreibt alles außer! wichtige Regeln
  • IDs (#header, #footer, # container ...) sind 100-Punkte wert
  • Klassen (.main, .nav, .box) wert 10-Punkte
  • Tags (Körper, div, p, a) wert 1 Punkt
  • Universelle Selektor- und Pseudo-Klassen (*,: hover,: after) wert 0, aber sie werden angewendet, wenn es eine "Krawatte" gibt

Ok, lass uns ein Beispiel sehen, um das besser zu verstehen. Klicken Sie mit der rechten Maustaste auf die Kopfzeile Ihrer Website und Sie werden sehen, dass das erste angezeigte CSS Folgendes ist:

.site-header {Auffüllen: 1.71429em 0; } Artikel, beiseite, Details, figcaption, Abbildung, Fußzeile, Header, hgroup, nav, Abschnitt {Anzeige: Block; }

Der erste Selektor hat 10-Punkte (da es sich um eine Klasse handelt), und der zweite hat 1-Punkte (da Kommas nur verschiedene Selektoren trennen), deshalb erscheint er oben. Wenn du etwas wie #header div hast, wäre dieser Selector sicherlich der erste, der auftaucht.

Warum ist das so wichtig?

Um das Hauptthema zu bearbeiten, ohne seine CSS-Dateien zu bearbeiten, müssen Sie IMMER Regeln verwenden, die mehr Punkte als die im Hauptthema definierten Regeln haben. Und Sie können schlau sein und einfachen Code verwenden. Zum Beispiel, um diese Eigenschaft zu überschreiben:

.site-header {Auffüllen: 1.71429em 0; }

Sie können dies in Ihrem untergeordneten Thema CSS hinzufügen, aber Sie sollten nicht:

.site-header {Auffüllen 15px 0! wichtig; }

Weil dies ein schlechter Code ist und es viel schwieriger ist, ihn erneut zu überschreiben, wenn Sie ihn beispielsweise auf einer einzelnen Seite ändern müssen. Also könntest du das einfach benutzen:

body.site-header {Auffüllen: 15px 0; }

Dieser Selektor hat 11-Punkte, was größer ist als der ursprüngliche 10 und daher wird dieser Code angewendet.

#3 Nutzen Sie die Funktionen gut

Die Datei functions.php ist die einzige Datei, die zusätzlich zur Originaldatei geladen wird. Das ist eine clevere Workaround-Lösung, die von WP-Team durchgeführt wurde, damit Sie Originalfunktionen beibehalten und eigene Funktionen hinzufügen können. Der Catch ist, die Child-Theme-Funktionen werden zuerst geladen und der Theme-Entwickler MUSS so etwas tun, um Konflikte beim Deklarieren von Funktionen zu vermeiden:

if (! function_exists ('top_menu')) {function top_menu () {// cooler Code hier} add_action ('wp_head', 'top_menu'); }

Dies liegt daran, dass beim Definieren einer Funktion in der untergeordneten Designdatei die ursprüngliche Funktion überschrieben werden kann. Wenn der Theme-Entwickler das nicht so macht, kommt es zu einem hässlichen PHP-Fehler (da dieselbe Funktion zweimal erstellt wird).

#4 Erfahren Sie einige CSS-Eigenschaften

Wusstest du, dass du Inhalte mithilfe von CSS verstecken und hinzufügen kannst? Sie müssen den Firebug installieren, um den richtigen Selektor zu finden, aber Sie können ein Element ausblenden, indem Sie diesen Code hinzufügen:

Körper a {display: none}

Um es hinzuzufügen, ist es komplizierter, da Sie nur kleine Texte hinzufügen können, wenn Sie einen "On Sale!" - Text nach einem Preisschild möchten, könnten Sie zum Beispiel diesen Code verwenden:

.Preis del: nach {Farbe: rot; Inhalt: "Auf Verkauf!"; }

Was denken Sie?

Was denkst du über diesen Leitfaden? Werden Sie in Erwägung ziehen, untergeordnete Themen zu verwenden? Benutzt du es schon? Lass es uns wissen, indem du den Kommentarbereich unten verwendest!

Über Rochester Oliveira

Ich bin ein Webdesigner und Unternehmer aus Itajubá (MG), Brasilien. Ich liebe es, über obskure Themen zu schreiben und coole Sachen zu machen.

Verbinden: