Creación de Temas de WordPress

Introducción

Un tema de WordPress es un conjunto de archivos que determinan el diseño y la funcionalidad de un sitio web WordPress. Esta guía te ayudará a profundizar en el desarrollo de temas y a consolidar tus conocimientos a través de ejercicios prácticos.

Estructura Básica de un Tema

Un tema de WordPress debe contener, como mínimo, los archivos style.css y index.php. Sin embargo, un tema completo generalmente incluye muchos más archivos.

Recordatorio del Loop de WordPress

El Loop es el mecanismo principal para mostrar contenido en WordPress.

<?php
if (have_posts()):
    while (have_posts()) :
        the_post();
        // Contenido de cada entrada/página
        the_title('<h2>', '</h2>');
        the_content();
    endwhile;
else:
    echo '<p>No hay contenido para mostrar</p>';
endif;
?>
            

Jerarquía de Plantillas

WordPress busca plantillas específicas en un orden determinado. Si no encuentra una plantilla, utiliza la siguiente en la jerarquía, llegando eventualmente a `index.php`.

• Páginas individuales: `page-{slug}.php` → `page-{id}.php` → `page.php` → `index.php`.
• Entradas individuales: `single-{post-type}-{slug}.php` → `single.php` → `singular.php` → `index.php`.
• Archivos: Siguen una jerarquía similar para categorías, etiquetas, autores, fechas, etc

Funciones Esenciales para Crear Temas

Incluir Header y Footer

<?php get_header(); ?>
<!-- Contenido de la página -->
<?php get_footer(); ?>
            

Incluir Sidebar

<?php get_sidebar(); ?>
            

Cargar Estilos y Scripts

Se realiza en el archivo functions.php.

function mi_tema_scripts() {
    wp_enqueue_style('mi-estilo', get_stylesheet_uri()); // Cargar hoja de estilos principal 
    wp_enqueue_script('mi-script', get_template_directory_uri() . '/assets/js/script.js'); // Cargar script personalizado 
}
add_action('wp_enqueue_scripts', 'mi_tema_scripts');
            

Registrar Menús

Se registra en functions.php y se muestra en archivos como header.php.

function registrar_mis_menus() {
    register_nav_menus(array(
        'menu-principal' => 'Menú Principal',
        'menu-footer' => 'Menú del Footer'
    ));
}
add_action('init', 'registrar_mis_menus');
            

// En header.php
<?php
wp_nav_menu(array(
    'theme_location' => 'menu-principal',
    'container' => 'nav',
    'container_class' => 'menu-principal-container'
));
?>
            

Registrar Widgets

Se registra en functions.php y se muestra en sidebar.php.

function registrar_mis_widgets() {
    register_sidebar(array(
        'name' => 'Widget Lateral',
        'id' => 'sidebar-1',
        'before_widget' => '<div class="widget">',
        'after_widget' => '</div>',
        'before_title' => '<h3 class="widget-title">',
        'after_title' => '</h3>'
    ));
}
add_action('widgets_init', 'registrar_mis_widgets');
            

// En sidebar.php
<?php
if (is_active_sidebar('sidebar-1')) {
    dynamic_sidebar('sidebar-1');
}
?>
            

Añadir Soporte para Características

Se realiza en functions.php.

function configurar_tema() {
    add_theme_support('post-thumbnails'); // Imágenes destacadas 
    add_theme_support('title-tag'); // Título del sitio 
    add_theme_support('custom-logo', array( // Logotipos personalizados 
        'height' => 100,
        'width' => 400,
        'flex-height' => true,
        'flex-width' => true
    ));
    add_theme_support('post-formats', array( // Formatos de entrada 
        'video', 'audio', 'gallery', 'quote'
    ));
}
add_action('after_setup_theme', 'configurar_tema');
            

Recursos Adicionales

• Documentación oficial de WordPress: Theme Developer Handbook.
• Tema _s (Underscores): Un tema inicial para desarrolladores: https://underscores.me/
• WordPress Codex: https://codex.wordpress.org/Theme_Development
• WordPress.org Theme Review Guidelines: https://make.wordpress.org/themes/handbook/review/

Consejos Finales

• Desarrollo iterativo: Comienza con un tema simple y añade características gradualmente.
• Uso de child themes: Para personalizar temas existentes sin modificar el original.
• Depuración: Usa `WP_DEBUG` en tu archivo `wp-config.php` durante el desarrollo.
• Validación: Usa herramientas como Theme Check para validar tu tema antes de distribuirlo.
• Internacionalización: Prepara tu tema para traducciones usando funciones como `__()` y `_e()`.