Anatomía de un tema de WordPress

Este es un capítulo de "En funcionamiento: una guía práctica para el desarrollo de WordPress", una guía multimedia para el desarrollo de WordPress que se lanza el 16 de junio. El paquete completo incluye un libro electrónico completo, más de 50 videos tutoriales de desarrollo de complementos y temas, y entrevistas de tutoriales de código con 13 de los mejores desarrolladores de WordPress del mundo. ¡Reserva ahora en upandrunningwp.com con un 20 % de descuento!

Conclusiones clave:

• Un tema de WordPress está hecho de un conjunto de partes consistentes. Las partes cruciales de un tema no secundario incluyen style.css , functions.php y varios tipos de archivos de plantilla de PHP (como header.php , footer.php e index.php ).
• Como principal fuente de estilo CSS del tema, style.css determina la apariencia visual del tema. Una sección de comentarios en la parte superior de style.css también es donde se registra el nombre del tema, el autor, etc.
• functions.php es donde agrega funcionalidad de presentación a su tema. A través de functions.php , agregará hojas de estilo CSS, archivos JavaScript, menús de navegación, áreas de widgets y otras funciones.
• Los archivos de plantilla se pueden dividir informalmente en: archivos de plantilla "siempre usados" ( header.php y footer.php , y sidebar.php si corresponde); archivos en la jerarquía de plantillas de WordPress (como index.php , single.php y page.php ); y "partes de la plantilla" (fragmentos incompletos extraídos de otros archivos de plantilla para reducir la repetición).
• Los temas pueden ser arbitrariamente grandes y complejos; pero estas son las piezas que son más importantes y previsiblemente allí.

Este breve capítulo gira en torno a un gran diagrama. ¿Por qué esperar? Aquí está:

¡No entrar en pánico! Lo entenderás muy pronto. En el resto de este capítulo, explicaremos cada parte del diagrama con mayor profundidad.

¿Lo que hay en un nombre?

WordPress decide cómo tratar los archivos de temas en función de su nombre.

Lo primero que debe notar es que cada archivo en el diagrama tiene un nombre especial. functions.php , style.css , index.php : ninguno de estos archivos se nombra por accidente, y ninguno de sus nombres es arbitrario.

WordPress decide cómo tratar los archivos de temas en función de su nombre. Tiene un tratamiento especial escrito para functions.php , pero ninguno para functionz.php . Entonces, si carga un conjunto de instrucciones como functions.php , WordPress las interpretará; pero si carga esas mismas instrucciones como functionz.php , WordPress, de forma predeterminada, simplemente ignorará ese archivo y sus instrucciones por completo.

estilo.css

style.css es la fuente principal de la apariencia visual del tema.

style.css es la principal fuente de estilo CSS del tema. Como tal, es la fuente principal de la apariencia visual del tema, desde la elección de fuentes y colores hasta si el tema funciona en una cuadrícula receptiva.

Entonces, por ejemplo, si ingresa el siguiente CSS en el style.css de su tema:

p {
color: blue;
}

…entonces todo lo que esté en un párrafo, en cualquier parte de su sitio mientras ejecuta su tema, se volverá azul. Realmente genial, ¿verdad?

style.css es donde harás la mayor parte de tu trabajo para que tus temas se vean como quieres.

Este tipo de control visual significa que hay mucho trabajo por hacer en style.css : es donde hará la mayor parte de su trabajo para que sus temas se vean de la manera que desea.

style.css también es cómo registras tu tema

style.css también alberga una sección de comentarios en su encabezado, que es donde se registran los datos del tema (el nombre del tema, el autor, el tema principal, si lo hay, etc.). Eso se ve de la siguiente manera:

/*
Theme Name: Pretend Theme
Author: WPShout
Author URI: http://wpshout.com/
Version: 0.1
Description: A very pretend theme for WordPress learners
[Other comment-block information goes here, too]
*/

WordPress lee estos comentarios para obtener información sobre su tema. Entonces, el pequeño bloque de comentarios anterior, y nada más sofisticado o más técnico, es lo que hace que su tema aparezca en la lista de temas de su sitio en Apariencia > Temas en el área de administración de WordPress:

Puede ver un ejemplo de los datos de registro reales de un tema en las líneas 1 a 6 de style.css en ese gráfico grande, Anatomía de un tema de WordPress.

funciones.php

functions.php es donde agrega funcionalidad personalizada a su tema. Esto podría ser mucho, incluyendo:

• Agregar hojas de estilo CSS (incluido el propio style.css ) y archivos JavaScript
• Registro de áreas del menú de navegación y áreas de widgets
• Definir qué tamaños de imagen personalizados desea que estén disponibles en su sitio
• Filtrar el contenido de su página

functions.php “habla” con el resto de WordPress principalmente a través de ganchos de WordPress (también llamados ganchos de acción y filtro), que le permiten agregar funcionalidad en los lugares correctos. Profundizamos en el funcionamiento de functions.php en Core Concepts of WordPress Themes: 3. Adición de funcionalidad con functions.php , y nos adentramos mucho más en los ganchos en WordPress Hooks (acciones y filtros): qué hacen y cómo funcionan.

Archivos de plantilla PHP

Los archivos de plantilla de un sitio de WordPress determinan el marcado del sitio. Sin ellos, literalmente no hay nada en la página.

La mayor parte de los archivos de un tema son sus archivos de plantilla PHP. Si functions.php es el cerebro de un tema, y style.css es su ropa, y los archivos de plantilla son su cuerpo real.

Los archivos de plantilla son archivos ,code>.php que contienen una combinación de marcado HTML y código PHP. (Revise ese gráfico y verá cómo se ven).

Los archivos de plantilla crean marcado de dos maneras

