Crea tu propio tema de WordPress

En artículos anteriores, hemos examinado cómo puede personalizar un sitio web de WordPress, crear su propio tema secundario o plantillas.

Hoy, vamos a ver cómo puede crear su propio tema de WordPress. ¡Vámonos!

¿Por qué construir su propio tema de WordPress?

WordPress proporciona múltiples formas de personalizar su sitio web. Entonces, ¿por qué sentirías la necesidad de crear tu propio tema? En algunos casos, es posible que los temas listos para usar no encajen con el diseño de su marca o no tengan las funciones que necesita. Un tema personalizado podría resolver este problema y brindarle exactamente el estilo de sitio que desea con todas las funciones que necesita sin tener que depender de un tema de terceros.

Requisitos antes de crear un tema

Para poder replicar los siguientes pasos en el ejemplo a continuación, necesitamos tener una instalación de WordPress configurada y lista para funcionar, ya sea localmente o en un espacio de servidor que usted administre. No intente esto en un sitio en vivo. Cree un entorno de prueba en su lugar.

También se requiere un conocimiento práctico y comprensión de CSS, PHP y HTML.

Crear el tema

Nombraremos nuestro tema "Mi primer tema". El primer paso es crear los archivos necesarios para que el tema sea visible en el área de administración. Para ello crearemos un archivo style.css e index.php.

Creamos una subcarpeta para nuestro tema, bajo la carpeta wp-content/themes/ que llamamos “mi-primer-tema” y agregamos estos 2 archivos a esa carpeta.

En este punto, el tema debería estar visible como opción en el área de administración.

Si falta alguno de esos archivos, recibirá un mensaje de advertencia de que el tema está roto. Por ejemplo, si falta index.php, verá algo como esto:

Dentro del archivo style.css agregaremos algunos comentarios que le informen a WordPress sobre nuestro tema. La información más importante es el nombre bajo el que aparecerá. Aparte de eso, puede decir quién es el autor o proporcionar un URI de autor para que los usuarios puedan visitar un sitio web para obtener más información sobre su tema. Proporcione una descripción para que se muestre en la ventana emergente modal del tema de administración y la versión de la instalación.

 /* Theme Name: My First Theme Author: Dev Loper Author URI: https://my-first-theme.com Description: This is my theme's description Version: 1.0 */

NOTA: También puede definir su licencia. Si desea que su tema se distribuya en WordPress, su tema debe ser compatible con GPL.

Si necesita mostrar una imagen de logotipo, inserte un archivo screenshot.png en el mismo espacio donde se encuentran los archivos style.css e index.php.

Ahora, si activa su tema en la pantalla de administración de temas, debería ver algo como esto:

Y si hace clic en "Detalles del tema", debería ver esto:

Archivos de temas

Ahora es el momento de escribir algo de código en el archivo index.php. Como prueba, abra el archivo con su editor favorito e inserte cualquier tipo de elemento HTML, por ejemplo

 <h1>My First Theme's Content</h1>

Guarde el archivo y visite el front-end. Solo debería ver el encabezado "Contenido de mi primer tema"

En este punto, debe decidir qué diseño tendrá su tema.

Diseño del tema

Las rutas a seguir desde aquí son ilimitadas. Le recomendamos encarecidamente que se tome su tiempo y estudie cómo funcionan los temas de WordPress. Más importante aún, asegúrese de comprender completamente la jerarquía de la plantilla antes de continuar con la estructuración de su propio tema.

Aloje su sitio web con Pressidium

GARANTÍA DE DEVOLUCIÓN DE DINERO DE 60 DÍAS

VER NUESTROS PLANES

En pocas palabras, lo que hace WordPress es proporcionar una forma de llamar a diferentes archivos php según el tipo de contenido. Esto se logra con consultas. Una consulta verifica si la página vista actualmente tiene publicaciones o es una página de resultados de búsqueda o cualquier otro tipo de contenido, y genera el código correspondiente.

Un ejemplo clásico es separar el encabezado y el pie de página creando archivos individuales para cada uno de ellos. Para ver un ejemplo muy simplificado de cómo puede hacerlo usted mismo, inserte este fragmento de código en el archivo index.php.

 <!doctype html> <html> <head> <?php wp_head(); ?> </head> <body> <div class="site"> <header class="site-header"> <?php // LOGO // TITLE // MENU ?> </header> <main class="site-main"> <h1>My First Theme's Content</h1> <?php // POSTS LOOP ?> </main> <footer class="site-footer"> <?php // FOOTER INFO ?> </footer> </div> <?php wp_footer(); ?> </body> </html>

Este código, que utiliza las funciones de WordPress wp_head() y wp_footer(), proporciona un diseño de contenido predeterminado que incluye un encabezado con el logotipo, el título y el menú, el cuerpo principal donde las consultas mostrarán el contenido correcto y un pie de página que contiene la información del sitio.

Si deseamos dividir este código y usar archivos header.php y footer.php separados, debe crear los archivos en la carpeta del tema.

Y divide el código así:

Índice.php

 <?php get_header(); ?> <main class="site-main"> <h1>My First Theme's Content</h1> <?php // POSTS LOOP ?> </main> <?php get_footer();

Encabezado.php

 <!doctype html> <html> <head> <?php wp_head(); ?> </head> <body> <div class="site"> <header class="site-header"> <?php // LOGO // TITLE // MENU ?> </header>

Pie de página.php

 <footer class="site-footer"> <?php // FOOTER INFO ?> </footer> </div> <?php wp_footer(); ?> </body> </html>

¡Y eso es! ¡Has creado tu primer tema!

Temas de inicio

Anteriormente analizamos cómo crear un tema manualmente... qué archivos deben crearse y qué código puede incluir. Sin embargo, si ya está familiarizado con esto, puede ahorrar algo de tiempo descargando un tema de inicio de WordPress en segundos. Pruebe el guión bajo, por ejemplo, donde puede dar un nombre y descargar el archivo zip del tema de inmediato.

Impresionante, ¿verdad?

Conclusión

Un tema de WordPress personalizado es una gran solución cuando necesita más flexibilidad como desarrollador. Crear un tema puede parecer un proceso desalentador. Con suerte, como este artículo ha demostrado, en realidad es bastante fácil de hacer. La clave es no apresurarse antes de comenzar a codificar. Dé un paso atrás, estudie la estructura del tema que cumpla con sus requisitos y luego hágalo.