Vor einiger Zeit haben wir Ihnen das Konzept vorgestellt, ein WordPress-Theme aus HTML zu erstellen. Wir haben das Tutorial in zwei Teile aufgeteilt und heute geht es darum, die beiden Tutorials zu konkretisieren. Betrachten Sie diesen Beitrag also gerne als den dritten Beitrag in der Beitragsserie. Mein Ziel ist es, das WordPress-Theme auseinanderzunehmen, um Ihnen ein klares Bild davon zu geben, wie es (das Thema) funktioniert.
In diesem Beitrag wird davon ausgegangen, dass Sie über Grundkenntnisse in HTML und CSS verfügen. Ich werde fortfahren und erklären, dass HTML- und CSS-Kenntnisse eine Voraussetzung für die Gestaltung von WordPress-Themes sind. Noch eine Sache, dieser Beitrag wird sich von großen Worten und schwierigen Konzepten fernhalten – er wird leicht zu verstehen sein, also seien Sie bereit, Spaß zu haben und zu lernen.
Ein bisschen HTML-Priming
Jede HTML-Webseite wird mit dem
Sobald Sie Ihre Webseite in Abschnitte unterteilt haben, können Sie die Abschnitte mithilfe von CSS nach Belieben anordnen (oder anordnen). Dieser Prozess wird als Styling bezeichnet und beinhaltet das Hinzufügen anderer Stilelemente wie Farbe, Größe, Rahmen, Spezialeffekte usw. Dies ist die Leistungsfähigkeit von CSS, die übrigens für Cascading Style Sheets steht. Wenn Sie Ihre HTML- und CSS-Dateien zusammenfügen und ein paar Bilder einfügen, erhalten Sie eine vollständige Website.
Bei WordPress-Themes ist das nicht viel anders. Wie wir in Teil 1 von So erstellen Sie ein WordPress-Theme aus HTML gesehen haben, werden WordPress-Themes in verschiedene Dateien aufgeteilt. Wenn Sie an dieser Stelle keine Ähnlichkeit feststellen können, lassen Sie es mich erklären.
Statische HTML-Webseiten werden mit
Anstatt also alle Body-Elemente (Header, Hauptinhalt, Seitenleiste, Fußzeile usw.) in einer einzigen Datei zu haben (wie es bei statischem HTML der Fall ist), lebt jedes der Body-Elemente (in WordPress-Themes) in separaten Dateien.
Der Header wird also in header.php gespeichert, die Sidebar wird in sidebar.php zu Hause sein, der Hauptinhalt wird in index.php oder single.php (wenn es sich um einen Beitrag handelt) oder page.php (wenn es sich um eine Seite handelt) leben ). Der Footer-Bereich wird in footer.php und so weiter leben.
Verfolgst du? Sehen Sie sich die folgende Abbildung an:
Aus unserer obigen Abbildung ist , und werden Template-Tags genannt. Ihre Arbeit besteht darin, header.php, sidebar.php und footer.php in dieser Reihenfolge aus Ihrem Themenverzeichnis zu holen und den Inhalt in Ihrer index.php anzuzeigen, wodurch die Webseite vervollständigt wird.
Lass das nicht zu .php Erweiterung erschrecken Sie, der Inhalt in PHP-Dateien ist nur HTML-Code, mit dem Sie vertraut sind. Beispielsweise kann Ihre header.php eine typische HTML-Listennavigation enthalten. Ebenso können Sie typischen HTML-Code in die footer.php, sidebar.php und index.php einfügen.
Sie können auch die loop.php Funktion in Ihrer index.php (oder wo immer Sie möchten), um Ihre Blog-Posts anzuzeigen, aber ich sollte langsamer werden und zur Anatomie von WordPress-Themes zurückkehren. Ich habe ein oder zwei Dinge über die Schleife in Teil 2 erwähnt, wie man ein WordPress-Theme aus HTML erstellt. und wir werden in Zukunft darüber (die Schleife) und andere Funktionen sprechen.
Weiter gehts…
Ein grundlegendes WordPress-Theme besteht aus mindestens vier Vorlagendateien, nämlich:
- index.php
- header.php
- sidebar.php
- footer.php
Mal sehen, was in jedem von diesen steckt magisch Dateien:
Index.php-Vorlagendatei
Dies ist die Hauptdatei, ohne die Sie kein funktionierendes WordPress-Theme haben. Es ist die erste (oder Standard-)Datei, die geladen wird, wenn Sie eine WordPress-Website besuchen. Betrachten Sie es als das Äquivalent zu index.html.
Eine typische index.php in WordPress-Themes sieht so aus:
<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Sie können die Schleife zwischen und um Blog-Beiträge auf der Homepage (index.php) wie unten gezeigt anzuzeigen:
<?php get_header(); ?>
<div class="content">
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="post-header">
<div class="date"><?php the_time( 'M j y' ); ?></div>
<h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<div class="author"><?php the_author(); ?></div>
</div><!--end post header-->
<div class="entry clear">
<?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?>
<?php the_content(); ?>
<?php edit_post_link(); ?>
<?php wp_link_pages(); ?>
</div><!--end entry-->
<div class="post-footer">
<div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div>
</div><!--end post footer-->
</div><!--end post-->
<?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
<div class="navigation index">
<div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div>
<div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>
</div><!--end navigation-->
<?php else : ?>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Header.php Vorlagendatei
Diese Vorlagendateien enthalten Ihren Header-Code, die Navigation und den HTML-Head-Code. Grundsätzlich speichert header.php alles, was Sie oben auf Ihrer Website anzeigen möchten. Wissen Sie, Dinge wie der Titel Ihrer Website und dergleichen.
Sie verlinken auch auf Ihr CSS-Stylesheet in der header.php. Hier ist ein einfaches Beispiel für header.php:
<html>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
<body>
<div class="header">
<p>This is header section. Put your logo and other details here.</p>
</div>
Sidebar.php-Vorlagendatei
Sidebar.php enthält alles, was Sie brauchen, um in Ihren Sidebars zu erscheinen. Die Seitenleiste enthält zusätzliche Menüs, Widgets, Kategorien, Symbole für soziale Medien, benutzerdefinierten Inhalt, HTML-Code wie Anzeigen usw.
Sidebar.php kann je nach Bedarf reines HTML-Markup oder PHP-Funktionsaufrufe enthalten. Als solche könnte eine einfache sidebar.php wie folgt aussehen:
<div class="sidebar">
Put your custom content or HTML code here.
</div>
Footer.php Vorlagendatei
Was denkst du geht in die footer.php? Sie können hier Ihre Copyright-Informationen, zusätzliche Menüs, Links, Social-Media-Symbole einfügen – alles, was Sie wollen! Möchten Sie sehen, wie eine einfache footer.php aussieht? Hier:
<footer class="footer">
Put your footer content here including php function calls (to fetch different template files e.g. search.php) if need be.
</footer>
</body>
</html>
Beachten Sie die schließenden Tags und
in der footer.php? Können Sie sich vorstellen, warum sie in der footer.php enthalten sein müssen? Können Sie auch erraten, warum die öffnenden Tags und
in der header.php enthalten sind? Teilen Sie uns Ihre Vermutungen im Kommentarbereich am Ende dieses Beitrags mit 😉Die vier oben beschriebenen Vorlagendateien bilden ein sehr einfaches WordPress-Theme. Es gibt viele andere Vorlagendateien; Es gibt eine Vorlagendatei für jedes Element, das Sie in einem WordPress-Theme sehen, sei es Kommentare, Suchergebnisse und 404-Fehlerseiten, um nur einige zu nennen.
Um die Anatomie eines WordPress-Themes vollständig zu verstehen, müssen Sie sich mit verschiedenen Vorlagendateien vertraut machen. Sie können alles durchsuchen verwendbare Vorlagenkacheln bei WordPress.
Dann haben wir Template-Tags, die WordPress verwendet, um Template-Dateien aus dem Theme-Verzeichnis zu holen. Sie können mehr erfahren über Template-Tags und ihre Rolle bei WordPress.
Zusammenfassung
Ein WordPress-Theme besteht aus den folgenden anatomischen Elementen:
- Vorlagendateien wie index.php, header.php, search.php, category.php usw.
- Vorlagen-Tags wie , usw
- CSS
- Bilder und andere Mediendateien
- JavaScript-Dateien
Und hier ist eine Illustration, die die Anatomie eines WordPress-Themes zusammenfasst:
Möchten Sie weiter lernen? Schauen Sie sich die Details an Themenanatomie-Leitfaden im WordPress-Codex.
Fazit
Jedes WordPress-Theme, das Sie im Web sehen, verwendet die gleiche anatomische Struktur (sogar unser beliebtes Gesamtes WordPress-Theme), die Sie an Ihre Bedürfnisse anpassen können. Sobald Sie sich mit den Grundlagen der WordPress-Theme-Entwicklung vertraut gemacht haben, sind Ihren Möglichkeiten mit WordPress-Themes keine Grenzen gesetzt.