Guía de inicio para el desarrollo de temas para WordPress: Crea tu primer subtema desde cero

WordPress, como el sistema de gestión de contenidos más popular a nivel mundial, debe su gran capacidad de personalización en gran medida a su sistema de temas. Para los desarrolladores que desean personalizar el aspecto de su sitio web sin tener que modificar el código fuente, los temas hijos (Child Themes) son la solución ideal. Estos permiten heredar de manera segura todas las funcionalidades del tema padre y realizar modificaciones únicamente donde sea necesario, asegurando que las actualizaciones del tema padre no afecten los cambios que usted ha realizado. Este artículo le guiará paso a paso para crear un tema hijo de WordPress completamente funcional, desde cero.

¿Qué es un subtema y cuáles son sus principales ventajas?

Un subtema es un tema independiente de WordPress que depende de otro tema (denominado tema padre) para funcionar. La idea central de los subtemas es la “herencia y sobrescritura” de las características del tema padre. Por lo general, un subtema solo contiene una hoja de estilo (stylesheet) y un archivo de funciones (function file), pero mediante estos dos archivos es posible personalizar en profundidad el aspecto y el comportamiento del tema padre.

El uso de subtemas ofrece varias ventajas insustituibles. La principal de ellas es la seguridad en las actualizaciones, que es de suma importancia. Cuando modifica directamente los archivos del tema principal, cualquier cambio personalizado que haga se perderá si se publica una nueva versión del tema principal, lo que puede causar problemas en el estilo o el funcionamiento del sitio web. Sin embargo, al utilizar subtemas, sus modificaciones quedan aisladas en el directorio correspondiente al subtema, permitiendo que el tema principal se actualice sin afectarlas.

Lecturas recomendadas Guía de introducción al complemento WooCommerce: cómo construir tu tienda en línea desde cero.。

En segundo lugar, está la eficiencia en el desarrollo. No es necesario crear todos los archivos de plantilla de un tema desde cero; basta con modificar la parte que se necesite dentro del subtema. Por ejemplo, si solo desea cambiar el encabezado del sitio web, solo tendrá que hacerlo dentro del subtema correspondiente. header.php Archivos, todos los demás templates (como…) single.php、page.phpTodos utilizarán automáticamente la versión del tema padre, lo que mejora significativamente la eficiencia del desarrollo.

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

Por último, hay la claridad de la estructura y la portabilidad. Todo el código personalizado se encuentra en una carpeta temática independiente, lo que hace que su organización sea muy evidente. Cuando necesite migrar el sitio web a un nuevo servidor o compartir sus modificaciones con otros miembros del equipo, basta con copiar esta carpeta temática, lo que simplifica mucho su gestión.

Cree su primer directorio de subtemas y su primer archivo.

Construir un subtema es técnicamente sencillo; solo necesitas seguir una estructura de archivos y convenciones de nombres específicas. Para comenzar, debes ir al directorio de temas de WordPress. /wp-content/themes/ Cree una nueva carpeta. El nombre de esta carpeta debe ser el mismo que el nombre de su subtema. Se recomienda utilizar letras minúsculas, guiones y números, por ejemplo: my-first-child-theme。

Dentro de esa carpeta, el primer y más importante archivo que debe crear es el archivo de estilo (stylesheet). style.cssEste archivo no solo contiene reglas de estilo, sino que las notas en su cabecera son cruciales para que WordPress reconozca el subtema. Estas notas deben incluir información específica.

/*
 Theme Name:   My First Child Theme
 Theme URI:    https://example.com/my-first-child-theme/
 Description:  A child theme of the Twenty Twenty-Six theme
 Author:       Your Name
 Author URI:   https://example.com
 Template:     twentytwentysix
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  my-first-child-theme
*/

Por favor, tenga en cuenta que…Template: Esta línea es de vital importancia: debe coincidir exactamente con el nombre de la carpeta del tema padre, teniendo en cuenta la distinción entre mayúsculas y minúsculas. Por ejemplo, si utiliza el tema predeterminado de WordPress, Twenty Twenty-Six, el nombre de su carpeta será… twentytwentysixEntonces, aquí definitivamente se debe escribir. twentytwentysixEs a través de esta declaración que WordPress establece la relación de herencia entre los temas secundarios (subtemas) y los temas principales (temas padre).

Lecturas recomendadas Guía definitiva para el desarrollo de temas para WordPress: Cómo crear temas de sitios web profesionales desde cero。

