So erstellen Sie ein benutzerdefiniertes WordPress-Theme

Veröffentlicht: 2021-08-06

WordPress nimmt einen großen Prozentsatz der Websites der Welt ein und macht 37 % aller Websites aus , die derzeit online sind. Obwohl es viele Gründe und Faktoren für diesen Erfolg gibt, ist einer der Hauptgründe die Popularität der Funktionen, die allen Benutzern zur Verfügung stehen. Plugins, Themen, Beiträge, Seiten, Kategorien, Taxonomien, Benutzerrollen und Medienhandhabung, um nur einige zu nennen. Um das Beste aus WordPress herauszuholen, wird Benutzern empfohlen, all diese Funktionen zu studieren und zu lernen, wie man sie nutzt. In diesem Blog werden wir uns auf WordPress-Designs konzentrieren und diese diskutieren und Sie durch die Grundlagen führen, die zum Erstellen eines benutzerdefinierten WordPress-Designs erforderlich sind.

Was ist ein benutzerdefiniertes Design?

Alles auf dem Frontend Ihrer Website wird über ein sogenanntes „Theme“ ausgeführt und gesteuert. Das Thema einer Website ist für das spezifische Design und die Funktionalität der Website verantwortlich. Sie können sich das WordPress-Design-Repository oder Themeforest für Designbeispiele ansehen; Hier finden Sie Tausende von Themen aufgelistet, die Sie erkunden und herunterladen können.

Während etablierte WordPress-Themen großartig sind, möchten Sie, wenn Sie die Fähigkeit und Notwendigkeit haben, vielleicht auch Ihr eigenes benutzerdefiniertes Thema für einen Kunden oder für sich selbst erstellen oder es mit der Absicht, es zu verkaufen, auf den Marktplätzen einreichen. Wenn Sie ein kommerzielles Design erstellen, müssen Sie die Marketplace-Richtlinien für Codierungsstandards, die Struktur von Dateien und Ordnern usw. befolgen. Weitere Einzelheiten zu diesen Richtlinien finden Sie auf den Marketplace-Websites .

In diesem Blog führen wir ein Tutorial durch, um Ihnen einen grundlegenden Überblick darüber zu geben, wie Sie Ihr eigenes WordPress-Theme erstellen können, indem wir alle Grundlagen und Schritte im Zusammenhang mit dem Prozess behandeln.

Erstellen Sie ein benutzerdefiniertes WordPress-Theme

WordPress-Designs werden mit Vorlagendateien, Skripten, Stilen, Bildern usw. erstellt. Um fortzufahren, sollten Sie über Grundkenntnisse in PHP, HTML und CSS verfügen, die zum Erstellen eines benutzerdefinierten Designs erforderlich sind. Das Verständnis von JavaScript kann auch ein zusätzlicher Vorteil sein.

Zu Beginn nennen wir das Thema zunächst „Updraft“. Erstellen Sie einen Ordner mit dem Namen „Updraft“ in wp-content/themes . In diesem „Updraft“-Ordner schreiben Sie Ihren themenbezogenen Code, speichern Dateien, Bilder, Schriftarten usw.

Die Hauptdateien des benutzerdefinierten WordPress-Themes sind:

  • style.css
  • index.php
  • Funktionen.php

Die style.css wird die Haupt-Stylesheet-Datei sein und Sie können Ihr gesamtes CSS in dieser Datei hinzufügen. Denken Sie daran, dass Sie einen Informationsheader zum Thema einfügen müssen. Der Header sollte ähnlich wie das folgende Format aussehen und sich oben in style.css befinden .

 [Code]
/*
Designname: Aufwind
Design-URI: https://updraftplus.com
Autor: UpdraftPlus
Autoren-URI: https://updraftplus.com
Beschreibung: Das benutzerdefinierte Design, das für die Website erstellt wurde.
Version: 1.0
Lizenz: GNU General Public License v2 oder höher
Lizenz-URI: http://www.gnu.org/licenses/gpl-2.0.html
Textdomäne: Aufwind
*/
[/Code]

Als nächstes gehen Sie zu Aussehen >> Themen, wo Sie Ihr Thema aufgelistet sehen. Aktivieren Sie es. Wenn Sie das Frontend Ihrer Website überprüfen, wird ein leerer Bildschirm angezeigt, da wir dem Design noch nichts hinzugefügt haben.

