Desde cero: una guía completa y técnicas básicas para el desarrollo de temas de WordPress.

Los temas de WordPress son el esqueleto central que determina la apariencia y las funcionalidades de un sitio web. Dominar las habilidades de desarrollo relacionadas con ellos significa que puedes personalizar completamente todo en tu sitio web, liberándote de las limitaciones de los temas preestablecidos y logrando así el diseño y las funcionalidades que deseas. Comenzar por comprender sus conceptos básicos y su estructura de archivos es el primer paso en este camino.

Cada tema de WordPress es un elemento que se encuentra en…/wp-content/themes/Los archivos de una carpeta dentro del directorio. Un tema funcional básico solo necesita dos archivos:style.cssYindex.phpEntre ellos,style.cssNo solo se utiliza para almacenar los estilos, sino que las notas en la parte superior del archivo también contienen metadatos sobre el tema, lo cual es clave para que WordPress lo reconozca.

Enstyle.cssEn la parte superior, es necesario utilizar comentarios específicos para definir el tema. Un ejemplo típico es el siguiente:

Lecturas recomendadas Guía completa para el desarrollo de temas de WordPress: tutorial práctico desde principiante hasta experto。

/*
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
*/

Esta información aparecerá en la lista de “Apariencia > Temas” en el panel de administración de WordPress.index.phpSe trata del archivo de plantilla principal del tema, que sirve como solución de reemplazo por defecto cuando no existen otras plantillas más específicas. A medida que avance el desarrollo, irás reemplazando o complementando este archivo con otros archivos de plantilla más específicos.

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 jerárquica de los templates relacionados con un tema.

WordPress utiliza un sofisticado sistema de jerarquía de plantillas para determinar qué archivo de plantilla debe utilizarse para renderizar cada solicitud de página en particular. Comprender esta estructura es fundamental para desarrollar temas de manera eficiente, ya que te ayuda a saber cómo nombrar los archivos al crear páginas específicas (como las de detalles de un artículo o las páginas de categorías).

Reglas de denominación para los archivos de plantillas principales

Los niveles de las plantillas siguen el principio de “de lo especial a lo general”. Por ejemplo, cuando se accede a un artículo de blog con el ID 123, WordPress busca en el siguiente orden:single-post-123.php、single-post.php、single.phpY, por último,singular.phpSolo se utilizará si todas estas opciones no están disponibles.index.php。

Los archivos de plantillas centrales más utilizados incluyen:
- front-page.phpSe utiliza para configurar la página principal del sitio web.
- home.phpPágina de índice de artículos del blog.
- single.phpUn artículo de blog individual o un artículo de un tipo de artículo personalizado.
- page.phpPágina única.
- archive.phpPlantillas generales para todas las páginas de archivo (clasificación, etiquetas, autor, etc.).
- category.phpPágina de un directorio de categorías específicas.
- 404.phpPágina de error 404.
- header.php、footer.php、sidebar.phpEstos suelen ser fragmentos de plantillas locales.

Funciones comunes para llamar a plantillas locales

Para mantener la modularidad y la mantenibilidad del código, WordPress proporciona varias funciones clave para cargar archivos de plantillas locales. La más importante de ellas es…get_header()、get_footer()Yget_sidebar()Se utilizan respectivamente para introducir…header.php、footer.phpYsidebar.php。

Lecturas recomendadas Conceptos clave en el desarrollo de temas para WordPress。

Otra función de vital importancia es…get_template_part()Permite introducir cualquier fragmento de plantilla de una manera más flexible. Por ejemplo, en un ciclo de artículos de un blog, es posible querer utilizar una plantilla específica para el contenido del artículo en cuestión.

<?php while ( have_posts() ) : the_post(); ?>
    <?php get_template_part( 'template-parts/content', get_post_type() ); ?>
<?php endwhile; ?>

Este código buscará de preferencia…template-parts/content-post.php(Asumiendo que el tipo de artículo es…)postSi no se encuentra, se carga.template-parts/content.php。

Utilizar funciones centrales y funciones de control (hookes) para impulsar el funcionamiento del sistema.

Las potentes funcionalidades de WordPress se deben a su amplia biblioteca de funciones y al sistema de “ganchos” (hooks) basado en eventos. En el desarrollo de temas, el uso experto de las funciones y los ganchos del núcleo de WordPress es clave para implementar funciones complejas, optimizar el rendimiento y garantizar la seguridad.

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

Funciones básicas para obtener y generar contenido

En los archivos de plantilla, frecuentemente utilizas una serie de funciones para obtener y mostrar contenido dinámico. Por ejemplo,the_title()Se utiliza para mostrar el título del artículo o la página actual.the_content()Entonces, se genera el contenido principal procesado y formateado. Lo que corresponde a la función que se ejecuta de forma directa es lo que se muestra aquí.get_Las funciones que aparecen al principio…get_the_title()Devuelven datos que puedes procesar posteriormente en tu código.

