Desde cero: aprenda paso a paso a crear un subtema profesional de WordPress.

En el ecosistema de WordPress, los subtemas son la piedra angular para la personalización y el mantenimiento seguro de un sitio web. Te permiten heredar todas las funciones, estilos y archivos de plantillas del tema principal, al tiempo que puedes realizar modificaciones en un directorio independiente. Esto significa que, cuando el tema principal publica parches de seguridad o actualizaciones de funcionalidades, puedes actualizarlo con un solo clic, sin preocuparte de que el código personalizado que has escrito con esfuerzo se sobrescriba. Ya sea que se trate de ajustar los colores, modificar el diseño o agregar funciones complejas, utilizar subtemas es la mejor práctica.

¿Por qué es necesario utilizar subtemas?

Modificar directamente el archivo del tema padre es una operación de alto riesgo. Una vez que el tema padre se actualice, todas tus modificaciones se perderán y tendrás que aplicarlas de nuevo de forma manual, lo cual es un proceso propenso a errores y requiere mucho tiempo y esfuerzo. Lo que es aún más importante: en el caso de la colaboración en equipo o de futuras migraciones del sitio web, la falta de registros claros de las modificaciones puede causar grandes problemas.

El subtema resuelve este problema mediante un mecanismo de “sobreescritura” (o “cubrimiento” de las configuraciones). Cuando WordPress renderiza una página, primero busca el archivo de plantilla correspondiente en el directorio del subtema. Si lo encuentra, utiliza la versión del subtema; de lo contrario, recurre automáticamente a la versión del tema principal. Este sistema te permite modificar solo las partes que necesitas, mientras que el resto sigue beneficiándose de las actualizaciones y mantenimientos del tema principal.

Lecturas recomendadas Guía de introducción al desarrollo de temas de WordPress: crea tu primer tema desde cero.。

Además, el uso de subtemas es una práctica recomendada por la comunidad oficial de WordPress, ya que ayuda a mantener el código organizado y fácil de mantener, lo que es un signo de desarrollo profesional.

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

Estructura básica para crear un subtema

Crear un subtema es muy sencillo; solo se necesitan dos archivos básicos: un archivo de estilo y un archivo de funciones. Para comenzar, debes… /wp-content/themes/ En el directorio, se crea una nueva carpeta que suele llamarse “NombreDelTemaPadre-hijo”, por ejemplo: twentytwentyfour-child。

Crear el archivo de la hoja de estilo principal

El núcleo de un subtema es su archivo de estilo (stylesheet). style.cssEste archivo no solo contiene reglas CSS, sino que, lo que es más importante, sus comentarios en la cabecera del archivo sirven para indicar a WordPress que se trata de un subtema y qué es su tema padre.

/*
 Theme Name:   Twenty Twenty-Four Child
 Theme URI:    https://example.com/twentytwentyfour-child/
 Description:  Twenty Twenty-Four Child Theme
 Author:       Your Name
 Author URI:   https://example.com
 Template:     twentytwentyfour
 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:  twentytwentyfour-child
*/

Entre ellos,Template: Esta línea es de vital importancia; su valor debe coincidir exactamente con el nombre del directorio del tema padre, teniendo en cuenta la diferencia entre mayúsculas y minúsculas. Esta es la base mediante la cual WordPress reconoce las relaciones de padre e hijo entre los temas.

Introducir la tabla de estilos del tema padre

Solo con los archivos mencionados anteriormente, el subtema no puede cargar los estilos del tema principal. Necesitas modificar el archivo de funciones del subtema. functions.php En el uso chino wp_enqueue_scripts Se utiliza un “gancho” (hook) para organizar la carga secuencial de los archivos de estilo del tema padre.

Lecturas recomendadas Esencial para crear un sitio web profesional: guía completa para el desarrollo y la personalización de temas de WordPress.。

<?php
add_action( 'wp_enqueue_scripts', 'my_child_theme_enqueue_styles' );
function my_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')
    );
}
?>

get_template_directory_uri() La función obtiene la URL del directorio del tema padre. get_stylesheet_directory_uri() Obtener la URL del directorio de los temas (subtemas) activos actuales a través de un array de dependencias. array( 'parent-style' ) Asegúrate de que los estilos de los subtemas se carguen después de los estilos del tema principal, de modo que tus reglas CSS personalizadas puedan sobrescribir correctamente los estilos del tema principal.

