Lectura imprescindible para los temas secundarios de WordPress: un solo error en style.css o functions.php y todos tus esfuerzos en tu sitio web habrán sido en vano.

En el desarrollo de sitios web con WordPress y la personalización de temas, el uso deTema infantil Esta es la mejor práctica recomendada oficialmente. Al utilizar temas secundarios, se pueden ajustar libremente los estilos y la funcionalidad sin modificar el código fuente del tema principal, lo que evita que se pierda el contenido personalizado durante las actualizaciones del tema principal. Sin embargo, muchos usuarios siguen sin conocer este enfoque cuando realizan este tipo de operaciones. ¿Qué elementos deben escribirse en style.css y functions.php?Este artículo se centrará en este tema central, detallando el contenido esencial, las prácticas de escritura recomendadas y los errores comunes para estos dos archivos clave dentro del tema hijo. Esto le ayudará a crear y utilizar correctamente el tema hijo.

1. ¿Qué es un tema hijo de WordPress?

1. Definición de temas secundarios

subtemaunTemas que dependen de temas principales para funcionarPuede heredar los siguientes elementos del tema principal:

Archivos de plantilla (como header.php, single.php)
Hoja de estilo (CSS)
Lógica de funciones (código dentro de functions.php)

mientras que también le permiteAnular o ampliar en el tema secundarioEstos contenidos.

2. ¿Por qué utilizar temas secundarios?

Modificar directamente los archivos del tema principal puede provocar los siguientes problemas:

Después de actualizar el tema principal, se perdieron todas las modificaciones.
No favorece el mantenimiento y la depuración.
Propenso a causar problemas de compatibilidad

y utilizandosubtemaLa ventaja radica en:

El tema principal se puede actualizar de forma segura en cualquier momento.
Todo el contenido personalizado se centraliza en el tema secundario.
Más compatible con los estándares oficiales de desarrollo de WordPress.

Siempre que desees modificar el tema, debes utilizar un tema secundario.

II. La estructura mínima utilizable de los temas secundarios

Un tema hijo que WordPress pueda reconocer y activar correctamente.En teoría, solo se necesita un archivo.::

tu-tema-hijo/ └── style.css

Sin embargo, en el desarrollo real,Casi todos utilizarán functions.php simultáneamente.::

tu-tema-hijo/ ├── style.css └── functions.php

La razón es:

¿Se debe cargar el tema principal?tipodepende de la implementación del tema principal en sí mismo
Para garantizar la compatibilidad y la secuencia de carga de los estilos, por lo general es necesario gestionar los estilos dentro del tema secundario.
Siempre que sea necesario añadir alguna funcionalidad, se debe utilizar el archivo functions.php.

Resumen de las responsabilidades de style.css y functions.php::

nombre de archivo	¿Es necesario?	función principal
style.css	sea	Declarar la identidad del tema hijo, escribir CSS
funciones.php	No (muy recomendable)	Controlar el estilo de carga y añadir funcionalidad.

Tabla: Explicación de la función de los archivos principales en los temas secundarios

Sin style.css, el tema secundario no puede ser reconocido.
La necesidad de functions.php depende del tema principal y de los requisitos reales.
En la gran mayoría de los proyectos, ambos archivos se utilizan simultáneamente.

III. ¿Qué debe incluirse en el archivo style.css del tema hijo?

1. La función principal de style.css

En el tema secundario,style.css Hay dos funciones principales:

Declarar a WordPress que esto es untemática
Almacena los estilos CSS propios del tema hijo.

Entre ellos.La información sobre la declaración del sujeto es obligatoria.Aunque por ahora no escribas ningún CSS.

Ejemplo: archivo style.css del tema secundario de WordPress.

2. Información esencial del encabezado del tema en style.css

WordPress a través de style.css Utilice los comentarios que aparecen en la parte superior del documento para identificar el tema.

Notación mínima requerida

/* Nombre del tema: Mi tema hijo Plantilla: carpeta-del-tema-padre */

El nombre del tema y la plantilla son temas secundarios.indispensableCampo, Descripción del campo:

Nombre del temaEl nombre que se muestra para el tema secundario en el panel de administración de WordPress; personalizable, pero debe ser único.
PlantillaNombre de la carpeta del tema principal (no el nombre que se muestra del tema). Si este campo se rellena incorrectamente, el tema secundario no funcionará correctamente.

3. Información completa recomendada para el encabezado del tema (práctica recomendada)

