Erstellen Sie ein WordPress-Theme: Schritt für Schritt für die benutzerdefinierte Entwicklung

Seit seiner ursprünglichen Einführung im Jahr 2003 hat sich WordPress von einem einfachen Blogging-Tool zu einem leistungsstarken und beliebten Website-Builder und einem umfassenden CMS (Content Management System) entwickelt, das von etwa 38% der Websites im Web verwendet wird! Angesichts der Beliebtheit Ihrer Website müssen Sie ein WordPress-Design erstellen, das für Ihre Website einzigartig ist, wenn Sie sich von der Masse abheben möchten.

In Wirklichkeit ist es kein Wunder, dass WordPress es bisher geschafft hat und so populär geworden ist.

Die Flexibilität und die Funktionen, die es hostet, ermöglichen eine breite Verwendung für verschiedene Website-Typen. Außerdem ist WordPress ziemlich einfach zu bedienen, mit wenig bis gar keiner Erfahrung in der Codierung oder Webentwicklung.

Dies sind die Gründe für die Erfolgsgeschichte von WordPress und genau die Gründe dafür 40 Prozent Alle Websites im World Wide Web werden von dieser Software unterstützt. 

WordPress verfügt über eine Reihe praktischer Funktionen, die die Webentwicklung und -programmierung erleichtern less kompliziert und für jeden zugänglicher.

Inhalte[Anzeigen]

Einführung in die Entwicklung von WordPress-Themes 

Ein weiteres beliebtes Feature, das WordPress so beliebt macht, sind seine Themen. Das Thema ist einfach eine Sammlung von Stylesheets und Vorlagen, die definieren, wie eine WP-basierte Site aussehen und angezeigt wird.

Die Software bietet dem Benutzer eine Vielzahl unterschiedlicher Bearbeitungsoptionen, wenn es um Themen aus dem WP-Administrationsbereich geht.

Hunderte von WordPress-Themes sind völlig kostenlos oder mit vielen anderen zu einem vernünftigen Preis von einigen zehn Dollar.

Tatsächlich hostet WordPress.org eine riesige Datenbank mit Themen in ihrem Themenverzeichnis.

Andere Websites wie Themeforest bieten ebenfalls viele Premium-Themen von verschiedenen Entwicklern.

Erstellen Sie ein benutzerdefiniertes WordPress-Thema

Jedes dieser Themen verfügt über ein anderes Layout, ein anderes Entwurfsmuster und andere Funktionen.

Es ist Sache des Benutzers, eine zu finden, die den Anforderungen seiner Website am besten entspricht. In den meisten Fällen werden Themen für bestimmte Branchen oder Berufe erstellt, sodass beispielsweise Restaurantbesitzer Themen mit Buchungsfunktionen leicht finden können.

Es gibt zwar viele großartige Themen, die Ihren Anforderungen entsprechen könnten, aber wenn Sie etwas Hervorragendes machen möchten, müssen Sie es so ziemlich selbst tun. Wenn Sie nicht programmieren können, eine gute Alternative Option wäre, sich für einen freiberuflichen Softwareentwickler zu entscheiden (Preise können abhängig von verschiedenen Faktoren variieren).

In diesem Artikel werden wir jedoch ALLE Schritte durchgehen, die zum Erstellen Ihres eigenen WordPress-Themas für Ihre WP-basierte Website erforderlich sind. Wir werden uns alle wichtigen Aspekte ansehen, um sicherzustellen, dass Sie das Beste bekommen, was WordPress zu bieten hat. 

Der Einstieg in die Erstellung eines eigenen Themas als Anfänger scheint auf den ersten Blick eine Mammutaufgabe zu sein.

Das Erstellen eines benutzerdefinierten Themas von Grund auf ist in WP jedoch nicht allzu kompliziert. Sie müssen kein Webentwickler sein, wenn Sie die Grundlagen des Codierens mit PHP haben, können Sie leicht lernen, wie man ein WordPress-Theme erstellt.

Darüber hinaus kann das Erstellen eines eigenen Themas sehr lohnend sein, insbesondere wenn Sie das Endergebnis live auf Ihrer Website sehen.

Erstellen Sie Ihr erstes benutzerdefiniertes WordPress-Theme

Um mit dem Erstellen eines WordPress-Themas zu beginnen, benötigen Sie einige grundlegende Dinge:

  • Eine WordPress-Website
  • Ein guter Hosting-Plan
  • Ein wenig Erfahrung mit Dingen wie lokalen Staging-Umgebungen
  • Grundlegendes Verständnis von CSS- und PHP-Codierungssprachen
  • Ein Starter-Thema

 

Grundlegendes zur WordPress-Vorlagenhierarchie 

In WordPress sind Vorlagendateien (die Bausteine ​​Ihres Themas) modular und wiederverwendbar.

Vorlagendateien sind für die Generierung der Seiten auf Ihrer WP-Site verantwortlich. Einige dieser Dateien werden auf fast allen Ihren Seiten verwendet, während andere nur unter bestimmten Umständen verwendet werden.

Schauen Sie sich das folgende Diagramm an - es erklärt, wie die Hierarchie der WordPress-Vorlagen organisiert ist.

WordPress-Vorlagenhierarchie 

Vorlagendateien bestimmen das allgemeine Erscheinungsbild des Inhalts auf der Website. Wenn Sie einen Header erstellen möchten, verwenden Sie a header.php Datei, oder wenn Sie einen Kommentarbereich hinzufügen möchten, verwenden Sie die comments.php Datei. 

Um die Vorlagenhierarchie zu verstehen, sollten Sie wissen, dass WordPress eine sogenannte "Abfragezeichenfolge" verwendet, um zu entscheiden, welche Vorlage oder welcher Vorlagensatz zum Erstellen und Anzeigen einer bestimmten Seite verwendet werden soll.

Die Abfragezeichenfolge besteht aus Informationen, die im Link jedes Teils der Website gespeichert sind, den Sie ändern möchten. Einfacher ausgedrückt analysiert WordPress die Informationen und durchsucht die Vorlagenhierarchie, um eine Vorlagendatei zu finden, die mit den bereitgestellten Informationen in der Abfragezeichenfolge übereinstimmt.

