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

Seit seiner 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 rund 38 % aller Websites im Internet genutzt wird! Angesichts dieser Popularität ist es wichtig, ein einzigartiges WordPress-Theme zu erstellen, um Ihre Website von der Masse abzuheben.

Eigentlich ist es kein Wunder, dass WordPress es so weit geschafft und so beliebt geworden ist.

Die Flexibilität und die angebotenen Funktionen ermöglichen den breiten Einsatz auf verschiedenen Website-Typen. Zudem ist WordPress auch ohne Programmier- oder Webentwicklungskenntnisse recht einfach zu bedienen.

Dies sind die Gründe für die Erfolgsgeschichte von WordPress und genau die Gründe, warum fast 40 Prozent aller Websites im World Wide Web werden mit dieser Software betrieben. 

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

Einführung in die WordPress-Theme-Entwicklung 

Ein weiteres beliebtes Feature, das WordPress so beliebt macht, sind seine Themes. Ein Theme ist eine Sammlung von Stylesheets und Vorlagen, die das Aussehen und die Darstellung einer WordPress-basierten Website definieren.

Die Software bietet dem Nutzer vielfältige Bearbeitungsmöglichkeiten für Themes aus dem WP-Adminbereich.

Hunderte von WordPress-Themes sind völlig kostenlos oder wie viele andere zu einem angemessenen Preis von einigen zehn Dollar erhältlich.

Tatsächlich hostet WordPress.org in seinem Themes-Verzeichnis eine riesige Datenbank mit Themes.

Auch andere Websites wie Themeforest bieten zahlreiche Premium-Themes verschiedener Entwickler an.

Jedes dieser Designs verfügt über ein anderes Layout, Designmuster und andere Funktionen.

Es liegt an Ihnen, das passende Theme für Ihre Website zu finden. Meistens sind Themes auf bestimmte Branchen oder Berufe zugeschnitten, sodass beispielsweise Restaurantbesitzer problemlos Themes mit Buchungsfunktionen finden können.

Es gibt zwar viele tolle Themes, die Ihren Bedürfnissen entsprechen könnten, aber wenn Sie etwas Außergewöhnliches schaffen wollen, müssen Sie es größtenteils selbst machen. Wenn Sie nicht programmieren können, ist eine gute Alternative Option wäre, sich an einen freiberuflichen Softwareentwickler zu wenden (Preise können je nach verschiedenen Faktoren variieren).

In diesem Artikel gehen wir jedoch auf ALLE notwendigen Schritte ein, um Ihr eigenes, individuelles WordPress-Theme für Ihre WP-Website zu erstellen. Wir werden jeden wichtigen Aspekt unter die Lupe nehmen, um sicherzustellen, dass Sie das Beste aus WordPress herausholen. 

Als Anfänger mit der Erstellung eines eigenen Designs zu beginnen, mag auf den ersten Blick wie eine Mammutaufgabe erscheinen.

Die Erstellung eines eigenen Themes von Grund auf ist in WordPress jedoch nicht allzu kompliziert. Sie müssen kein Webentwicklungsexperte sein. Wenn Sie die Grundlagen der PHP-Programmierung beherrschen, können Sie die Erstellung eines WordPress-Themes ganz einfach erlernen.

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

Erstellen Sie Ihr erstes benutzerdefiniertes WordPress-Theme

Um mit der Erstellung eines WordPress-Themes zu beginnen, benötigen Sie einige grundlegende Dinge:

• Eine WordPress-Website
• Ein guter Hosting-Plan
• Ein wenig Vorerfahrung mit Dingen wie lokalen Staging-Umgebungen
• Grundlegende Kenntnisse der Programmiersprachen CSS und PHP
• Ein Starter-Thema

 

Die WordPress-Vorlagenhierarchie verstehen 

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

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

Schauen Sie sich das Diagramm unten an – es erklärt, wie die WordPress-Vorlagenhierarchie organisiert ist.

 

Vorlagendateien bestimmen das Gesamtbild des Inhalts auf der Website. Wenn Sie einen Header erstellen möchten, verwenden Sie eine 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 enthält Informationen, die im Link jedes Teils der Website gespeichert sind, den Sie ändern möchten. Einfacher ausgedrückt: WordPress analysiert die Informationen und durchsucht die Vorlagenhierarchie, um eine Vorlagendatei zu finden, die den in der Abfragezeichenfolge angegebenen Informationen entspricht.

