Comprender la jerarquía de archivos de un tema de WordPress

Hace unas semanas, estaba hablando de los diferentes tipos de temas que podemos encontrar en WordPress. Allí aprendí todo sobre los temas de WordPress: cuáles son los temas básicos, los temas premium y los temas multifuncionales; Cómo personalizar cualquier tema utilizando temas de los niños; ¿Cuáles son los temas de los nietos? Y también cómo crear un tema usando temas y marco iniciales. Debido a que algunos de ustedes me contactaron pidiendo más información sobre cómo crear un tema de WordPress, pensé que sería interesante discutir sobre la jerarquía de un archivo de WordPress. En esta publicación, aprenderá los elementos básicos para comprender cómo se ve un tema de WordPress y, con suerte, tendrá todas las herramientas que necesita para crear su primer tema.
Antes de comenzar … cualquiera puede dibujar una casa en papel, pero no todos somos arquitectos. Si tenemos suerte, es posible que podamos armar un armario IKEA. Pero eso es todo. ¿Por qué menciono esto? ¡Porque crear temas de WordPress no es diferente! Es muy difícil y hacer algo hermoso y fácil de usar requiere tiempo y experiencia. Entonces, en esta publicación te enseñaré “todo lo que necesitas saber para crear un tema de WordPress con dos características:
Ignoraremos absolutamente todo lo que tiene que ver con el diseño del tema en sí y nos centraremos solo en el lado técnico.
No comenzaremos desde cero. En cambio, utilizaremos el tema de inicio de subrayos. ¿Por qué? Porque no tiene sentido comenzar un tema desde cero cuando tenemos un esqueleto de calidad que nos ofrece parte del trabajo realizado. Y, además, si desea hacerlo, la documentación de WordPress en sí misma le brinda la información que necesita.
Subraye, un fantástico tema de inicio del subrayador automático es un tema inicial cuyo único propósito es proporcionar el esqueleto básico para que alguien pueda desarrollar su propio tema, proporcionando plantillas HTML bien documentadas y algunos trucos adicionales. Con él, podemos acelerar en gran medida la creación de un nuevo tema, porque gran parte de las tareas que debemos hacer para poner en funcionamiento un tema ya están en vigor. Los productos básicos anteriores de cada tema deben tener un nombre único. Especialmente porque todos los temas que instala en WordPress alcanzan el contenido /temas de WP /en su propia carpeta (algo como WP- Content /Temas /Twenty-Seventi /, WP- Temes /Nelio /, WP- Content /Temas /Your- Tema/, etc.) y, por lo tanto, se necesitan diferentes nombres para evitar colisiones. Entonces, lo primero que debe hacer es decidir el nombre del tema y configurarlo. Si accede a la página subrayado, verá un campo de texto llamado Nombre del tema junto a un botón de generación. Simplemente ingrese el nombre del tema que desea (yo, por ejemplo, utilicé el software Nelio), haga clic en el botón y se descargará un archivo .zip con su configuración, incluidos los prefijos de las funciones que define para que sean únicos (Por ejemplo, en lugar de tener una función llamada configuración que puede entrar en conflicto con la misma función de otro tema, el nuestro se llama NELI_SOFTWARE_SETUP).
Entonces, ahora que tiene el tema listo para iniciar … ¡Instale WordPress, active y ponga a trabajar! El archivo principal si abre el director del tema y eche un vistazo al interior, verá que hay más archivos y directorios dentro de él. Sé que puede parecer mucho, pero créeme, es más fácil de lo que parece. El primer archivo que comentaremos es style.css. Como indica su nombre y tipo, contiene los estilos de nuestro tema. Pero también es el archivo que contiene algunas información relevante de metal sobre nuestro tema (por lo que es el primer archivo que debemos analizar): Como puede ver, este archivo comienza con un comentario bastante largo, que parece seguir un formato especial . De hecho, sigue un formato especial. De las filas 2 a 11 vemos un conjunto de pares de atributos, valor en el que se definen diferentes propiedades del tema: nombre, URL, autor, una descripción … Por defecto, estos campos se completan con información subrayada, pero usted es gratuito para cambiarlos en lo que quieres. Si se pregunta para qué sirve esta información … bueno, es el que se muestra en el tablero de WordPress, en la sección de aspecto »Temas:
Meta información sobre el tema subrayado y cómo están en el escritorio de WordPress. Los temas de archivo de funciones también pueden definir un archivo de función llamado, por supuesto, functions.php. Normalmente, en este archivo definimos los ganchos típicos necesarios para colocar la cola de hojas de estilo y guiones, así como cualquier función auxiliar adicional que podamos necesitar. Básicamente se comporta como un complemento: si el tema está activo, el archivo se carga automáticamente y lo que se define en él esté disponible.
Si echa un vistazo al archivo Functions.php que subraya creado para usted, verá que muchas cosas ya están allí. Veamos algunos ejemplos de lo que incluye: neli_software_setup. Esta es una función que se invoca inmediatamente después de que el tema se haya cargado en WordPress a través de Hook After_setup_theme. En él, el tema define algunas propiedades de nuestro tema, como, por ejemplo, el soporte de las imágenes presentadas en las publicaciones de blog, un menú de navegación, el campo de la internacionalización, etc. En mi opinión, lo más interesante en esta función es que se define en un bloque condicionado: de esta manera, si alguien crea un niño para personalizar la nuestra, podría redefinir esta función para adaptarla a sus propias necesidades.