Dies ist im Grunde ein Schema, bei dem WP jedes Mal, wenn Seiten geladen werden, nach passenden Vorlagendateien sucht.

Zum Beispiel, wenn Sie die folgende URL eingeben http://example.com/post/this-postWordPress findet die erforderlichen Vorlagendateien in der folgenden Reihenfolge: 

  1. Dateien, die mit dem Slug übereinstimmen, in diesem Fall: dieser Beitrag.
  2. Dateien, die mit der Post-ID übereinstimmen.
  3. Eine generische Single-Post-Datei, wie single.php.
  4. Eine Archivdatei, in diesem Fall archive.php.
  5. Das index.php Datei.

 

Die letzte Datei (index.php) ist in jedem Thema erforderlich, da dies die Standardeinstellung (oder der Fallback) ist, wenn im Abgleich keine andere Datei gefunden werden kann. Unterstrichen (ein WP-Starter-Thema) hat die häufigsten Dateien. Diese in diesem Thema enthaltenen Dateien funktionieren sofort.

Sie können sie bearbeiten, wenn Sie experimentieren möchten oder benutzerdefinierte Funktionen auf Ihrer Site erstellen müssen.

Was ist ein WordPress Starter Theme? 

Ein Starter-Theme ist eine grundlegende Grundlage für ein benutzerdefiniertes WordPress-Theme.

Sie können es als Grundlage verwenden, um Ihr eigenes einzigartiges Thema zum Laufen zu bringen. Mit einem Starter-Theme können Sie Ihr eigenes WordPress-Theme erstellen, ohne ein ganzes Theme von Grund auf neu entwerfen oder codieren zu müssen.

WordPress-Starter-Themes enthalten alle Dateien, wie in der obigen Hierarchie definiert.

Durch die Verwendung eines Starter-Themas erhalten Sie ein besseres Verständnis der Funktionsweise von WordPress, da es Ihnen die Grundlagen, die Struktur eines Themas und die Zusammenarbeit der verschiedenen Teile zeigt.

Ein benutzerdefiniertes WordPress-Thema kann auf eine Reihe verschiedener Website-Typen angewendet werden, von Präsentationen und Verzeichnissen bis hin zu Online-Shops gebaut mit WooCommerce, soziale Medien oder was auch immer Sie sonst noch für Ihre Website benötigen.  

Wenn Sie sich für Starter-Themen (wie UnderStrap, Unterstriche und Knochen) entscheiden, können Sie ein WordPress-Thema erstellen, das die Möglichkeit bietet, verschiedene Optionen zu verwenden.

Die Verwendung von Unterstrichen ist möglicherweise die beste Wahl für Anfänger, da sie die wichtigsten Funktionen bietet. Es kommt auch von einem langjährigen und zuverlässigen Entwickler. Dies bedeutet, dass es eher kompatibel, sicher und zuverlässig ist und auf lange Sicht eine bessere Unterstützung bietet.

Warum sollten Sie ein Starter-Theme verwenden?

unterstreicht das benutzerdefinierte WordPress-Thema

Wie oben erwähnt, ist ein Starter-Thema eine Grundlage, eine Blaupause, mit der Sie eine einzigartige Website erstellen können. Es ist bereits voll funktionsfähig, es fehlen jedoch noch die wichtigsten Merkmale, die eine benutzerfreundliche Website ausmachen. 

Im Wesentlichen muss es noch gestaltet und richtig konfiguriert werden. 

Trotzdem sind Starter-Themen ideal für diejenigen, die wenig oder keine Erfahrung mit WordPress oder der Webentwicklung im Allgemeinen haben. Es ist eine großartige Möglichkeit, sich mit dem Thema Themenerstellung vertraut zu machen und die Grundlagen von WP-basierten Websites zu erlernen. 

Ein WordPress Starter-Theme spart Ihnen Zeit und erfordert wenig bis gar kein Hintergrundwissen in Codierung und den restlichen WordPress-Komplexitäten. 

Sie können jahrelange harte Arbeit der Entwickler des Starter-Themas nutzen und diese Richtlinien verwenden, um ein besseres Verständnis für die Funktionsweise von WordPress und Theme-Design zu erhalten.   

  • Unterstrichen - Ein zuverlässiges und bekanntes Starter-Thema, das Anfängern einen Vorsprung verschafft Themenentwicklung. Underscores ist ziemlich einfach und perfekt, um sofort loszulegen, wenn Sie über alle erforderlichen Tools verfügen. Das Thema eignet sich hervorragend zum Verständnis der Konzepte der Themenentwicklung. Bei Underscores geht es darum, ein neues Projekt zu starten, das eher als ein sich ständig weiterentwickelndes Toolkit angesehen werden sollte und less wie ein rahmen.

  • Roots - Dieses Starter-Thema bietet Ihnen einen Ansatz, der sich mehr an Entwickler richtet, da sein Markup auf dem HTML5-Boilerplate basiert. Es unterstützt auch fortgeschrittenere Tools wie Bootstrap und Grunzen. Das Roots-Starter-Thema enthält auch einen Themen-Wrapper, mit dem Sie Ihren Prozess rationalisieren und das wiederholte Aufrufen derselben Vorlagenteile vermeiden können.

Roots verwendet auch CSS-Präprozessoren und -Unterstützungen LESS, eine abwärtskompatible Spracherweiterung für CSS, die den Prozess der Entwicklung Ihres Themas erheblich beschleunigen kann.

Trotzdem bietet Roots einen pragmatischeren Ansatz und erfordert vom Entwickler etwas mehr Know-how.  

6 Grundlegende Schritte zum Entwickeln Ihres WordPress-Themes

Nachdem Sie die Grundlagen behandelt haben, können Sie endlich mit dem Erstellen eines WordPress-Themas beginnen.

Da sich dieser Artikel eher an Anfänger richtet, verwenden wir ein Starter-Thema. Sie können jedoch auch alles ohne Starter-Themen von Grund auf neu erstellen.

