Erstellen Sie ein Wordpress-Theme mit Local

Es gibt Tausende von WordPress-Themes, aus denen Sie wählen können, von Mehrzweck- bis hin zu fokussierten Nischenoptionen. Manchmal ist es jedoch die einzige Möglichkeit, Ihre Website genau so aussehen zu lassen, wie Sie es möchten, indem Sie Ihr eigenes Design erstellen.

Das Erstellen eines WordPress-Themes ist durchaus machbar, auch wenn Sie keinen umfassenden Hintergrund in der Webentwicklung haben. Sie müssen nur lernen, welche Dateien Ihr Thema benötigt und wo Sie sie platzieren müssen. Dann nehmen Sie Änderungen am Code vor, bis alles so funktioniert, wie Sie es möchten.

In diesem Artikel stelle ich Ihnen die Entwicklung von WordPress-Themes und die Tools vor, die Sie für den Einstieg benötigen. Außerdem zeige ich Ihnen, wie Sie in vier Schritten ein einfaches WordPress-Theme erstellen. Springen wir rein!

Eine Einführung in die Entwicklung von WordPress-Themes

WordPress-Designs sind Vorlagen, die das Erscheinungsbild und Layout Ihrer Website beeinflussen. Hier ist zum Beispiel eine brandneue WordPress-Website mit dem standardmäßigen Twenty Seventeen-Design:

Hier ist dieselbe Website, aber diesmal mit dem beliebten Stout-Theme:

Mit dem richtigen Design können Sie Ihre WordPress-Website so gestalten, wie Sie es möchten, ohne Änderungen am Code vornehmen zu müssen. Wenn jedoch kein Thema Ihren Anforderungen entspricht, können Sie auch ein eigenes erstellen. Der Vorteil dieses Ansatzes ist, dass Sie die volle Kontrolle über das Aussehen Ihrer Website und die Funktionalität Ihres Themas haben.

