Empezar desde cero: Comprender la estructura básica de los temas de WordPress

Empezar desde cero: Comprender la estructura básica de los temas de WordPress

Un tema estándar para WordPress es una carpeta que contiene archivos y directorios específicos. Estos archivos juntos definen la apariencia y las funcionalidades del sitio web. Los temas más básicos solo necesitan dos archivos para funcionar, pero un tema completo y que cumpla con los estándares de desarrollo modernos incluye muchos más elementos.

El archivo central es…style.cssYindex.phpEntre ellos,style.cssNo se trata solo de una hoja de estilo, sino también del “dossier de identidad” de un tema. El bloque de comentarios en la cabecera del archivo contiene metadatos del tema, como su nombre, autor, descripción y número de versión. Es precisamente a través de la lectura de estos datos que el backend de WordPress puede reconocer y mostrar el tema correspondiente.

Otro archivo necesario es…index.phpEs el archivo de plantilla principal del tema. Cuando WordPress no puede encontrar un archivo de plantilla más específico (como…).single.phpopage.phpCuando se utiliza ese método, se aplicará por defecto para renderizar la página.

Lecturas recomendadas Dominar el desarrollo de temas para WordPress: desde la personalización hasta la implementación de funciones avanzadas。

Además de estos dos archivos, un tema bien estructurado generalmente también incluye los siguientes directorios y archivos:
Archivos de plantilla: por ejemplo, los utilizados para renderizar un artículo individual.single.phpSe utiliza para renderizar la página.page.php…y también para las listas de artículos.archive.phpY el de la página principal.home.phpofront-page.php。
Componentes de la plantilla: almacenados en/template-parts/En el directorio se encuentran fragmentos de código reutilizables, como los resúmenes de artículos.content.php）、cabecera (header)header.php) y el pie de página (footer.php）。
Archivo de función:functions.phpEs el núcleo funcional del tema. Se utiliza para agregar funciones de soporte al tema, menús de registro y barras laterales, incorporar scripts y hojas de estilo, así como para definir diversas funciones personalizadas.
Directorio de recursos: por lo general, incluye/assets/Índice; y debajo de este, se encuentran otros contenidos./css/、/js/、/images/Subdirectorios que se utilizan para almacenar recursos estáticos de manera organizada.

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

Los archivos de plantilla principales y el nivel de plantillas.

WordPress utiliza un sistema inteligente llamado “estructura de plantillas” (template hierarchy) para determinar qué archivo de plantilla debe utilizarse para renderizar una página en particular. Comprender estas reglas de jerarquía es esencial para el desarrollo de temas (temas personalizados para el sitio web).

El principio de funcionamiento es el siguiente: cuando un usuario accede a una URL, WordPress primero determina qué tipo de página se trata (por ejemplo, la página principal, un artículo individual, una página de archivo de categorías, etc.) y luego busca el archivo de plantilla correspondiente según una lista de prioridades preestablecida. Si encuentra el archivo que mejor se ajusta a las necesidades de la página, lo utiliza; de lo contrario, continúa buscando hasta que encuentre uno que cumpla con los requisitos, en caso de que no haya encontrado ninguno que sea adecuado.index.php。

Análisis de archivos de plantillas comunes

Tomando como ejemplo una página de un artículo individual, el orden de búsqueda en WordPress es generalmente el siguiente:single-{post-type}-{slug}.php -> single-{post-type}.php -> single.php -> singular.php -> index.phpEsto significa que puedes crear plantillas exclusivas para tipos de artículos específicos, o incluso para un artículo concreto.

Otro archivo importante es…functions.phpAunque no forma parte de la estructura jerárquica de los templates, proporciona soporte administrativo para todos ellos. Puedes utilizarlo según sea necesario.add_theme_support()Las funciones se utilizan para declarar las funcionalidades soportadas por un tema, como imágenes destacadas de los artículos, logotipos personalizados, formatos de artículos, etc.

Lecturas recomendadas Guía completa para el desarrollo de sitios web de WordPress: desde cero hasta el dominio en la práctica.。

// 在 functions.php 中添加主题支持
function mytheme_setup() {
    // 支持特色图像
    add_theme_support( 'post-thumbnails' );
    // 支持自定义Logo
    add_theme_support( 'custom-logo' );
    // 支持HTML5的标记格式
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

Uso de funciones temáticas y del sistema de ganchos (hooks)

La flexibilidad y la escalabilidad de WordPress se deben en gran medida a su sistema de “ganchos” (hooks). Existen dos tipos de ganchos: los ganchos de acción (action hooks) y los ganchos de filtro (filter hooks). Los ganchos de acción te permiten insertar código personalizado en puntos específicos de ejecución, mientras que los ganchos de filtro te permiten modificar los datos que se transmiten durante el proceso.

Usar ganchos de acción para agregar funcionalidades.

Los ganchos de acción (action hooks) están compuestos por…do_action()Creación y uso de funcionesadd_action()La función monta la función de callback en el gancho (hook). En el desarrollo de temas, los ganchos de acción se utilizan frecuentemente para insertar contenido en posiciones específicas o para ejecutar operaciones en momentos concretos.

Por ejemplo.wp_enqueue_scriptsSe trata de un hook de acción clave que se utiliza para registrar y poner en cola de forma segura los archivos de estilo y JavaScript. Siempre debes cargar los recursos frontales a través de este proceso, en lugar de escribirlos directamente en los archivos de plantilla.oEtiquetas.

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

// 在 functions.php 中正确引入样式和脚本
function mytheme_scripts() {
    // 引入主样式表
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );
    // 引入自定义JavaScript文件
    wp_enqueue_script( 'mytheme-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );

Usar los ganchos de los filtros para modificar la salida.

Los ganchos de filtro (filter hooks) son...apply_filters()Creación y uso de funcionesadd_filter()Se trata de una función que permite montar (o asociar) una función de callback. Por ejemplo, puedes modificar la longitud de los resúmenes de los artículos o agregar un prefijo a los títulos de todos ellos.

// 修改摘要字数长度
function mytheme_excerpt_length( $length ) {
    return 30; // 将摘要字数限制为30字
}
add_filter( 'excerpt_length', 'mytheme_excerpt_length' );

Implementar un diseño responsive y funciones personalizadas.

Los temas modernos para WordPress deben ser responsive, es decir, deben ser capaces de adaptarse a diferentes tamaños de pantalla, desde ordenadores de escritorio hasta teléfonos móviles. Esto se logra principalmente mediante consultas de medios (media queries) en CSS. Además, al combinar estas funciones con las opciones de personalización de WordPress, se pueden ofrecer al usuario opciones de configuración amigables en la interfaz administrativa.

Construir un diseño responsive (que se adapte a diferentes dispositivos y resoluciones).

Una práctica común es adoptar una estrategia de CSS centrada en los dispositivos móviles. Se comienza escribiendo los estilos básicos para los dispositivos móviles y, a continuación, se utilizan consultas de medios (media queries) para agregar o modificar esos estilos según el tamaño de la pantalla.

Lecturas recomendadas Construir un sitio web profesional: Una guía completa para crear un tema personalizado para WordPress desde cero。

/* 基础样式（针对移动设备） */
.container {
    width: 100%;
    padding: 10px;
}

/* 平板设备及以上 */
@media (min-width: 768px) {
    .container {
        width: 750px;
        margin: 0 auto;
    }
}

/* 桌面设备 */
@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}

Integrar el personalizador para obtener una previsualización en tiempo real.

WordPressCustomizerEs una herramienta muy potente que permite a los administradores de sitios web previsualizar y modificar en tiempo real ciertas configuraciones de los temas. Puedes utilizarla para…functions.phpA través de China$wp_customizeSe agregan configuraciones y controles al objeto.

Por ejemplo, agregar una opción que permita modificar la información de derechos de autor en el pie de página del sitio web:

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

function mytheme_customize_register( $wp_customize ) {
    // 添加一个“版权文本”设置
    $wp_customize->add_setting( 'footer_copyright_text', array(
        'default'           => '© 2026 我的网站。保留所有权利。',
        'sanitize_callback' => 'sanitize_text_field', // 对输入进行净化
        'transport'         => 'postMessage', // 支持实时预览
    ) );

    // 为上述设置添加一个文本框控件
    $wp_customize->add_control( 'footer_copyright_text', array(
        'label'    => __( '页脚版权文本', 'mytheme' ),
        'section'  => 'title_tagline', // 放在“站点身份”区域
        'type'     => 'text',
    ) );
}
add_action( 'customize_register', 'mytheme_customize_register' );

Luego…footer.phpEn el archivo de plantilla, se utiliza…get_theme_mod()La función devuelve este valor:
echo esc_html( get_theme_mod( 'footer_copyright_text', '默认版权文本' ) );

resúmenes

El desarrollo de temas para WordPress es una habilidad integral que combina conocimientos de PHP, HTML, CSS y JavaScript, así como una comprensión profunda de la arquitectura central de WordPress. Comenzando por entender los conceptos más básicos…style.cssYindex.phpDesde el dominio de niveles de plantillas complejos y sistemas de enlaces (hooks), hasta la implementación de diseños responsivos…CustomizerLa integración es un paso esencial en el proceso de creación de temas profesionales, eficientes y fáciles de utilizar. Seguir una estructura de archivos y normas de codificación estándar no solo facilita el mantenimiento de los temas que desarrolles, sino que también garantiza su buena compatibilidad con el ecosistema de WordPress y con una amplia gama de plugins. Recuerda que el desarrollo de temas de calidad comienza con un enfoque centrado tanto en la experiencia del usuario como en la del desarrollador.

FAQ Preguntas más frecuentes

¿Qué archivos necesita un tema de WordPress muy simple?

Un tema de WordPress minimalista que se pueda activar y utilizar fácilmente solo necesita dos archivos:style.cssYindex.php。style.cssLa cabecera debe contener el bloque de comentarios de información del tema correcto.index.phpEntonces, será necesario incluir los ciclos básicos de WordPress y la estructura HTML esencial.

¿Cómo puedo agregar un menú de navegación a mi tema?

En primer lugar, necesitasfunctions.phpEn el uso chinoregister_nav_menus()Se utiliza una función para registrar una o más ubicaciones de platos. Luego, esto se incorpora en la plantilla del tema (generalmente…).header.php(En chino): “El lugar donde deseas que se muestre el menú.”wp_nav_menu()Se utiliza una función para llamar y mostrar el menú registrado.

¿Qué son los subtemas y por qué debería usarlos?

Un subtema es un tema que depende de otro tema (el tema principal). Permite modificar y expandir las funciones y estilos del tema principal sin tener que modificar directamente los archivos de este. La ventaja de esto es que, cuando el tema principal se actualiza, tus modificaciones personalizadas (que se encuentran en el subtema) no se perderán, lo que garantiza la seguridad y la facilidad de las actualizaciones.

¿Cómo puedo hacer que mi tema admita múltiples idiomas?

Hacer que un tema sea compatible con múltiples idiomas (internacionalización) implica principalmente dos pasos. En primer lugar, durante el desarrollo, se deben utilizar strings (cadenas de texto) que necesiten ser traducidas de manera que puedan ser modificadas posteriormente.__()o_e()En primer lugar, es necesario encapsular las funciones de traducción. A continuación, se utiliza una herramienta como Poedit para extraer estas cadenas de texto del código y generar los archivos necesarios para la traducción..potArchivo, y luego crea uno correspondiente para cada idioma..poY.moTraduzca el documento. Por últimofunctions.phpLlamada desde Chinaload_theme_textdomain()Función para cargar la traducción.