Wenn dies der Weg ist, den Sie einschlagen möchten, vergessen Sie nicht, dass Sie viel mehr Zeit benötigen und ein wenig tiefer in die Codierung und die Webentwicklung im Allgemeinen eintauchen müssen.

1. Einrichten der Entwicklungsumgebung

Ihr erster Schritt in diesem Prozess sollte die Erstellung einer Entwicklungsumgebung sein.

Dies ist im Grunde ein Server, den Sie auf Ihrem Computer installieren müssen, um lokale WP-Sites zu verwalten und zu entwickeln. Eine Entwicklungsumgebung ermöglicht es Ihnen, Ihre Website sicher zu entwickeln und bietet Ihnen mehrere Optionen zum Erstellen einer lokalen Umgebung.

Die richtigen DesktopServer ist einer der idealen Wege, die Sie gehen können. Es ist eine einfache Möglichkeit, eine lokale und schnelle Version von WP zu erhalten, die sowohl mit Windows als auch mit Mac kompatibel ist. Wählen Sie die kostenlose Version aus, registrieren Sie sich, laden Sie sie herunter und installieren Sie die Software.

Desktopserver

 

Öffnen Sie nach der Installation das Programm und konfigurieren Sie Ihre lokale Umgebung.

Es ist ein ziemlich einfacher Vorgang und Sie sind in wenigen Minuten fertig. Nach dem Setup verfügen Sie über eine Website und eine Entwicklungsumgebung, die wie jede Live-WP-Website funktionieren und aussehen.

2. Laden Sie ein Starter-Theme herunter und installieren Sie es

Die grundlegendsten Starter-Themen (wie Unterstriche) sind für Anfänger leicht zu erlernen.

Im Gegensatz zu den meisten grundlegenden Themen ermöglicht der Unterstrich das Anpassen von Optionen über seine Erweiterte Optionen (wie Autor und Beschreibung) nach der Benennung Ihres Themas. 

unterstreicht erweiterte Optionen

Sie können auch Syntactically Awesome StyleSheets oder hinzufügen SASS Dies ist eine CSS-Vorverarbeitungssprache, mit der Sie Funktionen wie Verschachtelung, mathematische Operationen, Verwendung von Variablen usw. einführen können.

Nachdem Sie Ihre Auswahl getroffen haben, müssen Sie nur noch auf Generieren klicken, um die ZIP-Datei mit Ihrem Starter-Design herunterzuladen.

Installieren Sie nun die Datei auf Ihrer lokalen Site. Wenn Sie alles richtig gemacht haben, können Sie jetzt eine einfache Basisversion Ihres benutzerdefinierten WordPress-Themas sehen.

Grundlegendes zu den WordPress-Grundprinzipien 

Nachdem die Grundlagen eingerichtet sind, können Sie mit der Arbeit beginnen. Bevor Sie jedoch in den Anpassungsprozess eintauchen, müssen Sie sich mit den Grundprinzipien und Komponenten des Erstellens eines WordPress-Themas unter Verwendung der Grundprinzipien von WP vertraut machen. 

Zunächst müssen Sie etwas darüber lernen Vorlagendateien, die Hauptbausteine ​​eines Themas in WP.

Vorlagendateien bestimmen im Wesentlichen, wie Ihr Layout und Ihr Inhalt auf Ihrer Website angezeigt werden. Wenn Sie eine Kopfzeile erstellen möchten, sollten Sie die verwenden header.php Datei, während comments.php würde verwendet, um Kommentare anzuzeigen.

Wie oben erläutert, verwendet WP seine Vorlagenhierarchie, um zu bestimmen, welche Vorlagendatei ausgewählt wird, um den Inhalt auszuführen, den ein Benutzer anfordert / benötigt. Sie können mit diesen Dateien so arbeiten, wie sie sind. Da Sie jedoch hier sind, um ein WordPress-Design zu erstellen, besteht Ihre Hauptaufgabe darin, diese Dateien an Ihre Bedürfnisse anzupassen.

 

Wenn wir über WP-Kernprinzipien sprechen, sollten Sie auch das Konzept dahinter verstehen The Loop.

Dies ist der Code, den WP hauptsächlich zum Anzeigen Ihrer Inhalte verwendet. Er ist in allen Inhalten enthalten, in denen Vorlagendateien angezeigt werden, z index.php or Seitenleiste.php. Es ist ein ziemlich komplexes Thema, aber glücklicherweise wird es mit dem Starter-Thema (wenn Sie Unterstriche verwenden) gebündelt, was bedeutet, dass Ihr Prozess einfacher sein sollte. 

Sie müssen das Konzept verstehen und damit arbeiten. Schauen Sie sich einige der Beispiele im obigen Link an, um besser zu verstehen, wie die Schleife verwendet wird und wie Sie den Code an Ihre Bedürfnisse anpassen können.

3. Erstellen Sie Themendetails

Themes sind keine rein kosmetischen Komponenten.

Es gibt viele verschiedene Funktionen, die Sie Ihrer Site hinzufügen können, um die Funktionalität zu verbessern. Wir werden diskutieren, wie Sie einige grundlegende Funktionen implementieren, um Ihre Website aufzupeppen.

Hinzufügen Haken Sie können bei Bedarf verschiedene PHP-Aktionen ausführen, andere Informationen anzeigen oder Styling-Daten einfügen.

Hooks sind Codefragmente, die in Vorlagendateien eingefügt werden. Die meisten von ihnen sind direkt als Teil des Kerns von WordPress implementiert, aber einige Hooks sind auch beim Anpassen von Themen sehr nützlich.

Hier ist eine Liste der häufigsten Hooks und ihrer Rollen:

  • wp_head () - wird dem hinzugefügt Element in header.php. Es aktiviert Skripte, Stile und andere Informationen, die ausgeführt werden, wenn die Site geladen wird.
  • wp_footer () - normalerweise zu footer.php vor dem hinzugefügt Tag, das am häufigsten zum Einfügen von Code für Google Analytics oder anderen Codes verwendet wird, der auf jeder Seite angezeigt werden muss, aber zu schwer ist, um in den Header geladen zu werden.  
  • wp_meta () - Wird normalerweise unter sidebar.php gefunden und wird am häufigsten verwendet, um zusätzliche Skripte einzuschließen (z. B. eine Tag-Cloud).
  • comment_form () - Wird direkt vor dem Schließen der Datei zu comment.php hinzugefügt Tag, um Kommentare anzuzeigen. 