Dies ist im Grunde ein Schema, bei dem WP bei jedem Laden von Seiten nach passenden Vorlagendateien sucht.

Wenn Sie beispielsweise die folgende URL eingeben http://example.com/post/this-post, WordPress sucht die erforderlichen Vorlagendateien in der folgenden Reihenfolge: 

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

 

Die letzte Datei (index.php) ist in jedem Design erforderlich, da es die Standardeinstellung (oder Fallback) ist, wenn im Abgleichprozess keine andere Datei gefunden werden kann. Unterstrichen (ein WP-Starter-Theme) enthält die gängigsten Dateien. Die in diesem Theme enthaltenen Dateien sind sofort einsatzbereit.

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

Was ist ein WordPress-Starter-Theme? 

Ein Starter-Theme ist die Grundstruktur eines benutzerdefinierten WordPress-Themes.

Sie können es als Grundlage für Ihr eigenes, einzigartiges Theme verwenden. Mit einem Starter-Theme können Sie Ihr ganz individuelles WordPress-Theme erstellen, ohne ein komplettes Theme von Grund auf neu entwerfen oder programmieren zu müssen.

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

Durch die Verwendung eines Starter-Themes erhalten Sie ein besseres Verständnis für die Funktionsweise von WordPress, da es Ihnen die Grundlagen, die Struktur eines Themes und das Zusammenspiel der verschiedenen Teile zeigt.

Ein maßgeschneidertes WordPress-Theme kann auf eine Reihe verschiedener Website-Typen angewendet werden, von Präsentationen und Verzeichnissen bis hin zu Online-Shops erstellt mit WooCommerce, soziale Medien oder wofür auch immer Sie Ihre Website benötigen.  

Durch die Entscheidung für Starter-Themes (wie UnderStrap, Underscores und Bones) können Sie ein WordPress-Theme erstellen, das Ihnen die Möglichkeit bietet, eine Vielzahl unterschiedlicher Optionen zu nutzen.

Für Anfänger ist Underscores möglicherweise die beste Wahl, da es die wichtigsten Funktionen bietet. Es stammt außerdem von einem langjährigen und zuverlässigen Entwickler. Das bedeutet, dass es kompatibeler, sicherer und zuverlässiger ist und langfristig besseren Support bietet.

Warum sollten Sie ein Starter-Theme verwenden?

Wie bereits erwähnt, ist ein Starter-Theme die Grundlage, eine Blaupause, die Ihnen hilft, eine einzigartige Website zu erstellen. Es ist bereits voll funktionsfähig, aber es fehlen noch die entscheidenden Schlüsselfunktionen, die eine benutzerfreundliche Website ausmachen. 

Im Wesentlichen muss es noch gestaltet und richtig konfiguriert werden. 

Starter-Themes eignen sich ideal für alle, die wenig oder keine Erfahrung mit WordPress oder Webentwicklung im Allgemeinen haben. Sie sind eine großartige Möglichkeit, sich mit der Themenerstellung vertraut zu machen und die Grundlagen von WordPress-basierten Websites zu erlernen. 

Ein WordPress-Starter-Theme spart Ihnen Zeit und erfordert kaum oder gar keine Vorkenntnisse im Programmieren und den übrigen komplexen Aspekten von WordPress. 

Sie können von der jahrelangen harten Arbeit der Entwickler des Starter-Themes profitieren und diese Richtlinien nutzen, um ein besseres Verständnis dafür zu bekommen, wie WordPress und Theme-Design funktionieren.   

Beliebte Beispiele für Starterthemen

• Unterstrichen – Ein zuverlässiges und renommiertes Starter-Theme, das Anfängern einen Vorsprung verschafft in ThemenentwicklungUnderscores ist recht einfach aufgebaut und eignet sich perfekt für den sofortigen Einstieg, sofern Sie über alle notwendigen Tools verfügen. Das Theme eignet sich hervorragend, um die Konzepte der Theme-Entwicklung zu verstehen. Bei Underscores geht es darum, ein neues Projekt zu starten, das eher als sich ständig weiterentwickelndes Toolkit und weniger als Framework betrachtet werden sollte.
  
  
• Roots – Dieses Starter-Theme bietet Ihnen einen Ansatz, der sich eher an Entwickler richtet, da sein Markup auf dem HTML5-Boilerplate basiert. Es unterstützt auch fortgeschrittenere Tools wie Bootstrap und Grunzen. Das Roots-Starter-Theme enthält auch einen Theme-Wrapper, der Ihnen hilft, Ihren Prozess zu optimieren und das wiederholte Aufrufen derselben Vorlagenteile zu vermeiden.

