Guía definitiva para el desarrollo de temas de WordPress: un tutorial completo y las mejores prácticas, desde el nivel inicial hasta el avanzado.

Fundamentos del desarrollo de temas para WordPress y configuración del entorno de desarrollo

Antes de comenzar a desarrollar temas de WordPress, es necesario establecer un entorno de desarrollo local profesional. Esto no solo mejorará la eficiencia del desarrollo, sino que también evitará afectar el sitio web en línea. Se recomienda utilizar entornos integrados como XAMPP, MAMP o Local by Flywheel, que ofrecen una solución completa de PHP, MySQL y Apache/Nginx.

Después de configurar el entorno, necesitas ir a la carpeta de instalación de WordPress ywp-content/themesCree una nueva carpeta de tema en la carpeta. La estructura mínima de un tema solo requiere dos archivos: un archivo de hoja de estilo.style.cssy los archivos de plantilla principales.index.php。

style.cssNo se trata solo de un archivo de estilo, sino que también funciona como la “tarjeta de identificación” del tema. Debe agregar comentarios con información sobre el tema al principio del archivo para que WordPress pueda reconocerlo.

Lecturas recomendadas Guía definitiva para el desarrollo de temas de WordPress: un tutorial completo desde lo básico hasta la práctica.。

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个用于学习的自定义WordPress主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

index.phpEste es el archivo de entrada predeterminado del tema, y WordPress lo usará prioritariamente para renderizar la página. Incluso si el contenido es muy simple al principio, este archivo es indispensable. Una vez que hayas creado estos dos archivos, podrás ver y activar tu tema en el panel de control de WordPress, en la sección “Apariencia” -> “Temas”.

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

Comprender la estructura central de los documentos del tema

Un tema de WordPress completo sigue una estructura de archivos estándar, lo que facilita la organización y el mantenimiento del código. Además de eso,style.cssYindex.phpA continuación, se presentan otros documentos clave:

functions.phpEs el “motor” del tema. No se trata de un script que se ejecute directamente en el navegador, sino de un archivo que se carga automáticamente en el núcleo de WordPress. Aquí es donde se realizan todas las mejoras de las funciones del tema, como el menú de registro, la barra lateral, la adición de funciones compatibles con el tema y la carga de scripts y estilos.

header.phpYfooter.phpCada uno de ellos es responsable de la parte superior (cabeza) y la parte inferior (pie de página) del sitio web.get_header()Yget_footer()Los funciones pueden introducirse en otros archivos de plantillas para lograr la reutilización del código.

page.phpSe utiliza para renderizar páginas estáticas.single.phpSe utiliza para renderizar un artículo individual.archive.phpSe utiliza para renderizar páginas de archivo, como categorías y etiquetas. El nivel de plantillas de WordPress determina que, para diferentes tipos de solicitudes de página, el sistema seleccione automáticamente el archivo de plantilla más específico para mostrar.

Lecturas recomendadas Una guía completa para crear un tema de WordPress de alto rendimiento desde cero.。

Sistema de plantillas y jerarquía de plantillas.

El sistema de plantillas de WordPress se basa en un conjunto de reglas jerárquicas claras, denominadas “jerarquía de plantillas”. Estas reglas determinan qué archivo de plantilla buscará y cargará automáticamente WordPress cuando se acceda a una página específica. Comprenderlas es clave para desarrollar temas de manera eficiente.

Por ejemplo, cuando un usuario visita una publicación de blog, WordPress busca el archivo de plantilla en el siguiente orden:single-{post-type}-{slug}.php -> single-{post-type}.php -> single.php -> singular.php -> index.phpUtilizará el primer archivo disponible que encuentre. Esto significa que puedes crear plantillas altamente personalizadas para un tipo de artículo específico o incluso para un artículo en particular.

Crear y usar plantillas de página personalizadas.

Además de las plantillas predeterminadas del sistema, también puedes crear plantillas de página personalizadas y aplicarlas a cualquier página seleccionada. Esto ofrece una gran flexibilidad para diseñar maquetas de página únicas.

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

Para crear una plantilla de página personalizada, necesitas agregar un bloque de comentarios PHP específico en la parte superior del archivo de la plantilla. Por ejemplo, para crear una plantilla llamada “Página de ancho completo”, puedes crear un nuevo archivo como el siguiente:template-fullwidth.phpY escriba lo siguiente al principio:

<?php
/**
 * Template Name: 全宽页面
 * Description: 一个没有侧边栏的全宽度页面模板。
 */

Después de completar la escritura del código, al editar la página en el panel de administración de WordPress, verás la opción “Página de ancho completo” en el menú desplegable “Plantilla”, en la sección “Propiedades de la página”. Selecciona esta opción y actualiza la página. La página se renderizará utilizando la plantilla que hayas personalizado.

Utilizar etiquetas condicionales para implementar contenido dinámico.