Wenn Sie Unterstriche verwenden, sind diese Hooks bereits im Thema enthalten. Es ist jedoch immer eine gute Idee, mehr über sie zu erfahren und alle verfügbaren Hooks anzuzeigen. Mit Hooks können Sie die Funktionen Ihres benutzerdefinierten Themas erweitern.  

4. Hinzufügen von Stilen mithilfe von CSS

Cascading Style Sheets oder CSS definiert das Erscheinungsbild des Inhalts auf der von Ihnen erstellten Website.

Durch die Verwendung der style.css Datei, die bereits in Ihrem Thema enthalten ist, können Sie jeden der hier gefundenen Stile bearbeiten und speichern, um zu sehen, wie sich Ihr Design ändert. Standardmäßig enthält es nur das grundlegende Styling.

CSS wird verwendet, um die Präsentation und Trennung der Inhalte auf Ihrer Website zu ermöglichen, vom Layout über Schriftarten bis hin zu Inhalten. CSS kann dazu beitragen, den Inhalt Ihrer Website zugänglicher und flexibler zu machen.

Eine eingehende Beschreibung der Verwendung des Stylings mit WordPress-Themen kann ziemlich haarig werden und geht über den Rahmen dieses Artikels hinaus. Wenn Sie sich nicht sicher sind, sollten Sie mehr über CSS erfahren, bevor Sie fortfahren.

5. Einschließlich JavaScript

Wenn Sie Ihrem Thema bei Bedarf JavaScript-Dateien hinzufügen, können Sie die interaktiven Funktionen und Fähigkeiten verbessern und eine besser funktionierende Website erstellen. Dies ist besonders praktisch, wenn Sie Plugins von Drittanbietern in Ihre Websites integrieren möchten, z. B. bestimmte Video- oder Audioplayer, z. B. Schieberegler, Popup-Unterstützung und andere Bibliotheken von Drittanbietern, um erweiterte Funktionen zu erstellen.

Um Javascript mit Ihrer benutzerdefinierten Site zu verwenden, können Sie mithilfe der folgenden Syntax einen Aufruf erstellen, um die Skriptdatei zum Thema hinzuzufügen.

Alternativ können Sie das Skript direkt in Ihrem verwenden header.php Vorlagendatei zwischen den Meta-Tags und dem Stylesheet-Link, wie Sie es bei einer HTML-Seite tun würden. Wenn Sie es in der Header-Datei verwenden, sollte es ungefähr so ​​aussehen: 

Wenn Sie JS direkt verwenden möchten, fügen Sie den Aufruf für die Dateien direkt wie unten beschrieben hinzu. Wenn Sie die Funktion "An Freund senden" festlegen möchten, können Sie sie unter den Post-Titel setzen. Das würde ungefähr so ​​aussehen: 

" rel="bookmark">

<!--

emailpage ();

// ->

Sie können Skripte auch mithilfe der später in diesem Artikel beschriebenen Syntax in die Warteschlange stellen.

6. Testen Sie Ihr Thema und exportieren Sie es

Wenn Sie mit all dem fertig sind, ist es endlich Zeit, Ihr erstelltes benutzerdefiniertes WordPress-Theme zu testen, um sicherzustellen, dass es reibungslos funktioniert.

Zu diesem Zweck können Sie die verwenden Thema Unit-Test Daten, eine Reihe von Dummy-Daten, die Sie auf Ihre Site hochladen können. Die Daten bestehen aus Stilvariationen und unterschiedlichen Inhalten, sodass Sie sehen können, wie effektiv Ihr Thema sowohl vorhersehbare als auch unvorhersehbare Daten verarbeiten kann.

Testen Sie alles gründlich (gemäß dem obigen Codex-Link), damit Sie sicher sein können, dass das von Ihnen erstellte Thema den erforderlichen Standards entspricht und Ihren Erwartungen entspricht, bevor Sie es exportieren.

Sobald Sie mit dem Testen vertraut sind, können Sie das Thema exportieren.

Sie können den Export durchführen, indem Sie den Ort suchen, an dem Sie die Website-Entwicklungsumgebung lokal installiert haben.

Öffnen Sie den Ordner und greifen Sie zu  / Wp-content / themes /, wo Sie das Thema finden, an dem Sie gearbeitet haben.

Erstellen Sie nun mit einem Komprimierungswerkzeug eine zip-Datei basierend auf dem Ordner durch Komprimieren. Wenn Sie fertig sind, müssen Sie es nur noch hochladen und auf einer beliebigen WordPress-Site installieren. Sie können es auch an WordPress senden Themenverzeichnis

Detailliertes WordPress Theme Development Guide

Nachdem Sie die Grundlagen erledigt haben, werden in den nächsten Schritten einige zusätzliche Details zum Erstellen eines WordPress-Themas aufgeführt.

Erstellen von benutzerdefinierten Themendateien / Verzeichnissen

Wie Sie bereits wissen, werden WP-Designs aus verschiedenen Vorlagendateien erstellt, die zumindest a enthalten sidebar.php, header.php. und footer.php. Sie können diese über die Template-Tags aufrufen (get_header (), Wenn Sie den Header aufrufen, get_sidebar (), beim Aufrufen der Seitenleiste usw.).

Sie können auch benutzerdefinierte Versionen dieser Dateien mit geringfügigen Änderungen wie den folgenden erstellen: Seitenleiste-{your_custom_template} .php, Header-{your_custom_template} .php und Fusszeile-{your_custom_template} .php. 

Sie können die Vorlagen-Tags auch mit derselben Analogie wie der Vorlagenname als folgenden Parameter aufrufen:

get_header ( 'your_custom_template' ); 