Roots verwendet auch CSS-Präprozessoren und unterstützt LESS, eine abwärtskompatible Spracherweiterung für CSS, die den Entwicklungsprozess Ihres Designs erheblich beschleunigen kann.

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

6 grundlegende Schritte zur Entwicklung Ihres WordPress-Themes

Nachdem Sie die Grundlagen behandelt haben, sind Sie endlich bereit, mit der Erstellung eines WordPress-Themes zu beginnen.

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

Wenn Sie diesen Weg einschlagen möchten, vergessen Sie nicht, dass Sie viel mehr Zeit benötigen und sich etwas tiefer mit dem Programmieren und der Webentwicklung im Allgemeinen befassen 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-Websites zu verwalten und zu entwickeln. Eine Entwicklungsumgebung ermöglicht Ihnen die sichere Entwicklung Ihrer Website und bietet Ihnen außerdem vielfältige Möglichkeiten zur Erstellung einer lokalen Umgebung.

Der Einsatz von DesktopServer ist einer der idealen Wege. So erhalten Sie ganz einfach eine lokale und schnelle Version von WordPress, die sowohl mit Windows als auch mit Mac kompatibel ist. Wählen Sie die kostenlose Version, registrieren Sie sich, laden Sie sie herunter und installieren Sie die Software.

 

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

Der Vorgang ist relativ einfach und in wenigen Minuten einsatzbereit. Nach der Einrichtung verfügen Sie über eine Website und eine Entwicklungsumgebung, die wie jede Live-WP-Website funktioniert und aussieht.

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

Die einfachsten Starterthemen (wie Underscores) sind für Anfänger leicht zu erlernen.

Im Gegensatz zu den meisten Basisthemen bietet Underscores die Möglichkeit, Optionen anzupassen, indem Erweiterte Optionen (wie Autor und Beschreibung), nachdem Sie Ihr Thema benannt haben. 

Sie können auch Syntactically Awesome StyleSheets oder SASS Dabei handelt es sich um eine vorverarbeitende CSS-Sprache, die Ihnen die Einführung von Funktionen wie Verschachtelung, mathematische Operationen, Verwendung von Variablen usw. ermöglicht.

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

Installieren Sie nun die Datei auf Ihrer lokalen Website. Wenn Sie alles richtig gemacht haben, sehen Sie nun eine Basisversion Ihres benutzerdefinierten WordPress-Themes.

Die WordPress-Kernprinzipien verstehen 

Nachdem die Grundlagen eingerichtet sind, können Sie loslegen. Bevor Sie jedoch mit der Anpassung beginnen, sollten Sie sich mit den Grundprinzipien und Komponenten der Erstellung eines WordPress-Themes vertraut machen. 

Zunächst müssen Sie lernen über Vorlagendateien, die wichtigsten Bausteine ​​jedes Themas in WP.

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

Wie oben erläutert, verwendet WordPress seine Vorlagenhierarchie, um zu bestimmen, welche Vorlagendatei für die Ausführung des vom Benutzer angeforderten/benötigten Inhalts ausgewählt wird. Sie können mit diesen Dateien unverändert arbeiten. Da Sie jedoch ein WordPress-Theme erstellen möchten, besteht Ihr Hauptaufwand darin, diese Dateien an Ihre Bedürfnisse anzupassen.

 

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

Es handelt sich um den Code, den WP hauptsächlich zur Anzeige Ihrer Inhalte verwendet und der in allen Vorlagendateien zur Inhaltsanzeige zu finden ist, wie zum Beispiel in der index.php or sidebar.php. Es handelt sich um ein ziemlich komplexes Thema, aber glücklicherweise ist es im Starter-Theme enthalten (wenn Sie Underscores verwenden), sodass Ihr Vorgang einfacher sein sollte. 

Sie müssen das Konzept verstehen und damit arbeiten. Sehen Sie sich einige 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. Themendetails erstellen

Themen sind keine rein kosmetischen Komponenten.

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

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