Juntos, estos archivos determinan el marcado del sitio: el HTML real que muestra el navegador cuando visita su sitio. Lo hacen de dos maneras.

1.HTML

En primer lugar, los archivos de plantilla imprimen HTML directamente en el navegador, como lo haría un archivo .html normal. Cualquier cosa que no esté dentro <!--?php?--> no es PHP: es simplemente HTML que va directamente a la página. Entonces, si el header.php de un tema incluye un poco de HTML como el siguiente:

<body class="site-body">

Eso es exactamente lo que verá un navegador en cada página web de WordPress que incluya header.php , que deberían ser todas.

2. PHP

Los archivos de plantilla realmente hacen su magia usando PHP, que se compila o convierte en HTML. Como ejemplo simple, nuestro mismo archivo header.php podría contener el siguiente código:

<body class="<?php echo 'site-body'; ?>">

El PHP agregado simplemente repite (imprime) el site-body la cadena directamente en la página. Entonces, el servidor realizó un procesamiento PHP adicional en su extremo, pero el navegador aún ve el mismo HTML antiguo.

Como puede imaginar, los archivos de plantilla de un tema son absolutamente cruciales: sin ellos, literalmente no hay nada en la página.

Archivos de plantilla "siempre usados"

header.php y footer.php generalmente se usan en todas partes en un tema, porque la mayoría de los sitios quieren un encabezado y pie de página consistentes en diferentes páginas.

Algunos archivos de plantilla se utilizan en todas las páginas web de un sitio. Los principales ejemplos son header.php y footer.php .

Estos archivos se usan con tanta frecuencia que WordPress tiene funciones especiales para incluirlos en otros archivos de plantilla: get_header() y get_footer() . Llamadas de esta manera, sin parámetros, esas funciones simplemente header.php y footer.php , y los colocan donde se llamó la función.

¿Por qué se utilizan estos archivos en todas partes? Es porque la mayoría de los sitios quieren un encabezado y un pie de página coherentes en las distintas páginas. Si una página tiene el logotipo de su empresa y el menú de navegación principal, es una buena apuesta que querrá que otras páginas hagan lo mismo. Lo mismo es cierto para su pie de página en la parte inferior de la página.

Como nota, sidebar.php también es una especie de este tipo de archivo, porque a menudo ocurre que la mayoría de los tipos de páginas web en un sitio compartirán una sola barra lateral, tal vez con la excepción de las páginas de ancho completo dedicadas a mostrar el tipo de página. publicaciones sidebar.php tiene su propia función, get_sidebar() .

Archivos en la jerarquía de plantillas de WordPress

La verdadera emoción ocurre en archivos como index.php , single.php y page.php . Estos archivos dictan qué marcado aparecerá para diferentes tipos de datos de publicación .

Para reformular eso, WordPress sabe qué página usar para qué tipo de datos de publicación. Por ejemplo:

• Si la página web que se solicita incluye una publicación de tipo página (por ejemplo, su página Acerca de), es probable que WordPress use page.php para crear esa página web.
• Si la página web solicitada es una publicación individual de tipo Publicación (por ejemplo, está viendo una publicación de blog en particular), es probable que WordPress use single.php para crearla.
• Si está revisando todas las publicaciones de tipo Post que escribió en 2014, es probable que WordPress use archive.php para crear esa página web.

Esta es la magia de la jerarquía de plantillas de WordPress , que cubrimos en profundidad en Conceptos básicos de los temas de WordPress: 1. La jerarquía de plantillas.

Estos archivos de plantilla se basan en el bucle

Todos estos archivos de plantilla de "jerarquía en la plantilla" comparten algo muy importante: están construidos alrededor de The Loop, uno de los principios básicos absolutos del desarrollo de WordPress.

Profundizamos en The Loop en los conceptos básicos de los temas de WordPress: 2. Procesamiento de publicaciones con The Loop. The Loop es realmente genial, así que si eres nuevo en esto, agárrate los calcetines para que The Loop no se los vuele.

Piezas de plantilla

Digamos que hay una sección tanto de index.php como de page.php que es exactamente igual. ¿Deberíamos repetir ese código en ambos archivos?

En realidad, DRY, "¡No te repitas!", es un grito de guerra para los buenos programadores. La repetición causa todo tipo de problemas. ¿Qué sucede si desea cambiar algo sobre la sección repetida? Ahora tienes que cambiarlo en dos lugares. ¿Qué sucede si olvida cambiarlo en un lugar o comete un error en un archivo pero no en otro? Ahora su código no está sincronizado y su sitio tiene errores. (Ahora: ¿qué pasa si repites el mismo código veinte veces? Tienes que repetir cada cambio que hagas veinte veces, y esperar que "los atrapes a todos").

Las partes de la plantilla toman una parte que probablemente se repetirá de un archivo de plantilla y las mueven a un nuevo archivo. De esta manera, tanto index.php como page.php pueden referirse simplemente a la misma parte de la plantilla, en lugar de escribirla dos veces individualmente; y si quieres cambiar ese apartado solo lo cambias una vez.

Ahora ya conoces la anatomía de tu tema.

Estas son las cosas que realmente hay que entender sobre un tema de WordPress. Incluso un tema de ThemeForest demasiado grande se construirá alrededor de este esqueleto central, así que comprenda cómo se entrelazan estas piezas y tendrá mucho poder para comprender los temas de WordPress.

Con esa lección de anatomía concluida, los siguientes tres capítulos se sumergen en cuatro de los principios de programación cruciales que explican cómo funciona un tema:

1. La jerarquía de plantillas de WordPress
2. El lazo
3. funciones.php
4. Ganchos de WordPress

¡Adelante!