Seiten werden von verschiedenen Dateien erstellt. Dies bedeutet, dass Sie auch andere benutzerdefinierte Vorlagendateien erstellen und diese an einer beliebigen Stelle auf der Seite aufrufen können, indem Sie sie einfach verwenden get_template_part (). Geben Sie der Datei einfach einen geeigneten Namen und verwenden Sie dieselbe benutzerdefinierte Methode wie bei den Kopf-, Fuß- und Seitenleistendateien. 

Angenommen, Sie möchten eine Vorlage erstellen, die Ihren Inhalt verarbeitet. Sie müssen lediglich eine Datei mit dem Namen erstellen content.php Erweitern Sie dann den Dateinamen, um ein bestimmtes Layout hinzuzufügen. In diesem Fall sei das so content-produkt.php.

Wenn Sie die Vorlagendatei in das Design laden, sieht sie am Ende ungefähr so ​​aus:

get_template_part ('content', 'product');.

Verzeichnisse verwenden

Um auf Themenverzeichnisse zu verlinken, verwenden Sie einfach die Funktion get_theme_file_uri ();

Diese Funktion gibt den vollständigen URI an den Hauptordner Ihres Themas zurück und Sie können ihn verwenden, um anhand des folgenden Beispiels auf Dateien und Unterordner zu verweisen:

echo get_theme_file_uri ('images / logo.png');

Enqueue-Skripte und StyleSheets

Wenn Sie ein eigenes Thema erstellen, können Sie auch benutzerdefinierte Stylesheets und eigene JavaScript-Dateien erstellen.

Wenn Sie dies tun, stellen Sie sicher, dass Sie sie mit der Standard-WordPress-Methode laden. Andernfalls besteht die Möglichkeit, dass Ihr Thema und Ihre Plugins nicht unter allen Umständen korrekt funktionieren.

Sie müssen lediglich eine Funktion erstellen, die alle Stile und Skripte in die Warteschlange stellt. Zu diesem Zweck erstellt WP sowohl ein Handle als auch einen Pfad, um die Datei und die Abhängigkeiten (falls vorhanden) zu finden. In diesem Fall müssen Sie einen Hook verwenden, um die Stylesheets und Skripte einzufügen. 

Die Grundfunktion für den Enqueing-Stil:

wp_enqueue_style ($ handle, $ src, $ deps, $ ver, $ media);

Zum Einreihen von Skripten:

wp_enqueue_script ($ handle, $ src, $ deps, $ ver, $ in_footer); 

Google Fonts in die Warteschlange stellen

Google-Schriftarten sind eine hervorragende kostenlose Schriftart für Webdesigner und können einfach zu Ihrem benutzerdefinierten Thema hinzugefügt werden.

Google Fonts öffnen Sans

Zunächst müssen Sie in der Google-Schriftartenbibliothek einen Schrifttyp finden, den Sie mögen. Wenn Sie eine Schriftart gefunden haben, mit der Sie arbeiten möchten, klicken Sie einfach auf die Schaltfläche „Diesen Stil auswählen“, um zu einer neuen Seite zu gelangen.

Wenn Sie hier nach unten scrollen, finden Sie die Anweisungen zu ihrer Verwendung in einem Feld mit dem erforderlichen Code, den Sie Ihrer Site hinzufügen können.   

Sie können die Schriftarten entweder nach der Standardmethode und der empfohlenen Methode hinzufügen oder sich entweder für die @ import CSS-Methode oder für die Javascript-Methode entscheiden.

Sie können es auch zu WP hinzufügen, indem Sie die Schriftart in Ihr Thema einreihen Funktionen.php.Datei oder mit einem bestimmten Plugin.

Funktion wpb_add_google_fonts () {

wp_enqueue_style ('wpb-google-fonts', 'https://fonts.googleapis.com/css?family=Open+Sans:300italic.400italic.700italic.400,700,300', false);

}

add_action ('wp_enqueue_scripts', 'wpb_add_google_fonts');

Wenn Sie möchten, können Sie weiterlesen wie man Schriftarten in einem WordPress-Theme ändert .

Auf den meisten Websites sind Kopf-, Fuß- und Seitenleiste auf allen Seiten gleich. Es ist wahr, dass Sie in einigen Fällen einige Dinge anpassen möchten, aber im Allgemeinen sind sie konsistent.

Um die Seite in eine Kopf- und Fußzeile zu unterteilen, müssen Sie sie ausschneiden und einfügen index.php Seite, die relevanten Teile, die in der Kopf- / Fußzeile und Seitenleiste sein sollten. Dies hängt ein wenig von Ihrer aktuellen index.php ab.

Wenn Sie beispielsweise Unterstriche verwenden, wurden Kopf- und Fußzeile in der Datei header.php und footer.php bereits korrekt definiert.

Fahren wir mit diesem Beispiel fort, als würden wir den Inhalt für den Header erstellen.

In den meisten Websites enthalten die Überschriften die wesentlichen Kopfstile und die Navigation zur Website.   

Beginne am hinzufügen vor dem Schließen . Du solltest so etwas haben. Dies basiert auf dem Unterstreichungs-Starter-Thema, aber Sie können den Header nach Bedarf anpassen, um Ihre eigenen Anpassungen zu erstellen.

header.php

 


/ **
* Die Überschrift für unser Thema
*
* Dies ist die Vorlage, in der alle angezeigt werden Abschnitt und alles bis
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @Paket Daves_Theme
*/

?>

>

">


>





the_custom_logo ();
if (is_front_page () && is_home ()):
?>
" rel="home">

sonst:
?>
" rel="home">

endif;
$ daves_theme_description = get_bloginfo ('description', 'display');
if ($ daves_theme_description || is_customize_preview ()):
?>





wp_nav_menu (
Array (
'theme_location' => 'menu-1',
'menu_id' => 'Primärmenü',
)
);
?>

 

Der gleiche Vorgang sollte auch für die Fußzeile gelten.

Verwenden von Functions.php

Das Thema functions.php Datei ist eine Vorlagendatei im WP-Design, die sich wie ein "Master" verhält und automatisch sowohl für Administratoren als auch für Front-End-Seiten einer Site geladen wird.