Hooks sind Code-Schnipsel, die in Vorlagendateien eingefügt werden. Die meisten davon sind direkt im WordPress-Kern implementiert, einige Hooks sind aber auch beim Anpassen von Themes sehr nützlich.

Hier ist eine Liste der gängigsten Hooks und ihrer Rollen:

• wp_head() - wird hinzugefügt zu 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 hinzugefügt, bevor die Tag, wird am häufigsten verwendet, um Code für Google Analytics oder anderen Code einzufügen, der auf jeder Seite angezeigt werden muss, aber zu groß ist, um in die Kopfzeile geladen zu werden.  
• wp_meta() - Im Allgemeinen unter sidebar.php zu finden und am häufigsten zum Einbinden zusätzlicher Skripte (beispielsweise einer Tag-Cloud) verwendet.
• comment_form() - Wird direkt vor dem Schließen der Datei zu comments.php hinzugefügt Tag zum Anzeigen von Kommentaren. 

Wenn Sie Underscores verwenden, sind diese Hooks bereits im Theme enthalten. Es ist jedoch immer ratsam, mehr darüber zu erfahren und alle verfügbaren Hooks anzuzeigen. Mit Hooks können Sie die Funktionen Ihres benutzerdefinierten Themes erweitern.  

4. Hinzufügen von Stilen mit CSS

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

Durch die Verwendung der style.css In der Datei, die bereits in Ihrem Design enthalten ist, können Sie alle hier enthaltenen Stile bearbeiten und speichern, um zu sehen, wie sich Ihr Design dadurch verändert. Standardmäßig enthält sie nur die grundlegenden Stile.

CSS dient der Darstellung und Trennung der Inhalte Ihrer Website – vom Layout über Schriftarten bis hin zum Inhalt. CSS kann dazu beitragen, die Inhalte Ihrer Website zugänglicher und flexibler zu gestalten.

Die detaillierte Beschreibung des Stylings von WordPress-Themes kann recht komplex sein und geht über den Rahmen dieses Artikels hinaus. Wenn Sie sich nicht sicher sind, sollten Sie sich vorher über CSS informieren.

5. Einbinden von JavaScript

Das Hinzufügen von JavaScript-Dateien zu Ihrem Theme kann bei Bedarf die interaktiven Funktionen und Möglichkeiten verbessern und die Funktionalität Ihrer Website verbessern. Dies ist besonders praktisch, wenn Sie Plugins von Drittanbietern in Ihre Websites integrieren möchten, z. B. bestimmte Video- oder Audioplayer, Slider, Popup-Unterstützung und andere Drittanbieterbibliotheken, um erweiterte Funktionen zu schaffen.

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

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

Wenn Sie JS direkt verwenden möchten, fügen Sie den Aufruf der Dateien wie unten beschrieben direkt hinzu. Wenn Sie die Funktion „An einen Freund senden“ einrichten möchten, können Sie sie unter dem Beitragstitel platzieren. Das würde dann ungefähr so ​​aussehen: 

" rel="bookmark">

<!--

E-Mail-Seite();

//-->

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

6. Testen Sie Ihr Design und exportieren Sie es

Wenn Sie mit all dem oben genannten fertig sind, ist es endlich an der Zeit, Ihr erstelltes benutzerdefiniertes WordPress-Design zu testen, um sicherzustellen, dass es reibungslos läuft.

Zu diesem Zweck können Sie die Thema Unit-Test Daten: Ein Satz von Dummy-Daten, die Sie auf Ihre Website hochladen können. Die Daten bestehen aus Stilvarianten und unterschiedlichen Inhalten, sodass Sie sehen können, wie effektiv Ihr Design sowohl vorhersehbare als auch unvorhersehbare Daten verarbeiten kann.

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

Sobald Sie mit dem Test zufrieden sind, können Sie das Design 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 Komprimierungstool eine zip.datei basierend auf dem Ordner, indem Sie ihn 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 die WordPress Themenverzeichnis. 

Detaillierte Anleitung zur Entwicklung von WordPress-Themes

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

Erstellen benutzerdefinierter Designdateien/-verzeichnisse

Wie Sie bereits wissen, werden WP-Themes aus verschiedenen Vorlagendateien erstellt, die mindestens Folgendes enthalten: sidebar.php, header.php. und footer.php. Diese können Sie über die Template-Tags (get_header(), beim Aufruf des Headers, get_sidebar(), beim Aufruf der Sidebar etc.).

