Guía de introducción al desarrollo de temas de WordPress: construye la apariencia de tu sitio web desde cero.

En el campo del desarrollo de sitios web de la actualidad, WordPress ocupa una posición importante gracias a su gran flexibilidad y su vasto ecosistema. La apariencia y las funciones esenciales de un sitio web basado en WordPress dependen en gran medida de sus temas. Aprender a desarrollar un tema para WordPress desde cero no solo te permitirá tomar el control total del diseño del sitio, sino que también será una excelente forma de comprender en profundidad los principios fundamentales de funcionamiento de WordPress. Este artículo te guiará a través de todos los pasos necesarios para crear un tema básico pero completamente funcional.

Entorno de desarrollo e infraestructura

Antes de escribir el primer línea de código, es de vital importancia establecer un entorno de desarrollo local adecuado. Puedes utilizar herramientas como XAMPP, MAMP, Local by Flywheel o Docker. Asegúrate de que el entorno incluya PHP, MySQL y Apache/Nginx. Luego, instala una nueva instancia de WordPress para realizar pruebas.

Un tema de WordPress es, en esencia, un conjunto de archivos que se encuentran en /wp-content/themes/ Los archivos que se encuentran dentro de la carpeta del directorio corresponden a tu identificador de tema. Dentro de esta carpeta, hay dos archivos que son obligatorios y que constituyen la estructura básica de tu tema.

Lecturas recomendadas Desarrollo de temas para WordPress: Desde los principios hasta la maestría: Creación de sitios web personalizados de alto rendimiento。

Documento de declaración de información sobre el tema

El primer archivo necesario es… style.cssSu función no es solo almacenar los estilos, sino, lo que es más importante, el bloque de comentarios en el encabezado del archivo, que se utiliza para declarar los metadatos del tema a WordPress. Este bloque de información debe colocarse en la parte superior del archivo.

Servidor de WordPress de UltaHost

Garantía de reembolso en 30 días, ancho de banda ilimitado y bases de datos, protección gratuita contra ataques DDoS; descuento del 50% al comprar por 3 años (versiones de 4 TB y 5 TB).

página de acceso

/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme/
Author: Your Name
Author URI: https://example.com/
Description: 这是一个用于学习的入门级 WordPress 主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

Entre ellos,Text Domain Se utiliza para la internacionalización y posteriormente se incorporará en los temas. __() o _e() Cuando una función traduce una cadena de texto, debe hacerlo de manera consistente con los requisitos establecidos.

Funciones principales y archivos de introducción de plantillas

El segundo archivo necesario es… index.phpEs el archivo de plantilla predeterminado para el tema; WordPress lo utiliza para renderizar la página cuando no encuentra un archivo de plantilla más específico. Incluso si está vacío en ese momento, debe existir.

Sin embargo, un enfoque más moderno y estándar es crear uno. functions.php Este archivo es un “plugin de funcionalidades” para tu tema, utilizado para agregar soporte a funciones específicas, menús de registro, barras laterales, así como estilos y scripts relacionados con el manejo de colas de espera. Aunque no es obligatorio, es prácticamente una característica estándar en la mayoría de los temas.

<?php
// 主题功能定义
function my_first_theme_setup() {
    // 让 WordPress 管理文档标题
    add_theme_support( 'title-tag' );
    // 启用文章和评论的 RSS feed 链接
    add_theme_support( 'automatic-feed-links' );
    // 启用文章缩略图（特色图像）功能
    add_theme_support( 'post-thumbnails' );
    // 注册一个导航菜单
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
?>

Crear el archivo de plantilla principal

WordPress utiliza un sistema de niveles de plantillas para determinar qué archivo de plantilla se debe utilizar para una solicitud de página específica. Comprender y crear estos archivos es esencial para el desarrollo de temas. Además… index.phpAl menos necesitas crear los siguientes templates básicos:

Lecturas recomendadas Guía de inicio para el desarrollo de temas de WordPress: construye una interfaz avanzada desde cero.。

Cabeza y pie de página comunes para toda la página

header.php El archivo contiene el código común que se muestra en la parte superior de cada página, como la declaración del tipo de documento, la zona de contenido, el título del sitio web y la navegación principal. get_header() La función se llama desde el interior del template.

footer.php El archivo contiene código común que se muestra en la parte inferior de cada página, como información sobre los derechos de autor y referencias a scripts, entre otros. get_footer() Llamada a una función.

Un ejemplo típico… header.php La parte inicial es la siguiente:

hosting.com Alojamiento compartido

Alto rendimiento con CPU AMD EPYC, almacenamiento SSD NVMe y LiteSpeed, asistencia interna de expertos 24 horas al día, 7 días a la semana, medidas de seguridad avanzadas como SSL, fuerza bruta, protección contra malware y DDoS, ahorro de hasta 73%.

página de acceso

<!DOCTYPE html>
<html no numeric noise key 1008>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    ¿
</head>
<body no numeric noise key 1005>
¿php_body_open();?&gt;
<header>
    <h1><a href="/es/</?php echo esc_url( home_url( '/' ) ); ?>">¿¿php bloginfo( 'name' ); ??</a></h1>
    <p>¿¿php bloginfo( 'description' );?&gt;</p>
    <nav>
        'primary',
            'menu_class'     =&gt; 'primary-menu',
        ) );
        ?&gt;
    </nav>