El ciclo de artículos del blog es el núcleo de los templates de WordPress, y su estructura de código estándar es la siguiente:

¿  
    ¿
        <!-- 在这里输出文章内容 -->
        <h2>¿¿¿php the_title();???</h2>
        <div>¿¿php the_content(); ??</div>
    ¿php endwhile;?&gt;
    <!-- 这里可以放置分页导航 -->
<?php else : ?>
    <!-- 如果没有找到文章，显示的内容 -->
    <p>No hay contenido disponible.</p>
¿¿php endif; ?&gt;

Ampliación de funcionalidades mediante ganchos (hooks).

Los ganchos se dividen en dos tipos: “acciones” y “filtros”. Los ganchos de acción te permiten insertar tu propio código cuando ocurre un evento específico, por ejemplo, cuando…wp_headSe pueden generar etiquetas meta adicionales en la salida del gancho (hook). Puedes utilizar para ello los métodos correspondientes.add_action()Una función que se utiliza para montar (o cargar) otra función propia.

Lecturas recomendadas Guía de iniciación para el desarrollo de temas para WordPress: Crea tu primer tema personalizado desde cero。

Por ejemplo, en el tema de…functions.phpSe ha añadido soporte para enlaces de tipo Feed en el archivo:

add_action( 'after_setup_theme', 'mytheme_setup' );
function mytheme_setup() {
    // 为文章和评论添加Feed链接到head中
    add_theme_support( 'automatic-feed-links' );
}

Los ganchos de filtro te permiten modificar los datos. Por ejemplo, puedes utilizarlos para…excerpt_lengthLos filtros pueden modificar la longitud del resumen de los artículos.

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

add_filter( 'excerpt_length', 'mytheme_custom_excerpt_length', 999 );
function mytheme_custom_excerpt_length( $length ) {
    return 30; // 将摘要长度设置为30个单词
}

functions.phpEl archivo es el “centro de funcionalidades” del tema; todas las funciones personalizadas, las llamadas a los hooks y las declaraciones de las funcionalidades del tema deben colocarse aquí.

La función de temas de declaración está disponible.

utilizaradd_theme_support()Es una buena práctica de desarrollo declarar en las funciones qué funciones principales de WordPress tu tema soporta. Esto no solo activa esas funciones, sino que también asegura la compatibilidad con futuras versiones de WordPress.

Las declaraciones de funciones comunes incluyen:

add_action( 'after_setup_theme', 'mytheme_theme_support' );
function mytheme_theme_support() {
    // 支持文章特色图像
    add_theme_support( 'post-thumbnails' );
    // 支持HTML5语义化标记
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
    // 支持自定义Logo
    add_theme_support( 'custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
    ) );
}

Integración de estilos personalizados y archivos de scripts

Un tema moderno debe gestionar correctamente sus hojas de estilo CSS y sus scripts JavaScript para garantizar que se carguen según sea necesario, evitar conflictos y cumplir con las mejores prácticas de optimización del rendimiento del lado del cliente.

Registro seguro y carga de recursos

En ningún caso debes usar contenido directamente en los archivos de plantillas.<link>o<script>Para codificar los recursos de forma fija utilizando etiquetas, el método correcto es… (El texto se interrumpe aquí; no se proporciona la información completa sobre cómo proceder).wp_enqueue_scriptsAcción de gancho, en coordinación con…wp_enqueue_style()Ywp_enqueue_script()Función.

Enfunctions.phpEn este contexto, necesitas definir una función para gestionar la cola de recursos.

add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_assets' );
function mytheme_enqueue_assets() {
    // 加载主样式表
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri(), array(), '1.0' );

// 加载Google字体
    wp_enqueue_style( 'mytheme-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap', array(), null );

// 加载主JavaScript文件，并依赖jQuery，在页脚加载
    wp_enqueue_script( 'mytheme-script', get_template_directory_uri() . '/assets/js/main.js', array( 'jquery' ), '1.0', true );

// 如果需要传递PHP变量到JS，可以使用wp_localize_script
    wp_localize_script( 'mytheme-script', 'myThemeData', array(
        'ajax_url' => admin_url( 'admin-ajax.php' ),
        'home_url' => home_url(),
    ));
}

Este método garantiza que las relaciones de dependencia estén correctas, evita cargas repetidas y permite que los plugins y otros temas sean gestionados a través de sus declaraciones de dependencia.

Agregar soporte de estilos al editor Gutenberg

Con la popularización de los editores de bloques, es de suma importancia agregar soporte para estilos frontales a los editores back-end para lograr una experiencia de edición de “lo que se ve es lo que se obtiene”. Puedes utilizar…add_theme_support( ‘editor-styles’ )Y también se agrega una tabla de estilos para el editor a la cola de procesamiento.

add_action( 'after_setup_theme', 'mytheme_editor_styles' );
function mytheme_editor_styles() {
    add_theme_support( 'editor-styles' );
    add_editor_style( 'assets/css/editor-style.css' );
}

resúmenes

El desarrollo de temas para WordPress comienza con la comprensión de la estructura básica de los archivos, para luego profundizar en los niveles de las plantillas, las funciones centrales, los sistemas de ganchos (hooks) y la gestión de recursos. Lo esencial es la práctica: partiendo de lo más simple…style.cssYindex.phpComienza, y luego crea.header.phpYfooter.phpRealiza la división del código en módulos. A continuación, utiliza la estructura jerárquica de las plantillas para crear plantillas específicas para diferentes tipos de páginas.single.phpopage.php. Enfunctions.phpA través de ganchos y…add_theme_supportAñade funciones de manera segura y asegúrate de hacerlo siempre de acuerdo con los procedimientos establecidos.wp_enqueue_scriptsEstos recursos se utilizan para gestionar los estilos y los scripts de un sitio web. Al seguir estos principios y pasos fundamentales, podrás crear temas para WordPress que sean profesionales, eficientes y fáciles de mantener.

FAQ Preguntas más frecuentes

¿Cuántos archivos se necesitan como mínimo para crear un tema para WordPress?

Técnicamente, un tema que sea reconocido y activado por WordPress necesita, como mínimo, dos archivos:style.cssYindex.php。style.cssLas notas de encabezado de los archivos deben contener la información de metadatos del tema correcta, por ejemplo…Theme NamePeroindex.phpComo el archivo de plantilla más básico, se utiliza para renderizar todas las páginas.

¿Cómo crear una plantilla de página personalizada para mi tema?

Crear plantillas de páginas personalizadas es muy sencillo. Solo necesitas hacerlo en cualquier archivo de plantilla (generalmente…).page.phpAñada un bloque de comentarios PHP específico en la parte superior de la página. Por ejemplo, para crear una plantilla de “página de ancho completo”, puede crear un nuevo archivo con el nombre…template-full-width.phpEl archivo, y al comienzo del mismo se debe escribir:/* Template Name: 全宽页面 */Después de guardar los cambios, al editar una página en el backend de WordPress, podrás ver y seleccionar la opción “Página de ancho completo” en el menú desplegable de “Plantillas” de las “Propiedades de la página”.

¿Por qué se utiliza `add_action` en `functions.php` para agregar funcionalidades?

Directamente en…functions.phpEl código de las funciones puede ejecutarse en el momento inadecuado, lo que puede provocar errores o hacer que las funciones no funcionen correctamente.add_action()oadd_filter()Montar tu función en un hook específico de WordPress asegura que el código se ejecute en el momento y de la manera correcta y segura. Por ejemplo, puedes usar un hook de tipo `post_action` después de que un artículo se haya publicado para que tus funciones se ejecuten automáticamente.after_setup_themeLos ganchos (hooks) se utilizan para la inicialización de los temas.wp_enqueue_scriptsLos “ganchos” (hooks) se utilizan para cargar recursos. Esta es una práctica recomendada en la arquitectura de plugins de WordPress, ya que mejora la modularidad y la compatibilidad del código.

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

Para que un tema sea compatible con múltiples idiomas, se deben seguir varios pasos. En primer lugar,style.cssSe utiliza en la cabecera y en todos los archivos de plantillas.__()、_e()Utiliza funciones de traducción para envolver todas las cadenas de texto que necesitan ser traducidas. En segundo lugar,functions.phpEn el uso chinoload_theme_textdomain()Se utiliza una función para cargar los archivos de traducción. Finalmente, se emplean herramientas como Poedit para extraer las cadenas de texto del código fuente y generar los archivos de traducción correspondientes..potEl archivo, y por favor que el traductor cree el texto correspondiente en el idioma deseado (por ejemplo:zh_CN.poY.moEl archivo de traducción debe colocarse en la carpeta del tema correspondiente./languages/Puede colocarlo directamente dentro de la carpeta.

¿Qué permisos y normativas deben tenerse en cuenta al desarrollar temas comerciales?

Al desarrollar temas comerciales para su distribución o venta, es esencial cumplir estrictamente con los requisitos de la licencia de WordPress. El aspecto más importante es que tu tema debe estar licenciado bajo la misma licencia que el núcleo de WordPress: GPL v2 o una versión posterior. Esto implica que otras personas tienen el derecho de utilizar, modificar y redistribuir el código de tu tema. Además, es crucial seguir los estándares de codificación oficiales de WordPress y las normas de revisión de temas para garantizar la calidad, seguridad y compatibilidad del código. Es igualmente importante declarar correctamente las licencias de todos los recursos externos utilizados (como fuentes y bibliotecas de iconos), asegurándose de que sean compatibles con la licencia GPL o que cuenten con una autorización comercial.