Normalerweise werden Funktionen, Aktionen, Filter und Klassen definiert, die andere Vorlagendateien im Thema verwenden. Es kann auch verwendet werden, um die Funktionalität des Themas durch zusätzliche Hooks, Aktionen und Filter zu erweitern.

Sie finden die Datei functions.php leicht im Themenordner. Sie können Filtern und Hooks, die bereits im WP-Kern definiert sind, integrierte WP- und reguläre PHP-Funktionen hinzufügen.

Sie können einfach eine functions.php-Datei erstellen, indem Sie eine Nur-Text-Datei mit dem Namen functions.php erstellen und in das Verzeichnis des Themas einfügen. Mit dieser Datei können Sie Postformate, Navigationsmenüs und Post-Thumbnails zusammen mit WP-Aktionen und -Filtern aktivieren. 

Schauen Sie sich die Datei functions.php in einem Starter-Design an, um einige Beispiele dafür zu sehen, was getan werden kann. Sie können auch mithilfe der Funktionsdatei nach Artikeln suchen, die die Datei functions.php verwenden, die die Funktionen einer WordPress-Site erweitern.

Verwenden der Haupteinstellungen im Thema

Mit den Haupteinstellungen können Sie bestimmte Designeinstellungen ändern, ohne die Themendateien zu ändern oder Code ändern zu müssen. Eine ausführliche Beschreibung hierzu liegt außerhalb des Geltungsbereichs dieses Artikels. Wir verweisen Sie daher auf einige Artikel, in denen dieses Konzept ausführlich erläutert wird.

  1. Einstellungs-API Beschreibung auf WordPress Codex.
  2. Vollständiger Leitfaden zu WordPress-Einstellungs-API

Die WordPress-Schleife

Wie bereits erwähnt, ist die Schleife ein Standardmechanismus, mit dem WP Beiträge über Vorlagendateien anzeigt.

Mithilfe des Schleifenmechanismus ruft WP die Beiträge auf aktuellen Seiten ab und formatiert sie gemäß den "Anweisungen" in der Schleife.

Grundsätzlich werden die Beiträge für die aktuellen Seiten einzeln durchlaufen, indem die im Thema angegebene Aktion ausgeführt wird. 

Sie können die Schleife für verwenden

  • Anzeigen von Inhalten und Kommentaren
  • Anzeigen von Post-Titeln und Auszügen auf der Blog-Homepage
  • Zeigen Sie Daten aus benutzerdefinierten Feldern und benutzerdefinierten Beitragstypen an
  • Zeigen Sie den Inhalt auf einzelnen Seiten mithilfe von Vorlagen-Tags an.
  • Passen Sie die Schleife an, um Inhalte in Vorlagendateien anzuzeigen und zu bearbeiten

Wenn Sie das Starter-Thema "Unterstriche" verwenden, wird die WordPress-Schleife in den Dateien "single.php" und "page.php" verwendet. Vielleicht möchten Sie sich diese Dateien ansehen, um zu verstehen, wie sie funktionieren und / oder verwendet werden können.

 

get_header ();
?>


while (have_posts ()):
die Post();

get_template_part ('template-parts / content', get_post_type ());

the_post_navigation (
Array (
'prev_text' => ' '. esc_html __ ('Zurück:', 'daves-theme'). ' % title ',
'next_text' => ' '. esc_html __ ('Weiter:', 'daves-theme'). ' % title ',
)
);

// Wenn Kommentare geöffnet sind oder wir mindestens einen Kommentar haben, laden Sie die Kommentarvorlage.
if (comment_open () || get_comments_number ()):
comment_template ();
endif;

in der Zwischenzeit; // Ende der Schleife.
?>


get_sidebar ();
get_footer ();

 

Menü und Seiten

Hauptmenü

Sie können Ihr Hauptmenü im WP-Menü-Editor (unter Darstellung - Menü) auswählen. Ihr Thema unterstützt möglicherweise mehr als ein Navigationsmenü an verschiedenen Stellen in Ihrem Thema. 

Es gibt auch Möglichkeiten, zusätzliche Menüs zu registrieren. Sie können beispielsweise ein "Fußzeilen" -Menü erstellen.

Schauen Sie sich den WordPress-Codex an, um zu verstehen, wie das geht: https://codex.wordpress.org/Navigation_Menus

Benutzerdefinierte Seite

Mit WP können standardmäßig Seiten und Beiträge erstellt werden. Es steuert das Erscheinungsbild der Seite über die page.php Vorlagendatei.

Während diese Datei alle einzelnen Seiten in Ihrem Thema betrifft, können Sie deren Layout und Erscheinungsbild ändern. Das Bearbeiten dieser benutzerdefinierten Seitenvorlagen in WP erfordert ein wenig HTML, PHP und CSS, sollte aber auch hier recht einfach sein.

index.php

Diese Vorlage ist die Standard-Fallback-Vorlage in WordPress zum Anzeigen einer Seite, wenn die Vorlagenhierarchie keine andere Seite finden kann, die Ihren angegebenen Parametern entspricht.

Sie müssen dies verwenden, um alles zu berücksichtigen, was von den übrigen Vorlagendateien nicht verarbeitet wird.

Archiv.php

Das archive.php Vorlage wird verwendet, um Tag-, Autor-, Kategorie- und andere benutzerdefinierte Archivseiten anzuzeigen.

Das Erstellen einer Archivseite kann eine gute Möglichkeit sein, Ihren gesamten Inhalt auf einer einzigen Seite zusammenzufassen.

Kategorie

In der WP-Webentwicklung werden nicht selten verschiedene Vorlagen für Kategorien, benutzerdefinierte Beitragstypen, Taxonomien und Tags verwendet. Durch Erstellen verschiedener Vorlagenkategorien können Sie auf jeder Kategorieseite unterschiedliche Funktionen einfügen.   

Eine typische category.php-Vorlage sieht folgendermaßen aus:

/ **

* Eine einfache Kategorievorlage

*/

get_header (); ?>

// Überprüfen Sie, ob Beiträge angezeigt werden sollen

if (have_posts ()):?>

