Wie man ein Child-Theme in WordPress erstellt

Offenlegung der Leser

Die Mitgliedschaftsseite Ihrer WordPress-Website Das Design beeinflusst, wie die Nutzer auf die Website reagieren. Wenn Sie jedoch nicht bereit sind, für ein benutzerdefiniertes WordPress-Theme zu bezahlen, scheinen Ihre Möglichkeiten, das Aussehen Ihrer Website zu optimieren, begrenzt zu sein. Selbst wenn Sie ein Theme finden, das alles tut, was Sie wollen, kann Ihre Website am Ende ähnlich aussehen wie andere Websites.

WAS IST INNEN

Glücklicherweise können Sie Ihre WordPress-Website noch besser anpassen, indem Sie ein Child-Theme erstellen. So können Sie ein Theme, das Ihnen gefällt, übernehmen und eigene Änderungen vornehmen, z. B. Schriftarten und Farben anpassen und vieles mehr. Tatsächlich ist es möglich, das Aussehen eines Themes mit dieser Technik drastisch zu verändern.

In dieser Anleitung zeigen wir Ihnen, wie Sie in WordPress ein Child-Theme erstellen, und erklären, warum Ihr Mitgliederportal dadurch besser zur Geltung kommt. Los geht’s!

Warum Sie vielleicht ein Child-Theme erstellen sollten

Ein WordPress-Theme ist eine Sammlung von Code, die das Erscheinungsbild und das Layout Ihrer Website bestimmt. Mit dieser Funktion können Sie Ihrer Website ganz einfach ein völlig neues Aussehen verleihen, ohne sich mit Programmierung auskennen zu müssen. Beliebte WordPress-Themes werden jedoch oft von Hunderten von Websites verwendet, was bedeutet, dass Ihre Website schnell wie aus der ‘Masse’ wirkt, wenn Sie nicht aufpassen.

Die Verwendung eines benutzerdefinierten Designs kann Ihre Website hervorhebenindem Sie ein einzigartiges Erscheinungsbild schaffen, das die Besucher mit Ihrer Marke in Verbindung bringen. Dies kann auch dazu beitragen, dass Sie sich von Ihrer Konkurrenz abheben. Wenn jede Website, die eine Person besucht, ein ähnliches Design hat, Ihre jedoch ein aufmerksamkeitsstarkes Aussehen hat, das sie einzigartig erscheinen lässt, wird der Besucher Ihre Website eher zur Kenntnis nehmen und sich an sie erinnern.

Allerdings kann es für Anfänger eine große Herausforderung sein, ein Theme von Grund auf neu zu entwerfen. Außerdem ist es ziemlich teuer, einen Designer zu engagieren um ein komplett individuelles Theme für Sie zu erstellen. Glücklicherweise gibt es noch eine dritte Möglichkeit. Durch die Erstellung eines Child-Themes können Sie Elemente aus einem bestehenden Theme übernehmen und Ihre eigenen Änderungen hinzufügen.

Ein Child-Theme ist auf der Grundlage eines bereits vorhandenen Themes, das als ‘Über-Theme’ bezeichnet wird. Es ist zwar möglich, die Dateien eines Themes direkt zu bearbeiten, doch dabei geht man das Risiko ein, Ihre Website zerstören falls Sie eine falsche Änderung vornehmen. Das Erstellen eines Child-Themes birgt weitaus weniger Risiken, da es sich um eine sichere Kopie Ihres Themes handelt, mit der Sie nach Belieben experimentieren können.

Wie man ein Child-Theme für WordPress erstellt (in 5 Schritten)

Nachdem Sie nun verstanden haben, warum Sie auf Ihrer Mitglieder-Website möglicherweise ein Child-Theme verwenden möchten, wollen wir uns nun damit befassen, wie man eines einrichtet. Zunächst müssen Sie sicherstellen, dass Sie über die richtigen Werkzeuge verfügen.

Schritt 1: Einrichten einer Entwicklungsumgebung

Zunächst benötigen Sie einen Arbeitsbereich. Eine Entwicklungsumgebung (auch als ‘Testseite’ oder ‘Staging-Seite’ bezeichnet) ist ein lokaler Server, der auf Ihrem Computer läuft. Damit können Sie private Seiten erstellen – entweder komplett neue oder Kopien Ihrer Live-Seite –, an denen Sie dann beliebige Änderungen vornehmen können.

Mit anderen Worten: Die Verwendung einer Entwicklungsumgebung hilft Ihnen dabei, Websites ‘hinter den Kulissen’ zu erstellen, sodass sich die Änderungen erst dann auf Ihre eigentliche Website auswirken, wenn Sie bereit sind. Auf diese Weise können Sie Ihr Child-Theme erstellen und anpassen, bevor Sie es verwenden. Weitere Hilfe zu diesem Schritt finden Sie in dieser Anleitung zu Einrichten einer lokalen WordPress-Website. In den folgenden Schritten werden wir mit MAMP als unser Entwicklungswerkzeug.

Schritt 2: Wählen Sie einen Code-Editor

Sobald Sie Ihre Entwicklungsumgebung eingerichtet haben, benötigen Sie einen Code-Editor, mit dem Sie die Dateien Ihres Themes bearbeiten können. Ein Code-Editor ist ein einfaches Tool, das Ihnen beim Schreiben von Code hilft. Viele erkennen Fehler sogar automatisch, sodass Sie diese schnell beheben können.