Funciones de los subtemas extendidos

Después de crear la estructura básica, puedes continuar con el proceso. functions.php El archivo permite la extensión ilimitada de las funciones del sitio web. El código contenido en este archivo se ejecutará antes que el código del tema principal. functions.php La ejecución del archivo te proporciona una excelente oportunidad para modificar las funciones principales del sistema.

Funciones personalizadas del sitio web

Por ejemplo, es posible que quieras agregar un nuevo tipo de artículo personalizado al sitio web, llamado “Proyecto”. Puedes hacerlo dentro de una subtema (subtopic). functions.php Regístrelo en el archivo.

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

add_action( 'init', 'register_project_post_type' );
function register_project_post_type() {
    $args = array(
        'public'      => true,
        'label'       => '项目',
        'has_archive' => true,
        'supports'    => array( 'title', 'editor', 'thumbnail', 'excerpt' ),
        'menu_icon'   => 'dashicons-portfolio',
    );
    register_post_type( 'project', $args );
}

Al mismo tiempo, también puedes eliminar algunas funciones innecesarias de los temas padre. Por ejemplo, si un tema padre ha añadido una barra de herramientas en la parte inferior de la página que no deseas, puedes utilizar… remove_action() Vamos a eliminarlo. Supongamos que el tema padre está… init Se usa en el gancho. parent_theme_footer_widgets La función ha incorporado una pequeña herramienta adicional, y puedes eliminarla de la siguiente manera:

add_action( 'after_setup_theme', 'remove_parent_theme_features', 15 );
function remove_parent_theme_features() {
    remove_action( 'init', 'parent_theme_footer_widgets' );
}

Tenga en cuenta que aquí se utiliza… after_setup_theme El gancho (hook) y el establecimiento de una prioridad ligeramente más alta (por ejemplo, 15) se realizan para garantizar que el código del tema padre ya se haya ejecutado. add_actionDe esta manera, nuestro… remove_action Solo tendrá efecto si se cumple esta condición.

Sobrescribir el archivo de plantilla del tema padre

Una de las funciones más potentes de los subtemas es la capacidad de sobrescribir los archivos de plantilla del tema principal. Si deseas modificar la forma en que se muestra una página de artículo, simplemente debes modificar los archivos de plantilla correspondientes en el subtema. single.php Copie el contenido al directorio de tus subtemas y luego edítalo. WordPress utilizará automáticamente tu versión correspondiente.

Lecturas recomendadas Desbloquear el potencial: Explorando las tecnologías clave y las mejores prácticas para crear temas avanzados para WordPress。

Para un control de mayor detalle, incluso es posible sobrescribir los componentes de plantilla (Template Parts) o secciones específicas de la misma. Por ejemplo, si deseas modificar la forma en que se muestran los metadatos de un artículo, puedes copiar y editar el código correspondiente del tema padre. template-parts/content-post-meta.php El archivo se encuentra en el mismo camino que el subtema.

Técnicas avanzadas para el desarrollo de subtemas

Cuando el desarrollo de los subtemas llega a una etapa más avanzada, se empiezan a abordar temas más complejos, como la localización, la herencia de opciones de los temas y la actualización de los subtemas en sí mismos.

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

Implementar la traducción localizada de texto.

Para que tus subtemas sean compatibles con múltiples idiomas, es necesario configurar correctamente el dominio de texto (Text Domain) y utilizar las funciones de traducción. style.css La cabeza y functions.php El primer paso es cargar el campo de texto.

En functions.php En chino, se usa load_child_theme_textdomain Función:

add_action( 'after_setup_theme', 'child_theme_localization_setup' );
function child_theme_localization_setup() {
    load_child_theme_textdomain( 'twentytwentyfour-child', get_stylesheet_directory() . '/languages' );
}

Después, en los lugares donde se necesite traducir un texto, se debe utilizar algo similar a: esc_html__( 'Your Text', 'twentytwentyfour-child' ) Un envoltorio de función de este tipo. Luego, puedes utilizar herramientas como Poedit para generarlo. .po Y .mo Traduce el archivo y guárdalo en el subtema correspondiente. /languages/ Catálogo.

Modificar las funciones centrales de manera segura

A veces, es necesario modificar una función compleja dentro de un tema principal, y dicha función no ofrece suficiente flexibilidad a través de los hooks (ganchos). Si esa función es “desmontable” (pluggable), es decir, si se puede reemplazar o modificar sin afectar el resto del sistema, entonces se puede abordar el problema de manera más sencilla. if ( ! function_exists( ... ) ) Paquete, entonces puedes hacerlo en el subtema. functions.php Se puede declarar nuevamente la función directamente en el código, sobrescribiéndola por completo de esta manera.

Antes de intentar esta operación, asegúrate de verificar cómo están definidas las funciones en el tema padre. Si dichas funciones no son de tipo “reutilizable” (es decir, no pueden ser reutilizadas en otros contextos), intentar redeclararlas de forma forzada puede provocar errores fatales. En este caso, una opción más segura sería contactar al desarrollador del tema o buscar otros mecanismos de filtrado (hookes) que puedan satisfacer tus necesidades.

resúmenes

Construir subtemas para WordPress es una habilidad esencial que todo profesional debe dominar. Esto permite establecer un proceso de personalización seguro y sostenible, separando claramente tu código personalizado del código central del tema. Comienza creando un archivo que contenga la información de cabecera (header) correcta… style.css Y que carga los estilos. functions.php Desde el inicio, pasando por la modificación de los archivos de plantillas y la adición de funciones extendidas, hasta el manejo de la localización y las opciones de personalización avanzadas, cada paso sigue las mejores prácticas de WordPress. Mantener siempre el uso de subtemas es la base sólida para asegurarse de que tu sitio web se mantenga actualizado a lo largo de los años, mientras conserva un aspecto y funcionalidades únicos.

FAQ Preguntas más frecuentes

¿Qué requisitos hay para los nombres de las carpetas de los subtemas?

No hay restricciones estrictas para los nombres de las carpetas de los subtemas, pero para que sea más claro y comprensible, se recomienda generalmente usar el formato “nombre_del_tema_paterno-hijo”, por ejemplo: astra-childLo crucial es… style.css En el encabezado del archivo… Template: El valor de este campo debe coincidir exactamente con el nombre de la carpeta del tema padre, incluyendo mayúsculas y minúsculas; de lo contrario, WordPress no podrá establecer correctamente la relación entre el tema hijo y el tema padre.

¿Todos los temas principales (temas padre) permiten crear subtemas?

La gran mayoría de los temas modernos que cumplen con los estándares de codificación de WordPress soportan completamente los subtemas. En teoría, cualquier tema puede ser utilizado como tema padre. No obstante, algunos temas de mala calidad o muy antiguos pueden presentar problemas para el funcionamiento correcto de los subtemas debido al uso de rutas absolutas para referirse a recursos o a la falta de archivos de plantilla necesarios. Al elegir un tema padre, es conveniente verificar su documentación o las opiniones de los usuarios.

¿Cómo migrar un tema padre que ha sido modificado directamente a un tema hijo?

Primero, en tu entorno local o de prueba, crea un nuevo subtema basado en el tema padre original, sin realizar ninguna modificación. Luego, compara detalladamente las diferencias entre los archivos del tema padre que has modificado y los archivos originales. Mueve estos cambios (que pueden estar en CSS, PHP o HTML) de manera organizada a los archivos correspondientes del subtema: el código CSS debe ser colocado en los archivos del subtema. style.cssEl código de las funciones debe ser incluido en el lugar correspondiente. functions.phpLos archivos de plantilla modificados se copian al directorio del subtema correspondiente para realizar las cambios necesarios. Este es un proceso detallado, pero resulta muy eficaz a largo plazo.

¿Los subtemas afectan la velocidad del sitio web?

El impacto de los subtemas creados correctamente en la velocidad del sitio web es prácticamente nulo. Los archivos CSS y JS adicionales suelen ser de tamaño reducido, y al cargarlos de manera ordenada, pueden ser combinados y almacenados en caché de manera eficiente. El principal costo asociado a los subtemas podría provenir de… functions.php La lógica PHP compleja que se ha añadido puede afectar negativamente el rendimiento del sitio. Por lo tanto, es importante mantener el código de los subtemas lo más simplificado y eficiente posible, de acuerdo con los mismos principios que se siguen al desarrollar en el tema principal. El uso adecuado de técnicas de caché puede ayudar a compensar cualquier posible impacto en el rendimiento.