WordPress ist ein sehr beliebtes Content Management System (CMS) für die Erstellung von Blogs, E-Commerce-Shops und anderen Websites. Es zeichnet sich durch seine Flexibilität aus und unterstützt Tausende von kostenlosen und kostenpflichtigen Themes für verschiedene Plattformen, was den Prozess der Website-Erstellung beschleunigt.
Die wahre Stärke von WordPress liegt jedoch in seinen Anpassungsmöglichkeiten, denn du kannst das Aussehen deiner Website mit verschiedenen Page Buildern und Block-Themes nach deinem Geschmack gestalten. Aber was ist, wenn diese Optionen immer noch nicht deinen speziellen Bedürfnissen entsprechen? Die gute Nachricht ist, dass du dein Theme von Grund auf neu entwickeln kannst.
Dieser Leitfaden beschreibt die Erstellung eines klassischen WordPress-Themes. Du lernst Schritt für Schritt, wie du ein Theme erstellst und erhältst so die Grundlage, um in Zukunft fortgeschrittenere Themes zu erstellen.
Voraussetzungen
Die Entwicklung deines Themes von Grund auf ist ein technischer Prozess, der das Schreiben von Code beinhaltet. Du solltest mit den folgenden Dingen vertraut sein:
- PHP – Unverzichtbar für das Hinzufügen von Funktionen und dynamischen Inhalten zu deinem Theme. Es ist das Rückgrat von WordPress.
- HTML – Wird verwendet, um die Struktur der Vorlagen deines Themes zu erstellen.
- CSS – Wird verwendet, um dein Theme zu gestalten und sicherzustellen, dass es auf verschiedenen Geräten und Browsern gut aussieht.
Außerdem ist es wichtig, eine Entwicklungsumgebung einzurichten. Diese kannst du mit DevKinsta, einer lokalen Entwicklungssuite für WordPress-Websites, erstellen, indem du diese Schritte befolgst:
- Besuche die DevKinsta-Website, um die Anwendung für dein Betriebssystem herunterzuladen.
- Befolge die Installationsanweisungen für dein Betriebssystem.
- Öffne DevKinsta und klicke auf Neue WordPress-Website.
- Wähle dann die Option Neue WordPress-Website und fülle die Felder Website-Name, WordPress-Admin-Benutzername und WordPress-Admin-Passwort aus.
- Klicke abschließend auf Website erstellen und warte 30-60 Sekunden, bis die Website erstellt ist.
Sobald deine Website erstellt ist, kannst du sie in der Vorschau ansehen, auf dein WP-Dashboard zugreifen und sogar den Dateipfad zur lokalen WP-Installation auf deinem Computer sehen, sodass du Zugriff auf den gesamten Code hast.
Verstehen der WordPress-Theme-Struktur
Bevor du Schritt für Schritt in die Erstellung deines klassischen Themes einsteigst, ist es wichtig, die Struktur eines klassischen WordPress-Themes und die wichtigsten beteiligten Dateien zu verstehen. Dieses Wissen bildet eine solide Grundlage für die Entwicklung deines Themes.
Das WordPress-Theme-Verzeichnis
Alle WordPress-Themes werden im Verzeichnis wp-content/themes directory deiner WordPress-Installation gespeichert. Jedes Theme befindet sich in einem eigenen Ordner innerhalb dieses Verzeichnisses.
Die wichtigsten Dateien in einem WordPress-Theme
Es gibt zwei wichtige Dateien, die jedes klassische WordPress-Theme enthalten muss:
index.php– Dies ist die Hauptvorlagendatei, die als Fallback für alle anderen Vorlagendateien dient. Sie ist die Kerndatei, die WordPress verwendet, um Inhalte anzuzeigen.style.css– Diese Datei enthält die Metadaten des Themes und benutzerdefinierte CSS-Stile. Sie ist wichtig, um das Erscheinungsbild des Themes zu definieren und wichtige Informationen wie Name, Autor und Version bereitzustellen.
Um dein Theme gut zu strukturieren und weitere Funktionen hinzuzufügen, kannst du zusätzliche Vorlagendateien verwenden, wie z. B. die folgenden, die für klassische Themes üblich sind und in dem in diesem Leitfaden erstellten Beispiel-Theme verwendet werden:
header.php: Diese Datei kann den Kopfbereich deines Themes enthalten, einschließlich des Logos und des Navigationsmenüs der Seite.footer.php: Diese Datei sollte den Fußzeilenbereich deines Themes enthalten.functions.php: In dieser Datei kannst du benutzerdefinierte Funktionen, Features und Theme-Support-Optionen hinzufügen.single.php: Diese Vorlagendatei wird verwendet, um einzelne Blogbeiträge anzuzeigen.page.php: Die Vorlagendatei für die Anzeige statischer Seiten.
Jetzt, wo du die wichtigsten Dateien und ihre Funktionen kennst, gehen wir Schritt für Schritt vor, um dein klassisches WordPress-Theme zu erstellen.
Wie man ein klassisches WordPress-Theme erstellt
Ein bekanntes Sprichwort besagt, dass man am besten lernt, indem man etwas tut. Wenden wir dieses Prinzip an, indem wir ein klassisches Blog-Theme erstellen, das deine WordPress-Beiträge auf der Startseite mit benutzerdefiniertem CSS-Styling und zusätzlichen Funktionen anzeigt.
Schritt 1: Erstelle einen neuen Theme-Ordner
Erstelle einen Ordner im Verzeichnis themes, z. B. myblogtheme.
Schritt 2: Hinzufügen von Theme-Metadaten-Informationen
Als Nächstes richten wir die Themendetails in der Datei style.css ein. Hier ist ein Beispiel für einige Metadaten, die du in style.css einfügen kannst:
/*
Theme Name: Kinsta Blog Theme
Author: Joel Olawanle
Author URI: https://kinsta.com/blog/author/joelolawanle/
Description: A thoughtfully designed WordPress theme crafted specifically to illustrate the theme creation process. This theme provides a clean, responsive layout suitable for showcasing articles and tutorials, making it an ideal choice for blog posts and educational content related to web development and design.
Version: 1.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/Im obigen Code:
- Theme-Name: Der Name deines Themes, der im WordPress-Adminbereich unter Darstellung > Themes angezeigt wird.
- Autor: Zeigt den Namen des Erstellers des Themes an.
- Autoren-URI: Verweist auf die Website oder das Profil des Autors.
- Beschreibung: Bietet einen Überblick über den Zweck und die Funktionen des Themes.
- Version: Zeigt die aktuelle Version des Themas für Updates an.
- Lizenz: Gibt die Vertriebsbedingungen an.
- Lizenz-URI: Verweist auf den vollständigen Text der Lizenz.
Mehr über diese Felder erfährst du im WordPress Theme-Handbuch.
Nachdem du diese Informationen in deine style.css Datei eingefügt hast, navigiere in deinem WordPress-Adminbereich zu Erscheinungsbild > Themes. Dort wird das neu erstellte Theme aufgelistet. Wenn du auf die Theme-Details klickst, wirst du feststellen, dass alle Informationen, die du hinzugefügt hast, dort erscheinen.
Nachdem wir nun die Datei style.css erstellt haben, können wir uns an die Erstellung der anderen wichtigen Themedateien machen.
Schritt 3: Erstelle die Hauptvorlagendatei für dein Theme
Die Datei index.php dient als Hauptvorlagendatei für dein Thema. Jeder Code, den du hier hinzufügst, wird verwendet, um den Hauptinhalt deiner Seite anzuzeigen.
Wenn du hier zum Beispiel einfachen HTML-Code hinzufügst, wird alles angezeigt, wenn du das Theme aktivierst und eine Vorschau anschaust. Wenn du jedoch Informationen aus deinem WordPress CMS abrufen willst, um sie in der Vorlagendatei deines Themes anzuzeigen, verwendest du hier PHP, um WordPress-Funktionen hinzuzufügen.
Hier siehst du, wie die Grundstruktur der index.php Datei aussehen kann:
<?php get_header(); ?>
<main>
</main>
<?php get_footer(); ?>In der obigen Struktur werden get_header() und get_footer() verwendet, um die Kopf- und Fußzeilen aus ihren jeweiligen Vorlagendateien (header.php und footer.php) zu beziehen.
Wir werden die Datei index.php mit dem richtigen Code füllen, aber lass uns zuerst an den Kopf- und Fußzeilen des Themes arbeiten.
Schritt 4: Die Header-Datei erstellen
Die Datei header.php zeigt den Kopfbereich deiner Website an, der normalerweise Elemente wie das Website-Logo und das Navigationsmenü enthält. Sie enthält auch Stylesheets, Skripte und Metatags. So sieht unsere header.php Datei aus:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="<?php bloginfo('charset'); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header class="header-container">
<div class="my-logo">
<?php
if ( function_exists('the_custom_logo') && has_custom_logo() ) {
the_custom_logo();
} else {
// Fallback image
?>
<a href="<?php echo home_url('/'); ?>">
<img src="<?php echo get_template_directory_uri(); ?>/images/dummy-logo.png" alt="<?php bloginfo('name'); ?>" class="custom-logo" width="100px">
</a>
<?php
}
?>
</div>
<nav>
<?php wp_nav_menu(array(
'theme_location' => 'header-menu',
'menu_class' => 'header-menu'
)); ?>
</nav>
</header>Wir werden jeden Teil dieser Datei aufschlüsseln und erklären und die entsprechenden Funktionen und Hooks zu functions.php hinzufügen.
Beginnen wir mit dem Abschnitt <head>. Dieser Abschnitt enthält wichtige Metadaten, den Titel der Seite, die Zeichenkodierung und die Funktion wp_head():
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="<?php bloginfo('charset'); ?>">
<?php wp_head(); ?>
</head>Mit der Funktion language_attributes(); werden die Sprachattribute für das HTML-Dokument festgelegt. Dann ist die Funktion wp_head(); wichtig, denn sie ermöglicht es WordPress und Plugins, wichtige Elemente wie Stylesheets und Skripte in den Abschnitt <head> einzufügen.
Füge das Stylesheet ein, indem du folgendes zu functions.php hinzufügst:
function my_custom_theme_enqueue_styles() {
// Enqueue the main stylesheet
wp_enqueue_style('my-custom-theme-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'my_custom_theme_enqueue_styles');Die Funktion wp_enqueue_style() fügt das Haupt-Stylesheet in den Head-Bereich ein. Wir stellen der Funktion das Präfix my_custom_theme voran, um Konflikte mit anderen Themes oder Plugins zu vermeiden. Du kannst das Stylesheet auch direkt in den head-Tag mit dem <link> -Tag einfügen.
In ähnlicher Weise können wir eine Funktion deklarieren, die den Titel der Website in den Head-Bereich einfügt:
function my_custom_theme_wp_title() {
add_theme_support('title-tag');
}
add_action('after_setup_theme', 'my_custom_theme_wp_title');Dank der Funktion wp_head() werden der Stil und der Titel-Tag dynamisch zum Header hinzugefügt. Du kannst das überprüfen, indem du deine WordPress-Website mit den Entwicklertools deines Browsers ansiehst. Im Abschnitt <head> solltest du den Stylesheet-Link und das dynamisch erzeugte Titel-Tag sehen und damit bestätigen, dass sie enthalten sind.
Als Nächstes haben wir im Body den Abschnitt für die Navigationsleiste angegeben, in dem wir ein Dummy-Logo anzeigen und eine Option für die Verwendung eines benutzerdefinierten Logos in der WordPress-Site-Identität einrichten:
<body>
<header class="header-container">
<div class="my-logo">
<?php
if ( function_exists('the_custom_logo') && has_custom_logo() ) {
the_custom_logo();
} else {
// Fallback image
?>
<a href="<?php echo home_url('/'); ?>">
<img src="<?php echo get_template_directory_uri(); ?>/images/dummy-logo.png" alt="<?php bloginfo('name'); ?>" class="custom-logo" width="100px">
</a>
<?php
}
?>
</div>Der Logo-Abschnitt verwendet die Funktion the_custom_logo(), um ein benutzerdefiniertes Logo anzuzeigen, wenn eines eingestellt ist. Wenn kein benutzerdefiniertes Logo eingestellt ist, wird ein Standardbild angezeigt.
Um die Unterstützung für benutzerdefinierte Logos zu aktivieren, füge den folgenden Code zu functions.php hinzu:
function my_custom_theme_setup() {
add_theme_support('custom-logo', array(
'height' => 100,
'width' => 400,
'flex-height' => true,
'flex-width' => true,
));
}
add_action('after_setup_theme', 'my_custom_theme_setup');Diese Funktion fügt die Unterstützung für ein benutzerdefiniertes Logo hinzu. Zum Schluss noch der Abschnitt zum Navigationsmenü:
<nav>
<?php wp_nav_menu(array(
'theme_location' => 'header-menu',
'menu_class' => 'header-menu'
)); ?>
</nav>
</header>Die Funktion wp_nav_menu() zeigt das Navigationsmenü an, das der Position „Header Menu“ zugewiesen ist. Um das Navigationsmenü zu registrieren, stelle sicher, dass du diesen Code in functions.php hast:
register_nav_menus(array(
'header-menu' => __('Header Menu', 'my-custom-theme'),
));So sieht deine function.php Datei jetzt aus:
100,
'width' => 400,
'flex-height' => true,
'flex-width' => true,
));
}
add_action('after_setup_theme', 'my_custom_theme_setup');
function my_custom_theme_enqueue_styles() {
// Enqueue the main stylesheet
wp_enqueue_style('my-custom-theme-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'my_custom_theme_enqueue_styles');
// Function to add the site title to the head section
function my_custom_theme_wp_title() {
add_theme_support('title-tag');
}
add_action('after_setup_theme', 'my_custom_theme_wp_title');
?>Wenn du diese Schritte befolgst, stellst du sicher, dass dein Header ein benutzerdefiniertes Logo unterstützt und ein Navigationsmenü anzeigt, sodass er dynamisch und leicht über das WordPress-Admin-Dashboard anpassbar ist.
Schritt 5: Erstelle die Footer-Datei
Die Datei footer.php ist für die Anzeige des Footer-Bereichs deiner Website verantwortlich. Bei diesem Theme wird in der Datei footer.php nur das Copyright-Jahr angezeigt:
<footer>
<p>Copyright © 2024</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>In diese Datei fügen wir die Funktion wp_footer() ein, ähnlich wie wir wp_head() in den Header eingefügt haben. Die Funktion wp_footer() ermöglicht es WordPress und Plugins, wichtige Elemente, wie z. B. Skripte, kurz vor dem schließenden </body> Tag einzufügen. Dies ist wichtig, um sicherzustellen, dass alle notwendigen Ressourcen korrekt geladen werden und deine Seite wie erwartet funktioniert.
Schritt 6: Anzeige von Blogbeiträgen mit der WordPress-Schleife
Kehren wir zur Datei index.php zurück, um zu erklären, wie du mit der WordPress-Schleife – einer leistungsstarken Methode zur dynamischen Anzeige von Inhalten – die Beiträge deiner WordPress-Seite in einer Schleife anzeigen kannst. So sieht die Schleife aus:
<div class="my-posts">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<article class="article-loop">
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail(); ?>
<?php endif; ?>
<h2><?php the_title(); ?></h2>
<div class="flex-info">
<p>By: <?php the_author(); ?></p>
<p><?php the_time('F j, Y'); ?></p>
</div>
<?php the_excerpt(); ?>
</article>
</a>
<?php endwhile; else : ?>
<article>
<p>Sorry, no posts were found!</p>
</article>
<?php endif; ?>
</div>Der obige Code prüft, ob es Beiträge gibt, die angezeigt werden sollen, bevor die Schleife beginnt. In der Schleife zeigen WordPress-Funktionen wie the_title(), the_author(), the_time('F j, Y') und the_excerpt() Informationen über jeden WordPress-Beitrag an.
Die Funktion the_post_thumbnail() wird auch verwendet, um das Vorschaubild anzuzeigen, aber sie ist in eine if-Anweisung verpackt, so dass sie nur angezeigt wird, wenn es ein Featured Image für deinen Beitrag gibt. In der Datei functions.php müssen wir mit dieser Funktion Unterstützung für Post-Thumbnails hinzufügen, damit es eine Option zum Hochladen von Vorschaubildern gibt, wenn du neue Posts erstellst:
add_theme_support('post-thumbnails');Füge dies zu der Funktion my_custom_theme_setup() hinzu, die wir in der Datei functions.php erstellt haben. So sieht die Datei index.php jetzt aus:
<?php get_header(); ?>
<main>
<div class="hero">
<h1>Welcome to my blog!</h1>
<p>Here, you'll find posts on a variety of topics, including programming, web development, and more.</p>
</div>
<div class="my-posts">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<article class="article-loop">
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail(); ?>
<?php endif; ?>
<h2><?php the_title(); ?></h2>
<div class="flex-info">
<p>By: <?php the_author(); ?></p>
<p><?php the_time('F j, Y'); ?></p>
</div>
<?php the_excerpt(); ?>
</article>
</a>
<?php endwhile; else : ?>
<article>
<p>Sorry, no posts were found!</p>
</article>
<?php endif; ?>
</div>
</main>
<?php get_footer(); ?>Du wirst feststellen, dass ein statischer Code hinzugefügt wurde, der als Banner mit der Aufschrift „Willkommen in meinem Blog“ und einem Textabsatz gestaltet wird.
Schritt 7: Eine Vorlage für einen einzelnen Beitrag erstellen
Bevor wir unser Theme gestalten, müssen wir eine grundlegende Vorlage definieren, die einzelne Blogbeiträge anzeigt, wenn sie von einer beliebigen Seite oder einem Beitrag in deinem Theme angeklickt werden. Dazu erstellst du eine single.php Datei im Stammverzeichnis deines Themes und fügst den folgenden Code ein:
<?php get_header(); ?>
<main>
<section class="single__post">
<article class="article-full">
<div class="single__post-header">
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail(); ?>
<?php endif; ?>
<h2><?php the_title(); ?></h2>
<p>By: <?php the_author(); ?> on <?php the_time('F j, Y'); ?></p>
</div>
<?php the_content(); ?>
</article>
</section>
</main>
<?php get_footer(); ?>Im obigen Code enthalten get_header() und get_footer() die Kopf- und Fußzeile. In den anderen Teilen des Codes zeigen WordPress-Funktionen dynamische Inhalte an.
Schritt 8: Erstelle eine Vorlagendatei für WordPress-Seiten
So wie du eine Vorlage für einzelne WordPress-Beiträge erstellt hast, kannst du auch eine Vorlage für die Anzeige deiner WordPress-Websites erstellen. Dazu erstellst du eine page.php Datei im Stammverzeichnis deines Themeordners und fügst den folgenden Code ein:
<?php get_header(); ?>
<main class="wrap">
<section class="">
<article class="article-full">
<div class="page-header">
<h1><?php the_title(); ?></h1>
</div>
<?php the_content(); ?>
</article>
</section>
</main>
<?php get_footer(); ?>Schritt 9: Styling deines Themes
Bis jetzt haben wir einige grundlegende Vorlagen für unser Theme erstellt. Jetzt ist es an der Zeit, ein eigenes Styling hinzuzufügen, damit es gut aussieht. Du kannst deine Stile in der Datei style.css in deinem Theme-Ordner hinzufügen. Für den Anfang kopierst du das Styling aus diesem GitHub-Gist für das in dieser Anleitung erstellte Theme-Beispiel.
Schritt 10: Teste und setze dein Theme ein
Bis jetzt hast du erfolgreich ein WordPress-Theme erstellt. Jetzt ist es an der Zeit, es zu testen und bereitzustellen.
Vergewissere dich zunächst, dass dein Theme aktiviert ist, indem du im WordPress-Admin-Dashboard Erscheinungsbild > Themes auswählst. Wenn du das noch nicht getan hast, klicke auf dein Theme und aktiviere es. Du kannst auch auf die Schaltfläche Anpassen klicken, um die Website-Identität festzulegen, das Menü anzupassen und andere Einstellungen zu ändern, damit deine Website richtig angezeigt wird.
Wenn du mit deinem Theme zufrieden bist, hast du mehrere Möglichkeiten, es einzusetzen:
- Du kannst deine lokale Website online stellen: Wenn du lokal mit DevKinsta entwickelst, kannst du deine Seite ganz einfach in eine Staging-Umgebung verschieben. So kannst du dein Theme in einer live-ähnlichen Umgebung testen, bevor du es in die Live-Umgebung verschiebst. Eine ausführliche Anleitung dazu findest du in unserer DevKinsta-Dokumentation.
- Paketiere dein Theme und lade es hoch: Alternativ kannst du dein Theme auch in einen gezippten Ordner packen und auf eine Online-Website hochladen. Gehe im WordPress-Admin-Dashboard auf Darstellung > Themes > Neu hinzufügen > Theme hochladen und wähle deine gezippte Theme-Datei zum Hochladen aus.
Teste dein Theme gründlich in einer Staging-Umgebung, um sicherzustellen, dass alles wie erwartet funktioniert, bevor du es online stellst. Dieser Schritt ist wichtig, um mögliche Probleme zu erkennen und sicherzustellen, dass deine Website perfekt aussieht und funktioniert.
Zusammenfassung
In diesem Artikel haben wir ein klassisches WordPress-Theme von Grund auf erstellt. Wir haben uns mit dem Einrichten wichtiger Dateien, dem Hinzufügen benutzerdefinierter Designs und dem Erstellen von Vorlagen für einzelne Beiträge und Seiten beschäftigt.
Wenn du möchtest, dass deine Website genau die Funktionen und das Aussehen hat, die du dir wünschst, ist die Entwicklung deines WordPress-Themes der richtige Weg. Wenn du jedoch nicht die Zeit, die Fähigkeiten oder die Lust dazu hast, kannst du einen Profi beauftragen, der dir hilft, deine Vorstellungen effizient umzusetzen.
Wenn du endlich eine Website hast, die deinem Geschmack entspricht, brauchst du ein stabiles Hosting, um Probleme wie Ausfallzeiten, DDoS-Angriffe und mehr zu vermeiden. Hier können Premium-Hosting-Anbieter wie Kinsta glänzen.
Kinsta bietet leistungsstarkes Managed WordPress Hosting mit einer vollständig containerisierten Architektur, die ausschließlich von der Google Cloud Platform im Google Premium Tier Netzwerk betrieben wird.
Kontaktiere uns, um mehr über unsere erstklassige Managed-Hosting-Lösung zu erfahren.
Joel ist Frontend-Entwickler und arbeitet bei Kinsta als Technical Editor. Er ist ein leidenschaftlicher Lehrer mit einer Vorliebe für Open Source und hat über 200 technische Artikel geschrieben, die sich hauptsächlich um JavaScript und seine Frameworks drehen.
Schreibe einen Kommentar