Vor einigen Jahren führte WordPress den Gutenberg-Editor und die Entwicklung von Block-basierten Themes ein, was einen revolutionären Ansatz für den Aufbau von WordPress-Websites einführte. Im Gegensatz zur traditionellen klassischen Theme-Entwicklung nutzen Block-basierte Themes die Leistungsfähigkeit des Gutenberg-Editors, der eine intuitive und flexible Methode bietet, Inhaltslayouts mithilfe individueller Blöcke zu gestalten. Mit der Freiheit, verschiedene Blöcke zu kombinieren, können selbst WordPress-Neulinge mühelos individuelle Designs für jede Seite erstellen. Wir glauben, dass dies die Zukunft der WordPress-Entwicklung ist, und bei Media Pons sind wir uns bewusst, dass wir trotz der intensiven Verfolgung der Block-basierten Theme-Entwicklung auch wissen, dass klassische WordPress-Themes noch eine Weile bleiben werden.
In diesem Beitrag werden wir uns die Grundlagen der klassischen WordPress-Theme-Entwicklung ansehen. Erfahrene Theme-Entwickler wissen, dass ein WordPress-Theme von Grund auf zu erstellen viel Arbeit bedeutet, aber es ist auch erfreulich zu sehen, wie ein Produkt in den eigenen Händen wächst.
Lassen Sie uns jetzt an die Arbeit gehen und einige der wichtigsten Dateien auflisten, die beim Entwickeln eines WordPress-Themas von Grund auf wichtig sind. Zunächst erstellen Sie im wp-content Verzeichnis Ihrer WordPress-Installation ein neues Verzeichnis und benennen es nach Belieben. Wir nennen es mediapons. Dann beginnen Sie damit, die unten aufgeführten Dateien in diesem Verzeichnis zu erstellen. Es ist wichtig zu verstehen, welche Dateien für die Struktur und Funktionalität des Themes am wichtigsten sind.
- style.css: Dies ist das Hauptstylesheet für Ihr Theme, in dem Sie den Namen des Themes, die Beschreibung und andere themenbezogene Informationen festlegen. Es ist entscheidend, damit WordPress Ihr Theme erkennen kann. (erforderlich)
- index.php: Diese Datei dient als Hauptvorlage für die Startseite Ihres Themes. Es ist die Standardvorlage, die Ihre Blogbeiträge und anderen Inhalt auf der Vorderseite anzeigt. (erforderlich)
- screenshot.png: Obwohl diese Datei nicht direkt mit der Funktionalität oder Struktur des WordPress-Themes zusammenhängt, dient sie als Darstellung oder Miniaturbild für Ihr Theme im WordPress-Administrationsdashboard. Das Wichtigste ist die Größe (Abmessungen) dieser Bild-Datei. Die empfohlene Bildgröße beträgt 1200 Pixel Breite x 900 Pixel Höhe. Obwohl andere Bildformate wie jpg, jpeg und gif erlaubt sind, werden sie vom Wordpress Codex nicht empfohlen. (optional)
Wie bereits erwähnt, streben wir danach, grundlegende Informationen zur individuellen Theme-Entwicklung zu bieten und Ihnen dabei zu helfen, Ihr WordPress-Theme von Grund auf zu erstellen. Lassen Sie uns Beispiele für jede zuvor erwähnte Datei geben.
style.css
/*
Theme Name: Media Pons Beispieltheme
Theme URI: https://mediapons.de
Author: Media Pons
Author URI: https://mediapons.de
Description: Beispieltheme zur Vermittlung grundlegender WordPress-Theme-Entwicklung
Version: 1.0
Requires at least: 5.8
Tested up to: 6.2
Requires PHP: 7.4
Text domain: mediapons
Domain Path: /languages
*/Sie sehen eine Beispiel style.css Datei oben. Wie wir zuvor gesagt haben, ist diese Datei dafür verantwortlich, Informationen für die WordPress-Plattform bereitzustellen, damit das Theme erkannt wird, und diese Informationen werden als CSS-Kommentare bereitgestellt. Abgesehen von Text Domain und Domain Path ist es leicht verständlich, welche Informationen die oben genannte Stylesheet bereitstellt. Text Domain und Domain Path sind nützlich, wenn Sie das Theme gemäß den Anforderungen von WordPress übersetzbar machen möchten.
Lassen Sie uns den Fokus ändern und sich ein Beispiel für eine index.php Vorlagendatei ansehen.
index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="<?php bloginfo('charset') ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index</title>
</head>
<body>
<div id="primary">
<h1><?php bloginfo('name') ?></h1>
<h2><?php bloginfo('description') ?></h2>
<p>Diese Datei ist die Hauptvorlage für diese Website. Wenn es keine andere Vorlage gibt, wird diese Datei gerendert.</p>
</div>
</body>
</html>Für diejenigen von Ihnen, die erfahren in der Theme-Entwicklung sind, ist dieser index.php Datei wahrscheinlich nicht vollständig genug. Dieser Beitrag soll ein Ausgangspunkt für die Theme-Entwicklung sein, daher wollte ich Sie vorerst nicht mit mehr Code belasten. Wie Sie sehen, habe ich nur die bloginfo Wordpress Funktion hier und da verwendet, um einige Informationen über die Website auszugeben. Wenn Sie nicht erraten können, welche Informationen die bloginfo Funktion ausgibt, können Sie die Wordpress-Seite dieser Funktion für weitere Details überprüfen. Wenn Sie ein guter Theme-Entwickler sein möchten, sollten Sie sich daran gewöhnen, Informationen in der WordPress-Dokumentation zu finden.
Abschließend können Sie neben der WordPress-Dokumentation auch unsere Blog-Seite von Zeit zu Zeit besuchen, um Informationen zu verschiedenen Bereichen von WordPress und Webentwicklung zu erhalten. Wenn Sie kein Webentwickler sind, können Sie uns gerne über unsere Kontaktseite kontaktieren und über Ihr nächstes Projekt sprechen.
