Introducción a la anatomía de un tema de WordPress

(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.

De esta manera, en lugar de tener todos los items del cuerpo (encabezado, contenido principal, barra lateral, pie de página, etc.) viviendo en un solo archivo (como es el caso del HTML estático), cada uno de los items del cuerpo (en los temas de WordPress) vive en archivos separados.

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 footer.php y así sucesivamente.

Estas siguiendo? Vea la siguiente ilustración:

De nuestra ilustración anterior, , y se denominan etiquetas de plantilla. Su trabajo es buscar header.php, sidebar.php y footer.php en ese orden desde su directorio de temas, y mostrar el contenido en su index.php, completando así la página web.

No dejes que el .php te asuste, el contenido dentro de los archivos php es solo código HTML con el que estás familiarizado. A modo de ejemplo, su header.php puede contener una navegación típica por listas HTML. De la misma forma, puede poner código HTML típico en footer.php, sidebar.php e index.php.

Al mismo tiempo puede colocar el 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.

Hacia adelante…

Un tema básico de WordPress se compone de al menos cuatro archivos de plantilla, a saber:

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

Veamos qué incluye cada uno de estos mágico archivos:

Archivo de plantilla Index.php

Este es el archivo principal sin el cual no tiene un tema de WordPress que funcione. Es el primer archivo (o predeterminado) que se carga cuando visita un sitio web de WordPress. Considérelo el equivalente de index.html.

Un index.php típico en los temas de WordPress se verá así:

<?php get_header(); ?>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Puede agregar el bucle entre y para mostrar publicaciones de blog en la página de inicio (index.php) como se muestra a continuación:

<?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(); ?>

Archivo de plantilla Header.php

Estos archivos de plantilla contienen su código de encabezado, navegación y código de encabezado HTML. Básicamente, header.php almacena todo lo que desea mostrar en la parte superior de su sitio web. Ya sabes, cosas como el título de tu sitio web y cosas así.

Al mismo tiempo enlaza a su hoja de estilo 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>

Archivo de plantilla Sidebar.php

Sidebar.php contiene todo lo que necesita para aparecer en sus barras 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 puede contener marcado HTML puro o llamadas a funciones php según sus necesidades. Como tal, un sidebar.php básico podría verse así:

<div class="sidebar">

Put your custom content or HTML code here.

</div>

Archivo de plantilla Footer.php

¿Qué crees que entra en footer.php? Puede poner su información de derechos de autor aquí, menús adicionales, enlaces, íconos de redes sociales, ¡lo que quiera! ¿Le gustaría ver cómo se ve un footer.php básico? Aquí:

<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>

¿Observa las etiquetas de cierre y en footer.php? ¿Puedes adivinar por qué deben incluirse en footer.php? De manera idéntico, ¿puede adivinar por qué las etiquetas de apertura y están incluidas en header.php? Háganos saber sus conjeturas en la sección de comentarios al final de esta publicación 😉

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 error 404, solo por mencionar algunos.

Para saber totalmente la anatomía de un tema de WordPress, debe familiarizarse con diferentes archivos de plantilla. Puedes navegar por todos mosaicos de plantillas utilizables en WordPress.

Luego tenemos etiquetas de plantilla, que WordPress usa para buscar archivos de plantilla del directorio de temas. Puedes aprender más sobre etiquetas de plantilla y el papel que desempeñan en WordPress.

Resumen

Un tema de WordPress consta de los siguientes items anatómicos:

• Archivos de plantilla como index.php, header.php, search.php, category.php, etc.
• Etiquetas de plantilla como , etc
• CSS
• Imágenes y otros archivos multimedia
• Archivos JavaScript

Y aquí hay una ilustración que resume la anatomía de un tema de WordPress:

¿Quieres seguir aprendiendo? Consulte el detallado guía de anatomía del tema en el Codex de WordPress.

Conclusión

Todos los temas de WordPress que ves en la web utilizan la misma estructura anatómica (incluso nuestro popular Tema total de WordPress), que puede personalizar para satisfacer sus necesidades. Una vez que entienda los conceptos básicos del desarrollo de temas de WordPress, no hay límite para lo que puede hacer con los temas de WordPress.