Articles

So erstellen Sie ein WordPress-Theme von Grund auf neu: Anfängerhandbuch (2020)

by admin

Das Erstellen eines WordPress-Themes kann sehr einfach sein, wenn Sie grundlegende HTML -, CSS-und JavaScrip-Funktionen kennen. Wenn Sie jedoch neu in WordPress sind, müssen Sie nur die in diesem Tutorial für Anfänger genannten Schritte befolgen. Ich habe die erforderlichen Schritte aufgelistet und die wichtigen Aspekte der Erstellung von WordPress-Theme diskutiert. Lesen wir also diese Anleitung und lernen Sie, wie Sie ein WordPress-Theme von Grund auf neu erstellen.,

WordPress ist ein weit verbreitetes open-source content-management-system (CMS) rund um den Globus. Insgesamt verwenden 34.7% der Websites WordPress. Sie können diese Plattform auch auswählen, um eine starke Online-Präsenz zu erstellen und Ihr Unternehmen mithilfe der leistungsstarken WordPress-Website-Builder-Software mühelos online zu etablieren. WordPress ist eine offensichtliche Wahl und die einfachste zu beginnen. Und das ist der Hauptgrund, warum jeder Entwickler vorschlägt, es als Basis Ihrer Website zu wählen., Wenn Sie sich jedoch immer noch nicht sicher sind, was WordPress ist oder was Open-Source-CMS ist, wird das Lesen dieses Handbuchs definitiv etwas Licht in das Wissen bringen.

Also, ohne viel Aufhebens, lassen Sie uns mit der Erstellung WordPress-Theme Schritt für Schritt Prozess beginnen.

Wie erstelle ich ein WordPress Theme? Tutorial für Anfänger

Designer und Entwickler waren aus nicht nur einem, sondern mehreren Gründen unbewusst Teil von WordPress-basierten Themes. Manchmal fragt ein Kunde speziell nach einer WordPress-Website. Und der Hauptgrund für die große Popularität von WordPress liegt in seiner Einfachheit., Tatsächlich ist es ein hochflexibles und leistungsstarkes CMS. Daher diejenigen, die mit anderen CMS wie Joomla, Drupal usw. arbeiten. vielleicht möchten Sie manchmal migrieren, dh von Joomla nach WordPress oder so weiter. Lasst uns jetzt verstehen, warum die Leute diese Plattform so lieben.

Was sind die Voraussetzungen WordPress-Theme zu erstellen?

1. Installieren von WordPress lokal

Als erstes müssen Sie WordPress installieren. Keine Sorge, es ist keine Raketenwissenschaft zu lernen, wie man WordPress installiert. Sie können das leicht selbst tun.

2. Verfahren zum Erstellen eines WordPress-Themes von Grund auf neu.,

  • Manuell-Erstellen von WordPress-Theme über Codierung
  • Automatisiert-Erstellen von WordPress-Theme mit einem WordPress Theme Builder

Für WordPress-Theme wird alles nur im Verzeichnis wp_content. Erstellen Sie einfach einen neuen Theme-Unterordner im Ordner wp_content → Themes. Nehmen wir an, Sie nennen es „mytheme“.

Die zweite Sache ist, das Layout des Themas zu entscheiden. Hier zeigt das Tutorial das Grundlayout bestehend aus Kopfzeile, Hauptbereich, Fußzeile und Seitenleiste.

Grundsätzlich benötigt WordPress nur 2 Dateien, dh style.css und index.PHP., Aber für dieses layout, benötigen Sie 5 Dateien wie folgt:

  • – header.php-enthält den Code für den Header-Bereich des Themas.
  • „index“.php-enthält den Code für den Hauptbereich und gibt an, wo die anderen Dateien enthalten sein werden. Dies ist die Hauptdatei des Themas.
  • Seitenleiste.php – enthält die Informationen über die Seitenleiste.
  • Fußzeile.php-behandelt den Fußzeilenabschnitt.
  • Stil.css-verantwortlich für das Styling Ihres Themas.
  • bootstrap.css-Es ist kein separater CSS-Code erforderlich; sehr reaktionsschnell.
  • bootstrap.,js-bietet eine eigene js für die Navigationsleiste oder Registerkarten usw.

Sie müssen das Bootstrap-Paket herunterladen. Bootstrap.js & Bootstrap.cs-Datei muss in den Themenordner kopiert werden.

Wie erstelle ich Schritt für Schritt ein benutzerdefiniertes WordPress-Theme?

  1. Erstellen Sie WordPress-Theme von Grund auf durch Codierung (manuell)

  2. Erstellen Sie WordPress-Theme mit TemplateToaster (automatisiert)

Sie können diese Dateien lokal mit einem Texteditor wie Notepad erstellen. Unten sind die Dateien, die Sie erstellen müssen, um loszulegen.,

