Inicial: Desarrollo de Temas y Plugins en WordPress

por

WordPress debe buena parte de su flexibilidad a los temas y los plugins: con ellos cambias el aspecto del sitio y añades funcionalidades sin tocar el núcleo. En este artículo verás por qué importan, cómo se estructuran y con qué herramientas puedes empezar a desarrollar los tuyos.

En este artículo tienes:

Temas de WordPress: apariencia y experiencia

El tema define cómo se ve tu web y cómo se navega por ella: maquetación, tipografía, menús, cabecera, pie de página. Estas son las razones por las que conviene elegirlo (o crearlo) con criterio.

Por qué importa el tema

  1. Primera impresión: Es lo primero que ve el visitante. Un diseño claro y coherente transmite profesionalidad.
  2. Marca: Permite alinear la web con la identidad de tu marca (colores, estilo, tono visual).
  3. Experiencia de uso: La estructura del contenido y la navegación influyen en que la gente encuentre lo que busca y se quede.
  4. Responsive: Un buen tema se adapta a móvil, tablet y escritorio sin que el diseño se rompa.

Qué lleva un tema por dentro

  1. Archivos de plantilla (PHP): Definen la estructura de cada tipo de página. Los básicos son index.php, header.php, footer.php, single.php, page.php, etc.
  2. CSS: Las hojas de estilo dan el aspecto visual: colores, fuentes, márgenes, maquetación. El tema suele incluir un style.css principal y, si hace falta, archivos adicionales.
  3. functions.php: Aquí se añaden funciones propias del tema: menús, soporte para widgets, tamaños de imagen, etc. Todo lo que extiende el comportamiento por defecto de WordPress.

Personalizar sin romper el tema original

  1. Temas hijo (child themes): Permiten modificar un tema instalado sin editar los archivos del tema padre. Heredas estilos y plantillas y solo sobrescribes lo que necesites. Así, cuando el tema se actualice, no pierdes tus cambios.
  2. Frameworks: Genesis, Underscores (_s) y otros ofrecen una base de código y buenas prácticas para desarrollar temas más rápido y mantenibles.

Ejemplo de estructura básica de un tema

/wp-content/themes/tu_tema/
    index.php
    style.css
    functions.php
    /js
        custom-script.js
    /css
        styles.css
    /images
        logo.png

Archivo index.php

<?php
get_header(); // Incluir la cabecera del sitio
?>

<div class="content">
    <?php
    if (have_posts()) :
        while (have_posts()) : the_post();
            the_title('<h2>', '</h2>');
            the_content();
        endwhile;
    endif;
    ?>
</div>

<?php
get_footer(); // Incluir el pie de página
?>

Archivo style.css

/* Estilos generales del tema */
body {
    font-family: Arial, sans-serif;
}

.content {
    max-width: 800px;
    margin: 0 auto;
}

h2 {
    color: #333;
}

Archivo functions.php

<?php
// Registrar menú de navegación
function registrar_menu_principal() {
    register_nav_menu('menu-principal', __('Menú Principal'));
}
add_action('after_setup_theme', 'registrar_menu_principal');
?>

index.php es la plantilla principal que saca el contenido del blog (cabecera, entradas, pie). style.css define el aspecto del tema y functions.php añade cosas como menús o soporte para imágenes destacadas. En un tema real estos archivos crecen según lo que necesites; este es solo el esqueleto para que veas la idea.

En definitiva

El tema marca la apariencia y la forma de navegar por tu web. Conocer sus piezas (plantillas, CSS, functions.php) y usar temas hijo o frameworks te permite personalizar sin liarla. Lo que siga lo irás ganando con práctica y probando cambios en un entorno local.

Desarrollo de plugins

Los plugins añaden funcionalidad al sitio sin depender del tema: formularios, SEO, copias de seguridad, shortcodes, etc. Aquí va lo mínimo para entender cómo se monta uno.

Estructura de un plugin

  1. Archivo principal: Un archivo PHP con la cabecera del plugin (nombre, descripción, versión, autor). WordPress lo detecta y lo lista en «Plugins». Ahí enlazas las funciones que dan la funcionalidad.
  2. Funciones: Todo lo que hace el plugin (shortcodes, hooks, ajustes) se define en ese archivo o en otros que incluyas desde él.

Estructura mínima de carpeta

/wp-content/plugins/tu_plugin/
    tu_plugin.php

Ejemplo: plugin con shortcode

Un plugin sencillo que registra el shortcode [mostrar_mensaje] y muestra un texto donde lo pongas en una página o entrada:

<?php
/*
Plugin Name: Mi Plugin Simple
Description: Plugin de ejemplo. Añade el shortcode [mostrar_mensaje].
Version: 1.0
Author: Tu Nombre
*/

function mostrar_mensaje() {
    return '<div class="mi-mensaje">¡Hola, este es mi mensaje personalizado!</div>';
}
add_shortcode('mostrar_mensaje', 'mostrar_mensaje');

Guarda este código en un archivo .php dentro de /wp-content/plugins/mi-plugin-simple/ (por ejemplo mi-plugin-simple.php). Activa el plugin en el escritorio de WordPress y escribe [mostrar_mensaje] en cualquier entrada o página; verás el mensaje donde hayas puesto el shortcode.

Herramientas y recursos

Para desarrollar temas y plugins con comodidad conviene tener un entorno local, un buen editor y la documentación a mano. Esto es lo que más se usa:

Entorno local

Trabajar en local te permite probar sin afectar el sitio en vivo. Algunas opciones:

  • Local by Flywheel: Muy usado para WordPress: servidor, base de datos y PHP en un solo paquete, fácil de instalar.
  • XAMPP: Apache, MySQL, PHP y Perl en uno. Gratuito y válido para montar WordPress en tu equipo.
  • Docker: Contenedores que puedes llevar a cualquier máquina. Útil si ya trabajas con Docker o quieres replicar el mismo entorno en varios sitios.

Editores de código

  • Visual Studio Code: Gratuito, muchas extensiones (PHP, WordPress, Git) y muy usado en desarrollo web.
  • Sublime Text: Ligero y rápido, ideal si prefieres algo minimalista.
  • PhpStorm: De pago, orientado a PHP. Refactorización, autocompletado y depuración muy potentes para proyectos grandes.

Documentación de WordPress

La documentación oficial es la referencia para APIs, funciones, hooks y buenas prácticas. Consulta el Codex y la documentación para desarrolladores en WordPress.org.

Comunidades y foros

Cursos y tutoriales

Con un entorno local, un editor que te guste y la documentación a mano ya puedes empezar a tocar temas y plugins con seguridad. Si algo se rompe, no afecta al sitio en producción.