Kategorie:

// Optionale Kategoriebeschreibung anzeigen

 if (category_description ()):?>

// Die Schleife

while (have_posts ()): the_post (); ?>

durch

 <?php

  comment_popup_link ('Noch keine Kommentare', '1 Kommentar', '% Kommentare', 'Kommentar-Link', 'Kommentare geschlossen');

?>

<?php endwhile;

sonst :?>

Verzeihung, keine Artikel passen auf deine Kriterien.

Seitenleiste.php

Die Seitenleiste ist der Bereich, in dem Sie Ihre Widgets in ein WP-Thema einfügen können. Meistens befindet es sich auf allen Seiten auf der rechten Seite oder unterhalb Ihres Inhalts.

In den Seitenleisten werden Dinge angezeigt, die nicht direkt mit dem Post- oder Seiteninhalt verbunden sind, sondern beispielsweise Links zu verschiedenen Bereichen Ihrer Website, Anmeldeformulare, Anzeigen, Links zu sozialen Medien usw.

Normalerweise wird die Seitenleiste in Verbindung mit WP-Widgets verwendet.   

So können Sie Ihrem Thema eine Widget-fähige Seitenleiste hinzufügen:

Funktion wpb_widgets_init () {

    register_sidebar (Array (

        'name' => __ ('Main Sidebar', 'wpb'),

        'id' => 'sidebar-1',

        'description' => __ ('Die Hauptseitenleiste wird auf jeder Seite rechts angezeigt, mit Ausnahme der Titelseitenvorlage', 'wpb'),

        'before_widget' => ' ',

        'after_widget' => ' ',

        'before_title' => ' ',

        'after_title' => ' ',

    ));

    register_sidebar (Array (

        'name' => __ ('Seitenleiste der Titelseite', 'wpb'),

        'id' => 'sidebar-2',

        'description' => __ ('Erscheint auf der statischen Titelseitenvorlage', 'wpb'),

        'before_widget' => ' ',

        'after_widget' => ' ',

        'before_title' => ' ',

        'after_title' => ' ',

    ));

    }

add_action ('widgets_init', 'wpb_widgets_init');

Einzelne Postseiten (single.php)

Angenommen, Sie möchten eine andere Vorlage oder ein anderes Layout für einen bestimmten Artikel auf Ihrer Website verwenden.

Dazu müssen Sie eine benutzerdefinierte Einzelbeitragsvorlage erstellen. Dies ist dem Erstellen benutzerdefinierter Seiten ziemlich ähnlich. Wenn Sie die dort geltenden grundlegenden Richtlinien befolgen, können Sie auch problemlos einzelne Beiträge erstellen. 

Fügen Sie dem Thema einfach den folgenden Code hinzu, um Unterstützung für ausgewählte Bilder hinzuzufügen functions.php Datei:

add_theme_support ( 'Post-Thumbnails'); 

Jetzt können Sie zu Ihren Seiten oder Posts gehen und prüfen, ob die ausgewählte Bildoption verfügbar ist. Möglicherweise wird es von WP nicht automatisch angezeigt. Um das Bild anzuzeigen, müssen Sie möglicherweise geringfügige Änderungen an Ihren Vorlagen vornehmen, in denen Seiten und Beiträge angezeigt werden, indem Sie diesen Code hinzufügen:

Paginierung 

Mit dieser Funktion können Sie durch Ihre Inhaltsseiten blättern. Sie können diese Funktion verwenden, wenn Sie Beitragslisten mit mehr Einträgen anzeigen, als auf eine einzelne Seite passen, oder wenn Sie längere Beiträge mithilfe von aufteilen möchten Etikett.

Die einfachste Form der Paginierung besteht darin, die Funktion posts_nav_link (). In der Vorlage nach der Schleife zu platzieren. Dadurch werden Links sowohl zur nächsten Seite der Beiträge (wenn Sie die Beitragslisten auflösen) als auch zu den vorherigen Beiträgen generiert, sofern zutreffend.  

posts_nav_link ();

Sie können auch next_posts_link & prev_posts_link verwenden, um zu steuern, wo der Link zur vorherigen und nächsten Postseite angezeigt wird.

next_posts_link ();

previous_posts_link ();

Kommentare 

Kommentare sind ein wesentlicher Bestandteil jedes Blogs oder jeder Seite. Es gibt Website-Besuchern die Möglichkeit, sich an Sie zu wenden, Feedback zu geben, Fragen zu stellen und im Allgemeinen eine tiefere Verbindung zu Ihrer Website und Ihren Inhalten herzustellen.

Alle Kommentare werden im Admin-Bereich angezeigt und es gibt verschiedene Funktionen, die Sie hinzufügen können, von der Aktivierung des Kommentierens nur für bestimmte Benutzer bis zur Kommentarmoderation.

Sie können die Datei comments.php verwenden, um das Erscheinungsbild von Kommentaren in Ihrem Thema anzupassen.

Andere Seiten und Dateien 

Abhängig von Ihren Anforderungen können Sie verschiedene Seiten und Dateien finden oder erstellen und sie an Ihre Vorlieben anpassen, indem Sie dieselben oder ähnliche Richtlinien verwenden, die oben erwähnt wurden. 

Verwenden des Eltern / Kind-Themas

Übergeordnetes Thema

Übergeordnete Themen in WP sind Themen, die von anderen Themen, nämlich untergeordneten Themen, als „Eltern“ deklariert werden.

Ein untergeordnetes Thema wird verwendet, um Designern und Entwicklern das Erstellen von Anpassungen an Themen zu ermöglichen, ohne die Möglichkeit zu beeinträchtigen, das übergeordnete Thema zu aktualisieren. Dies liegt daran, dass beim Ändern der ursprünglichen Designdateien durch einen Entwickler die Änderungen verloren gehen, wenn ein Designupdate durchgeführt wird.

Übergeordnete Themen geben jedoch ihre Features und Funktionen an ihre untergeordneten Themen weiter. Es steht Entwicklern frei, Änderungen an den Funktionen und Merkmalen des untergeordneten Themas vorzunehmen, ohne die Aktualisierbarkeit des übergeordneten Themas zu beeinträchtigen.

