Einführung in die Anatomie eines WordPress-Themas

(o tablas si realmente eres de la vieja escuela). A parte de esto, los temas de WordPress se dividen en diferentes archivos php, que luego se vuelven a unir usando etiquetas de plantilla.

Auf diese Weise werden nicht alle Hauptelemente (Kopfzeile, Hauptinhalt, Seitenleiste, Fußzeile usw.) in einer einzigen Datei gespeichert (wie dies bei statischem HTML der Fall ist), sondern alle Elemente im Hauptteil (in WordPress-Themen) ) lebt in separaten Dateien.

De esta manera, el encabezado vivirá en Header.php, la barra lateral encontrará el inicio en sidebar.php, el contenido principal vivirá en Index.php o single.php (si es una publicación) o page.php (si es una página ). La sección de pie de página vivirá en Fusszeile.php y así sucesivamente.

Folgen Sie? Siehe folgende Abbildung:

Aus unserer vorherigen Abbildung, , Y. Sie werden Vorlagen-Tags genannt. Ihre Aufgabe ist es, in Ihrem Themenverzeichnis nach header.php, sidebar.php und footer.php in dieser Reihenfolge zu suchen und den Inhalt in Ihrer index.php anzuzeigen, um die Webseite zu vervollständigen.

Lass das nicht .php 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. Auf die gleiche Weise können Sie typischen HTML-Code in footer.php, sidebar.php und index.php einfügen.

Gleichzeitig können Sie die platzieren loop.php funciona en su index.php (o en cualquier lugar que desee) para mostrar las publicaciones de su Blog, pero debería disminuir la velocidad y volver a la anatomía de los temas de WordPress. He mencionado un par de cosas sobre el ciclo en la parte 2 de cómo crear un tema de WordPress a partir de HTML. y hablaremos de él (el bucle) y otras funciones en el futuro.

Nach vorne…

Ein grundlegendes WordPress-Theme besteht aus mindestens vier Vorlagendateien, nämlich:

1. index.php
2. header.php
3. sidebar.php
4. footer.php

Mal sehen, was jedes davon beinhaltet magisch Aufzeichnungen:

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 von index.html.

Eine typische index.php in WordPress-Themes sieht folgendermaßen aus:

Sie können die Schleife zwischen hinzufügen Y. um Blog-Beiträge auf der Homepage (index.php) wie folgt anzuzeigen:

<?php get_header(); ?>
<div class="content">
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
	<div id="post-<?php the_ID(); ?>" no numeric noise key 1022>
	<div class="post-header">
	<div class="date"><?php the_time( 'M j y' ); ?></div>
	<h2><a href="/de/</?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 HTML-Headercode, Ihre Navigation und Ihren Headercode. Grundsätzlich speichert header.php alles, was Sie anzeigen möchten, oben auf Ihrer Website. Sie wissen, Dinge wie der Titel Ihrer Website und solche Dinge.

Al mismo tiempo enlaza a su Stylesheet CSS en el header.php. Aquí hay un ejemplo básico de 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 contiene todo lo que necesita para aparecer en sus Riegel laterales. La barra lateral contiene menús adicionales, Widgets, categorías, íconos de redes sociales, contenido personalizado, código HTML como anuncios, etc.

Sidebar.php kann je nach Bedarf reine HTML-Markup- oder PHP-Funktionsaufrufe enthalten. Daher könnte eine einfache sidebar.php folgendermaßen aussehen:

<div class="sidebar">

Put your custom content or HTML code here.

</div>

Footer.php-Vorlagendatei

Was denkst du geht in footer.php? Sie können hier Ihre Copyright-Informationen, zusätzliche Menüs, Links, Social-Media-Symbole, was auch immer Sie wollen, einfügen! 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>

Merkst du die schließenden Tags? y in footer.php? Können Sie sich vorstellen, warum sie in footer.php enthalten sein sollten? Können Sie auch erraten, warum die öffnenden Tags y sind sie in header.php enthalten? Teilen Sie uns Ihre Vermutungen im Kommentarbereich am Ende dieses Beitrags mit 😉

Los cuatro archivos de plantilla que acabamos de cubrir previamente constituyen un tema de WordPress muy básico. Hay muchos otros archivos de plantilla; hay un archivo de plantilla para cada elemento que ve en un tema de WordPress, ya sean comentarios, resultados de búsqueda y páginas de Fehler 404, solo por mencionar algunos.

Um die Anatomie eines WordPress-Themas vollständig zu kennen, müssen Sie sich mit verschiedenen Vorlagendateien vertraut machen. Sie können alle durchsuchen verwendbare Vorlagenkacheln in WordPress.

Dann haben wir Vorlagen-Tags, mit denen WordPress Vorlagendateien aus dem Themenverzeichnis findet. Sie können mehr darüber erfahren Vorlagen-Tags und ihre Rolle in WordPress.

Zusammenfassung

Ein WordPress-Theme besteht aus folgenden anatomischen Elementen:

• Vorlagendateien wie index.php, header.php, search.php, category.php usw.
• Vorlagen-Tags wie , usw
• CSS
• Bilder und andere Multimediadateien
• Archiv JavaScript

Und hier ist eine Illustration, die die Anatomie eines WordPress-Themas zusammenfasst:

Willst du weiter lernen? Siehe die detaillierten Themenanatomie-Leitfaden in WordPress Codex.

Fazit

Alle WordPress-Themes, die Sie im Web sehen, verwenden dieselbe anatomische Struktur (auch unsere beliebte Gesamtes WordPress-Theme), die Sie an Ihre Bedürfnisse anpassen können. Sobald Sie die Grundlagen der WordPress-Theme-Entwicklung verstanden haben, gibt es keine Grenzen mehr, was Sie mit WordPress-Themes tun können.