Las etiquetas condicionales son un conjunto de funciones booleanas proporcionadas por WordPress que se utilizan para determinar si la página actual cumple con una condición específica. Se emplean ampliamente en los archivos de plantillas para controlar dinámicamente la visualización del contenido.

Lecturas recomendadas Guía de desarrollo de temas de WordPress: cómo crear una interfaz de sitio web personalizada desde cero.。

Por ejemplo.is_front_page()Determinar si es la página principal del sitio web.is_single()Determinar si se trata de la página de un artículo individual.is_page()Determinar si es una página estática.is_archive()Determine si se trata de cualquier página de archivo. A través de ellas, puede personalizar la lógica y la salida de diferentes páginas con sencillas sentencias if.

¿php si (es_página_principal()) : ?>
    <h1>¡Bienvenido a nuestra página de inicio!</h1>
¿¿php si (is_single()):??
    <h1>¿¿¿php the_title();???</h1>
    <div class="post-meta">Fecha de publicación:</div>
¿¿php endif; ?&gt;

Funciones temáticas y funciones centrales

functions.phpLos archivos son el centro neurálgico de las funciones del tema. Aquí, puedes ampliar el tema de forma segura sin necesidad de modificar los archivos principales de WordPress.

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

Registro del menú de navegación y la barra lateral

WordPress permite que los temas declaren la ubicación de la navegación que admiten, lo que se hace a través deregister_nav_menus()Implementación de la función. Por lo general, lo hacemos enfunctions.phpEn chino, use un montaje paraafter_setup_themeEsto se hace mediante una función en el gancho.

function mytheme_setup() {
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
        'footer'  => __( '页脚菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

Después de registrarse, los usuarios pueden asignar menús a estas dos ubicaciones en “Aspecto” -> “Menú”. En la plantilla, se utiliza .wp_nav_menu( array( 'theme_location' => 'primary' ) )Para mostrar el menú.

El proceso de registro en la barra lateral (también conocida como “área de herramientas”) es similar al utilizado en otros lugares.register_sidebar()Función. Luego, el usuario puede agregar diversas herramientas a estas áreas en “Apariencia” -> “Herramientas”.

Agregar soporte para la función de temas.

Muchas de las funciones de los temas modernos de WordPress requieren que se declare explícitamente su compatibilidad. Por ejemplo, para que los artículos y las páginas tengan imágenes destacadas (miniaturas), es necesario agregar soporte para ello. Esto también se aplica afunctions.phpEsto se hace en la función de inicialización.

function mytheme_setup() {
    // ... 其他设置代码
    add_theme_support( 'post-thumbnails' ); // 支持特色图像
    add_theme_support( 'title-tag' ); // 让WordPress管理标题标签
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) ); // 支持HTML5标记
}

Introducir scripts y estilos de manera segura

Añadir correctamente los archivos CSS y JavaScript a la cola es una de las mejores prácticas para el desarrollo de WordPress, ya que evita conflictos de recursos y cargas repetidas. Utilicewp_enqueue_style()Ywp_enqueue_script()Funciones, y asegúrate de montarlas (es decir, de hacer que estén disponibles para su uso).wp_enqueue_scriptsEn el gancho.

function mytheme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );
    // 引入自定义的JavaScript文件
    wp_enqueue_script( 'mytheme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );

Técnicas avanzadas de desarrollo de temas

Después de dominar lo básico, algunas técnicas avanzadas pueden hacer que tu tema sea más potente y profesional.

Crea subtemas para personalizarlos.

Modificar directamente el tema padre es peligroso y no es sostenible, ya que la actualización del tema sobrescribirá todas tus modificaciones. El método correcto es crear un subtema. El subtema solo contiene tus propios archivos personalizados (por ejemplo, <).style.css、functions.phpy los archivos de plantilla cubiertos), y heredar todas las funciones del tema padre.

subtemáticostyle.cssEl comentario de cabecera debe incluirTemplate:Bien, se usa para especificar el nombre del directorio del tema padre.

/*
Theme Name: 我的子主题
Template: parent-theme-folder-name
*/

subtemáticofunctions.phpSe cargará antes del tema padre, y aquí podrás agregar o modificar funciones.

Utilizar WordPress para mostrar contenido de forma recurrente.

“The Loop” es una estructura de código PHP en las plantillas de WordPress que se utiliza para obtener y mostrar varios contenidos de la base de datos. Es el núcleo de casi todas las páginas de plantillas.

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

En el bucle, puedes usar una serie de etiquetas de plantilla, comothe_title()、the_content()、the_excerpt()、the_permalink()Espera a que se muestre la información del artículo actual.

Implementar la función de personalización de temas

El personalizador de WordPress permite a los usuarios previsualizar y modificar en tiempo real algunas configuraciones del tema (como el color o el logotipo). Puedes hacerlo a través defunctions.phpAñade opciones personalizadas a tu tema.