Aunque estos campos no son obligatorios, resultan muy valiosos para sitios web tutoriales, proyectos en equipo y mantenimiento a largo plazo.

/* Nombre del tema: Mi tema hijo URI del tema: https://example.com/my-child-theme Descripción: Un tema hijo desarrollado a partir del tema principal XX Autor: Tu nombre URI del autor: https://example.com Plantilla: carpeta-del-tema-principal Versión: 1.0.0 */

Las funciones de cada campo son las siguientes:

URI del temaURL de la página de introducción o descripción del tema (opcional)
DescripciónBreve descripción del subtema con fines de gestión e identificación.
Autor: Nombre del autor del tema
Autor URIDirección de la página web del autor o de la empresa
VersiónNúmero de versión del subtema, lo que facilita el mantenimiento y las actualizaciones posteriores.

4. Escribir estilos en style.css

Debajo de la información del encabezado del tema, puedes escribir directamente CSS:

cuerpo { color de fondo: ##f5f5f5; }

Algo a tener en cuenta:

Estilo del tema secundario.css No cargará automáticamente los estilos del tema principal.
Que los estilos del tema principal surtan efecto depende de si el tema principal ha colgado correctamente la hoja de estilos.

5. Prácticas no recomendadas en style.css

Las siguientes prácticas ya no se recomiendan:

hacer uso de @importar Introducción de estilos de temas principales
Escribir código PHP en style.css

Ejemplo de error:

@import url("../tema-padre/style.css");

Este enfoque puede afectar al rendimiento y podría causar problemas con el orden de carga de los estilos.

4. ¿Qué debe incluirse en el archivo functions.php del tema hijo?

1. Explicación del propósito de functions.php

subtema funciones.php Para uso en:

Gestionar la secuencia de carga de los estilos de los temas principales y secundarios
Añadir o modificar la funcionalidad del tema.
Comportamiento añadido mediante hooks en el tema principal.

Debe quedar claro que:El archivo functions.php del tema hijo. No anulará el archivo functions.php del tema principal.En su lugar, se ejecutará una vez que el tema principal haya terminado de cargarse.

2. ¿Es absolutamente necesario el archivo functions.php?

Técnicamente hablando:

Si el tema principal ya ha cargado los estilos correctamente
Además, no es necesario añadir ninguna funcionalidad.

Los temas secundarios pueden funcionar correctamente sin un archivo functions.php.
Sin embargo, en proyectos prácticos, para garantizar la compatibilidad y la capacidad de control,En general, se sigue recomendando crear un archivo functions.php..

toma	¿Es necesario?
Activa solo el tema secundario, sin modificar ningún contenido.	No necesariamente.
Se debe controlar la secuencia de carga de los estilos.	necesita
Añadir cualquier funcionalidad	necesariamente
Proyectos comerciales / a largo plazo	urge

Tabla: Criterios para determinar si se requiere functions.php

3. El enfoque más común y seguro en functions.php: carga de estilos

A continuación se muestra uno de los enfoques recomendados oficialmente con la mejor compatibilidad:

<?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_uri(), array( 'parent-style' ) ); }

Descripción:

get_template_directory_uri() Volver a la ruta del tema principal
get_stylesheet_uri() Volver a la ruta style.css del tema secundario.
Asegúrate de que el orden de carga sea correcto a través de las dependencias.

Antes de usar,Se recomienda revisar el archivo functions.php del tema principal.Confirme la ubicación de su hoja de estilo y el método por el que se carga.

4. Métodos de extensión comunes en functions.php

Añadir soporte temático

add_theme_support( 'post-thumbnails' ); add_theme_support( 'title-tag' );

Menú de navegación del registro

register_nav_menus( array( 'main-menu' => 'Menú de navegación principal', ) );

Incluye otros archivos funcionales del tema secundario.

require_once get_stylesheet_directory() . '/inc/custom-functions.php';

5. Notas sobre functions.php

Los nombres de las funciones deben ser únicos y evitar conflictos con los padres.temáticao conflictos de plugins
En un archivo PHP puro,Recomendado: omitir los terminadores PHP.para evitar errores de salida

V. Ejemplo de tema hijo totalmente funcional

Ejemplo de style.css

/* Nombre del tema: Mi tema hijo Plantilla: twentytwentyfour Versión: 1.0.0 */ body {   font-family: Arial, sans-serif; }

Ejemplo de functions.php

<?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_uri(), array( 'parent-style' ) ); }

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres