Guía de inicio para el desarrollo de temas de WordPress: crea un sitio web personalizado desde cero.

Conceptos básicos del desarrollo de temas de WordPress

Antes de comenzar a escribir código, es de vital importancia comprender la estructura básica de un tema de WordPress. Un tema es, en esencia, una carpeta que contiene una serie de archivos que juntos determinan la apariencia y algunas de las funciones de un sitio web. El sistema de WordPress lee estos archivos para renderizar el contenido de la página web.

Un tema básico necesita al menos dos archivos:style.cssYindex.phpEntre ellos,style.cssNo solo se encarga de los estilos, sino que el bloque de comentarios en la parte superior del archivo también contiene metadatos sobre el tema, como el nombre del tema, el autor, la descripción y el número de versión. Este es el punto de entrada para que WordPress reconozca el tema.

WordPress utiliza un sistema de jerarquía de plantillas para determinar qué archivo de plantilla se debe utilizar en cada página. Por ejemplo, cuando se accede a un artículo en particular, WordPress busca primero el archivo de plantilla correspondiente a ese artículo.single.phpAl acceder a la página de lista de artículos del blog, se busca…index.phpohome.phpAl acceder a una página, se busca…page.phpComprender esta relación jerárquica te permitirá escribir el código en el lugar correcto.

Lecturas recomendadas De cero a uno: Descripción detallada de las tecnologías clave y las mejores prácticas en el proceso completo de creación de sitios web modernos。

La función del archivo central del tema

functions.phpEl archivo es el núcleo funcional de un tema. No es un archivo obligatorio, pero casi todos los temas modernos lo utilizan. Aquí puedes agregar funciones de soporte para el tema, menús de registro y barras laterales, incorporar scripts y hojas de estilo, así como definir diversas funciones personalizadas. Este archivo se carga automáticamente al iniciar el tema y es clave para expandir las capacidades de este.

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

Otro archivo clave es…header.phpPor lo general, contiene la declaración del tipo de documento, las áreas (donde se incluyen los archivos CSS y JS) y las partes comunes de la cabecera de la página web.footer.phpEntonces, se incluye el contenido común del pie de página y las etiquetas de cierre. Esto se logra mediante funciones de WordPress.get_header()Yget_footer()Puedes introducirlos fácilmente en otros archivos de plantillas, manteniendo así el código modular y fácil de mantener.

Configurar un entorno de desarrollo local y crear la estructura de un tema

Antes de desplegar un tema en un servidor en línea, crear un entorno de desarrollo local es la forma más eficiente y segura. Puedes utilizar herramientas como XAMPP, MAMP, Local by Flywheel o Docker para instalar rápidamente Apache, MySQL y PHP en tu ordenador, y así poder ejecutar WordPress.

Una vez que el entorno esté listo, puedes comenzar a crear tu primer tema. Para ello, primero entra en el directorio de instalación de WordPress.wp-content/themesCarpeta. Crea una nueva carpeta aquí y nómbrala con el nombre de tu tema, por ejemplo “my-first-theme”. Todos los archivos relacionados con el tema se almacenarán en esta carpeta.

A continuación, crearemos los archivos básicos mencionados anteriormente. El primero de ellos es…style.cssEl encabezado del archivo debe contener información específica sobre las hojas de estilo.

Lecturas recomendadas Creación de sitios web profesionales: La guía definitiva para el desarrollo y personalización integral de temas WordPress。

/*
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: GPL v2 or later
Text Domain: my-first-theme
*/

Luego, crea lo más básico.index.phpEl archivo, en un comienzo, puede ser muy simple; su función es simplemente asegurar que el tema sea reconocido y activado por WordPress.

<!DOCTYPE html>
<html no numeric noise key 1004>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    ¿
</head>
<body no numeric noise key 1001>
    <h1>Hola, Desarrollo de Temas para WordPress.</h1>
    ¿php_footer();?&gt;
</body>
</html>

En este momento, inicia sesión en el backend de WordPress y accede a la página “Apariencia” -> “Temas”. Allí deberías ver que tu tema ya está listado. Actívalo y, a continuación, visita la página principal del sitio web para ver la información sencilla que se muestra en el código anterior. Con esto, has creado con éxito tu primer framework de tema vacío.

Creación de plantillas de temas y bucles