Denken Sie daran, Ihre Bilder, Skripte und Stile in Ihrem Themenverzeichnis zu speichern. Das Theme-Verzeichnis bezieht sich auf den Ordner ‚wp-content/themes/Updraft‘. Achten Sie darauf, sie zu organisieren, indem Sie eine gute Ordnerstruktur verwenden und spezielle Ordner für Bilder, Skripte und Stile erstellen; Kopieren Sie die Dateien in das entsprechende Verzeichnis.

Funktionsdatei

Die functions.php ist die Datei, in der Sie Code für verschiedene Zwecke hinzufügen können. Diese Datei wird während der WordPress-Initialisierung automatisch geladen, wobei der darin geschriebene Code automatisch ausgeführt wird.

Die folgenden Operationen in der Datei functions.php werden normalerweise in dieser Reihenfolge ausgeführt:

  • Design-Stylesheets und Skripte in die Warteschlange stellen (JS- und CSS-Dateien zur Website hinzufügen).
  • Aktivieren Sie Seitenleisten, Navigationsmenüs, Post-Thumbnails usw.
  • Definieren Sie Funktionen, die in der gesamten Anwendung verwendet werden.
  • Usw.

Der Benutzer kann seine Stile und Skripte wie folgt aus der Datei functions.php hinzufügen. Unter dem folgenden Link finden Sie weitere Dokumentation .

 [Code]
Funktion include_js_css() {
wp_register_style( "bootstrap", get_stylesheet_directory_uri() .
"/styles/bootstrap.min.css", array(), false, "all" );
wp_enqueue_style( "bootstrap" );
wp_register_script('bootstrap', get_stylesheet_directory_uri() .
'/scripts/bootstrap.min.js', array(), false, true);
wp_enqueue_script('bootstrap');
}
add_action('wp_enqueue_scripts', 'include_js_css');
[/Code]

Die Funktion get_stylesheet_directory_uri() liefert einen relativen Pfad des aktiven Designverzeichnisses. Der Rest des Codes kann als Pfad der Assets angesehen werden.

Ähnlich zum Hinzufügen von Navigationsmenüs, Post-Miniaturansichten:

 [Code]
Funktion updraft_theme_setup() {
add_theme_support( 'post-thumbnails' );
register_nav_menus(
Reihe (
'primary' => __( 'Primary Menu' ),
'footer1=' => __( 'Fußzeilenmenü' ),
'shop' => __( 'Menü der Shop-Seite' ),
)
);
}
add_action( 'after_setup_theme', 'updraft_theme_setup' );
[/Code]

Gehen Sie als Nächstes zum WordPress-Dashboard und fügen Sie einen Beitrag oder eine Seite hinzu. Sie sollten den Abschnitt „Empfohlenes Bild“ sehen. Außerdem finden Sie unter Aussehen >> Menüs das Hauptmenü und das Fußzeilenmenü unter Standorte verwalten .

Dies sind nur einige der grundlegenden Funktionen, die Sie bei der Verwendung der 'Function'-Datei abdecken können. Sie können dieser Datei noch viel mehr hinzufügen, wenn Sie dies wünschen.

Vorlagendateien

Beim Erstellen Ihres Designs können Vorlagendateien verwendet werden, um das Layout und Design verschiedener Teile Ihrer Website zu beeinflussen. Beispielsweise würden Sie die Vorlage header.php verwenden, um einen Header zu erstellen, oder die Vorlage comments.php, um Kommentare auf Ihrer Website einzufügen. Vorlagendateien haben die Erweiterung .php . Da es sich um PHP-Dateien handelt, werden alle Seiten als HTML ausgegeben.

Mithilfe von Vorlagen können Entwickler Code auf mehrere Dateien verteilen. Nachfolgend sind einige der betreffenden Dateien aufgeführt.

  • index.php : Die Hauptvorlage. Diese Datei sollte für die Post-Auflistung verantwortlich sein. Wenn Sie die Seite „Beiträge“ über „ Einstellungen“ >> „Lesungen “ festlegen , wird diese Vorlage ausgeführt.
  • page.php : Diese Vorlage ist für das Rendern Ihrer Seiten verantwortlich. Diese Einstellung kann außer Kraft gesetzt werden, indem einzelnen Seiten eine benutzerdefinierte Seitenvorlage zugewiesen wird.
  • single.php : Wird verwendet, wenn ein einzelner Beitrag abgefragt wird.
  • header.php : Fügen Sie Ihren Header-Teil in diese Vorlage ein.
  • footer.php : Fügen Sie Ihren Fußzeilenteil in diese Vorlage ein.
  • sidebar.php : Widgets in dieser Vorlage hinzufügen.