Esto implica el uso de…WP_Customize_ManagerSe utilizan clases para agregar configuraciones, controles y bloques. Aunque el código es relativamente complejo, ofrece a los usuarios una experiencia de personalización sin problemas. Por lo general, se agrega un panel, luego se agregan varias secciones debajo del panel y, por último, se agregan configuraciones y controles específicos en cada sección.

function mytheme_customize_register( $wp_customize ) {
    // 添加一个设置
    $wp_customize->add_setting( 'header_color', array(
        'default' => '#ffffff',
        'sanitize_callback' => 'sanitize_hex_color',
    ) );
    // 添加一个控件来控制这个设置
    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_color', array(
        'label' => __( '头部背景色', 'my-first-theme' ),
        'section' => 'colors',
    ) ) );
}
add_action( 'customize_register', 'mytheme_customize_register' );

Luego, en la plantilla, useget_theme_mod( 'header_color' )Para obtener los valores establecidos por el usuario y aplicarlos a la página.

resúmenes

El desarrollo de temas de WordPress es un proceso que comienza con la comprensión de la estructura básica de los archivos, avanza hacia el sistema de plantillas y las funciones, y finalmente, permite dominar las técnicas avanzadas de personalización. Los desarrolladores exitosos no solo necesitan estar familiarizados con PHP, HTML, CSS y JavaScript, sino que también deben comprender profundamente los conceptos centrales de WordPress, como la jerarquía de plantillas, los bucles, los ganchos y las funciones. Además, deben seguir las mejores prácticas, como el uso de subtemas y la creación de plugins.functions.phpAgregar funcionalidades y aplicar un estilo de scripting seguro puede garantizar que el tema que crees sea estable, eficiente y fácil de mantener. Con la práctica constante, podrás crear temas de WordPress potentes y profesionales que satisfagan una amplia variedad de necesidades.

FAQ Preguntas más frecuentes

¿Es necesario dominar PHP para desarrollar temas de WordPress?

Sí, PHP es el lenguaje central para el desarrollo de temas de WordPress. Necesitas dominar la sintaxis básica de PHP y comprender cómo incrustar código PHP en HTML para mostrar contenido dinámico. Aunque las tecnologías de front-end (HTML, CSS, JavaScript) también son importantes, todo lo relacionado con la interacción con los datos de WordPress, la lógica de programación y la ampliación de funcionalidades depende de PHP.

¿Se puede cambiar el nombre del archivo style.css del tema por otro?

No se puede.style.cssEste nombre de archivo es un requisito obligatorio para que WordPress reconozca el tema y sus metadatos (como el nombre del tema, la versión y el autor). Debe usar este nombre de archivo exacto y colocarlo en el directorio raíz del tema. Sin embargo, puede modificarlo a través defunctions.phpIntroduce otros archivos CSS adicionales para organizar tu código de estilo.

¿Cómo hacer que mi tema admita traducciones en varios idiomas?

Es fundamental que tu tema admita la internacionalización (i18n). Durante el desarrollo, debes envolver todos los cadenas de texto orientadas al usuario con una función de traducción específica, por ejemplo:__( ‘文本’, ‘text-domain’ )o_e( ‘文本’, ‘text-domain’ )Al mismo tiempo,style.cssEstablecer correctamente los comentarios de cabecera deText DomainY además…functions.phpEn el uso chinoload_theme_textdomain()Un funcionamiento de carga de archivos de traducción. Una vez completado, los traductores pueden usar herramientas como Poedit para crear traducciones..poY.moTraducir el documento.

¿Por qué mi plantilla personalizada no aparece en la lista desplegable de atributos de la página?

Asegúrate de que hayas agregado correctamente el bloque de comentarios PHP con las especificaciones de formato en la parte superior del archivo de plantilla personalizada. El bloque de comentarios debe incluir la línea “Nombre de la plantilla:” y el archivo debe estar ubicado en el directorio raíz o en un subdirectorio de tu tema. Además, comprueba si el archivo tiene errores de sintaxis, ya que esto podría impedir que WordPress lea correctamente la información del encabezado del archivo. Asegúrate de que estás editando una “página” y no una “publicación”, ya que las plantillas personalizadas solo funcionan para las páginas.

¿Podría escribir directamente la consulta SQL en el tema para obtener los datos?

Esta es una práctica muy desaconsejable. Escribir directamente consultas SQL evitará las capas de seguridad de datos centrales de WordPress (como la limpieza de datos, el almacenamiento en caché y la verificación de permisos), lo que facilitará la introducción de vulnerabilidades de seguridad (como la inyección SQL) y puede hacer que la estructura de la base de datos no sea compatible con futuras versiones de WordPress. Siempre debe utilizar las API y funciones proporcionadas por WordPress para obtener datos, por ejemplo,WP_QueryClases,get_posts()、get_pages()etc. Son más seguros, más eficientes y fáciles de mantener.