Um ein eigenes Design zu erstellen, benötigen Sie mindestens einen grundlegenden Hintergrund in der Webentwicklung. Sie müssen kein Profi sein, aber wenn Sie kein allgemeines Verständnis von HTML, PHP und CSS haben, kann der Prozess frustrierend sein.

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 mehr als 30 Premium-WordPress-Designs (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.

Ebenso kann es einige Zeit dauern, ein Thema zu erstellen und alles richtig aussehen und funktionieren zu lassen. Daher hängt die Entscheidung, ob Sie Ihr eigenes Design erstellen, davon ab, ob Ihre Website von einem benutzerdefinierten Design profitieren würde. Sie sollten auch berücksichtigen, wie zeit- und kosteneffizient die Erstellung eines eigenen Designs im Vergleich zur Verwendung eines vorhandenen wäre.

Schließlich ist es eine Überlegung wert, dass viele Leute ziemlich gut von der Entwicklung von WordPress-Themes leben. Es ist ein sehr wettbewerbsintensives Geschäftsfeld, aber wer sagt, dass Sie keinen Gewinner entwickeln und von Ihrer Arbeit profitieren können?

Warum Sie ein lokales WordPress-Setup für die Themenentwicklung benötigen

Um Ihr benutzerdefiniertes Design einzurichten und zu testen, benötigen Sie eine WordPress-Installation. Aus den folgenden Gründen ist dies am besten mit einer lokalen Umgebung möglich:

• Es ist effizienter. Mit einem lokalen WordPress-Setup gibt es fast keine Ladezeiten und Sie müssen keine Dateien auf einen externen Server hochladen.
• Es ist sicherer als die Verwendung einer Live-Umgebung. Die Webentwicklung beinhaltet immer viel Trial-and-Error, daher ist es sinnvoll, dies in einer sicheren, lokalen Umgebung zu tun.
• Sie können mehrere Testumgebungen erstellen. Das Ausführen mehrerer WordPress-Websites ist bei einem lokalen Setup viel einfacher.
• Sie können spezielle Software verwenden. Es gibt viele Anwendungen, mit denen Sie Ihre lokale WordPress-Entwicklung beschleunigen können, z. B. Local, eine kostenlose App für Mac-, Windows- und Linux-Computer.

Mit Local können Sie mit nur wenigen Klicks beliebig viele WordPress-Websites einrichten. Sie erhalten auch Zugriff auf ein einfaches Dashboard, in dem Sie alle Ihre Testseiten verwalten können.

Noch wichtiger ist, dass Sie jede lokale Website konfigurieren können. Das bedeutet, dass Sie verschiedene Versionen von PHP, MySQL und entweder nginx oder Apache verwenden können. Sie können einige Ihrer Websites auch als „Blaupausen“ speichern, um sie später wiederzuverwenden.

Wenn Sie ein Flywheel-Benutzer sind, werden Sie schließlich froh sein zu wissen, dass die Software eine „Push“-Option enthält. Das bedeutet, dass Sie jede Ihrer lokalen Websites direkt an Flywheel senden können, um sie live zu schalten. Beispielsweise könnten Sie Local verwenden, um ein neues WordPress-Theme zu erstellen, es auf einer Staging-Kopie Ihrer Website zu testen und es auf eine Live-Site zu übertragen, sobald Sie wissen, dass es wie beabsichtigt funktioniert.

So erstellen Sie ein WordPress-Theme mit Local (in 4 Schritten)

In diesem Tutorial zeige ich Ihnen, wie Sie eine lokale WordPress-Umgebung für die Themenentwicklung einrichten, Ihnen alle Dateien beibringen, die Sie benötigen, und Ihnen zeigen, wie Sie sie testen können. Lass uns zur Arbeit gehen!

1. Verwenden Sie Lokal, um eine WordPress-Website einzurichten

Als erstes müssen Sie Local kostenlos herunterladen. Sobald Sie dies getan haben, installieren Sie die Anwendung. Beachten Sie, dass dies einige Minuten dauern kann, da Local die Software für virtuelle Maschinen einrichten muss, damit sie funktioniert. Sobald Local bereit ist, werden Sie aufgefordert, eine neue Site zu erstellen:

Klicken Sie darauf und Sie werden aufgefordert, einen Namen für Ihre Website zu wählen:

Möglicherweise stellen Sie fest, dass es auch eine Registerkarte mit der Bezeichnung Advanced Options gibt. Wenn Sie darauf klicken, können Sie die Domain Ihrer lokalen Website bearbeiten, ein Stammverzeichnis auswählen und auswählen, ob Sie einen Entwurf verwenden möchten.

Für den Moment können Sie die Domain und das Verzeichnis Ihrer Website bearbeiten. Ich werde später behandeln, wie Blaupausen verwendet werden. Wenn Sie fertig sind, klicken Sie unten rechts auf die Schaltfläche Continue .

Auf der nächsten Seite erhalten Sie die Option, die standardmäßige WordPress-Umgebung von Local für Ihre Website zu verwenden. Die Preferred Option enthält die neuesten Versionen von PHP und MySQL und verwendet eine Kombination aus nginx + Varnish für Ihren Server:

Sie können auch die Option Custom wählen, mit der Sie alle zuvor erwähnten Einstellungen ändern können:

Im Allgemeinen ist es immer eine gute Entscheidung, die neuesten Versionen von PHP und MySQL zu verwenden. Wenn Sie jedoch Local verwenden, um eine Staging-Site einzurichten, müssen Sie möglicherweise ältere Versionen dieser Software verwenden, um Ihren Live-Server zu emulieren.

Denken Sie auch daran, dass Sie die Option Connect to Flywheel von Local nicht verwenden können, wenn Sie eine benutzerdefinierte Umgebung auswählen. Mit anderen Worten, Sie können Ihre Website nicht live schalten, obwohl Sie sie immer noch manuell migrieren können sollten.

Bleiben wir für dieses Tutorial bei der Preferred Einrichtung, also wählen Sie diese aus und klicken Sie auf Continue . Sie können jetzt einen Admin-Benutzernamen, ein Passwort und eine E-Mail-Adresse auswählen und auswählen, ob Sie Multisite aktivieren möchten:

Denken Sie daran, dass die Standard-E-Mail-Adresse, die Local für Sie einrichtet, es Ihnen ermöglicht, Nachrichten aus der Anwendung heraus auszuchecken, daher empfehle ich Ihnen, dabei zu bleiben. Klicken Sie erneut auf Continue und warten Sie, bis Local alle für Ihre Site erforderlichen Abhängigkeiten heruntergeladen und konfiguriert hat. Wenn dies erledigt ist, werden die Informationen Ihrer Website rechts angezeigt, und Sie können mit Schritt Nummer zwei fortfahren.

2. Richten Sie ein neues Themenverzeichnis ein

Nachdem Ihre lokale WordPress-Website nun fertig ist, können Sie wie auf eine normale Website über die von Ihnen konfigurierte URL darauf zugreifen. Sie können auch auf die Admin -Einstellung in der oberen rechten Ecke klicken, um direkt zum Dashboard zu springen:

Im Moment müssen Sie jedoch auf den Stammordner Ihrer lokalen Website zugreifen, in dem sich alle WordPress-Dateien befinden. Um es zu finden, schauen Sie direkt unter dem Titel Ihrer Website oben auf dem Bildschirm "Lokal" nach. Dort sollte ein Verzeichnis aufgeführt sein und ein Pfeil, auf den Sie rechts davon klicken können.

Wenn Sie auf diesen Pfeil klicken, wird das Verzeichnis in Ihrem Datei-Explorer geöffnet. Gehen Sie hinein und öffnen Sie dann den App/Public-Ordner, um Ihre WordPress-Dateien zu finden:

Wenn Sie jemals mit einem FTP-Client auf eine WordPress-Site zugegriffen haben, sollte Ihnen dies sehr bekannt vorkommen. Navigieren Sie zum Verzeichnis wp-content/themes , in dem Sie drei Ordner sehen sollten. Dies sind die Standardthemen, die WordPress auf neuen Websites installiert:

Fahren Sie fort und erstellen Sie einen neuen Ordner. Geben Sie ihm den Namen, den Sie für Ihr Thema verwenden möchten:

Der Ordner ist natürlich leer. Als nächstes werden wir einige Inhalte hinzufügen.

3. Erstellen Sie Ihre Themenlayoutdateien

Ein einfaches WordPress-Theme benötigt nur zwei Dateien, um zu funktionieren – index.php und style.css . Ihre index.php -Datei entspricht Ihrer WordPress-Hauptseite, die alle Ihre neuesten Blog-Beiträge anzeigt und ihren Stil aus style.css . Lassen Sie uns fortfahren und jetzt beide Dateien erstellen:

Beide Dateien enthalten im Moment keinen Code, also ändern wir das. Öffnen style.css und fügen Sie eine kurze Beschreibung für Ihr Thema hinzu:

/* Theme Name: Test Theme Author: John Doe Description: A basic WordPress theme Version: 0.0.1 Tags: bootstrap */

Wiederholen Sie den gleichen Vorgang mit index.php , obwohl der Code für diesen etwas komplexer ist:

<!DOCTYPE html>
<html>
<head>
<title><?php bloginfo('title'); ?></title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<h1><?php bloginfo('title'); ?></h1>
<h3><?php bloginfo('description'); ?></h3>
<?php while (have_posts()) {
the_post();
?>
<h5><?php the_date(); ?></h5>
<h2>
<a href="index.php?p=<?php the_ID(); ?>">
<?php the_title(); ?>
</a>
</h2>
<p><?php the_content(); ?></p>
<hr/>
<?php } ?>
</body>
</html>

Das ist ungefähr so ​​​​ein einfaches Layout, wie Sie bekommen können. Innerhalb dieses Codes rufen wir die Datei style.css auf, die wir zuvor eingerichtet haben, zeigen den Titel Ihres Blogs an und verwenden die WordPress-Schleife. Falls Sie es nicht wissen, die Schleife ist der Name des Codes, den ein Thema verwendet, um Beiträge anzuzeigen, und seine tatsächliche Struktur kann von Thema zu Thema sehr unterschiedlich sein.

Speichern Sie jetzt die Änderungen an beiden Dateien und gehen Sie zu Ihrem WordPress-Dashboard. Navigieren Sie zur Registerkarte Appearance > Themes und beachten Sie, dass Ihr brandneues Thema darin wartet:

Aktivieren Sie es sofort und sehen Sie sich Ihre Homepage an:

Was Homepages angeht, wird es keine Preise gewinnen. Das Wichtigste ist jedoch, dass Sie eine Grundlage haben, auf der Sie den Rest Ihres Themas aufbauen können. Ihr nächster Schritt sollte sein, Ihre style.css-Datei zu verwenden, um Ihrem Design etwas Flair zu verleihen.

Sobald Sie die Dinge ein wenig hübscher gemacht haben, möchten Sie an einem komplexeren Layout arbeiten. Beispielsweise möchten Sie Ihrem Design möglicherweise Seitenleisten und Fußzeilen sowie eine header.php-Datei hinzufügen.

Wenn Sie sich nicht sicher sind, welche Form Ihr Theme annehmen soll, empfehlen wir Ihnen, sich einige WordPress-Starter-Themes genau anzusehen. Sie sind vom visuellen Standpunkt aus sehr einfach, enthalten aber alle Funktionen, die eine moderne Website benötigt.

4. Testen Sie Ihr WordPress-Theme

Bevor Sie Ihr Design auf einer Live-Website verwenden können, sollten Sie es gründlich testen. Eine schnelle visuelle Übersicht wird die meisten Fehler aufdecken, aber das reicht normalerweise nicht aus. Sie können auch Plugins wie Theme Check verwenden, die Ihr Design überprüfen, um sicherzustellen, dass es den Überprüfungsstandards von WordPress entspricht.

Theme-Review-Standards sind nur dann wichtig, wenn du dein Theme auf WordPress.org veröffentlichen möchtest. Sie sind jedoch immer noch ein guter Maßstab, an dem Sie Ihr Thema messen können.

Wenn Sie bereit sind, mit Ihrem Design live zu gehen, haben Sie zwei Möglichkeiten. Sie können den Themenordner packen und per FTP auf Ihre Site hochladen, oder Sie können die Option Connect to Flywheel verwenden, um die gesamte Site direkt auf Flywheel zu veröffentlichen.

Bevor wir zum Abschluss kommen, empfehlen wir Ihnen außerdem, sich eine Minute Zeit zu nehmen, um einen Blueprint des Testaufbaus zu erstellen, den Sie für Ihr neues Design erstellt haben. Auf diese Weise können Sie es später replizieren, falls Sie es brauchen.

Fazit

Wenn Sie ein grundlegendes Verständnis der Webentwicklung haben, hindert Sie nichts daran, Ihr eigenes WordPress-Theme zu erstellen. Es kann zwar einige Zeit dauern, aber es kann sich lohnen. Außerdem gibt es Ihnen ein viel größeres Maß an Kontrolle darüber, wie Ihre Website aussieht, als die Verwendung eines normalen Designs.

Lassen Sie uns die vier grundlegenden Schritte zum Erstellen eines WordPress-Themes mit Local zusammenfassen:

1. Verwenden Sie Local, um eine WordPress-Website einzurichten.
2. Richten Sie ein neues Themenverzeichnis ein.
3. Erstellen Sie Ihre Design-Layout-Dateien.
4. Testen Sie Ihr WordPress-Theme.

Haben Sie Fragen zur Entwicklung von WordPress-Themes im Allgemeinen? Lassen Sie uns im Kommentarbereich unten darüber sprechen!

Kostenloses E-Book: Der perfekte Workflow für die WordPress-Entwicklung

Die Entwicklung von WordPress-Sites muss nicht schwierig sein. Tatsächlich kann Ihr Entwicklungsworkflow mit den richtigen Tools und einer einfachen Software geradezu entzückend sein! Von der lokalen Entwicklung bis zur Liveschaltung von Websites haben wir unsere besten Tipps und Tricks zusammengestellt, um den Prozess zu vereinfachen und Websites für die kommenden Jahre zu pflegen. Sind Sie bereit, Ihren Workflow zu rationalisieren und die Entwicklung zu beschleunigen? Hier herunterladen!

Dieser Artikel wurde ursprünglich am 4.9.2018 veröffentlicht. Es wurde zuletzt am 22.02.2022 aktualisiert.