Inicio/conocimiento/WordPress/Detalles del contenido

Te enseñaremos paso a paso cómo crear un tema personalizado para WordPress con funciones avanzadas.

Lectura en 4 minutos
2026-03-14
2026-06-04
2,380
Gano comisiones cuando compras a través de los enlaces de abajo, sin coste adicional para ti.

¿Por qué elegir construir un tema para WordPress desde cero?

En el mundo del código abierto, existe una enorme cantidad de temas para WordPress, tanto gratuitos como pagados, lo que hace que muchos usuarios prefieran descargarlos y usarlos directamente. Sin embargo, elegir construir un tema personalizado desde cero puede ofrecer ventajas incomparables. En primer lugar, permite al desarrollador tener un control absoluto sobre el aspecto, las funciones y el rendimiento del sitio web. Puedes eliminar todo el código y las funciones que no sean necesarios para crear una solución ligera que se adapte perfectamente a las necesidades del proyecto, lo que mejora significativamente la velocidad de carga del sitio y la experiencia del usuario.

En segundo lugar, los temas personalizados no enfrentan conflictos de compatibilidad con las funciones principales del sistema o con los plugins ya instalados al ser actualizados, a diferencia de algunos temas de terceros. Además, puedes seguir las mejores prácticas y las normas de seguridad del desarrollo de WordPress, lo que garantiza la mantenibilidad y la seguridad a largo plazo del código fuente, algo de particular importancia para los proyectos comerciales. Por último, este proceso constituye una excelente oportunidad para aprender en profundidad sobre la estructura jerárquica de los templates de WordPress.WP_QueryEl API del personalizador de temas, así como los ganchos (hooks).actions Y filtersConceptos clave como estos son de vital importancia para cualquier desarrollador de WordPress.

Los pasos preparatorios incluyen varios elementos clave: asegurarse de contar con un entorno de desarrollo para WordPress, ya sea local o en línea; un editor de código adecuado, como VS Code o PhpStorm; y un conocimiento básico de HTML, CSS, PHP y JavaScript. Ahora, ¡empecemos a crear el primer archivo de tema!

Lecturas recomendadas Guía completa para el desarrollo de temas de WordPress: desde principiante hasta experto en la creación de temas personalizados.。

Construir la estructura básica y los archivos centrales de un tema

Un tema WordPress válido debe contener al menos dos archivos esenciales:index.php Y style.cssEste último no solo proporciona estilos, sino que también contiene metadatos que describen el tema para WordPress. Comencemos creando el directorio del tema.

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).
LOGO de UltaHost página de acceso

Crear un directorio de temas y una tabla de estilos

Primero, en el directorio de instalación de tu WordPress… wp-content/themes/ En la carpeta, cree un nuevo directorio, por ejemplo… my-custom-themeTodos los archivos de los temas se colocarán aquí.

A continuación, cree… style.css Se deben crear los archivos y agregar en su cabecera los bloques de comentarios necesarios. Estos comentarios son indispensables para que WordPress reconozca el tema.