Schritte zum Erstellen von WordPress-Theme von Grund auf neu durch Codierung

Schritt 1: Header.php-Datei

Sie müssen diesen Code in die Kopfzeile einfügen.php-Datei.

Dieser Datei-Header.php enthält den code für den header-Teil, in dem die js-und style-Datei verknüpft ist. Es zeigt die Kopfzeile der Seite an.

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">

Diese Zeile, die nach dem Titel hinzugefügt wurde, weist WordPress an, einen Stil zu laden.CSS-Datei, die das Styling der Website behandelt.

<?php bloginfo('stylesheet_url'); ?>

ist eine WordPress-Funktion, die das Stylesheet tatsächlich lädt.,

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri().'/css/bootstrap.css'; ?>">

Hier benutzen wir Bootstrap. Es ist eines der bekannten responsiven Webdesign-Frameworks. Es bietet integrierte CSS-Dateien, um Ihre Website zu gestalten. Sie können den Bootstrap behalten.css-Datei in Ihrem theme/css-Ordner.

Als nächstes wird ein“ div “ mit der Klasse ttr_header hinzugefügt, der der Hauptcontainer der Website ist. Legen Sie nun eine Klasse dafür fest, damit Sie sie über den Stil ändern können.css-Datei.

Fügen Sie danach einen einfachen Beschriftungskopf in eine „div id“ mit der Klasse „ttr_header“ ein, der später in der Klasse „jumbotron“angegeben wird.

Schritt 2: index.,php-Datei

Der Hauptdateiindex.php enthält den folgenden Code;

Die allererste Codezeile in dieser Datei

<?php get_header(); ?>

enthält den Header.die PHP-Datei und der darin enthaltene Code befinden sich auf der Hauptseite.

Der obige Code zeigt den Hauptinhalt des Beitrags an, den Sie über den WordPress-Verwaltungsbereich erstellt haben.
Als nächstes fügen Sie die Seitenleiste.php-Datei wie unten gezeigt

<?php get_sidebar(); ?>

In dieser Datei können Sie Ihre letzten Beiträge, Archive, Kontaktinformationen usw. anzeigen.,

Nach dieser Zeile wird ein leeres „div“ eingefügt, das den Hauptbereich und die Seitenleiste von der Fußzeile trennt.

Zuletzt wurde eine letzte Zeile

<?php get_footer(); ?>

hinzugefügt, die die Fußzeile enthält.php-Datei.

Schritt 3: Seitenleiste.php-Datei

In der Seitenleiste.php, fügen Sie den folgenden Code

In dieser Datei werden interne WordPress-Funktionen aufgerufen, um die verschiedenen Kategorien, Archive von Beiträgen anzuzeigen., Die WordPress-Funktion gibt sie als Listenelemente zurück, daher müssen Sie die tatsächlichen Funktionen in unsortierte Listen einschließen (die Tags <ul>).

Schritt 4: Fußzeile.php-Datei

Fügen Sie die folgenden Codezeilen zur Fußzeile hinzu.php-Datei:

<div id= "ttr_footer"><h1>FOOTER</h1></div></div></body></html>

Dadurch wird eine einfache Fußzeilenbezeichnung hinzugefügt. Sie können jedoch auch Links, zusätzlichen Text und die Copyright-Informationen für Ihr Thema anstelle von einfachem Fußzeilentext hinzufügen.

Schritt 5: Stil.CSS-Datei

Fügen Sie dem Stil die folgenden Zeilen hinzu.,css-Datei

Diese CSS-Datei legt das grundlegende Erscheinungsbild Ihres Themas fest. Dadurch wird der Hintergrund der Seite festgelegt und die Ränder gemäß Ihren Anforderungen hinzugefügt.

Ihre Seite soll ungefähr so aussehen:

Jetzt können Sie die CSS-Datei weiter ändern, indem Sie Ihrem Thema Bilder, Animationen und andere Inhalte hinzufügen und es so schön aussehen lassen, wie Sie möchten.

Dies erfordert jedoch die Kenntnisse der HTML -, PHP – und WordPress-Funktionen. Eine bessere Alternative ist daher die Verwendung eines starken WordPress-Theme-Generators, der nicht einmal eine einzelne Codezeile enthält. Ja! Ohne Codierung!, Eine Software, mit der Sie Ihr eigenes WordPress-Theme ohne Programmierkenntnisse von Grund auf neu erstellen können.

Ich bin gespannt auf diese Lösung, nun, ich spreche von Ihrer eigenen Theme Builder-Software TemplateToaster. Es bietet eine Reihe fantastischer Funktionen mit einer einfach zu bedienenden drag & Drop-Schnittstelle. Also, ohne eine Minute zu verschwenden, beginnen wir WordPress-Theme von Grund auf mit TemplateToaster zu entwickeln.

