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 phpEl PHP es un lenguaje de scripting de código abierto, del lado del servidor, con programación HTML integrada que se usa para crear páginas web dinámicas. Las ventajas de PHP son su flexibilidad y su alta compatibilidad con otras bases de datos. Al mismo tiempo, PHP es considerado como un lenguaje fácil de aprender. Funciones de PHP Las funciones de PHP se relacionan con los scripts del lado del servidor. más, 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 headerConcepto de Header¿Qué es el Header?El Header, encabezado en español, es una definición que se usa en el terreno del diseño y la programación web para referirse a la parte de arriba de una página. Se trata del primer punto a ver por cualquier usuario que entra en un portal web, por lo que cuenta con una responsabilidad enorme y ha de contener la carga informativa esencial para mostrar la más.php, la barra lateral encontrará el inicio en sidebar.php, el contenido principal vivirá en indexUn index o índice es generalmente un directorio en un orden específico que se usa con fines de orientación. En términos de motores de búsqueda, un índice es la lista de páginas web que es emitido por el motor de búsqueda en respuesta a una solicitud de búsqueda del usuario. Información general La lista que se muestra posteriormente de introducir una solicitud de búsqueda específica se llama SERPs (Search Engine más.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 footerUn footer o pie de página es una línea o bloque de texto que aparece en la parte inferior de una página o documento separado del texto principal. Los footers incluyen notas en el título de la página, o navegación dentro del documento. En los sitios web, los pies de página son además un área especial que está separada del cuerpo principal y el encabezado. Por lo general, contienen información más.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 blogEl término blog se usa para describir un diario virtual en Internet. El autor de un blogger puede publicar posts sobre cualquier tema. Los posts suelen estar presente de forma cronológica. El estilo de redacción de un blog suele ser informal y se escribe en primera persona. No obstante, además son posibles otros estilos, por ejemplo en el caso de los periódicos online, en los que la atención se centra más, 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 estiloConcepto de Hoja de estilo¿Qué es una Hoja de estilo?Una Hoja de estilo es un archivo que suele acompañar al fichero principal de cualquier página web, con la amplitud css, y que se encarga de definir distintos aspectos relacionados con el formato y el diseño de la web, estableciendo los parámetros que definen las etiquetas utilizadas en el código fuente de la misma.Este fichero es donde se almacena información del más 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 barrasLas trailing slashes son las barras que aparecen al final de una URL ( "https://es.ryte.com/" ) y representan un directorio. Si la URL no finaliza con una barra representa un archivo. No obstante, esto son solo guías, no un requerimiento. No obstante, usar una barra como representación de un directorio ha sido aceptado como estándar con el tiempo. Uso de las barras "https://es.ryte.com/" y SEO A pesar de que dichas más laterales. La barra lateral contiene menús adicionales, widgetsConcepto de Widgets¿Qué son los Widgets?Los Widgets son una serie de pequeños programas que se usan para añadir funciones, simplificar o automatizar aquellas acciones que se lleven a cabo a menudo dentro de una web. Son herramientas adicionales, añadidos que se elaboran con la finalidad de hacer más fácil las labores de mantenimiento o inclusive de generación de contenidos dentro de cualquier sitio de Internet y que no han hecho más, 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 404Concepto de Error 404¿Qué es un Error 404?El Error 404 es uno de los más frecuentes y que más complicaciones trae a todos aquellos que trabajan con una página web. Consiste en un código de estado HTTP que está ligado al error que tiene lugar cuando se intenta entrar a una página y esta no se encuentra. Es el fallo por excelencia de Internet y, probablemente, el más común tanto más, 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 JavaScriptJavaScript es un lenguaje de programación que funciona en el lado del cliente y con el que las webs pueden ser más funcionales. Incorporación en código HTML El código JavaScript puede ser incrustado en las páginas HTML, para que adquieran funcionalidad. Existen varias opciones. Puede estar entre las etiquetas <SCRIPT> y </SCRIPT>, puede estar contenido en un archivo externo, puede ser un parámetro de las etiquetas HTML, y puede estar más

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.