Neli_software_widgets_init. El subrayado también nos muestra cómo podemos grabar las barras laterales, que son ubicaciones donde se pueden agregar widgets. Como puede ver, es tan fácil como la invocación de la función Registro_sideBar durante la ejecución de la acción widgets_init.
Neli_software_scripts. Esta es una de las funciones más importantes del tema, porque es responsable de poner los guiones y los estilos requeridos por nuestro tema.
Nada de lujo, ¿verdad?
Un punto interesante que merece una mención especial es las declaraciones requeridas que aparecen al final de este archivo. Básicamente, estas instrucciones cargan algunos archivos del Subdirector Inc/, como Inc/Custom-Tader.php o Inc/Customizer.php y sirven como un ejemplo simple de cómo organizar nuestro código y mantenerlo limpio y ordenado. Obviamente, nadie nos obliga a poner absolutamente todas las funciones y personalizaciones que queremos en funciones.php. Si queremos, podemos organizar el nuestro en archivos más pequeños para fines más específicos y luego podemos solicitarlos según sea necesario, considerando que el punto de entrada es este archivo. Cualquier función de ayuda que podamos necesitar en funciones.php. Pero deberíamos crear un tema, así que … ¿dónde definimos las plantillas HTML? ¿Cómo hacemos que las cosas se vean de una forma u otra? La respuesta a esta pregunta se puede encontrar en los otros archivos que están en el directorio raíz de nuestro tema. Eche un vistazo más de cerca y verá que la mayoría de los archivos se llaman para que pueda adivinar fácilmente lo que hacen:
Index.php es la plantilla predeterminada y se usa para reproducir cualquier contenido de WordPress, a menos que haya una plantilla más específica para ese contenido.
Comentarios.php es la plantilla que reproduce la sección de comentarios en nuestras publicaciones de blog.
Single.php es la plantilla que usamos para reproducir una publicación de blog y, por lo tanto, reemplaza index.php para publicaciones de blog.