</header>

wp_head() Y wp_footer() Son ganchos de vital importancia; muchos plugins y funciones esenciales de WordPress dependen de ellos para insertar código. Es crucial asegurarse de que estén presentes.

Ciclo de artículos y exhibición de contenido

single.php Se utiliza para mostrar un artículo de blog individual o un tipo de artículo personalizado. Su elemento central es el “bucle de WordPress”, que es el mecanismo utilizado para recuperar y mostrar el contenido del banco de datos.

Uno básico. single.php La estructura es la siguiente:

Lecturas recomendadas Desde cero hasta la maestría en el desarrollo de temas para WordPress: Una guía práctica para crear sitios web modernos。

¿¿php get_header();??

<main>
    ¿php si (tiene publicaciones()): mientras (tiene publicaciones()): the_post();?&gt;
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1011>
            <h1>¿¿¿php the_title();???</h1>
            <div class="meta">
                Publicado el:  | Por:
            </div>
            <?php if ( has_post_thumbnail() ) : ?>
                <div class="post-thumbnail">
                    <?php the_post_thumbnail( 'large' ); ?>
                </div>
            ¿¿php endif; ?&gt;
            <div class="content">
                ¿¿php the_content(); ??
            </div>
        </article>
        
</main>

¿¿¿¿php get_sidebar();???  
¿¿¿php get_footer();???

page.php Se utiliza para mostrar páginas estáticas, y su estructura es similar a… single.php De forma similar, pero generalmente no se muestra la fecha de publicación ni el autor.

Estilos, scripts y barras laterales

Un tema atractivo y que funcione correctamente no puede prescindir del apoyo de CSS y JavaScript; además, el menú lateral ofrece un lugar ideal para instalar complementos o herramientas adicionales.

Alojamiento compartido InterServer

Alojamiento compartido $2.50 USD al mes , primer mes $0.1 USD código promocional tryinterserver, 461 scripts de aplicaciones en la nube, instalación en un clic.

página de acceso

Añadir estilos y scripts de manera segura

Nunca debes crear enlaces directos (hard links) a archivos CSS y JS dentro de los archivos de plantillas. La forma correcta de incluir estos archivos es a través de otros métodos, como: functions.php Documentos, usando wp_enqueue_style() Y wp_enqueue_script() Se utiliza una función para “colocarlas en cola”. Esto asegura que las dependencias se resuelvan de manera correcta y evita la carga repetida de los mismos recursos.

function my_first_theme_scripts() {
    // 排队主题的主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
    // 排队一个自定义 JavaScript 文件
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get( 'Version' ), true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Registrarse para el sidebar dinámico

El panel lateral (zona de herramientas) permite a los usuarios agregar contenido de manera dinámica a través de la interfaz administrativa de WordPress. Primero, es necesario que… functions.php Regístrelo en…

function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          => __( 'Barra lateral principal', 'my-first-theme' ),
        'id'            => 'sidebar-1',
        'description'   => __( 'Añada gadgets aquí.', 'my-first-theme' ),
        'before_widget' => '  function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          => __( 'Main sidebar', 'my-first-theme' ),
        'id'            => 'sidebar-1',
        'description'   => __( 'Add gadgets here.', 'my-first-theme' ),
        'before_widget' =&gt; ' &lt;&#039;<section id="%1$s" class="widget %2$s">',
        'after_widget'  =&gt; '</section>',
        'before_title'  =&gt; '<h2 class="widget-title">',
        'after_title'   =&gt; '</h2>',
    ) );
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );

Después de registrarte, podrás acceder a los archivos de plantillas (como…) sidebar.php) se utiliza en dynamic_sidebar( 'sidebar-1' ) Se utiliza una función para invocar esta barra lateral y, según sea necesario, se incorpora en los lugares correspondientes. get_sidebar() Introducción.

Internacionalización del tema y preparación para su publicación

Una vez que hayas completado el desarrollo básico del tema, hay dos pasos importantes más: la internacionalización (i18n) para permitir su traducción, y los preparativos para su publicación.

Implementar soporte para la traducción de textos.

La internacionalización implica envolver todas las cadenas de texto dirigidas al usuario con funciones específicas de WordPress, para que puedan ser traducidas a otros idiomas. Esto se realiza principalmente utilizando… ()、_e() Funciones, así como… esc_html() Variantes equivalentes.

