WordPress es un sistema de gestión de contenidos (CMS, content management system) muy popular para crear blogs, tiendas de comercio electrónico y otros sitios web. Destaca por su flexibilidad, ya que admite miles de temas gratuitos y de pago en varias plataformas, lo que ayuda a acelerar el proceso de creación de sitios web.
Sin embargo, el verdadero poder de WordPress reside en sus opciones de personalización, ya que puedes ajustar la apariencia de tu sitio con varios constructores de páginas y temas de bloques para adaptarlos a tu gusto. Pero, ¿y si estas opciones siguen sin satisfacer tus necesidades específicas? La buena noticia es que puedes desarrollar tu tema desde cero.
Esta guía describe la creación de un tema clásico de WordPress. Aprenderás a crear un tema paso a paso, lo que te proporcionará la base para crear temas más avanzados en el futuro.
Requisitos previos
Desarrollar tu tema desde cero es un proceso técnico que implica escribir código. Debes estar familiarizado con lo siguiente:
- PHP — Esencial para añadir funcionalidad y contenido dinámico a tu tema. Es la columna vertebral de WordPress.
- HTML — Se utiliza para crear la estructura de las plantillas de tu tema.
- CSS — Se utiliza para dar estilo a tu tema y garantizar que se vea bien en diferentes dispositivos y navegadores.
Además, crear un entorno de desarrollo es crucial. Puedes crear uno con DevKinsta, una suite de desarrollo local para sitios de WordPress, siguiendo estos pasos:
- Visita el sitio web de DevKinsta para descargar la aplicación para tu sistema operativo.
- Sigue las instrucciones de instalación para tu sistema operativo.
- Abre DevKinsta y haz clic en Nuevo sitio WordPress.
- A continuación, selecciona la opción Nuevo sitio WordPress y rellena los campos Nombre del sitio, Nombre de usuario del administrador de WordPress y Contraseña del administrador de WordPress.
- Por último, haz clic en Crear sitio y espera entre 30 y 60 segundos a que se cree el sitio.
Una vez creado tu sitio, podrás previsualizarlo, acceder a tu panel de control de WP e incluso ver la ruta del archivo a la instalación local de WP en tu ordenador, lo que te dará acceso a todo el código.
Comprender la estructura de temas de WordPress
Antes de sumergirte en el proceso paso a paso de creación de tu tema clásico, es esencial que comprendas la estructura de un tema clásico de WordPress y los archivos clave implicados. Este conocimiento te proporcionará una base sólida para el desarrollo de tu tema.
El directorio de temas de WordPress
Todos los temas de WordPress se almacenan en el directorio wp-content/themes directory de tu instalación de WordPress. Cada tema reside en su carpeta dentro de este directorio.
Archivos clave en un tema de WordPress
Hay dos archivos principales que todo tema clásico de WordPress debe tener:
index.php— Este es el archivo de plantilla principal que sirve de respaldo para todos los demás archivos de plantilla. Es el archivo principal que WordPress utiliza para mostrar el contenido.style.css— Este archivo contiene los metadatos del tema y los estilos CSS personalizados. Es crucial para definir la apariencia del tema y proporcionar información esencial, como su nombre, autor y versión.
Para estructurar bien tu tema y añadirle funcionalidad, puedes utilizar archivos de plantilla adicionales, como los siguientes, que son comunes a los temas clásicos y se utilizan en el tema de ejemplo creado en esta guía:
header.php: Este archivo puede contener la sección de cabecera de tu tema, incluyendo el logotipo del sitio y el menú de navegación.footer.php: Este archivo debe contener la sección de pie de página de tu tema.functions.php: Este archivo se puede utilizar para añadir funciones personalizadas, características y opciones de soporte del tema.single.php: Este archivo de plantilla se utiliza para mostrar entradas individuales del blog.page.php: Este archivo de plantilla se utiliza para mostrar páginas estáticas.
Ahora que ya conoces los archivos esenciales y sus funciones, pasemos al proceso paso a paso de creación de tu tema clásico de WordPress.
Cómo crear un tema clásico de WordPress
Hay un dicho popular que dice que la mejor forma de aprender es haciendo. Apliquemos ese principio creando un tema de blog clásico que muestre tus entradas de WordPress en la página de inicio con un estilo CSS personalizado y funciones adicionales.
Paso 1: Crear una nueva carpeta de temas
Crea una carpeta dentro del directorio themes, como myblogtheme.
Paso 2: Añadir información de metadatos del tema
A continuación, vamos a configurar los detalles del tema en el archivo style.css. Aquí tienes un ejemplo de información de metadatos que puedes incluir en style.css:
/*
Theme Name: Kinsta Blog Theme
Author: Joel Olawanle
Author URI: https://kinsta.com/blog/author/joelolawanle/
Description: A thoughtfully designed WordPress theme crafted specifically to illustrate the theme creation process. This theme provides a clean, responsive layout suitable for showcasing articles and tutorials, making it an ideal choice for blog posts and educational content related to web development and design.
Version: 1.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/En el código anterior
- Theme Name: El nombre de tu tema que aparece en el área de administración de WordPress en Apariencia > Temas.
- Author: Muestra el nombre del creador del tema.
- Author URI: Enlaza con el sitio web o el perfil del autor.
- Description: Proporciona una visión general de la finalidad y características del tema.
- Version: Indica la versión actual del tema para las actualizaciones.
- License: Especifica las condiciones de distribución.
- License URI: Enlaza con el texto completo de la licencia.
Puedes obtener más información sobre estos campos en el Manual de temas de WordPress.
Después de añadir esta información a tu archivo style.css, ve a Apariencia > Temas en tu área de administración de WordPress. Verás el tema recién creado en la lista. Cuando hagas clic para ver los detalles del tema, verás que aparece toda la información que has añadido.
Ahora que tenemos el archivo style.css configurado, pasemos a crear los demás archivos esenciales del tema.
Paso 3: Crear el archivo de plantilla principal para tu tema
El archivo index.php sirve como archivo de plantilla principal para tu tema. Cualquier código que añadas aquí se utilizará para mostrar el contenido principal de tu sitio.
Por ejemplo, si añades algo de código HTML básico aquí, todo se mostrará cuando actives y previsualices el tema. En cambio, si quieres extraer información de tu CMS de WordPress para mostrarla a través del archivo de plantilla de tu tema, aquí es donde utilizas PHP para añadir funciones de WordPress.
Este es el aspecto que puede tener la estructura básica del archivo index.php:
<?php get_header(); ?>
<main>
</main>
<?php get_footer(); ?>En la estructura anterior, get_header() y get_footer() se utilizan para extraer las secciones de cabecera y pie de página de sus respectivos archivos de plantilla (header.php y footer.php).
Rellenaremos el archivo index.php con el código adecuado, pero trabajemos primero en las secciones de cabecera y pie de página del tema.
Paso 4: Crear el archivo de cabecera
El archivo header.php muestra la sección de cabecera de tu sitio, que normalmente incluye elementos como el logotipo del sitio y el menú de navegación. También incluye hojas de estilo, scripts y metaetiquetas. Este es el aspecto de nuestro archivo header.php:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="<?php bloginfo('charset'); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header class="header-container">
<div class="my-logo">
<?php
if ( function_exists('the_custom_logo') && has_custom_logo() ) {
the_custom_logo();
} else {
// Fallback image
?>
<a href="<?php echo home_url('/'); ?>">
<img src="<?php echo get_template_directory_uri(); ?>/images/dummy-logo.png" alt="<?php bloginfo('name'); ?>" class="custom-logo" width="100px">
</a>
<?php
}
?>
</div>
<nav>
<?php wp_nav_menu(array(
'theme_location' => 'header-menu',
'menu_class' => 'header-menu'
)); ?>
</nav>
</header>Vamos a desglosar y explicar cada parte de este archivo y a añadir las funciones y hooks correspondientes a functions.php.
Empecemos por la sección <head>. Esta sección incluye los metadatos esenciales, el título del sitio, la codificación de caracteres y la función wp_head():
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="<?php bloginfo('charset'); ?>">
<?php wp_head(); ?>
</head>La función language_attributes(); establece los atributos de idioma para el documento HTML. Después, la función wp_head(); es crucial, ya que permite a WordPress y a los plugins insertar elementos esenciales en la sección <head>, como hojas de estilo y scripts.
Enlaza la hoja de estilos añadiendo lo siguiente a functions.php:
function my_custom_theme_enqueue_styles() {
// Enqueue the main stylesheet
wp_enqueue_style('my-custom-theme-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'my_custom_theme_enqueue_styles');La función wp_enqueue_style() añade la hoja de estilos principal a la sección head. Anteponemos a la función el prefijo my_custom_theme para evitar conflictos con otros temas o plugins. Puedes decidir añadirla directamente a la etiqueta head con la etiqueta <link>.
Del mismo modo, vamos a declarar una función para añadir el título del sitio a la sección head:
function my_custom_theme_wp_title() {
add_theme_support('title-tag');
}
add_action('after_setup_theme', 'my_custom_theme_wp_title');Ahora, gracias a la función wp_head(), el estilo y la etiqueta title se añaden a la cabecera de forma dinámica. Puedes comprobarlo inspeccionando tu sitio de WordPress con las herramientas para desarrolladores de tu navegador. En la sección <head>, deberías ver el enlace de la hoja de estilos y la etiqueta de título generada dinámicamente, lo que confirma que están incluidos.
A continuación, en el cuerpo, declaramos la sección navbar donde mostramos un logotipo ficticio y proporcionamos una opción para utilizar un logotipo personalizado cuando se establezca en la identidad del sitio de WordPress:
<body>
<header class="header-container">
<div class="my-logo">
<?php
if ( function_exists('the_custom_logo') && has_custom_logo() ) {
the_custom_logo();
} else {
// Fallback image
?>
<a href="<?php echo home_url('/'); ?>">
<img src="<?php echo get_template_directory_uri(); ?>/images/dummy-logo.png" alt="<?php bloginfo('name'); ?>" class="custom-logo" width="100px">
</a>
<?php
}
?>
</div>La sección del logotipo utiliza la función the_custom_logo() para mostrar un logotipo personalizado si se establece uno. Si no se establece un logotipo personalizado, muestra una imagen por defecto.
Para activar la función de logotipo personalizado, añade el siguiente código a functions.php:
function my_custom_theme_setup() {
add_theme_support('custom-logo', array(
'height' => 100,
'width' => 400,
'flex-height' => true,
'flex-width' => true,
));
}
add_action('after_setup_theme', 'my_custom_theme_setup');Esta función añade soporte para un logotipo personalizado. Por último, la sección del menú de navegación:
<nav>
<?php wp_nav_menu(array(
'theme_location' => 'header-menu',
'menu_class' => 'header-menu'
)); ?>
</nav>
</header>La función wp_nav_menu() muestra el menú de navegación asignado a la ubicación «Header Menu». Para registrar el menú de navegación, asegúrate de tener este código en functions.php:
register_nav_menus(array(
'header-menu' => __('Header Menu', 'my-custom-theme'),
));Este es el aspecto que tendrá ahora tu archivo function.php:
100,
'width' => 400,
'flex-height' => true,
'flex-width' => true,
));
}
add_action('after_setup_theme', 'my_custom_theme_setup');
function my_custom_theme_enqueue_styles() {
// Enqueue the main stylesheet
wp_enqueue_style('my-custom-theme-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'my_custom_theme_enqueue_styles');
// Function to add the site title to the head section
function my_custom_theme_wp_title() {
add_theme_support('title-tag');
}
add_action('after_setup_theme', 'my_custom_theme_wp_title');
?>Siguiendo estos pasos, te aseguras de que tu cabecera admite un logotipo personalizado y muestra un menú de navegación, lo que la hace dinámica y fácilmente personalizable a través del panel de administración de WordPress.
Paso 5: Crear el archivo de pie de página
El archivo footer.php será el responsable de mostrar la sección de pie de página de tu sitio. Para este tema, el archivo footer.php sólo mostrará el año de copyright:
<footer>
<p>Copyright © 2024</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>En este archivo, incluimos la función wp_footer(), de forma similar a como incluimos wp_head() en la cabecera. La función wp_footer() permite a WordPress y a los plugins insertar elementos esenciales, como scripts, justo antes de la etiqueta de cierre </body>. Esto es crucial para garantizar que todos los recursos necesarios se cargan correctamente y que tu sitio funciona como se espera.
Paso 6: Mostrar entradas de blog con el bucle de WordPress
Volvamos al archivo index.php para explicar cómo recorrer y mostrar las entradas de tu sitio de WordPress utilizando el bucle de WordPress, una potente forma de mostrar contenido dinámicamente. Este es el aspecto del bucle:
<div class="my-posts">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<article class="article-loop">
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail(); ?>
<?php endif; ?>
<h2><?php the_title(); ?></h2>
<div class="flex-info">
<p>By: <?php the_author(); ?></p>
<p><?php the_time('F j, Y'); ?></p>
</div>
<?php the_excerpt(); ?>
</article>
</a>
<?php endwhile; else : ?>
<article>
<p>Sorry, no posts were found!</p>
</article>
<?php endif; ?>
</div>El código anterior comprueba si hay entradas que mostrar antes de entrar en el bucle. En el bucle, funciones de WordPress como the_title(), the_author(), the_time('F j, Y'), y the_excerpt() muestran información sobre cada entrada de WordPress.
La función the_post_thumbnail() también se utiliza para mostrar la miniatura, pero está envuelta en una sentencia if, por lo que sólo se muestra cuando hay una imagen destacada para tu entrada. En el archivo functions.php, debemos añadir soporte para miniaturas de entradas con esta función para que haya una opción para subir imágenes destacadas cuando crees nuevas entradas:
add_theme_support('post-thumbnails');Añade esto a la función my_custom_theme_setup() que creamos en el archivo functions.php. Este es el aspecto que tiene ahora el archivo index.php:
<?php get_header(); ?>
<main>
<div class="hero">
<h1>Welcome to my blog!</h1>
<p>Here, you'll find posts on a variety of topics, including programming, web development, and more.</p>
</div>
<div class="my-posts">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<article class="article-loop">
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail(); ?>
<?php endif; ?>
<h2><?php the_title(); ?></h2>
<div class="flex-info">
<p>By: <?php the_author(); ?></p>
<p><?php the_time('F j, Y'); ?></p>
</div>
<?php the_excerpt(); ?>
</article>
</a>
<?php endwhile; else : ?>
<article>
<p>Sorry, no posts were found!</p>
</article>
<?php endif; ?>
</div>
</main>
<?php get_footer(); ?>Observarás que se ha añadido algo de código estático, que será estilizado como un banner que muestra «Welcome to my blog» (Bienvenido a mi blog) y un párrafo de texto.
Paso 7: Crear una plantilla de entrada única
Antes de dar estilo a nuestro tema, vamos a definir una plantilla básica para mostrar entradas individuales del blog al hacer clic desde cualquier página o entrada de tu tema. Para ello, crea un archivo single.php en la raíz de tu tema y añade el siguiente código:
<?php get_header(); ?>
<main>
<section class="single__post">
<article class="article-full">
<div class="single__post-header">
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail(); ?>
<?php endif; ?>
<h2><?php the_title(); ?></h2>
<p>By: <?php the_author(); ?> on <?php the_time('F j, Y'); ?></p>
</div>
<?php the_content(); ?>
</article>
</section>
</main>
<?php get_footer(); ?>En el código anterior, get_header() y get_footer() incluyen la cabecera y el pie de página. En otras partes del código, las funciones de WordPress muestran contenido dinámico.
Paso 8: Crear un archivo de plantilla para las páginas de WordPress
Del mismo modo que creaste una plantilla para las entradas individuales de WordPress, puedes crear una plantilla para mostrar tus páginas de WordPress. Para ello, crea un archivo page.php en la raíz de la carpeta de tu tema y añade el siguiente código:
<?php get_header(); ?>
<main class="wrap">
<section class="">
<article class="article-full">
<div class="page-header">
<h1><?php the_title(); ?></h1>
</div>
<?php the_content(); ?>
</article>
</section>
</main>
<?php get_footer(); ?>Paso 9: Estilizar tu tema
Hasta ahora, hemos creado algunas plantillas básicas para nuestro tema. Ahora, es el momento de añadir estilos personalizados para que tenga un aspecto estupendo. Puedes añadir tus estilos al archivo style.css de la carpeta de tu tema. Para empezar, copia el estilo de este gist de GitHub para el ejemplo de tema creado en esta guía.
Paso 10: Prueba y despliega tu tema
Hasta ahora, has creado con éxito un tema de WordPress. Ahora es el momento de probarlo y desplegarlo.
Primero, asegúrate de que tu tema está activado yendo al panel de administración de WordPress y seleccionando Apariencia > Temas. Si aún no lo has hecho, haz clic en tu tema y actívalo. También puedes hacer clic en el botón Personalizar para establecer la identidad del sitio, ajustar el menú y modificar otros ajustes para asegurarte de que tu sitio se muestra correctamente.
Una vez que estés satisfecho con tu tema, tienes un par de opciones para desplegarlo:
- Envía tu sitio local online: Si estás desarrollando localmente con DevKinsta, puedes enviar fácilmente tu sitio a un entorno staging. Esto te permite probar tu tema en un entorno similar al real antes de pasarlo al entorno real. Puedes encontrar instrucciones detalladas sobre cómo hacerlo en nuestra documentación de DevKinsta.
- Empaqueta y sube tu tema: También puedes empaquetar tu tema en una carpeta comprimida y subirla a tu sitio online. Ve a Apariencia > Temas > Añadir nuevo > Subir Tema en el panel de administración de WordPress y selecciona el archivo comprimido de tu tema para subirlo.
Probar tu tema a fondo en un entorno staging garantiza que todo funciona como se espera antes de lanzarlo. Este paso es crucial para detectar posibles problemas y garantizar que tu sitio tenga un aspecto y un funcionamiento perfectos.
Resumen
En este artículo, hemos creado un tema clásico de WordPress desde cero. Hemos tratado la configuración de los archivos esenciales, cómo añadir estilos personalizados y la creación de plantillas para entradas y páginas individuales.
Si quieres que tu sitio tenga la funcionalidad y el aspecto exactos que deseas, la forma de conseguirlo es desarrollar tu tema de WordPress. Sin embargo, si careces de tiempo, habilidades o ganas de hacerlo, contratar a un profesional puede ayudarte a lograr tu visión de forma eficiente.
Cuando por fin tengas un sitio que se adapte a tus gustos, necesitarás un alojamiento robusto para evitar problemas como tiempos de inactividad, ataques DDoS y otros. Aquí es donde los proveedores de alojamiento premium como Kinsta destacan.
Kinsta ofrece un potente Alojamiento Administrado de WordPress con una arquitectura totalmente en contenedores, impulsado exclusivamente por Google Cloud Platform en la red de Nivel Premium de Google.
Ponte en contacto con nosotros para obtener más información sobre nuestra solución superior de alojamiento administrado.
Deja una respuesta