Wie erstelle ich WordPress Theme mit TemplateToaster?

TemplateToaster ist ziemlich einfach zu installieren und beinhaltet überhaupt keine Codierung., Besuchen Sie einfach die Website und laden Sie das TemplateToaster-Installationsprogramm herunter. Die Testversion ist jedoch kostenlos. Jetzt müssen Sie nur noch diesen einfachen Schritten folgen, um Ihr eigenes WordPress-Theme zu erstellen. Der erste Bildschirm, der nach der Installation angezeigt wird, sieht aus wie

Führen Sie diese Schritte aus, um WordPress-Theme zu erstellen & Initiieren Sie Ihre WordPress-Theme-Entwicklung

Schritt 1: Wählen Sie eine Plattform

Hier können Sie die CMS-Auswahl treffen. Da wir WordPress Theme erstellen, ist die offensichtliche Wahl für mich hier WordPress.,

Jetzt können Sie einen Bildschirm mit zwei Optionen sehen, dh mit Beispielvorlagen gehen und von vorne beginnen. Sie können leicht eine geeignete Vorlage für Ihre Website aus der Fülle von kostenlosen WordPress-Themes finden. Da wir also an der Entwicklung von WordPress-Vorlagen beteiligt sind, wähle ich „Von vorne anfangen“.

Jetzt sehen Sie das allererste Popup-Fenster, um Farbe und Typografie aus den angegebenen Optionen auszuwählen. Und klicken Sie auf die Schaltfläche OK.,

Schritt 2: Entwerfen Sie einen Header

Hier müssen Sie die Breite und Höhe des Headers auswählen. Sie können die Breite auf volle Breite halten, gleich Containerbreite, und benutzerdefinierte Breite kann auch eingestellt werden.

Wählen Sie die Hintergrundfarbe für es. Sie können eine Farbe, einen Farbverlauf festlegen oder ein Bild aus der integrierten Galerie durchsuchen oder Ihr eigenes Bild verwenden.

Jetzt können Sie der Kopfzeile“ Textbereich „und“ Soziale Symbole “ hinzufügen und sie so interaktiv machen, wie Sie möchten.

Der Header ist alles erledigt.,

Schritt 3: Design die Menü

Jetzt, ist die zeit zu design Menü. Gehen Sie zur Registerkarte Menü und wählen Sie aus den jeweiligen Optionen die Breite und Höhe aus, die Sie für Ihr Menü festlegen möchten.

Sie können auch die Hintergrundfarbe, den Farbverlauf oder das Bild im Menü festlegen von Hintergrund Option.

Setzen Sie nun ein Logo aus den angegebenen Optionen in das Menü. Sie können jedoch auch Ihr benutzerdefiniertes Logo verwenden.,

Wählen Sie nun die“ Menüschaltflächeneigenschaften “ und richten Sie die Schaltfläche wie Ausrichtung → Horizontal → von rechts nach links aus und so werden Ihre Menüschaltflächen rechts von der Seite ausgerichtet.

Sie können auch die Typografie für Ihre Menüpunkte festlegen.

Das Menü ist jetzt fertig.

Schritt 4: Erstellen und stilisieren Sie eine Diashow

  • Wählen Sie nun die Registerkarte Diashow aus der obigen Symbolleiste und hier können Sie zwischen den Optionen wählen, um die Funktionalitäten festzulegen.,

  • Sie können auswählen, welche Hintergrundfarbe Sie für die Diashow, das Hintergrundbild usw. wünschen. Wenden Sie außerdem Eigenschaften wie die Position der Diashow, Übergangseffekte, Breite, Höhe und einen Textbereich an, um ihn so schön zu gestalten, wie Sie möchten. Und Komponenten wie Diashow können Ihr Web-Engagement verbessern. Und es gibt bestimmte Komponenten, die Top-WordPress-Entwickler in ihre Themes aufnehmen, um sie glänzend und ansprechend zu machen.

Schritt 5: Bearbeiten Sie den Inhalt (Hauptbereich)

Jetzt kommt der Hauptbereich, dh Inhaltsbereich., Legen Sie zunächst die Anzahl der gewünschten Spalten in einer einzelnen Zeile fest.

Durch einfaches Klicken auf den Text können Sie den Inhalt zu Ihrer Website hinzufügen. Sie können jedoch verschiedene Optionen verwenden, z. B. Typografie, Schriftfarbe, Textausrichtung, Schriftgröße usw. und machen Sie Ihren Text fertig.

Wenn Sie ein Bild hinzufügen möchten, löschen Sie den Inhalt einfach über die Registerkarte Editor aus der ersten Spalte.,

Registerkarte Editor → Bild → Bild durchsuchen →Öffnen→OK

Ebenso können Sie den Rest der Spalten wie unten gezeigt einfach entwerfen.

