¿Puedo hacer mi tema WordPress?
Sí que puedes.
¿Cómo crear un tema de WordPress?
Tras adquirir tu Hosting WordPress, <<te recomiendo>>…
El mejor Hosting
crear un tema requiere tener un conocimiento básico del CMS y del API.
Que nos ofrece, para poder acceder a los contenidos y presentarlos a nuestro modo, así como para integrar los bloques típicos que componen un sitio, como menús, widgets y otros elementos.
Sin embargo, salvado este punto, resultará una tarea sencilla para todos aquellos que ya tienen conocimientos sobre los lenguajes básicos de la web: HTML, CSS y quizás un poco de Javascript.
Crear temas en WordPress es una buena idea si nos interesa obtener una personalización completa de nuestro sitio web y, además, no depender de las plantillas que otros hayan desarrollado.
Obviamente, requiere una cantidad de trabajo muy superior a la que supone instalar cualquier tema y personalizarlo a nuestro gusto, pero los resultados siempre serán mucho más adaptados a nuestras necesidades, a la vez que mantenemos el control completo del sitio web.
Primeros pasos para crear un tema de WordPress
Para ello nos dirigimos a la ruta wp-content/themes y allí creamos una carpeta con el nombre del tema que vamos a construir. Nuestro tema lo vamos a llamar «MyBlog», así que la que vamos a crear estará en la ruta wp-content/themes/myblog.
Un tema no es más que una carpeta que contiene los archivos básicos que componen todo sitio web, lease, los archivos PHP, CSS y Javascript.
Bueno empieza a apuntar que ya es mucho.
Dentro de la carpeta vamos a colocar un par de archivos para componer los elementos esenciales de todo tema de WordPress:
php: que contendrá el código de nuestra plantilla principal.
css: que contendrá los estilos del sitio web y toda una serie de metadatos para definir el tema nuevo.
Definición del archivo style.css
La definición de este archivo es fundamental en la creación de nuestra plantilla de WordPress, ya que es donde vamos a declarar el nombre del tema, el autor y toda una serie de datos extra. Por supuesto, además de todos estos metadatos, colocaremos los estilos de nuestro sitio web.
Estos serían los datos mínimos a colocar en nuestro archivo de estilos CSS, junto con unas primeras declaraciones de aspecto del sitio web.
/*
Theme Name:MyBlog
Theme URI: http://url-tema-myblog.example.com
Author: Nicolás
Author URI: https://www.nicolás.es
Description: Creamos este template a modo de demostración
Version: 0.0.1
Tags: responsive, demo theme wordpress
*/
body {
font-size: 16px;
background-color: #f0f0f0;
padding: 1rem;
}
Como puedes ver, el comentario del principio de este CSS indica los datos del tema. Estos son muy importantes a la hora de categorizar el tema y aclarar su procedencia.
Una vez creada la carpeta y el archivo style.css, tu tema ya debe estar visible desde el panel de administración de WordPress y podrías seleccionarlo como cualquier otro ya instalado en el CMS.
Sin embargo, todavía es un poco pronto para activarlo, ya que será fundamental crear también algo de código para generar su contenido HTML.
Plantilla principal del tema
Ahora vamos a abordar el archivo index.php de nuestro tema, que sirve para definir la plantilla principal. En este archivo colocaremos el código PHP para generar el HTML que debe ser enviado al cliente, que podrá ser tan complejo como lo requiera el proyecto.
Aquí veremos una sencilla aproximación a lo que sería la programación del tema que nos permita mostrar un listado de las últimas entradas del blog.
<!DOCTYPE html>
<html lang=»en»>
<head> <meta charset=»UTF-8″> <meta name=»viewport» content=»width=device-width, initial-scale=1.0″> <title>Inicial Theme</title> <link href=»https://fonts.googleapis.com/css?family=Nunito:300,400,700&display=swap»rel=»stylesheet»> <link rel=»stylesheet» href=»<?= get_template_directory_uri() ?>/style.css»> </head>
<body> <div class=»container»>
<header class=»»>Inicial Theme</header> <main> <?php if ( have_posts() ) { while ( have_posts() ) { the_post(); ?> <h1><?= the_title(); ?></h1> <div><?= the_content(); ?></div> <?php } } ?> </main> <footer> @ Mi tema 2020 </footer>
</div> </body>
</html>
En este código encontramos dos ejemplos interesantes de las herramientas que nos aporta WordPress para programar los sitios web.
La función get_template_directory_uri(). Esta es interesante para crear un enlace con los archivos del template, en este caso la hora de estilo, de manera que WordPress nos asegure que la ruta va a funcionar correctamente. Debemos usar este tipo de rutas para enlazar correctamente los assets del tema, como es el caso de la hoja de estilo CSS.
Loop de WordPress. Vemos también un ejemplo de iteración de WordPress para la extracción de contenido, es lo que se conoce como Loop de WordPress.
Activar el tema desarrollado
Ahora podrías activar este tema, del mismo modo que activas cualquier otro tema de WordPress, en la sección Apariencia > Temas. Allí encontrarás el nuevo tema que acabas de crear, con el nombre tal como hayas indicado en el archivo style.css.
Conseguir que se muestre una miniatura del tema es tan sencillo como añadir la correspondiente imagen en la carpeta del theme, junto con los archivos index.php y style.css, con el nombre de «screenshot.png».
Siguientes pasos en el desarrollo del tema
Llegado a este punto, WordPress nos ofrece multitud de herramientas para descomponer el template en segmentos (como cabecera o pie) que puedan ser reutilizados a lo largo de las diversas plantillas del sitio web, así como la posibilidad de escribir funciones que nos permitan inyectar código adicional en la parte de la cabecera y el pie, así como otras secciones de este template.
En este ejemplo se recorren los post recientes, comenzando por el más nuevo, y para cada uno se escribe su título y cuerpo. Para ello usamos un bucle while de PHP y en cada iteración funciones diversas del API de WordPress necesarias para acceder a sus contenidos.
Por supuesto, también podemos crear diversos archivos adicionales, con plantillas personalizadas para un detalle de un post, para una página, etc. Son solamente algunas de las muchas posibilidades que nos ofrece el desarrollo de temas de WordPress.
Si te interesa el desarrollo y personalización del CMS, recuerda que en blog de Nicolás hemos publicado también otros post dedicados a temas tan interesantes como ¿Puedo hacer mi Plugin WordPress?.
¿Te has quedado con alguna duda o pregunta? Entonces te pido que dejes un comentario. Da igual que sea o una duda o un simple gracias, pero me alegraré mucho de leerlo y responderlo.
¡Cuéntame en los comentarios!
Enlaces internos: