Crear un tema en WordPress
Qué es un tema de WordPress
WordPress es uno de los CMS más populares y con mayor comunidad en el mundo. Aparte de tener una extensa documentación y funcionalidades que nos permiten desarrollar encima de él, es muy flexible a la hora de personalizar nuestros sitios sin desaprovechar las ventajas que tiene el usarlo de manera correcta.
Un tema de WordPress es la cara visible de nuestro sitio y nos permite crear las páginas, contenido y estructura de nuestro sitio de una manera ordenada. Estos temas pueden funcionar de distintas maneras, todas ellas válidas y dependerán del proceso que se seguirá para crear nuestro sitio:
- Page Builders: Estos nos permiten crear nuestros sitios usando una sencilla interface Drag & Drop de componentes configurables, haciendo la creación de páginas muy sencilla. Ejemplos: Elementor, Phlox, Divi, Kristal Themes. Contras: Cargan demasiados archivos innecesarios haciendo que nuestro sitio cargue lento. Muchos de esos fallan las pruebas de Google Core Web Vitals.
- Child Theme: Hacer un child theme es utilizar un tema activo de WordPress y extender sus funcionalidades o personalizarlo. Nos permite ahorrarnos algunas líneas de código y la creación de la estructura del tema. Contras: Tu sitio probablemente no se adapte al 100 a la estructura del tema padre y tengas que modificar mas de la cuenta. Acá podrás encontrar la documentación para crear un child theme de WordPress.
- Tema personalizado: Podemos crear un tema completamente personalizado siguiendo las reglas básicas para esto. No es complicado, pero si requires poner atención a todos los detalles para que no se te escape nada esencial. Para esto puedes apoyarte con Bootstrap, Materialize, Advanced Custom Fields, etc. Un tema de este tipo, es un traje a la medida, no cargas nada de más ni de menos y tienes total control de lo que carga tu sitio. Contras: pudiera tomarte un poco de tiempo la configuración inicial y pudiera escaparse algún detalle importante.
Lo necesario para crear un tema en WordPress
Para crear un tema personalizado en WordPress, es necesario crear la siguiente estructura de archivos dentro del folder /wp-content/themes
- Un folder con el nombre de mi tema. Tendrá que ir en minúsculas y sin espacios: por ejemplo, mi-tema
- Dentro de ese folder hay que crear algunos archivos nuevos, después nos enfocaremos en el contenido de cada uno. Por ahora, solo hay que crearlos.
- mi-tema
- footer.php
- functions.php
- header.php
- index.php
- screenshot.png
- style.css
Archivos
style.css
Este archivo por ahora solo contendrá la definición de nuestro tema. Copia y pega lo siguiente y personalizalo a tu gusto. Esta información aparece en el administrador de WP y sirve para validar e identificar tu tema.
@charset "UTF-8"; /* Theme Name: Mi Tema de WordPress Author: Mi Nombre Description: Este es un tema de WordPress usando Bootstrap y Advanced Custom Fields. Version: 1.0 Tested up to: 5.9 */
header.php
Este archivo lleva la parte inicial de la estructura de nuestros templates, además de elementos como el menú principal, head (donde se definen los metadatos, archivos adicionales, etc. En otro post se describirá qué hacer en este archivo y las mejores prácticas para hacerlo.
<html>
<head>
</head>
<body>
<nav>
</nav>
<main>
footer.php
Este archivo lleva la parte final de la estructura de nuestros templates, además de elementos como menús, copyright, etc. En otro post se describirá qué hacer en este archivo y las mejores prácticas para hacerlo.
Por ahora sólo cerraremos nuestra estructura.
</main>
<footer>
</footer>
</body>
</html>
functions.php
Aquí se define el comportamiento de nuestro tema usando, generalmente, funciones de WordPress: Cargaremos estilos, scripts, agregaremos funcionalidades como thumbnails, títulos, posiciones de menú, opciones, etc. Por ahora, puede quedar vacío.
screenshot.png
Es una imagen estática de tu tema. Sirve para identificarlo más fácilmente en WordPress.
index.php
En este archivo irá el contenido. Por ahora lo dejaremos como sigue. Imprimirá en todas las páginas Here goes the content.
<?php
get_header();
?>
Here goes the content
<?php
get_footer();
?>
Templates
De la misma manera que creamos el archivo index.php, podemos crear otros con estructuras diferentes para todas las páginas de nuestro sitio.
Todos nuestros templates usarán los mismo archivos (footer, header, styles, etc) el contenido (lo que está dentro del <main> es lo que cambiaría.
Activar el tema
Para activar el tema, hay que entrar al panel administrador de WordPress (/wp-admin). En la barra lateral de la izquierda, busquen Apariencia > Temas.
Aparecerán los temas instalados, elijan el que acaban de crear y presionen en Activar.
Tag:WordPress
You may also like