Para que los subtemas puedan cargar sus estilos de manera correcta, generalmente también es necesario crear un segundo archivo central: el archivo de funciones. functions.phpLa función de este archivo es la misma que la del tema principal. functions.php Carga en paralelo, en lugar de sobrescribir los archivos existentes. Puede agregar código PHP personalizado; lo más importante es que utilice este código para agregar correctamente las hojas de estilo del tema principal y de los temas secundarios a la cola de procesamiento.

Cargar los estilos de manera correcta a través del archivo de funciones.

En los subtemas…functions.php La tarea principal de un archivo suele ser gestionar la carga de las hojas de estilo. Aunque en los subtemas… style.css Será reconocido automáticamente por WordPress, pero para garantizar que los estilos del tema padre se carguen de manera prioritaria y correcta, la práctica recomendada es utilizar un gancho de acción (action hook) de WordPress para gestionar la cola de carga de forma explícita.

Necesitas que se haga en el subtema. functions.php Escribe una función en el archivo y úsala. wp_enqueue_scripts Este gancho de acción se utiliza para llamarlo. Este método garantiza que los archivos de estilo se carguen de manera correcta y eficiente en la parte superior de la página.

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

A continuación se presenta un ejemplo estándar de implementación:

<?php
/**
 * Enqueue parent and child theme stylesheets.
 */
function my_first_child_theme_enqueue_styles() {
    // 首先加载父主题样式表
    wp_enqueue_style( 
        'parent-style', 
        get_template_directory_uri() . '/style.css' 
    );

// 然后加载子主题样式表
    wp_enqueue_style( 
        'child-style', 
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style'), // 声明依赖关系，确保父主题样式先加载
        wp_get_theme()->get('Version') // 使用主题版本号作为缓存破坏参数
    );
}
add_action( 'wp_enqueue_scripts', 'my_first_child_theme_enqueue_styles' );

En el código anterior,get_template_directory_uri() La función devuelve el URI del directorio del tema padre. get_stylesheet_directory_uri() La función devuelve el URI del directorio del tema activo (es decir, el subtema) en ese momento. Al declarar que la tabla de estilos del subtema depende de la tabla de estilos del tema principal, aseguramos que el orden de superposición del CSS sea correcto: primero se aplican los estilos del tema principal y, a continuación, los estilos del subtema los sobrescriben y los complementan.

Implementar la personalización de subtemas comunes

Una vez que la estructura básica esté establecida, podrá comenzar con el trabajo de personalización real. Las personalizaciones más comunes suelen ocurrir a nivel de los archivos de estilo y de los templates.

Lecturas recomendadas Análisis en profundidad del desarrollo de plugins para WordPress: Cómo crear extensiones de funciones personalizadas desde cero。

Para personalizar los estilos, simplemente tiene que hacerlo en el subtema correspondiente. style.css Se agregan nuevas reglas CSS al archivo. Dado que estas se cargan después de los estilos del tema principal, sus reglas tendrán una prioridad más alta (siempre que la especificidad de los selectores sea la misma). Por ejemplo, si desea cambiar el color de los enlaces de todo el sitio, puede agregar lo siguiente:

/* 在子主题的 style.css 文件中 */
a {
    color: #3498db; /* 覆盖父主题的链接颜色 */
}

.site-header {
    background-color: #2c3e50; /* 修改页头背景色 */
}

Para realizar modificaciones en layouts más complejos o en funciones adicionales, es necesario sobrescribir los archivos de plantilla del tema padre. Esta es una de las funciones más potentes de los temas secundarios. El procedimiento es el siguiente: seleccione el archivo de plantilla del tema padre que desea modificar (por ejemplo…). header.php、footer.php o page.phpCopie el archivo al directorio de su subtema. A continuación, WordPress utilizará automáticamente esta copia que se encuentra en el directorio del subtema, ignorando el archivo original del tema principal.

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

Por ejemplo, para personalizar el pie de página, puede modificar los elementos del tema padre. footer.php Copie los archivos al folder del subtema correspondiente y luego abra esa copia para editarla. Puede modificar la información de derechos de autor, eliminar o agregar áreas para herramientas adicionales, etc. Tenga en cuenta que solo debe copiar los archivos que necesitan ser modificados; no es necesario copiar todo el contenido del tema principal.

