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