Hier erhalten Sie eine Liste aller verfügbaren Vorlagendateien .

Benutzerdefinierte Seitenvorlagen

Standardmäßig werden alle Ihre Seiten über die Vorlage page.php gerendert . In der Praxis müssen Sie jedoch manchmal separate Flows auf verschiedenen Seiten anzeigen. In diesem Szenario wird empfohlen, die Leistungsfähigkeit benutzerdefinierter Seitenvorlagen zu nutzen.

Wenn Sie beispielsweise eine Karriereseite haben und Ihren Code zu dieser Seite hinzufügen möchten; Um dies zu erreichen, müssten Sie eine karriere.php -Datei im Themenverzeichnis erstellen und den Kommentar unten am Anfang der Datei platzieren.

 [Code]
<?php
/*
Vorlagenname: Karriere
*/
[/Code]

Gehen Sie als Nächstes zum Seitenbearbeitungsbereich und weisen Sie diese „Karriere“ -Vorlage im Feld „Seitenattribute“ zu.

Wenn Sie nun die Karriereseite besuchen, wird Code aus der career.php ausgeführt.

Header-Datei

Ihre Website hat auf allen Seiten einen gemeinsamen Header. Sie können diesen gemeinsamen Header in die header.php einfügen . Der Header-Code sieht in etwa so aus:

 [Code]
<!DOCTYPE html>
<html <?php Sprachattribute(); ?>>
<Kopf>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<!-- Ihr Menü -->
[/Code]

Im obigen Code werden Sie feststellen, dass wir einige in WordPress verfügbare Funktionen verwendet haben.

  • wp_head() : Diese Methode fügt wichtige Elemente in Ihr Dokument ein – zB Skripte, Stile und Meta-Tags.
  • body_class() : Dies fügt dem body-Element verschiedene Klassen hinzu.
  • wp_body_open() : Wird verwendet, um Code unmittelbar nach dem Öffnen des Body-Tags einzufügen. Ein Beispiel hierfür wäre das Google Analytics-Skript.

Menüs können dynamisch über die Funktion wp_nav_menu() hinzugefügt werden . Angenommen, Sie haben zuvor bereits ein Menü unter Darstellung >> Menüs erstellt und ihm den „primären“ Speicherort zugewiesen. Der folgende Code generiert die Menüelemente dynamisch.

 [Code]
<?php
wp_nav_menu(
Reihe (
'theme_location' => 'primär',
'container_class' => 'Menüs',
)
);
?>
[/Code]

Sobald Ihre Header-Datei eingerichtet ist, verwenden Sie die Funktion get_header() , um diese Datei in Ihre anderen Vorlagen einzufügen.

Fußzeilendatei

Ähnlich wie bei der Header-Datei wird Ihr allgemeiner Code für die Fußzeile in die Vorlage footer.php eingefügt .

 [Code]
<!-- Fußzeilenelemente -->
<?php wp_footer(); ?>
</body>
</html>
[/Code]

Verwenden Sie hier wp_footer() , das Elemente, insbesondere Skripte, an dieser Stelle einfügt. Die Verwendung von get_footer() fügt den Inhalt dieser Datei an anderen Stellen ein.

Sidebar-Datei

Die Seitenleiste ist eine vertikale Spalte, die verwendet wird, um Informationen auf Ihrer Website anzuzeigen, die nicht im Hauptinhalt angezeigt werden. Es kann beliebte Artikel, Werbebanner, ein Newsletter-Anmeldeformular usw. enthalten. Seitenleisten enthalten Widgets, die ein Administrator anpassen kann. Die Vorlage sidebar.php enthält Ihre Website-Widgets.

In diesem Beispiel erstellen wir eine einfache Seitenleiste, indem wir den folgenden Code zur Datei functions.php hinzufügen.

 [Code]