Page.php es similar a Single.php, pero en este caso se aplica a las páginas.
Y así sucesivamente. Nada complicado, ¿verdad? Si tiene curiosidad por todas las plantillas que puede crear y sus nombres, le recomiendo que mire la página del códice donde explica cómo crear un tema con la página que explica las habilidades en WordPress.
¿Qué hay dentro de una plantilla de plantilla? Bueno, tienen lo que yo diría que esperas: HTML para definir la apariencia mezclada con algún código PHP para extraer los datos reales que queremos jugar. Por ejemplo, si miramos el archivo sencillo.php (que se usa para reproducir publicaciones de blog), veremos lo siguiente:
Veamos qué está pasando en cada fila:
Lo primero que vemos en la línea 10 es una llamada a la función get_header. Prácticamente carga una plantilla con algunas etiquetas HTML comunes, como HTML, cabeza, título, cuerpo … así como cualquier otra parte común de nuestro sitio, como un encabezado o un menú de navegación. Hablaremos de eso más tarde.
Además, en la línea 37 vemos una llamada a get_footer que, como se puede imaginar, sirve al propósito opuesto. Es decir, cierre todas las etiquetas que hemos abierto en el encabezado y agregue información sobre el sótano.
Las filas de 13 a 33 hacen toda la magia. Por un lado, vemos que el contenido estará rodeado por dos etiquetas (div y principales) con algunas clases e ID especiales, y luego tenemos un PHP para cargar el contenido real.
La línea 17 carga el bucle de WordPress.
La línea 20 carga la plantilla en plantilla-parts/content.php, que contiene el código HTML necesario para reproducir una publicación (es decir, el título, la imagen presentada, el contenido, etc.).
La línea 22 agrega algunos enlaces de navegación.
La línea 25 carga los comentarios que esta publicación podría tener a través de la función Comments_template, pero solo si los comentarios se activan, por supuesto. Finalmente, la línea 36 agrega la barra lateral que definimos en funciones.php.
Encabezado y sótano en la raíz de nuestro tema también encontramos los encabezados.php y el pie.php. Como ya te he dicho, están acostumbrados a “abrir” y “cerrar” la página HTML resultante que enviaremos a los navegadores de nuestros visitantes.
Este es el encabezado:
Y este es el sótano:
De nuevo, no hay nada elegante aquí. Solo un código HTML y algunas llamadas PHP. Pero, de todos modos, hablemos brevemente los puntos más relevantes de cada archivo:
Cualquier etiqueta abierta (pero no cerrada) en el encabezado.php está cerrado en el pie de página.php.
Uno de los aspectos más importantes en el encabezado.php es la llamada a wp_head, en la línea 20. Esta llamada debe hacerse si queremos los complementos y el tema en sí puede poner la cola de sus propios estilos y guiones en la página.
El resto del código de encabezado.php define la parte de nuestro sitio que es común a todas las páginas, como, por ejemplo, la imagen de título o el menú de navegación.
Footer.php es similar al encabezado, pero en este caso carga el código común que aparece al final de todas nuestras páginas.
Como en el caso de Header.php, el archivo Footer.php requiere una función especial llamada wp_footer. Es muy importante tener esta función en nuestro tema, o los complementos y el tema en sí no podría agregar sus propios scripts al final de la página.
Buenas prácticas por fin, hablemos de algunas buenas prácticas que debe seguir si desea crear un tema perfecto.
Coloque estilos y guiones. Ninguna de las plantillas incluidas en los subrayadores agrega un script o estilo al código HTML. En cambio, se basa en las funciones de wp_enqueue_script y wp_enqueue_style. También debes seguir este enfoque. Tema. Incluso si creamos un tema simple, es posible que deseemos agregar algunas propiedades de personalización que el usuario debería poder cambiar. Si desea hacer esto, no reinventen la rueda e implemente su propia pantalla de configuración, pero use la API de personalización.
Escapar y desinfectar. Este es el diseño web 101. Es muy, muy importante que todos los datos que imprima en la pantalla se eliminen correctamente y que todos los datos que recopilan del usuario se desinfecte correctamente. Si no sabe de qué estoy hablando, lea documentos de WordPress sobre este tema.
Internacionalización. Si desea que alguien use su tema, debe asegurarse de que se pueda traducir. Por lo tanto, acostumbrarse a las funciones de internacionalización de WordPress y úselas desde el principio. Si haces esto, ¡tu tema será traducible en el menor tiempo!
Verificación del tema. Hay un complemento especial llamado cheque de temas que verifica la calidad de su base. Úselo mientras desarrolla un tema y asegúrese de que todas las pruebas que ejecutan hayan pasado. Este es el complemento que usa el equipo de revisión de los temas de WordPress, así que … ¿por qué no quieres usarlo?