Sie können auch benutzerdefinierte Versionen dieser Dateien mit geringfügigen Änderungen wie diesen erstellen: Seitenleiste-{Ihre_benutzerdefinierte_Vorlage}.php, Header-{your_custom_template}.php und Fußzeile-{Ihre_benutzerdefinierte_Vorlage}.php. 

Sie können die Vorlagen-Tags auch mit der gleichen Analogie mit dem Vorlagennamen als Parameter wie folgt aufrufen:

get_header ( „Ihre benutzerdefinierte Vorlage“ ); 

Seiten werden durch verschiedene Dateien erstellt, d. h. Sie können auch andere benutzerdefinierte Vorlagendateien erstellen und diese an jeder beliebigen Stelle innerhalb der Seite aufrufen, indem Sie einfach get_template_part(). Geben Sie der Datei einfach einen geeigneten Namen und verwenden Sie dieselbe benutzerdefinierte Methode wie bei den Kopf-, Fußzeilen- und Seitenleistendateien. 

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

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

get_template_part( 'Inhalt', 'Produkt' );.

Verzeichnisse verwenden

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

Diese Funktion gibt die vollständige URI zum Hauptordner Ihres Designs zurück und Sie können sie verwenden, um anhand des folgenden Beispiels auf Dateien und Unterordner zu verweisen:

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

Skripte und StyleSheets in die Warteschlange stellen

Wenn Sie Ihr eigenes Design entwickeln, können Sie auch benutzerdefinierte Stylesheets und Ihre eigenen JavaScript-Dateien erstellen.

Achten Sie dabei darauf, sie mit der Standardmethode von WordPress zu laden. Andernfalls besteht die Möglichkeit, dass Ihr Design und Ihre Plugins nicht unter allen Umständen richtig funktionieren.

Sie müssen lediglich eine Funktion erstellen, die alle Stile und Skripte einreiht. WP erstellt hierfür einen Handle und einen Pfad, um die Datei und die Abhängigkeiten (falls vorhanden) zu finden. Anschließend müssen Sie einen Hook verwenden, um die Stylesheets und Skripte einzufügen. 

Die Grundfunktion für den Warteschlangenstil:

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 Fonts sind eine hervorragende kostenlose Schriftartenquelle für Webdesigner und können einfach zu Ihrem benutzerdefinierten Design hinzugefügt werden.

Suchen Sie zunächst in der Google Fonts-Bibliothek nach einer Schriftart, die Ihnen gefällt. Klicken Sie anschließend auf „Diesen Stil auswählen“, um zu einer neuen Seite zu gelangen.

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

Sie können die Schriftarten entweder mit der standardmäßigen und empfohlenen Methode hinzufügen oder sich für die @import CSS-Methode oder die Javascript-Methode entscheiden.

Sie können es auch zu WP hinzufügen, indem Sie die Schriftart in die Warteschlange Ihres Themas aufnehmen Funktionen.php.Datei oder durch die Verwendung eines bestimmten Plugins.

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 mehr lesen auf So ändern Sie Schriftarten in einem WordPress-Theme hier.

Aufteilen Ihrer Seite in Abschnitte (Header.php / Footer.php)

Auf den meisten Websites sind Kopf- und Fußzeile sowie die Seitenleiste auf allen Seiten identisch. Zwar möchten Sie in manchen Fällen einige Dinge anpassen, aber im Allgemeinen sind sie konsistent.

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

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

Lassen Sie uns dieses Beispiel fortsetzen, als würden wir den Inhalt für die Kopfzeile erstellen.

Auf den meisten Websites enthalten die Kopfzeilen die wesentlichen Überschriftenstile und die Navigation zur Website.   

Beginnen Sie bei hinzufügen vor der Schließung Sie sollten ungefähr Folgendes erhalten. Dies basiert auf dem Underscores-Starter-Theme, Sie können den Header jedoch nach Bedarf anpassen, um Ihre eigenen Anpassungen vorzunehmen.

header.php

 

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

?>

>

">

>

das_benutzerdefinierte_Logo();
wenn (is_front_page() und is_home()):
?>
" rel="home">

sonst:
?>
" rel="home">

Endewenn;
$daves_theme_description = get_bloginfo( 'Beschreibung', 'Anzeige' );
wenn ( $daves_theme_description || is_customize_preview() ):
?>