Además, también puede hacerlo en los subtemas. functions.php Se agregarán funciones completamente nuevas. Por ejemplo, se podrá registrar una nueva área para herramientas en la barra lateral, se podrá incorporar soporte para tipos de artículos personalizados, o se podrán cargar scripts adicionales para páginas específicas. Estos códigos se mantendrán de manera segura en su subtema.

resúmenes

Siguiendo los pasos descritos en este artículo, ya ha dominado el proceso completo desde la creación de la estructura del directorio, la redacción de la información necesaria para las cabeceras de las hojas de estilo, hasta la carga correcta de estos estilos a través de los archivos funcionales, así como la sobrescritura de estilos y plantillas específicos. Los subtemas (subthemes) constituyen una práctica recomendada y esencial en el desarrollo de WordPress, ya que separan claramente su trabajo de personalización del código del tema principal, lo que asegura la mantenibilidad y la seguridad a largo plazo del sitio web. Ya sea que solo desee realizar ajustes de color o una reestructuración profunda del diseño, comenzar por un subtema es el punto de partida más sensato y profesional.

FAQ Preguntas más frecuentes

¿Es posible crear subtemas para cualquier tema de WordPress?

En teoría, cualquier tema que cumpla con las normas de escritura y los estándares de codificación de WordPress puede ser utilizado como tema padre para crear temas hijos. Solo necesita asegurarse de que, al crear el tema hijo, se respeten los requisitos específicos de WordPress y los estándares de desarrollo de temas. style.css ¿Dónde está el baño? Template: Basta introducir correctamente el nombre de la carpeta del tema padre en el campo correspondiente.

Sin embargo, algunos temas con un diseño muy simple o una estructura especial (por ejemplo, aquellos cuyos estilos no se cargan de manera estándar) pueden causar problemas en el funcionamiento de los subtemas. Al elegir un tema principal, suele ser más seguro optar por aquellos que son populares, se actualizan constantemente y cuentan con documentación completa.

¿Los archivos functions.php de los subtemas sobrescriben los del tema padre?

No. Esta es una de las confusiones más comunes en relación con los subtemas. Los subtemas… functions.php El archivo no sobrescribirá el archivo con el mismo nombre del tema padre, sino que se añadirá al contenido del tema padre. functions.php Luego es cargado.

Esto significa que el código de ambos archivos se ejecutará. Puede hacerlo en el subtema… functions.php Es posible agregar nuevas funcionalidades o modificar el comportamiento existente utilizando los ganchos (hooks) de WordPress, pero no se puede “sobrescribir” directamente una función del tema padre creando una función con el mismo nombre, ya que esto provocaría un error fatal en PHP. Para modificar el comportamiento de una función del tema padre, generalmente se deben utilizar los ganchos de acción (action hooks) o los ganchos de filtro (filter hooks).

¿Qué hago si el estilo del sitio web se desordena después de activar un subtema?

Si la apariencia del sitio web cambia drásticamente después de activar un subtema, es probable que se deba a que la tabla de estilos (stylesheet) no se haya cargado correctamente. Siga los pasos a continuación para investigar el problema:

En primer lugar, revisa los subtemas. style.css En el encabezado del archivo… Template: Se debe asegurar que el valor coincida exactamente con el nombre de la carpeta del tema padre, incluyendo mayúsculas y minúsculas. Esta es la causa más común de problemas.

En segundo lugar, revise su… functions.php El código que se encuentra en el archivo, en particular… wp_enqueue_style Asegúrese de que la llamada a la función se realice correctamente, que los caminos y las dependencias estén configurados de manera adecuada, y que no haya errores de sintaxis en PHP. Puede verificar si hay mensajes de error relacionados en la sección “Panel de control -> Herramientas -> Estado del sitio” de WordPress.

Finalmente, elimine todo el caché de su sitio web y de su navegador, y luego actualice la página para ver los cambios.

¿Cómo agregar plantillas de página personalizadas en un subtema?

Añadir plantillas de página personalizadas en un subtema es exactamente igual que hacerlo en un tema normal. Solo necesita crear un nuevo archivo PHP en la carpeta del subtema y agregar un bloque de comentarios específico al principio del archivo para indicar que se trata de una plantilla de página.

Por ejemplo, crear uno llamado… my-full-width.php El archivo debe comenzar con lo siguiente:

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

Luego, podrá escribir su código de plantilla en este archivo. Una vez que lo haya completado, al crear o editar una página en el backend de WordPress, podrá ver la opción “Mi página de ancho completo” en el menú desplegable “Plantilla” de las “Propiedades de la página”.