Desde cero: una guía paso a paso para desarrollar un tema personalizado de WordPress.

Desarrollar un tema personalizado para WordPress es la mejor forma de plasmar tus ideas en la realidad virtual y tener un control total sobre el aspecto y las funcionalidades de tu sitio web. A diferencia de los temas preexistentes, los temas personalizados te permiten comenzar desde cero y crear un sitio web único que se adapte perfectamente a tus necesidades o a las de tus clientes. Aunque este proceso puede parecer abrumador, puedes seguirlo paso a paso si sigues las especificaciones oficiales de WordPress, lo que te asegurará que lo completes de manera efectiva. Este artículo te guiará a través de todo el proceso, desde la creación de los archivos básicos hasta la implementación de las funcionalidades esenciales de tu tema.

Preparación y configuración del entorno.

Antes de escribir la primera línea de código, necesitas un entorno de desarrollo adecuado y una planificación clara del proyecto.

Creación de un entorno de desarrollo local

En primer lugar, necesitas configurar un entorno de servidor PHP en tu ordenador local. Se recomienda utilizar paquetes integrados como XAMPP, MAMP o Local by Flywheel. Estos herramientas permiten instalar Apache, MySQL y PHP con un solo clic, evitando así la necesidad de realizar configuraciones complejas. Tomando XAMPP como ejemplo, una vez instalado, los archivos de tu sitio web se encontrarán normalmente en la carpeta de instalación correspondiente.htdocsDentro de la carpeta. Aquí puedes crear una nueva carpeta, por ejemplo…my-custom-themeEste será el directorio raíz de tu tema.

Lecturas recomendadas Aprender a desarrollar temas de WordPress desde cero: una guía básica para crear sitios web personalizados.。

Planificación de la estructura del proyecto temático

Un tema estándar de WordPress contiene al menos dos archivos fundamentales:style.cssYindex.phpPero antes de comenzar el proyecto, se recomienda planificar una estructura de directorios clara y extensible. Una estructura típica para un tema moderno podría ser la siguiente:

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

my-custom-theme/
├── style.css          // 主样式表，包含主题信息头
├── index.php          // 主模板文件
├── functions.php      // 主题功能与函数文件
├── header.php         // 头部模板
├── footer.php         // 底部模板
├── sidebar.php        // 侧边栏模板
├── page.php           // 页面模板
├── single.php         // 文章页模板
├── archive.php        // 文章归档页模板
├── 404.php            // 404错误页模板
├── search.php         // 搜索结果页模板
├── assets/            // 静态资源目录
│   ├── css/           // 样式文件
│   ├── js/            // 脚本文件
│   └── images/        // 图片资源
└── templates/         // 可选的模板部件目录

Tener una buena estructura ayuda a la organización y el mantenimiento del código.

Crear el archivo de temas principales

Estos son los pilares fundamentales para construir un tema; los encabezados de información contenidos en el archivo indicarán a WordPress que se trata de un tema válido.

Definir la hoja de estilo del tema

style.cssSe trata del “dNI” (identificación) del tema; el bloque de comentarios en la parte superior (el encabezado de información del tema) es obligatorio. WordPress depende de esta información para reconocer y mostrar tu tema en el backend. Crea uno.style.cssArchivo, e ingrese el siguiente contenido:

/*
Theme Name: 我的自定义主题
Theme URI: https://example.com/my-custom-theme
Author: 你的名字
Author URI: https://yourwebsite.com
Description: 这是一个为了学习从零开始开发而创建的自定义WordPress主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

Entre ellos,Text DomainSe utiliza para la internacionalización (i18n) y es el único identificador de tu tema; generalmente coincide con el nombre de la carpeta del tema. Después de este bloque de comentarios, puedes comenzar a escribir tus estilos CSS.

Lecturas recomendadas Guía de desarrollo de temas de WordPress: un tutorial práctico completo de principiante a experto.。

Crear un archivo de plantilla básica

index.phpEs el modelo de retroceso predeterminado para todas las páginas. Es el más básico, pero podemos comenzar con una estructura HTML sencilla. Primero, cree uno…header.phpEl archivo se utiliza para almacenar la información de cabecera del documento (desde…)<!DOCTYPE html>Hasta que se abra.<body>(Se refiere a la sección de etiquetas…) yfooter.phpSe utiliza para almacenar las etiquetas de cierre y el contenido del pie de página.

header.phpEjemplo:

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

Se ha tenido en cuenta el uso de…wp_head()Los “ganchos” (hooks) son esenciales para que el núcleo de WordPress, así como los plugins y temas, puedan agregar scripts y estilos.

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

footer.phpEjemplo:

    <footer>
        <p>©  . Todos los derechos reservados.</p>
    </footer>
    ¿php_footer();?&gt;
</body>
</html>

Aquí se ha utilizado…wp_footer()Gancho.

Ahora, tu…index.phpPuede quedar muy simplificado:

Lecturas recomendadas Guía completa para el desarrollo de temas para WordPress: Cómo crear temas de nivel profesional desde cero。

¿¿php get_header();??

<main>
    ¿  
    ¿
            <article>
                <h2>¿¿¿php the_title();???</h2>
                <div>¿¿php the_content(); ??</div>
            </article>
        
        <p><?php _e( 'Sorry, no posts matched your criteria.', 'my-custom-theme' ); ?></p>
    ¿¿php endif; ?&gt;
</main>

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

Este template utiliza el bucle principal de WordPress (The Loop) para mostrar la lista de artículos.

Introducir funciones y contenido dinámico

Un verdadero tema no es simplemente una página estática; necesita interactuar con el núcleo de WordPress, cargar recursos y implementar funciones dinámicas.

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

Escribir un archivo de funciones temáticas

functions.phpEs tu tema “Cerebro”, utilizado para agregar funciones, menús de registro, barras laterales, cargar estilos y scripts, etc. Crea este archivo y comienza a agregar las funciones básicas.

<?php
// 主题设置
function my_custom_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-custom-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );

// 注册小工具区域（侧边栏）
function my_custom_theme_widgets_init() {
    register_sidebar( array(
        'name'          =&gt; __( '主侧边栏', 'my-custom-theme' ),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; __( '在此添加小工具。', 'my-custom-theme' ),
        'before_widget' =&gt; '<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_custom_theme_widgets_init' );

add_theme_support()La función se utiliza para activar la función temática.register_nav_menus()Yregister_sidebar()Entonces, se deben registrar por separado el menú de navegación y la zona de herramientas adicionales (o “gadgets”).

Cargar estilos y scripts

La forma correcta de cargar los recursos es incluir los archivos de estilo y los archivos de JavaScript a través de…wp_enqueue_scriptsCola de espera para los ganchos. En tu caso…functions.phpAñadir en el medio:

function my_custom_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri() );

// 加载自定义JavaScript文件
    wp_enqueue_script( 'my-custom-theme-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), '1.0.0', true );

// 如果使用评论功能，加载评论回复脚本（仅当需要时）
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );

get_stylesheet_uri()Obtenerstyle.cssLa URL…get_template_directory_uri()Obtener la URL del directorio de temas.

Crear una estructura jerárquica de plantillas

WordPress utiliza una estructura de niveles de plantillas para determinar qué archivo de plantilla se debe utilizar para una página específica. Crear archivos de plantillas dedicados permite que la presentación de tu contenido sea más precisa y flexible.

Crear plantillas para diferentes tipos de contenido.

Es necesario crear plantillas específicas para diferentes tipos de páginas. Por ejemplo:
* single.phpSe utiliza para mostrar un único artículo.
* page.phpSe utiliza para mostrar una única página.
* archive.phpSe utiliza para mostrar categorías, etiquetas, autores, fechas y otros elementos de las páginas de archivo.
* search.phpSe utiliza para mostrar los resultados de la búsqueda.
* 404.phpSe utiliza para mostrar la página de “No encontrado”.

Uno básico.single.phpPuede ser algo similar a lo siguiente:

¿¿php get_header();??

<main>
    ¿php mientras (tengo publicaciones() ): the_post(); ?&gt;
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1012>
            <header>
                <h1>¿¿¿php the_title();???</h1>
                <div>
                    |
                </div>
            </header>
            <?php if ( has_post_thumbnail() ) : ?>
                <div>
                    <?php the_post_thumbnail(); ?>
                </div>
            ¿¿php endif; ?&gt;
            <div>
                ¿¿php the_content(); ??
            </div>
            <footer>
                &lt;?php the_tags( &#039;标签: &#039;, &#039;, &#039;, &#039;<br />' ); ?&gt;
            </footer>
        </article>
    ¿php endwhile;?&gt;
</main>

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

Este template utiliza…the_post_thumbnail()Para mostrar imágenes destacadas, así como…comments_template()Para cargar la zona de comentarios…

Modularización con partes de plantilla

Para mejorar aún más la reutilizabilidad del código, las partes que se repiten en las páginas, como la metainformación de los artículos o los elementos de la lista de artículos, pueden ser extraídas y convertidas en componentes de plantilla (Template Parts). Por ejemplo, se podría crear uno para…template-parts/content.phpArchivo, y luego…index.phpoarchive.phpSe utiliza en un ciclo para...get_template_part( 'template-parts/content' );Llámalo para usarlo. De esta manera, tu archivo de plantilla principal se mantiene sencillo y claro.

resúmenes

Mediante los pasos anteriores, has completado el desarrollo de un tema personalizado para WordPress que, aunque es básico, cuenta con todas las funcionalidades necesarias. Este proceso incluyó la configuración del entorno, la creación de los archivos esenciales, la integración de las funcionalidades de WordPress y la construcción de la estructura de los templates. Recuerda que el desarrollo de temas es un proceso iterativo: puedes comenzar con las funcionalidades más básicas y luego agregar características más complejas, como tipos de artículos personalizados, opciones de personalización del tema o diseño responsive. Lo más importante es seguir los estándares de codificación y las mejores prácticas de WordPress, lo que asegurará que tu tema sea seguro, eficiente y fácil de mantener. Ahora, copia la carpeta de tu tema al directorio de instalación de WordPress.wp-content/themes/En el menú, puedes encontrarlo en la sección “Apariencia” -> “Temas”, y allí podrás activarlo.

FAQ Preguntas más frecuentes

¿Qué conocimientos de lenguajes de programación se necesitan para desarrollar temas para WordPress?

Para desarrollar temas para WordPress, es esencial dominar HTML, CSS y PHP. HTML se utiliza para construir la estructura de las páginas, CSS para el diseño de estilos, y PHP es el lenguaje de programación del lado del servidor de WordPress, encargado de gestionar la lógica, las consultas a la base de datos y la generación de contenido dinámico. Además, conocer algunos conceptos básicos de JavaScript es de gran ayuda para agregar funciones interactivas a los temas.

¿Por qué es necesario utilizar las funciones get_header() y get_footer()?

get_header()Yget_footer()Son etiquetas de plantilla de WordPress que se utilizan para incluir contenido o elementos específicos dentro de la página web generada por el sistema.header.phpYfooter.phpArchivos. Utilice estas funciones en lugar de usarlos de manera directa.includeLas «sentencias» (statements) son el núcleo del mecanismo de jerarquía de plantillas y subtemas en WordPress. Permite que los subtemas sobrescriban la parte superior (header) y la parte inferior (footer) de la plantilla principal creando archivos con el mismo nombre, lo que ofrece una gran flexibilidad.

¿Cómo puedo hacer que mi tema admita múltiples idiomas (internacionalización)?

Debes utilizar las funciones de internacionalización (i18n) de WordPress para encapsular todas las cadenas de texto que se muestran en el tema. Principalmente, debes…__()、_e()Funciones como `wait` y otras similares, y en…style.cssEstablecer lo correcto en…Text DomainLuego, utiliza herramientas como Poedit para generar el contenido deseado..potEl archivo de plantilla de traducción permite que los traductores creen los documentos correspondientes en el idioma deseado.zh_CN.poY.moEste es un archivo de traducción del documento (.). Finalmente, enfunctions.phpA través de Chinaload_theme_textdomain()Traducción de “Función de carga” (Function loading).

Una vez que el desarrollo del tema ha finalizado, ¿cómo se prueba su compatibilidad?

Es de vital importancia realizar pruebas exhaustivas antes de publicar o desplegar un tema en el entorno de producción. En primer lugar, se deben realizar pruebas de respuesta móvil en diferentes navegadores (Chrome, Firefox, Safari, Edge) y dispositivos (ordenador de escritorio, tableta, teléfono móvil). A continuación, se deben realizar pruebas con diferentes configuraciones del entorno de WordPress, como activar/desactivar diversos plugins o utilizar diferentes tipos de artículos y widgets. Además, se puede utilizar el plugin oficial de WordPress llamado Theme Check para analizar tu tema y asegurarse de que cumpla con los estándares de codificación más recientes de WordPress y las mejores prácticas de desarrollo.