wp_nav_menu(
Array (
'theme_location' => 'Menü-1',
'menu_id' => 'Hauptmenü',
)
);
?>

 

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

Verwenden von Functions.php

Das Thema functions.php Die Datei ist eine Vorlagendatei im WP-Design, die als „Master“ fungiert und sowohl für Administratoren als auch für Front-End-Seiten einer Site automatisch geladen wird.

Normalerweise definiert es Funktionen, Aktionen, Filter und Klassen, die andere Vorlagendateien im Design verwenden. Außerdem kann es verwendet werden, um die Funktionalität des Designs durch zusätzliche Hooks, Aktionen und Filter zu erweitern.

Die Datei functions.php finden Sie ganz einfach im Theme-Ordner. Sie können integrierte WP- und reguläre PHP-Funktionen zu Filtern und Hooks hinzufügen, die bereits im WP-Kern definiert sind.

Sie können einfach eine functions.php-Datei erstellen, indem Sie eine reine Textdatei mit dem Namen functions.php erstellen und im Theme-Verzeichnis ablegen. Mit dieser Datei können Sie Beitragsformate, Navigationsmenüs und Beitragsvorschaubilder sowie WP-Aktionen und -Filter aktivieren. 

Schauen Sie sich die Datei functions.php eines Starter-Themes an, um einige Beispiele zu sehen. Sie können auch nach Artikeln suchen, die die functions.php verwenden und die Funktionen einer WordPress-Site mithilfe der Funktionsdatei erweitern.

Haupteinstellungen im Design verwenden

Die Haupteinstellungen ermöglichen das Ändern bestimmter Designeinstellungen, ohne Designdateien oder Code ändern zu müssen. Eine detaillierte Beschreibung liegt außerhalb des Rahmens dieses Artikels. Wir verweisen daher auf einige Artikel, die dieses Konzept ausführlich erläutern.

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

Die WordPress-Schleife

Wie wir bereits besprochen haben, ist die Schleife ein von WP verwendeter Standardmechanismus zum Anzeigen von Beiträgen über Vorlagendateien.

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

Im Grunde durchläuft es die Beiträge für die aktuellen Seiten einzeln, indem es die im Design angegebene Aktion ausführt. 

Sie können die Schleife verwenden für

• Anzeigen von Inhalten und Kommentaren
• Anzeige von Beitragstiteln und Auszügen auf der Blog-Startseite
• Daten aus benutzerdefinierten Feldern und benutzerdefinierten Beitragstypen anzeigen
• 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 Underscores-Starter-Theme verwenden, finden Sie die WordPress-Schleife in den Dateien single.php und page.php. Sie können sich diese Dateien ansehen, um zu verstehen, wie sie funktioniert und/oder verwendet werden kann.

 

get_header();
?>

während (have_posts()):
der_post();

get_template_part( 'Vorlagenteile/Inhalt', get_post_type() );

die_Post-Navigation(
Array (
'prev_text' => ' ' . esc_html__( 'Vorherige:', 'daves-theme' ) . ' %title ',
'next_text' => ' ' . esc_html__( 'Weiter:', 'daves-theme' ) . ' %title ',
)
);

// Wenn Kommentare offen sind oder wir mindestens einen Kommentar haben, laden Sie die Kommentarvorlage hoch.
wenn (Kommentare öffnen() || Kommentaranzahl abrufen()):
Kommentare_Vorlage();
Endewenn;

endwhile; // 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 Theme unterstützt möglicherweise mehrere Navigationsmenüs an verschiedenen Stellen. 

Es gibt auch Möglichkeiten, zusätzliche Menüs zu registrieren. Beispielsweise möchten Sie möglicherweise ein „Fußzeilenmenü“ erstellen.

Um zu verstehen, wie das geht, werfen Sie einen Blick auf den WordPress-Codex: https://codex.wordpress.org/Navigation_Menus

Benutzerdefinierte Seite

WP ermöglicht standardmäßig das Erstellen von Seiten und Beiträgen. Es steuert das Erscheinungsbild der Seite über die page.php Vorlagendatei.

Diese Datei wirkt sich zwar auf alle einzelnen Seiten Ihres Designs aus, Sie können jedoch deren Layout und Erscheinungsbild ändern. Das Bearbeiten dieser benutzerdefinierten Seitenvorlagen in WP erfordert ein wenig HTML, PHP und CSS, sollte aber auch hier recht unkompliziert sein.