Schritt 6: Entwerfen/Anpassen der Fußzeile

  • Wechseln Sie nun zur Registerkarte Fußzeile. Es werden viele Optionen zum Entwerfen einer Fußzeile angezeigt. Legen Sie zunächst einen Hintergrund für die Fußzeile fest. Sie können auch ein Bild im Hintergrund aus den Lager Bilder oder durchsuchen Sie Ihre eigenen Bild.
  • Legen Sie dann in der Option Fußzeilenzelle die Anzahl der Zeilen und Spalten fest & Breite der Fußzeile., Wie hier werden 4 Spalten in der ersten Zeile und insgesamt 2 Zeilen ausgewählt. Platzieren Sie Social-Media-Symbole überall dort, wo Sie sie für geeignet halten.

  • Setzen Sie den Inhalt und Stil es über Typografie-Optionen. Sie können auch verschiedene Schriftfarben in verschiedenen Zuständen der Links wie Aktiv, Hover, Normal.
  • Ebenso können Sie Stil, Entworfen von Text & Link in der Zweiten Zeile. Sie können dies jedoch auch jederzeit über das angegebene Kontrollkästchen ein – /ausblenden.
  • Das endgültige Aussehen der Fußzeile wird in etwa so aussehen., Um es schön zu gestalten, benötigen Sie im Grunde nur ein paar Mausklicks.

Die Homepage ist also wunderschön erstellt. Ebenso können Sie andere Seiten Ihrer Website erstellen. Sie müssen lediglich auf das Symbol “ + “ auf der linken Seite klicken und so viele Seiten hinzufügen, wie Sie möchten.

Wenn Sie jedoch eine untergeordnete Seite für eine bestimmte Seite hinzufügen möchten, können Sie dies auch tun., Alles, was Sie tun müssen, ist auf die Ellipsen (drei Punkte) zu klicken, die dem Seitennamen entsprechen, und mit der rechten Maustaste auf die gewünschte Seite zu klicken und die „Untergeordnete Seite hinzufügen“ auszuwählen. So etwas wie das Anzeigen einer virtuellen Hierarchie.

Seitenname → ⋮ → Untergeordnete Seite hinzufügen

Hier sehen Sie auch andere Optionen, dh Entfernen, Bearbeiten und Klonen. Sie können sie verwenden, um geeignete Maßnahmen zu ergreifen.

Hurra!! Sie haben eine abgeschlossene Prozess der Erstellung von WordPress-theme form scratch. Und Sie können Gewinn mit WordPress-Theme-Entwicklung verdienen und halten Sie Ihre kleine Geheimwaffe sicher.,

TemplateToaster Web-Design-Software bietet viele erweiterte Optionen wie einen Video-Hintergrund setzen, Diashows, neue Menüstile, etc. Sie können mehr darüber erfahren, wie Sie eine WordPress-Website erstellen, eine E-Commerce-Website mit WooCommerce erstellen, wie Sie professionelle Themen und Vorlagen erstellen und wie Sie WordPress Theme Check Plugin verwenden usw.

Welche Methode verwenden Sie zum Erstellen von WordPress-Theme?

Damit kommen wir zum Ende dieses umfassenden Tutorials., Ich bin sicher, es wird Ihnen helfen, Ihr eigenes WordPress-Theme zu erstellen, erklären Sie auch die Hauptaspekte der Erstellung von WordPress-Theme von Grund auf neu. Das Erstellen eines WordPress-Themes ist recht einfach und die Wahl des CMS hängt vom Zweck der Erstellung Ihrer Website ab. Wie wenn Sie im Begriff sind, die Entwicklung einer E-Commerce-Website zu initiieren oder ein untergeordnetes Thema in WordPress zu erstellen, oder wenn Sie sogar wissen möchten, welches WordPress-Thema das ist, die andere Website verwendet, oder wenn Sie die Entwicklung eines WordPress-Themas mit Bootstrap beginnen möchten usw., Es gibt bestimmte Dinge zu beachten, bevor Sie WordPress-Theme wählen, weil die Wahl der besten WordPress-Theme ist kein Kinderspiel. Schauen Sie sich die besten WordPress-Themes und kostenlosen WordPress-Themes an.

Fazit, wie WordPress-Theme erstellen

So halten Sie alles in Ihrem Kopf klar, bevor Sie in die Arena der WordPress-Theme-Entwicklung Schritt. Sie können jedoch mit WordPress Theme Builder arbeiten, ohne eine einzige Codezeile zu schreiben. Daher ist es jetzt keine schwierigere Aufgabe, ein WordPress-Theme von Grund auf neu zu erstellen., Aber die Methode, WordPress-Theme von Grund auf neu zu erstellen, liegt ganz in Ihren Händen. Was auch immer Sie wählen, lassen Sie mich wissen, wie es für Sie in den Kommentaren unten gearbeitet.