La tarea principal de un tema es mostrar el contenido, y la visualización de dicho contenido en WordPress depende de los “ciclos” (loops). Un ciclo es una estructura de código PHP en WordPress que se utiliza para recuperar artículos (incluyendo páginas y tipos de artículos personalizados) de la base de datos y mostrarlos en la página.

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

Comprender y implementar el bucle principal.

La estructura de bucle más básica se muestra a continuación y, por lo general, se coloca en…index.phposingle.phpEn los archivos de plantilla correspondientes:

¿  
    ¿
        <!-- 在这里输出每篇文章的内容 -->
        <h2>¿¿¿php the_title();???</h2>
        <div>¿¿php the_content(); ??</div>
    
    <p>No se encontró ningún artículo.</p>
¿¿php endif; ?&gt;

have_posts()La función verifica si hay artículos que necesitan ser mostrados.the_post()La función establece los datos del artículo actual y los hace disponibles para las etiquetas de plantilla (como…)the_title()、the_content()Se realiza una llamada.

Crear archivos de plantillas comunes

Para que el tema pueda manejar de manera profesional las diferentes páginas, es necesario crear una serie de archivos de plantilla. Además de…index.phpEste modelo de retroceso final también debería incluir la creación de:

Lecturas recomendadas Guía completa para el desarrollo de temas para WordPress: Desde los principios hasta la práctica avanzada。

• header.phpExtraer el código de la cabecera común.
• footer.phpExtraer el código común de la parte inferior de la página.
• single.phpSe utiliza para mostrar un único artículo.
• page.phpSe utiliza para mostrar una única página.
• archive.phpSe utiliza para mostrar páginas de archivo que contienen información sobre categorías, etiquetas, autores, etc.

Luego, necesitas reestructurarlo.index.phpUtiliza las funciones de WordPress para incorporar partes modulares:

<main>
        ¿php mientras (tengo publicaciones() ): the_post(); ?&gt;
            <article>
                <h2><a href="/es/</?php the_permalink(); ?>">¿¿¿php the_title();???</a></h2>
                ¿¿php the_excerpt(); ??
            </article>
        ¿php endwhile;?&gt;
    </main>

De esta manera, la parte superior e inferior de la página son gestionadas por archivos independientes, mientras que el archivo de plantilla principal se centra únicamente en la lógica de contenido específica de esa página. El resultado es una estructura clara y fácil de mantener.

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

Utilizar el archivo functions.php para mejorar las funcionalidades del tema.

functions.phpSe trata del “Caja de Herramientas” relacionado con tu tema. Aquí puedes agregar código para modificar y expandir de manera segura las funciones básicas de WordPress, sin necesidad de alterar los archivos del núcleo del mismo.

Funciones soportadas por el registro de temas:

A través deadd_theme_support()En una función, puedes declarar las diversas funcionalidades que un tema debe soportar. Por ejemplo, puedes permitir que el tema cuente con imágenes destacadas de los artículos, un logotipo personalizable y un resumen del artículo.

function my_first_theme_setup() {
    // 让主题支持文章和页面的特色图像功能
    add_theme_support( 'post-thumbnails' );

// 支持自定义Logo
    add_theme_support( 'custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
    ) );

// 支持文章格式（可选）
    add_theme_support( 'post-formats', array( 'aside', 'gallery', 'quote' ) );

// 为文章和页面开启HTML5标记支持
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

Tenga en cuenta que hemos montado (o asignado) la función en el lugar adecuado.after_setup_themeEste hook se encuentra en el proceso de carga de temas en WordPress. Se trata de un hook estándar que se ejecuta después de que el tema ha sido cargado, y es el lugar adecuado para realizar la inicialización del mismo.

Menú de registro y scripts de estilo

Configurar la posición de los elementos de navegación en el menú de registro, permitiendo que los usuarios gestionen los menús desde la sección “Apariencia” -> “Menú” en el backend.

function my_first_theme_menus() {
    register_nav_menus(
        array(
            'primary' => __( '主导航菜单', 'my-first-theme' ),
            'footer'  => __( '底部菜单', 'my-first-theme' ),
        )
    );
}
add_action( 'init', 'my_first_theme_menus' );

En los archivos de plantilla, puedes utilizar…wp_nav_menu( array( ‘theme_location’ => ‘primary’ ) )Para mostrar este menú…