index.php

Diese Vorlage ist die standardmäßige Fallback-Vorlage in WordPress zum Anzeigen einer beliebigen 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 nicht von den übrigen Vorlagendateien behandelt wird.

Archiv.php

Die XNUMX. und XNUMX. archive.php Die Vorlage wird zum Anzeigen von Tags, Autoren, Kategorien und anderen benutzerdefinierten Archivseiten verwendet.

Das Erstellen einer Archivseite kann eine gute Möglichkeit sein, alle Ihre Inhalte auf einer einzigen Seite zusammenzufassen.

Kategorie

In der WP-Webentwicklung ist es üblich, verschiedene Vorlagen für Kategorien, benutzerdefinierte Beitragstypen, Taxonomien und Tags zu verwenden. Durch die Erstellung verschiedener Vorlagenkategorien können Sie auf jeder Kategorieseite unterschiedliche Funktionen integrieren.   

Eine typische category.php-Vorlage sieht ungefähr so ​​aus:

/ **

* Eine einfache Kategorievorlage

*/

get_header (); ?>

// Prüfen, ob Beiträge zum Anzeigen vorhanden sind

wenn ( have_posts() ) : ?>

Kategorie:

// Optionale Kategoriebeschreibung anzeigen

 wenn (Kategoriebeschreibung()): ?>

// Die Schleife

während (have_posts()): der_post(); ?>

" rel="bookmark" title="Permanenter Link zu <?php the_title_attribute(); ?>">

von

 <?php

  comments_popup_link( 'Noch keine Kommentare', '1 Kommentar', '% Kommentare', 'comments-link', 'Kommentare geschlossen');

?>

<?php endwhile;

sonst: ?>

Es wurden leider keine Beiträge gefunden, die Ihren Kriterien entsprechen.

Seitenleiste.php

Die Seitenleiste ist der Bereich, in dem Sie Ihre Widgets in einem WP-Theme platzieren können. Meistens befindet sie sich auf allen Seiten rechts oder unterhalb Ihres Inhalts.

Seitenleisten werden verwendet, um Dinge anzuzeigen, die nicht direkt mit dem Beitrags- oder Seiteninhalt verbunden sind, sondern beispielsweise Links zu verschiedenen Bereichen Ihrer Site, Anmeldeformulare, Anzeigen, Links zu sozialen Medien usw.

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

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

Funktion wpb_widgets_init() {

    register_sidebar( Array(

        'name' => __( 'Hauptseitenleiste', 'wpb' ),

        'id' => 'Seitenleiste-1',

        'description' => __( 'Die Hauptseitenleiste wird auf jeder Seite rechts angezeigt, mit Ausnahme der Vorlage für die Startseite', 'wpb' ),

        'before_widget' => ' ',

        'after_widget' => ' ',

        'before_title' => ' ',

        'after_title' => ' ',

    ));

    register_sidebar( Array(

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

        'id' => 'Seitenleiste-2',

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

        'before_widget' => ' ',

        'after_widget' => ' ',

        'before_title' => ' ',

        'after_title' => ' ',

    ));

    }

add_action( 'widgets_init', 'wpb_widgets_init' );

Einzelne Beitragsseiten (single.php)

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

Dazu müssen Sie eine benutzerdefinierte Vorlage für einzelne Beiträge erstellen. Dies ähnelt dem Erstellen benutzerdefinierter Seiten. Wenn Sie die dort geltenden Richtlinien befolgen, können Sie auch problemlos einzelne Beiträge erstellen. 

Erstellen eines vorgestellten Bilds

Um Unterstützung für vorgestellte Bilder hinzuzufügen, fügen Sie dem Design einfach den folgenden Code hinzu functions.php Datei:

add_theme_support ( 'Post-Thumbnails'); 

Jetzt kannst du deine Seiten oder Beiträge aufrufen und prüfen, ob die Option für das vorgestellte Bild verfügbar ist. WP zeigt es wahrscheinlich nicht automatisch an. Um das Bild anzuzeigen, musst du möglicherweise deine Vorlagen, in denen Seiten und Beiträge angezeigt werden, leicht anpassen, indem du folgenden Code hinzufügst:

Paginierung 