Funktion updraft_widgets_init() {
register_sidebar(
Reihe (
'name' => esc_html__( Startseite Seitenleiste' ),
'id' => 'Seitenleiste-1',
'description' => esc_html__( 'Widgets hier hinzufügen, damit sie in Ihrer Seitenleiste erscheinen.' ),
'before_widget' => '<section class="widget">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
)
);
}
add_action( 'widgets_init', 'updraft_widgets_init' );
[/Code]

Gehen Sie als nächstes zu Appearance >> Widgets . Hier finden Sie die obige Seitenleiste. In diesem Beispiel fügen wir dieser Seitenleiste einige Widgets hinzu. Um diese Seitenleiste zum Frontend hinzuzufügen, fügen Sie den folgenden Code in sidebar.php ein.

 [Code]
<div class="sidebar">
<?php
if ( is_active_sidebar( 'sidebar-1' ) ) {
dynamic_sidebar( 'sidebar-1' );
}
?>
</div>
[/Code]

Denken Sie schließlich daran, die Methode „ get_sidebar()“ zu benennen, damit Sie die Seitenleiste bei Bedarf problemlos überall auf anderen Seiten einfügen können.

Rendern von Seiten und Beiträgen

Wie bereits erwähnt, werden alle WordPress-Seiten mit dem Code gerendert und ausgeführt, den Sie in die Datei page.php geschrieben haben , mit Ausnahme von Seiten mit benutzerdefinierter Seitenvorlage. Der folgende Code ist ein Beispiel, das eine Seite mit Seitentitel, Beschreibung und ausgewähltem Bild anzeigt.

 [Code]
<?php
get_header();
?>
<div class="Inhaltsbereich">
<main class="site-main">
<?php
while (have_posts()) :
die Post();
?>
<?php
if ( has_post_thumbnail() ) :
the_post_thumbnail();
endif;
?>
<header class="entry-header">
<?php the_title(); ?>
</header>
<div class="entry-content">
<?php the_content(); ?>
</div>
<?php
am Ende;
?>
</main>
</div>
<?php
get_footer();
[/Code]

Ein ähnlicher Code wird in die single.php -Datei eingefügt, um die Beitragsinformationen anzuzeigen. Um die Post-Auflistung richtig darzustellen (Ihre index.php ), können Sie zusätzlich zu den oben genannten Methoden auch Folgendes verwenden:

  • the_catgeory() : Zeigt die Kategorieliste für einen Beitrag an.
  • the_permalink() : Zeigt den Permalink für den aktuellen Beitrag an.
  • the_excerpt() : Zeigt den Beitragsauszug an.

I18n für benutzerdefinierte WordPress-Designs

Denken Sie beim Erstellen eines benutzerdefinierten Themas daran, dass es so entwickelt werden sollte, dass es die Internationalisierung unterstützt. Auf diese Weise kann Ihr Thema problemlos in andere Sprachen übersetzt werden.

Um I18n-Unterstützung hinzuzufügen, denken Sie daran, eine Textdomäne zu verwenden, aus der Sie Quelldateien parsen und die übersetzbaren Zeichenfolgen extrahieren können. In diesem Beispiel verwenden wir die Textdomäne „Updraft“, aber Sie können eine beliebige eindeutige Kennung auswählen. Wir können die Textdomäne wie folgt definieren.

 [Code]
Funktion i18n_setup() {
load_theme_textdomain( 'updraft', get_stylesheet_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'i18n_setup' );
[/Code]

Wenn Sie jetzt statische Strings in Ihren Designdateien verwenden, packen Sie sie in __()- oder _e()- Funktionen.

 [Code]
<h2><?php _e('Vorname', 'updraft); ?></h2>
<?php echo __('Benutzer-E-Mail', 'updraft'); ?>
[/Code]

Es gibt spezielle Tools wie POEDIT, die dabei helfen, übersetzte Sprachdateien zu generieren. Weitere Informationen finden Sie in diesem Blog .

Dieser Blog hat die Grundlagen zum Erstellen von benutzerdefinierten WordPress-Designs behandelt. Es ist jedoch ein umfangreiches Thema, das viel Zeit und Geduld erfordert. Im Folgenden finden Sie einige hilfreiche Ressourcen, mit denen Sie sich vertraut machen sollten, die Ihnen helfen, mit der Erstellung Ihrer WordPress-Themes zu beginnen.

  • Die WordPress-Schleife
  • Vorlagen-Tags
  • Kategorieseiten
  • Funktions_Referenz
  • Bedingtes Tag
  • WordPress-Codierungsstandards

Denken Sie beim Erstellen eines neuen Designs für Ihre WordPress-Site daran, dass Sie es nach jeder Änderung sichern müssen, da Sie sonst riskieren, Ihre gesamte Arbeit zu verlieren. Verwenden Sie UpdraftPlus – das weltweit führende und vertrauenswürdigste WordPress-Plugin zum Sichern, Wiederherstellen und Klonen.

Der Beitrag So erstellen Sie ein benutzerdefiniertes WordPress-Theme erschien zuerst auf UpdraftPlus. UpdraftPlus – Sicherungs-, Wiederherstellungs- und Migrations-Plugin für WordPress.