Debes asegurarte de que… style.css Se ha establecido lo correcto en el medio. Text DomainY además… functions.php ¿Dónde está el baño? after_setup_theme Se llama desde una acción. load_theme_textdomain()。

function my_first_theme_load_textdomain() {
    load_theme_textdomain( 'my-first-theme', get_template_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'my_first_theme_load_textdomain' );

Después de eso, se utiliza algo similar a… echo __( '阅读更多', 'my-first-theme' ); Se puede generar una lista de todas las cadenas de texto de una determinada manera. Los desarrolladores pueden utilizar herramientas como Poedit para ello. .pot Traduce el archivo de plantilla.

Creación de capturas de pantalla del tema y lista de verificación

Antes de enviar el tema a un directorio o entregarlo al cliente, es necesario crear una captura de pantalla del mismo. Este es un proceso denominado… screenshot.png La imagen debe tener un tamaño de 1200×900 píxeles y mostrar el aspecto de tu tema. Colócala en la carpeta raíz de tu tema.

Además, realizar una revisión de tu tema es una buena práctica. Puedes instalar el plugin “Theme Check”, el cual realizará una serie de pruebas en tu tema de acuerdo con los estándares más recientes de WordPress, para asegurarse de la calidad del código, su seguridad y su compatibilidad.

resúmenes

Desarrollar un tema para WordPress desde cero es un proceso sistemático que implica varios aspectos, desde la estructura básica de los archivos y la jerarquía de las plantillas hasta las funciones de negocio y la internacionalización del tema. Para ello, es necesario seguir un conjunto de pasos bien definidos. style.css、functions.php Además, con una serie de archivos de plantillas, puedes ir construyendo gradualmente el esqueleto del sitio web. Es crucial comprender y utilizar correctamente los bucles, las etiquetas de plantillas y las funciones de gancho (hooks) de WordPress. Seguir las mejores prácticas, como cargar las scripts de manera segura, registrar los menús y las barras laterales, y agregar soporte de traducción a todo el texto, hará que tu tema sea más profesional, robusto y fácil de mantener. Este proceso no solo te permite personalizar la apariencia del sitio web, sino que también te permite comprender en profundidad el funcionamiento de WordPress, un potente sistema de gestión de contenidos.

FAQ Preguntas más frecuentes

¿Qué lenguajes de programación se deben dominar para desarrollar temas para WordPress?

Para desarrollar temas para WordPress, es esencial dominar PHP, HTML, CSS y JavaScript básico. PHP se utiliza para manejar la lógica y llamar a las funciones de WordPress; HTML se encarga de construir la estructura de las páginas; CSS se dedica al diseño de los estilos; y JavaScript se utiliza para implementar efectos interactivos. Es de suma importancia tener un conocimiento profundo de las funciones propias de WordPress y de su sistema de ganchos (hooks).

¿Cómo puedo hacer que mi tema sea compatible con el editor de bloques Gutenberg?

Para que tu tema brinde mejor soporte al editor de bloques Gutenberg, puedes… functions.php Añadir funcionalidades de soporte para temas relacionados. Por ejemplo, utilizar… add_theme_support( 'wp-block-styles' ) Se utiliza para cargar los estilos predeterminados del bloque central. add_theme_support( 'align-wide' ) Para activar las opciones de alineación amplia y alineación completa, puedes también agregar estilos al editor de los artículos y páginas, asegurándote de que la vista previa en el editor de backend sea idéntica a la que se muestra en la interfaz frontal.

¿Cuál es la diferencia entre el archivo functions.php del tema y los plugins?

functions.php Los archivos forman parte de un tema y su función está estrechamente vinculada a ese tema; por lo tanto, cuando se cambia de tema, el código contenido en esos archivos generalmente deja de funcionar. Su principal propósito es agregar funcionalidades, estilos y scripts específicos a un tema determinado. Por otro lado, los plugins son módulos funcionales independientes de los temas, diseñados para proporcionar funcionalidades generales o específicas que puedan ser utilizadas en diferentes temas. Existe una regla sencilla a seguir: si una función está estrechamente relacionada con la apariencia del sitio web, es más adecuado incluirla dentro del tema; si, en cambio, se trata de una función reutilizable e independiente, es mejor crear un plugin para ella.

¿Cómo depuro los errores de PHP que encuentro durante el desarrollo de temas?

Primero, asegúrate de que en tu… wp-config.php El modo de depuración está activado en el archivo. define( ‘WP_DEBUG’, true ); Esta línea está configurada de la siguiente manera: trueEsto mostrará todos los errores, advertencias y notificaciones de PHP en la página. Para mayor seguridad (para no mostrar los errores al público), puedes configurar también… define( ‘WP_DEBUG_LOG’, true ); Registra los errores en… /wp-content/debug.log El archivo se encuentra aquí. Además, utiliza las herramientas de desarrollo del navegador (la consola y la pestaña de red) para verificar errores de JavaScript y problemas con la carga de recursos.