Mit dieser Funktion können Sie Ihre Inhaltsseiten vor- und zurückblättern. Sie können diese Funktion verwenden, wenn Sie Beitragslisten mit mehr Einträgen anzeigen, als auf eine Seite passen, oder wenn Sie längere Beiträge mithilfe der 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 mit Beiträgen (beim Aufteilen von Beitragslisten) als auch gegebenenfalls zu den vorherigen Beiträgen generiert.  

posts_nav_link();

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

nächste_beiträge_link();

vorherige_Beiträge_Link();

Kommentare 

Kommentare sind ein wesentlicher Bestandteil jedes Blogs oder jeder Seite. Sie geben Website-Besuchern die Möglichkeit, mit Ihnen Kontakt aufzunehmen, Feedback zu geben, Fragen zu stellen und ganz allgemein eine tiefere Bindung zu Ihrer Website und Ihren Inhalten aufzubauen.

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

Mit der Datei comments.php können Sie das Erscheinungsbild von Kommentaren in Ihrem Design anpassen.

Andere Seiten und Dateien 

Abhängig von Ihren Anforderungen können Sie unterschiedliche Seiten und Dateien finden oder erstellen und diese anhand der oben genannten oder ähnlicher Richtlinien an Ihre Präferenzen anpassen. 

Verwenden des übergeordneten/untergeordneten Designs

Übergeordnetes Design

Übergeordnete Designs in WP sind Designs, die von anderen Designs, also untergeordneten Designs, als „übergeordnete Designs“ deklariert werden.

Ein untergeordnetes Design ermöglicht Designern und Entwicklern die Anpassung von Designs, ohne dass das übergeordnete Design aktualisiert werden kann. Denn wenn ein Entwickler die ursprünglichen Designdateien ändert, gehen die Änderungen bei einer Designaktualisierung verloren.

Übergeordnete Designs geben jedoch ihre Funktionen an ihre untergeordneten Designs weiter. Entwickler können Änderungen an den Funktionen und Merkmalen des untergeordneten Designs vornehmen, ohne die Aktualisierbarkeit des übergeordneten Designs zu beeinträchtigen.

Kinder Thema

Untergeordnete Designs übernehmen die Funktionalität der übergeordneten Designs. Sie dienen hauptsächlich dazu, ein vorhandenes Design zu ändern, ohne dass zuvor hinzugefügte benutzerdefinierte Stile bei Designaktualisierungen verloren gehen.  

Child-Themes beschleunigen den Entwicklungsprozess, da sich mit ihnen leicht Änderungen vornehmen lassen.

Die meisten Themes erstellen ein Child-Theme und stellen es zusammen mit dem Theme zur Verfügung, sodass jeder, der das Theme verwendet, es über das Child-Theme anpassen kann. Wir definieren, wie man ein Child-Theme erstellt. in unserem Artikel hier.

Verwenden von Entwicklungsframeworks

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

Entwicklungsframeworks wurden als Vorlagen für übergeordnete Themes mit vollem Funktionsumfang erstellt. Wie bei übergeordneten Themes bleiben die Frameworks grundsätzlich unberührt, während Entwickler Änderungen an untergeordneten Themes vornehmen können.

Dies beschleunigt die Entwicklung und erleichtert die Beseitigung von Fehlern in bestimmten Theme-Frameworks. Zu den wichtigsten Entwicklungsframeworks gehören: Genesis Thema Rahmen, Themify und Divi von Elegant Themes.

Zusammenfassung: So erstellen Sie ein WordPress-Theme

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

Alles in allem ist es zwar kein besonders anspruchsvoller Prozess, aber Sie benötigen gute Kenntnisse in WordPress und PHP. Kenntnisse der Webentwicklungsgrundlagen sind wichtig, und Sie können den WordPress-Kern im Laufe der Entwicklung immer detaillierter verstehen. Wenn Sie sich der Aufgabe noch nicht gewachsen fühlen, ist das in Ordnung. Nehmen Sie sich Zeit und experimentieren Sie ein wenig.

Sobald Sie ein paar Fehler gemacht haben, lernen Sie immer mehr dazu. Es ist auch gut, einen Blick auf die Codebasis anderer beliebter Themes zu werfen, um zu verstehen, was sie tun und eine gute Vorstellung von sinnvollen Vorgehensweisen zu bekommen.

Wenn Sie Fragen haben, lassen Sie es uns in den Kommentaren unten wissen.