/*
Theme Name: My Custom Theme
Theme URI: https://yourwebsite.com/
Author: Your Name
Author URI: https://yourwebsite.com/
Description: 一个为学习和实践而打造的强大自定义主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

Text Domain Se utiliza para la internacionalización; posteriormente será necesario utilizarlo al llamar a la función de traducción.

Construir una plantilla de índice básica

index.php Es el modelo predeterminado para los temas y también representa el punto de retorno final en la estructura jerárquica de los modelos. Es muy básico. index.php Es posible asegurar que el sitio web muestre su contenido en cualquier situación.

Lecturas recomendadas Guía completa para el desarrollo de temas de WordPress: cómo crear un tema personalizado de alto rendimiento desde cero.。

<!DOCTYPE html>
<html no numeric noise key 1009>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    ¿
</head>
<body no numeric noise key 1006>
    ¿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>
    </header>

<main>
        &lt;?php
        if ( have_posts() ) :
            while ( have_posts() ) :
                the_post();
                // 循环内容将在这里展示
                the_title( &#039;<h2>', '</h2>' );
                the_content();
            endwhile;
        else :
            echo '<p>暂无内容。</p>';
        endif;
        ?&gt;
    </main>

<footer>
        <p>© Derechos de autor ….</p>
    </footer>

¿php_footer();?&gt;
</body>
</html>

En este momento, simplemente coloca estos dos archivos en el directorio de temas de WordPress y podrás ver y activar tu tema en la sección “Apariencia” -> “Temas” del panel de administración de WordPress. Aunque parece muy sencillo, ya se trata de un tema con funcionalidades completas. A continuación, necesitaremos introducir elementos de modularidad y mejorar aún más sus características.

Implementar un diseño modular y con niveles de plantillas

Con el fin de garantizar la claridad y la mantenibilidad del código, no se debe incluir toda la estructura HTML en
. index.php Sí. El sistema de jerarquía de plantillas de WordPress nos permite crear archivos de plantillas específicos para diferentes tipos de páginas.

Separar el encabezado de página, el pie de página y la barra lateral

Crear header.php、footer.php Y sidebar.php Es el primer paso hacia la modularización.

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%.
LOGO hosting.com página de acceso

Se va a convertir en un problema si no hacemos algo al respecto. index.php Centro <head> Hasta allí. <main> Mueva la parte anterior a… header.php. <footer> Mueva la parte que sigue a… footer.phpLuego, en… index.php En el uso chino get_header() Y get_footer() Las funciones las introducen (es decir, las utilizan o las incorporan en su código).

¿¿php get_header();??

<main>
    &lt;?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            the_title( &#039;<h2>', '</h2>' );
            the_content();
        endwhile;
    else :
        echo '<p>暂无内容。</p>';
    endif;
    ?&gt;
</main>

<?php get_sidebar(); ?> <!-- 如果创建了侧边栏文件 -->
¿¿¿php get_footer();???

Crear un modelo de contenido para un artículo

Para la presentación del contenido de un artículo, la mejor práctica es crear una sección de plantillas independiente. content.php o template-parts/content.phpMueve la lógica de visualización que se encuentra dentro del ciclo a ese lugar. Luego, index.php Se utiliza en un ciclo para... get_template_part() Llámalo.

// 在 index.php 的循环中替换为：
while ( have_posts() ) :
    the_post();
    get_template_part( 'template-parts/content', get_post_format() );
endwhile;

Esta función primero buscará elementos como… content-video.php Este formato utiliza un modelo específico; si no se encuentra, se recurre a un valor por defecto. content.php。

Lecturas recomendadas Desarrollo de temas para WordPress: Desde los principios hasta la maestría: La guía esencial para crear sitios web personalizados。

Integración de las funciones principales de WordPress con la personalización de temas

Un tema potente debe integrarse profundamente con las funciones principales de WordPress, como los menús, los widgets, las miniaturas de los artículos y el configurador de temas.

Registro del menú de navegación y la zona de herramientas adicionales

En el tema de… functions.php En el archivo, se utiliza… register_nav_menus() Ubicación para registrar la unidad de cocina.

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.
LOGOTIPO DE INTERSERVER página de acceso 
function my_custom_theme_setup() {
    // 注册主菜单
    register_nav_menus( array(
        'primary' => esc_html__( '主导航菜单', 'my-custom-theme' ),
        'footer'  => esc_html__( '页脚菜单', 'my-custom-theme' ),
    ) );

// 添加文章缩略图支持
    add_theme_support( 'post-thumbnails' );

// 添加自定义Logo支持
    add_theme_support( 'custom-logo' );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );

Al mismo tiempo, podemos registrar herramientas adicionales en la zona de herramientas (barra lateral).

function my_custom_theme_widgets_init() {
    register_sidebar( array(
        'name'          =&gt; esc_html__( '主侧边栏', 'my-custom-theme' ),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; esc_html__( '在此添加小工具。', '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' );

En header.php O en el archivo de plantilla, utilízalo. wp_nav_menu() Mostrar menú.

Añadir opciones al personalizador de temas

El Personalizador de Temas (Customizer) permite a los usuarios previsualizar y modificar las configuraciones del tema en tiempo real. Podemos hacer esto a través de… WP_Customize_Manager Se agregan opciones al objeto.

function my_custom_theme_customize_register( $wp_customize ) {
    // 添加一个“主题选项”板块
    $wp_customize->add_section( 'theme_options', array(
        'title'    => __( '主题选项', 'my-custom-theme' ),
        'priority' => 130,
    ) );

// 添加一个页脚版权文本设置
    $wp_customize->add_setting( 'footer_copyright_text', array(
        'default'           => '© 2026 Your Company',
        'sanitize_callback' => 'sanitize_text_field',
        'transport'         => 'postMessage', // 支持实时预览
    ) );

$wp_customize->add_control( 'footer_copyright_text', array(
        'label'    => __( '页脚版权文本', 'my-custom-theme' ),
        'section'  => 'theme_options',
        'type'     => 'text',
    ) );
}
add_action( 'customize_register', 'my_custom_theme_customize_register' );

Luego… footer.php En chino, se usa get_theme_mod() Devuelve este valor.

<p><?php echo esc_html( get_theme_mod( 'footer_copyright_text', '© 2026 Your Company' ) ); ?></p>

Optimizar el rendimiento y la seguridad de los temas.

El último paso clave para construir un tema es asegurarse de que sea rápido y seguro en su funcionamiento.

Cargar correctamente los scripts y los estilos.

Se debe utilizar obligatoriamente. wp_enqueue_scripts Se utilizan “ganchos” (hooks) para cargar los archivos CSS y JavaScript, lo que garantiza que las dependencias se gestionen de manera correcta y evita la carga repetida de estos archivos.

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

// 加载Google Fonts
    wp_enqueue_style( 'my-custom-theme-fonts', 'https://fonts.googleapis.com/css2?family=...' );

// 加载主JavaScript文件
    wp_enqueue_script( 'my-custom-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get( 'Version' ), true );

// 为评论回复脚本添加条件加载
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );

Implementar medidas básicas de seguridad

Nunca confíes en la salida original de los usuarios o de la base de datos. Escapa (o “escapea”) todo el contenido dinámico.

  • utilizar esc_html(), esc_attr(), esc_url() Escape el texto que se va a introducir en las propiedades o el contenido de HTML.
  • Antes de insertar los datos en la base de datos, utiliza… sanitize_text_field() Se realiza la limpieza de elementos como…
  • Usar en el modelo. the_title(), the_content() Funciones como estas ya incorporan ciertas funciones de escape por defecto. Para campos personalizados, se debe utilizar… echo esc_html( get_post_meta( $post->ID, 'key', true ) );。

resúmenes

Mediante los pasos anteriores, hemos completado la construcción del esqueleto de un tema personalizado para WordPress muy potente. Comenzamos creando los elementos más básicos… style.css Y index.php Comenzamos introduciendo gradualmente conceptos de jerarquía de plantillas y diseño modular, dividiendo las partes superior e inferior de la página (cabecera y pie de página). Luego, mediante… functions.php Integra las funciones esenciales de WordPress, como el menú de navegación, los widgets y las miniaturas de los artículos, y ofrece una interfaz de configuración amigable para los usuarios a través del personalizador de temas. Por último, destacamos la conveniencia de utilizar… wp_enqueue_scripts La importancia de optimizar la carga de recursos y de implementar medidas de seguridad, como la escapación de datos en la salida.

Aunque este tema es básico, su estructura es clara y sigue las mejores prácticas, lo que establece una base sólida para agregar funciones más complejas en el futuro (como tipos de artículos personalizados, opciones de tema avanzadas, carga mediante AJAX, etc.). Continúa explorando el WordPress Codex y otros recursos para desarrolladores, y podrás expandir las posibilidades de este tema en forma constante.

FAQ Preguntas más frecuentes

¿Qué lenguajes de programación se deben dominar para crear un tema para WordPress?

Es necesario construir un tema para WordPress que sea completamente funcional, lo que implica dominar los lenguajes y herramientas siguientes: PHP, HTML, CSS y JavaScript. PHP se utiliza para manejar la lógica del lado del servidor y interactuar con el núcleo de WordPress; HTML conforma el esqueleto de las páginas; CSS se encarga de los estilos y el diseño; y JavaScript se utiliza para implementar interacciones y efectos dinámicos en la interfaz del usuario. Tener un conocimiento básico de SQL también es útil para comprender las consultas de datos en WordPress.

¿Qué función especial tiene el archivo functions.php del tema?

functions.php El archivo es el “centro de funcionalidades” del tema y desempeña un papel de vital importancia. No se trata de un complemento que se incluye cada vez que se carga una página, sino que forma parte integral del mismo. El código que añadas en este archivo puede modificar el comportamiento predeterminado del tema, registrar nuevas funcionalidades (como menús o áreas de herramientas), agregar soporte adicional al tema (como miniaturas de artículos), gestionar la carga secuencial de scripts y estilos, y definir diversas funciones personalizadas. Es, en resumen, el puente que conecta tu tema con las funcionalidades básicas de WordPress.

¿Cómo puedo hacer que el tema de WordPress que he creado sea compatible con múltiples idiomas?

Hacer que un tema sea compatible con múltiples idiomas (internacionalización i18n y localización l10n) implica principalmente dos pasos. En primer lugar, style.css Para el encabezado de los comentarios y todos los strings que necesitan ser traducidos, se debe utilizar algo similar a: __（'Text', 'text-domain'） o _e（'Text', 'text-domain'） Se debe encapsular dicha función de traducción. En segundo lugar, se utiliza una herramienta como Poedit para escanear los archivos del tema y generar los contenidos necesarios para la traducción. .pot Luego, cree un archivo de plantilla y, a continuación, cree el correspondiente para cada idioma. .po Y después de la compilación. .mo El archivo debe ser colocado dentro del tema correspondiente. /languages/ Están dentro del directorio. Los usuarios pueden gestionar estas traducciones mediante plugins como Loco Translate.

¿Cómo elegir un tema personalizado y un tema secundario (Child Theme)?

Depende de tus objetivos específicos y del modelo de desarrollo que utilices. Si estás comenzando desde cero para crear un diseño y funcionalidades únicos para un proyecto concreto, y no planeas utilizar los estilos y plantillas de otro tema padre, entonces es apropiado crear un tema personalizado. La ventaja de esto es que el código es completamente independiente y no contiene redundancias.

Los subtemas se utilizan para modificar o expandir un tema padre existente. Cuando deseas personalizar un tema popular (como Astra o GeneratePress) pero quieres poder actualizar el tema padre en el futuro de manera segura sin perder las modificaciones que has realizado, es esencial utilizar subtemas. Los subtemas contienen únicamente tus archivos personalizados (como…). style.css, functions.php (Si se utilizan archivos de plantilla que se superponen a los existentes, se heredan todas las funciones del tema padre. Esta es la forma de personalización recomendada por WordPress, ya que garantiza al máximo la compatibilidad con las actualizaciones.)

¿Qué sigue, qué sigue?

Si estás creando o optimizando un sitio web de WordPress, te recomendamos que continúes leyendo sobre optimización de rendimiento, configuración de complementos y personalización de temas.

Lectura ampliada y conocimientos prácticos

Los siguientes están relacionados con el tema de este artículo y son adecuados para una lectura más profunda. A menudo es mejor priorizar empezando por el artículo que más se acerque a su problema actual y ampliando gradualmente a los temas circundantes.

Etiquetas.