Finalmente, es esencial introducir los archivos de CSS y JavaScript de manera correcta; esto constituye una práctica recomendada.

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-script’, get_template_directory_uri() . ‘/js/script.js’, array(‘jquery’), ‘1.0’, true );
}
add_action( ‘wp_enqueue_scripts’, ‘my_first_theme_scripts’ );

utilizarwp_enqueue_style()Ywp_enqueue_script()Función, y luego montarla.wp_enqueue_scriptsLos “ganchos” (hooks) son la metodología oficialmente recomendada por WordPress. Permite gestionar las relaciones de dependencia entre los componentes del sistema, evita cargas repetidas de datos y garantiza la compatibilidad en entornos como los plugins.

resúmenes

Desde el momento en que se crea algo que contenga…style.cssYindex.phpComenzando con la creación de carpetas, pasando por la comprensión de los niveles de los templates y los mecanismos de “bucle”, hasta llegar al uso efectivo de estos elementos.functions.phpHas añadido funciones avanzadas al archivo temático, lo que significa que has seguido el camino principal en el desarrollo de temas para WordPress. La clave para desarrollar temas reside en un enfoque modular: separar las partes repetitivas (como el encabezado y el pie de página) en archivos independientes.functions.phpPermite la gestión centralizada de funciones y organiza la lógica de visualización del contenido siguiendo las reglas de jerarquía de plantillas de WordPress. Al dominar estos conceptos básicos, contarás con las bases necesarias para crear sitios web personalizados. Podrás explorar con mayor profundidad funciones avanzadas como las áreas de herramientas adicionales, los tipos de artículos personalizados y las API del editor de temas, mejorando así tus habilidades de desarrollo en WordPress.

FAQ Preguntas más frecuentes

¿Qué hago si la página web no se actualiza de inmediato después de modificar el tema?

Esto generalmente se debe al caché del navegador o al mecanismo de caché de WordPress. Primero, intenta realizar un refresco forzado en el navegador presionando Ctrl+F5 (o Cmd+Shift+R). Si el problema persiste, verifica si estás utilizando algún plugin de caché o si hay caché en el servidor, y prueba a borrar todo el caché. En el caso de los archivos CSS y JS,wp_enqueue_styleYwp_enqueue_scriptEn una función, es posible asignar un valor dinámico al parámetro que representa el número de versión (por ejemplo:time()Durante el desarrollo, se debe evitar el uso de cachés; no obstante, antes de lanzar el producto al mercado, se debe cambiar a un número de versión fijo.

¿Por qué mi tema no se muestra en el backend?

Por favor, verifica primero si la carpeta de temas se encuentra en la ruta correcta.wp-content/themes/En segundo lugar, asegúrate de questyle.cssEl bloque de comentarios en la parte superior del archivo tiene un formato completamente correcto; en particular, la línea “Theme Name:” es esencial. Por último, asegúrese de que los permisos del folder del tema y de los archivos que contiene estén configurados correctamente, y de que el servidor web (como Apache) tenga los permisos necesarios para leer estos archivos.

¿Cómo puedo agregar una barra lateral a mi tema?

Añadir una barra lateral se realiza en dos pasos. Primero,functions.phpEn el uso chinoregister_sidebar()La función registra una o más áreas para los complementos (widgets). Luego, en el archivo de plantilla donde deseas mostrar la barra lateral…sidebar.phpEn ese texto, se utiliza…dynamic_sidebar()Se necesita una función para llamarlo. Además, debes hacerlo en el archivo de plantilla principal (por ejemplo…).index.php) se utiliza enget_sidebar()Para introducir el modelo del sidebar.

Al desarrollar un tema, ¿cómo se puede garantizar su compatibilidad con los plugins?

Seguir los estándares de codificación de WordPress es la base para garantizar la compatibilidad. En cuanto al contenido que pueden agregar los plugins, asegúrate de que tu tema lo llame de manera adecuada.wp_head()Ywp_footer()Las funciones son importantes porque muchos plugins dependen de estos dos “ganchos” (hookes) para insertar el código necesario (como código de estadísticas, CSS/JS). Además, al generar el contenido de los artículos, siempre se debe utilizar…the_content()En lugar de acceder directamente a la base de datos, la función aplica todos los cambios realizados por los plugins a través del filtro “the_content”.