...
✅ Noticias, temas, complementos de WEB y WordPress. Aquí compartimos consejos y las mejores soluciones para sitios web.

Tutorial de temas de WordPress para principiantes – Parte 1: Introducción

11

En esta lección, comenzará a aprender cómo WordPress carga contenido según la página en la que se encuentre y la jerarquía de los archivos de plantilla de tema. También aprenderá lo que se necesita para un tema válido. Y al final finalmente crearemos nuestro tema y lo activaremos.

Archivos de plantilla de tema

Detrás del capó, WordPress determina qué plantilla cargar en función de la URL en la que se encuentra. Si su WordPress está instalado en el dominio "ejemplo.com/wordpress/", debería ver la plantilla de la página principal. Ir a "ejemplo.com/wordpress/categoría/noticias/" le dará una lista predeterminada de publicaciones asignadas a la categoría Noticias. utilizando una plantilla de categoría.

WordPress sigue una jerarquía de qué plantilla cargar, y cuál elige depende de las plantillas que tenga disponibles en su tema. Por ejemplo, “example.com/wordpress/category/news" WordPress primero buscará una plantilla específica para la categoría “noticias”. Si no se encuentra, WordPress buscará una plantilla específica para la ID de categoría. Nuevamente, si no se encuentra eso, WordPress busca la plantilla de categoría general. Si no se encuentra, WordPress buscará una plantilla aún más general para archivos. Y así sucesivamente y así sucesivamente.

WordPress Codex, que es el sitio de documentación de WordPress, mantiene una imagen útil y actualizada que ilustra la jerarquía de los archivos de plantillas de temas; https://codex.wordpress.org/File:Template_Hierarchy.png#file

¡No se preocupe si la imagen parece demasiado confusa al principio! A medida que avanzamos en el tutorial, volverá a consultar esta imagen para encontrar las plantillas que desea implementar en su tema.

La forma de leer la imagen es yendo de izquierda a derecha. Según la página en la que se encuentre, las plantillas son muy específicas, y cuanto más avanza hacia el lado derecho, más generales se vuelven las plantillas. El respaldo final es el más a la derecha; index.php, que se cargará si no se encontraron otras plantillas de ajuste.

Todos los archivos de plantilla enumerados en la imagen de arriba deben residir en la carpeta raíz de su tema y ser nombrados exactamente como se indica. ¡No puede colocar sus plantillas en subcarpetas con fines organizativos porque WordPress no podrá encontrarlas!

¡Empezaremos de forma sencilla! Hoy crearemos los únicos pocos archivos necesarios para que WordPress lo reconozca como un tema y luego expandiremos desde allí.

Anatomía de un tema de WordPress

Solo necesita dos archivos para crear un tema de WordPress válido.

En la ilustración de la jerarquía de plantillas, ¿observó la que está más a la derecha? llamado index.php? Esta es la plantilla alternativa final si WordPress no encuentra ninguna plantilla. Ese es uno de los archivos requeridos. El otro archivo es un archivo de hoja de estilo (.css). No necesariamente necesita tener CSS, pero debe contener un bloque de comentarios que proporcione información de WordPress sobre su tema. Esas dos cosas son todo lo que necesitas para un tema válido de WordPress.

¡Creemos nuestro tema creando estos dos archivos!

Creando tu primer tema

Todos los temas deben estar en cada una de sus carpetas separadas dentro de la subcarpeta /wp-content/themes/. Si navega a esta carpeta en su navegador de archivos, probablemente ya verá algunas carpetas de temas aquí; veintinueve, veinte y siete, etc. Esos son temas que vienen incluidos con WordPress por defecto.

En /wp-content/themes/, crea una nueva carpeta. Nómbrelo apropiadamente (en minúsculas, sin espacios, no es lo mismo que cualquier otra carpeta). Por lo general, el nombre de la carpeta es una versión slug del nombre de su tema. Para este tutorial, nombraré mi carpeta de temas " wptutorial".

Tutorial de temas de WordPress para principiantes - Parte 1: Introducción

Ingrese a la carpeta de su tema y cree un nuevo archivo vacío llamado index.php. Edité el archivo y solo agregué un texto aleatorio, para que podamos ver más fácilmente cuándo está en uso:

Tutorial de temas de WordPress para principiantes - Parte 1: Introducción

¡Ya estamos a mitad de camino! Vamos a crear el segundo archivo requerido. Dentro de la carpeta de su tema, cree un nuevo archivo vacío llamado style.css.

Abra el style.cssarchivo e inmediatamente inicie un bloque de comentarios (/*y ciérrelo con */). Dentro de este bloque de comentarios, debemos seguir algunas reglas de WordPress sobre cómo definir nuestro tema. Como mínimo necesitamos definir el nombre de nuestro tema. Pero también podemos agregar información sobre quién es el autor, página de inicio, número de versión, información de licencia y mucho más. Consulte la documentación de WordPress sobre lo que puede agregar.

En este tutorial lo mantendremos simple; agregaremos el nombre del tema y escribirás tu propio nombre como autor. Puede continuar y usar cualquier nombre que desee, esto es lo que ingresé en mi style.css:

/* Theme Name: A White Pixel Theme Author: Alex White */

Guarde y cierre el archivo (este tutorial no volverá a tocar este archivo), a menos que desee escribir CSS para su tema a medida que avanza.

¡Felicidades! ¡Ya ha creado un tema de WordPress válido!

Activando tu tema

Vayamos al panel de administración de WordPress y vayamos a "Apariencia > Temas", y veamos si podemos encontrar nuestro tema allí.

Tutorial de temas de WordPress para principiantes - Parte 1: Introducción

Haga clic en el botón Activar y visite su sitio. ¡Deberías ver todo lo que escribiste en index.php!

Esta index.phpplantilla se utilizará independientemente de la página en la que se encuentre. Intenta ver una sola publicación y verás lo mismo. Un tema debe tener como mínimo de 5 a 10 plantillas para manejar diferentes contenidos. No te preocupes, llegaremos allí.

Impresionante, tenemos un tema! En la próxima lección, comenzaremos a codificar en él y haremos que haga cosas.

Fuente de grabación: awhitepixel.com

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More