Kinder Thema

Untergeordnete Themen erben die Funktionalität der übergeordneten Themen. Sie werden in erster Linie verwendet, um ein vorhandenes Thema zu ändern, ohne dass bei Themenaktualisierungen zuvor hinzugefügtes benutzerdefiniertes Design verloren geht.  

Untergeordnete Themen beschleunigen den Entwicklungsprozess, da mit ihnen leicht Änderungen vorgenommen werden können.

Die meisten Themen erstellen ein untergeordnetes Thema und stellen es mit dem Thema zur Verfügung, sodass jeder, der das Thema verwendet, es über das untergeordnete Thema anpassen kann. Wir definieren, wie ein untergeordnetes Thema erstellt wird. in unserem Artikel hier.

Entwicklungs-Frameworks verwenden

Dieser Begriff bezieht sich auf die Codebibliotheken, die bei der Themenentwicklung verwendet werden. 

Entwicklungsframeworks wurden erstellt, um als übergeordnete Designvorlagen mit allen Funktionen zu dienen. Grundsätzlich bleiben Frameworks wie bei übergeordneten Themen unberührt, während Entwickler Änderungen an untergeordneten Themen vornehmen können.

Dies beschleunigt die Entwicklung und erleichtert die Beseitigung von Fehlern in bestimmten Themen-Frameworks. Bemerkenswerte Entwicklungs-Frameworks umfassen die Genesis Thema Rahmen, Themify und Divi von Elegant Themes.

IMH

Sie wollen eine schnelle Website?

Wen veräpple ich? Tun wir das nicht alle?

Warum also kämpfen so viele von uns?

Die größte Herausforderung besteht normalerweise darin, ein schnelles und zuverlässiges Hosting-Unternehmen zu finden.

Wir haben alle Albträume durchgemacht - der Support dauert ewig oder löst unser Problem nicht, indem wir immer etwas auf Ihrer Seite beschuldigen ... 

Aber der größte Mist ist, dass sich die Website immer langsam anfühlt.

At CollectiveRay Wir hosten mit InMotion-Hosting und unsere Website ist verdammt schnell. Wir laufen auf einem benutzerdefinierten Stack von LightSpeed-Servern, die auf MariaDB mit einer PHP7.4-Engine eingerichtet sind und über Cloudflare laufen. 

In Kombination mit unseren Front-End-Optimierungen bedienen wir jeden Tag zuverlässig 6000 Benutzer, mit Spitzen von mehr als 50 gleichzeitigen Benutzern. 

Möchten Sie ein schnelles Setup wie unseres bekommen? Übertragen Sie Ihre Website kostenlos auf das InMotion-Hosting und erhalten Sie 50 % RABATT auf die aktuellen Preise.

Testen Sie InMotion Hosting mit 50 % RABATT für CollectiveRay Besucher NUR im März 2024!

InMotion-Hosting 50 % RABATT für CollectiveRay Besucher

Zusammenfassung, wie man ein WordPress-Theme erstellt

Das Obige ist eine detaillierte Schritt-für-Schritt-Anleitung für den Einstieg in die Entwicklung Ihres eigenen benutzerdefinierten WordPress-Themas.

Alles in allem ist es kein so anspruchsvoller Prozess, WordPress und PHP zu verstehen. Es ist wichtig, die Grundlagen der Webentwicklung zu kennen, und Sie können den WordPress-Kern während der Entwicklung genauer verstehen. Wenn Sie noch keine Lust haben, der Aufgabe gewachsen zu sein, ist es in Ordnung, nehmen Sie sich Zeit und experimentieren Sie ein bisschen.

Sobald Sie einige Fehler gemacht haben, werden Sie immer mehr lernen. Es ist auch gut, einen Blick auf die Codebasis anderer beliebter Themen zu werfen, um zu verstehen, was sie tun, und sich einen guten Überblick über sinnvolle Praktiken zu verschaffen.

Lassen Sie uns wissen, wenn Sie Fragen in den Kommentaren unten haben.

Über den Autor
David Attard
David ist seit 21 Jahren in der Online- und Digitalbranche tätig. Er verfügt über umfangreiche Erfahrung in der Software- und Webdesignbranche mit WordPress, Joomla und den damit verbundenen Nischen. Er hat mit Softwareentwicklungsagenturen, internationalen Softwareunternehmen und lokalen Marketingagenturen zusammengearbeitet und ist jetzt Head of Marketing Operations bei Aphex Media – einer SEO-Agentur. Als digitaler Berater liegt sein Fokus darauf, Unternehmen dabei zu helfen, sich durch die Kombination ihrer Website und der heute verfügbaren digitalen Plattformen einen Wettbewerbsvorteil zu verschaffen. Seine Mischung aus Technologieexpertise gepaart mit ausgeprägtem Geschäftssinn verschafft seinen Schriften einen Wettbewerbsvorteil.

Eine Sache noch... Wussten Sie, dass Leute, die nützliche Dinge wie diesen Beitrag teilen, auch FANTASTISCH aussehen? ;-);
Bitte kontaktieren Sie uns, wenn Sie Probleme im Zusammenhang mit dieser Website haben oder lass a nützlich Kommentieren Sie mit Ihren Gedanken und teilen Sie dies dann Ihren Facebook-Gruppen mit, die dies nützlich finden würden, und lassen Sie uns gemeinsam die Vorteile nutzen. Vielen Dank für das Teilen und nett zu sein!

Disclosure: Diese Seite enthält möglicherweise Links zu externen Websites für Produkte, die wir lieben und von ganzem Herzen empfehlen. Wenn Sie Produkte kaufen, die wir vorschlagen, können wir eine Empfehlungsgebühr verdienen. Solche Gebühren haben keinen Einfluss auf unsere Empfehlungen und wir akzeptieren keine Zahlungen für positive Bewertungen.

Autor (en) Empfohlen am:  Inc Magazin Logo   Sitepoint-Logo   CSS Tricks Logo    Webdesignerdepot-Logo   WPMU DEV Logo   und viele mehr ...