Es gibt viele beliebte, kostenlose Code-Editoren, die Sie ausprobieren können, wie z. B. Atom und Visual Studio-Code. Sobald Sie sich für eine Lösung entschieden haben, installieren Sie diese auf Ihrem Computer, damit Sie die Dateien Ihres Child-Themes problemlos bearbeiten können.

Schritt 3: Installieren Sie WordPress auf Ihrer Testseite

Jetzt können Sie Ihre Test-Site einrichten. Um zu beginnen, laden Sie die neueste Version von WordPress:

Archivieren Sie die .zip Datei (Doppelklick auf einem Mac; unter Windows mit der rechten Maustaste und wählen Sie Auszug). Erstellen Sie dann einen Ordner auf Ihrem Computer (z. B., Dokumente > Standorte) und platzieren Sie die nicht archivierten WordPress-Dateien darin:

Als Nächstes müssen Sie Ihre Entwicklungsumgebung auf diesen Ordner verweisen. Öffnen Sie dazu in MAMP Einstellungen > Webserver. Unter Wurzel des Dokumentsklicken Sie auf Wählen Sie und wählen Sie den Ordner mit Ihrer WordPress-Installation:

Klicken Sie dann auf dem MAMP-Startbildschirm auf WebStart-Seite öffnen:

Auf der nächsten Seite finden Sie Werkzeuge > PHPMYADMIN:

Richten Sie eine Datenbank ein, indem Sie einen Namen wie "wp_test" eingeben und auf erstellen.:

Besuchen Sie dann localhost in einem Webbrowser. Sie sollten den WordPress-Installationsbildschirm sehen:

Presse Weiter und folgen Sie den Anweisungen. Geben Sie dabei “wp_test” als Datenbanknamen und “root” als Benutzernamen und Passwort ein:

Sobald Ihre neue Website eingerichtet ist, können Sie sich mit dem Passwort und dem Benutzernamen anmelden, die Sie während der Installation festgelegt haben.

Schritt 4: Erstellen Sie Ihr Child-Theme

Als Nächstes müssen Sie Folgendes tun: das Thema installieren das Sie als Basis für Ihr Child-Theme verwenden möchten. Greifen Sie dann in dem von Ihnen gewählten Code-Editor auf Ihren WordPress-Ordner zu:

Öffnen Sie wp-Inhalt, Rechtsklick auf das Themen Ordner und erstellen Sie darin einen neuen Ordner mit dem Namen “themename_childtheme” (ersetzen Sie den ersten Teil durch den Namen des Ordners des übergeordneten Themes).

Als Nächstes erstellen Sie eine neue Datei mit dem Namen "style.css" und speichern sie in Ihrem Child-Theme-Ordner:

Richten Sie Ihr style.css Datei wie unten gezeigt (ersetze dabei “TwentyFifteen” durch den Namen des übergeordneten Themes):

Dadurch werden alle erforderlichen Daten aus dem übergeordneten Thema importiert.

Danach können Sie sich bei Ihrer lokalen WordPress-Website anmelden. Wenn Sie besuchen Erscheinungsbild > Themeskönnen Sie Ihr neues Child-Theme sehen und aktivieren:

Natürlich wird sich das Erscheinungsbild Ihrer Website erst ändern, wenn Sie Änderungen am Child-Theme vornehmen:

Um zu überprüfen, ob es funktioniert, kannst du eine kleine Änderung an deiner Website vornehmen. Füge doch einmal einen Code-Block wie “p {font-family: cursive; color:red;}" zum style.css file:

Wenn sich der Absatztext Ihrer Website in rot und kursiv ändert, haben Sie erfolgreich ein Child-Theme erstellt:

Danach können Sie an Ihrem neuen Child-Theme beliebige Änderungen vornehmen.

Schritt 5: Laden Sie das Child-Theme auf Ihre WordPress-Mitgliedschaftsseite hoch

Sobald Ihr Child-Theme fertig ist, können Sie es auf Ihre Live-WordPress-Website hochladen. Erstens, Sichern Sie Ihre Website (nur für den Fall). Als nächstes komprimieren Sie den gesamten Ordner, der Ihr Child-Theme enthält (auf einem Mac klicken Sie mit der rechten Maustaste und wählen Sie Komprimierenunter Windows, klicken Sie mit der rechten Maustaste und wählen Sie Senden an > Komprimieren).

Besuchen Sie dann auf Ihrer Live-Site Erscheinungsbild > Themes. Wählen Sie Neu hinzufügenund dann Thema hochladen. Wählen Sie die gezippte Child-Theme-Datei und installieren Sie sie:

Sobald der Upload abgeschlossen ist, müssen Sie Folgendes auswählen: Aktivieren Sie:

Ihr Child-Theme ist jetzt auf Ihrer Live-Site einsatzbereit!

Schlussfolgerung

Wenn Sie nur über ein begrenztes Budget verfügen und es sich nicht leisten können, ein individuelles Theme zu kaufen, kann es schwierig sein, Ihre WordPress-Mitgliedswebsite hervorzuheben. Glücklicherweise sind Child-Themes eine relativ einfache Möglichkeit, ein vorgefertigtes Theme anzupassen.

Sie können ein Child-Theme in nur fünf Schritten erstellen, indem Sie: