Índice de contenidos
Los temas de WordPress pueden ser fantásticos, pero hay tantos ejemplos de pequeñas cosas que todos queremos cambiar. Un color aquí, un tamaño de fuente allí, tal vez usar una llamada a la acción diferente en los botones, etc
El problema es que modificar un tema incluso le impide ligeramente actualizarlo a una versión más nueva en el futuro, porque si intenta actualizar, perderá todos sus cambios.
Pero, ¿qué haces si estás trabajando con un tema del repositorio de WordPress o un tema que compras en Themeforest que no lo hace tan fácil? Los temas secundarios resuelven esto al permitirle usar toda la funcionalidad del tema elegido mientras le permite actualizar sin temor a perder sus modificaciones.
Cómo funcionan los temas hijo WordPress y por qué usarlos
Los temas hijo son temas separados que se basan en un tema principal para la mayor parte de su funcionalidad. Si está utilizando un tema hijo, WordPress comprobará primero el tema hijo para ver si existe una funcionalidad específica. Si no lo hace, usará el tema principal. Esto es genial porque te permite modificar solo lo que necesitas.
Los temas hijo siempre deben usarse si planea modificar incluso un solo carácter en su tema. Hay dos muy buenas razones: actualizaciones y organización.
Actualizaciones
Si modifica un tema sin utilizar un tema hijo, tiene dos opciones: puede optar por no actualizar su tema en el futuro, o puede actualizar y perder cualquier cambio que haya realizado en su tema.
La última opción funcionaría técnicamente, pero no es recomendable. Incluso si sus cambios son fáciles de copiar y pegar, ¿por qué pasar dos minutos en una tarea propensa a errores en cada actualización?
No actualizar el tema debería estar fuera de discusión. Casi todas las listas de «por qué se pirateó su sitio web» contienen software obsoleto como causa principal de problemas de seguridad. Siempre debe mantener WordPress, sus temas y complementos actualizados, sin excepciones.
Organización
Cuando agrega código a un tema existente, lo está agregando a una base de código, que puede ser miles y miles de líneas. Los desarrolladores que trabajan en su sitio (y, de hecho, usted) tendrán dificultades para rastrear sus cambios. Al menos un resultado directo de esto será una mayor factura de desarrollo.
Dado que los temas hijo recaen en los temas principales a menos que se especifique lo contrario, el tema hijo es esencialmente un conjunto de cambios para un tema existente. Esto puede dar como resultado cambios extensos aunque el tema secundario solo tenga un par de archivos y tal vez 100 líneas de código.
Crear un tema hijo WordPress
Crear un tema secundario es extremadamente simple, tanto que puedes copiar y pegar mi ejemplo a continuación.
Para crear un tema hijo para su tema, deberá realizar los siguientes pasos:
- Crea un directorio con el nombre del tema dentro del directorio themes en tu instalación de WordPress
- Crea una hoja de estilo con información sobre el tema hijo
- Ingrese los estilos de su tema principal
Una vez que haya completado estos pasos, puede activar su tema hijo y su sitio web se verá exactamente igual que antes, pero usará el tema hijo.
Así que repasemos los pasos anteriores en detalle. Para este ejemplo, crearé un tema hijo para el tema predeterminado twentyfourteen.
1. Primero, vaya a su directorio de temas y cree una carpeta para su nuevo tema. Puedes ponerle el nombre que quieras. Para seguir una jerarquía, nombraré mi tema twentyfourteen-child.
2. El siguiente paso es crear un archivo de hoja de estilo. Esto debe ser nombrado style.css. Copie y pegue el siguiente código en el archivo que acaba de crear:
1 2 3 4 5 6 7 8 9 10 11 | /* Theme Name: Twenty Fourteen Child Theme URI: http://tuweb.com/twentyfourteen-child/ Description: Mi primer tema hijo, basado en Twenty Fourteen Author: Antonio Torres Author URI: http://antonio-torres.es Template: twentyfourteen Version: 1.0.0 Tags: black, green, white, light, dark, two-columns, three-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready, responsive-layout, infinite-scroll, post-slider, design, food, journal, magazine, news, photography, portfolio, clean, contemporary, dark, elegant, modern, professional, sophisticated Text Domain: twenty-fourteen-child */ |
Los dos elementos necesarios en el código anterior son las líneas que comienzan con «Theme Name» y «Template«. El nombre del tema le dice a WordPress cuál es el nombre de su tema, y esto se muestra en el selector de temas. La plantilla le dice a WordPress qué tema debería considerar como el tema principal. La mayoría de los otros se explican por sí solos, con la excepción del dominio de texto y las etiquetas. El dominio de texto se usa para traducir cadenas. El dominio de texto debe ser exclusivo para su tema y debe usarse siempre que use funciones de traducción . Consulte I18n para desarrolladores de WordPress para obtener más información. La sección de etiquetas es una lista de etiquetas que usa WordPress Theme Repository. Para este ejemplo miré el style.css archivo del tema principal y simplemente copiar y pegar las etiquetas desde allí.
3. En este punto, el tema hijo funciona bien. Si lo activa y recarga la página, todo su contenido estará allí, pero no tendrá información de estilo. Mencioné antes que WordPress busca primero la funcionalidad en el tema hijo y, si no está presente, vuelve al tema principal.
En nuestro caso, sí tenemos una hoja de estilo, por lo que WordPress calcula que no debería cargar el archivo principal. Para asegurarnos de que cargamos la hoja de estilo del archivo principal, tendremos que ponerla en cola. Esto se puede hacer en el archivo del tema functions.php, así que cree ese archivo ahora. En este archivo, copie y pegue el siguiente código:
1 2 3 4 | add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' ); function enqueue_parent_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' ); } |
Si no tienes idea sobre PHP y solo quieres cambiar algunos estilos, no te preocupes por qué esto funciona. Siéntase libre de entrar en su archivo de hoja de estilo ahora y comenzar a hacer los cambios.
Mecánica del tema hijo
Entonces, ¿cómo funciona realmente un tema hijo? Los temas secundarios funcionan en un nivel de archivo. Cuando se utiliza un archivo durante el proceso de carga de un tema, verifica si está presente en el tema secundario. Si es así, se usa el contenido de ese archivo. Si no es así, se utiliza el mismo archivo en el tema principal.
Hay una excepción a esta regla, el archivo de funciones del tema. El archivo functions.php en el tema principal y el secundario está cargado. Si las funciones del tema infantil reemplazaban a los padres, o bien tendría un sitio que funciona mal, o bien tendría que copiar y pegar todo el contenido del archivo de función del tema principal en el tema secundario, lo que de alguna forma frustraría el propósito de extender un tema.
El flujo de trabajo al modificar la funcionalidad es el siguiente. Si desea realizar cambios en el encabezado, copie y pegue el archivo header.php del tema principal en su tema secundario. Edite el archivo al contenido que quiera modificar, guárdelo y disfrute los frutos de su trabajo.
Algunas notas para los creadores de temas
Si crea sus propios temas, hay algunas pautas que puede seguir para facilitar la creación del tema hijo. Las dos más importantes están aprendiendo la diferencia entre get_stylesheet_directory() y get_template_directory() y la creación de funciones pluggable.
El directorio correcto
Cuando se vincula a activos utilizando las funciones mencionadas, siempre debe tener en cuenta que la familia de funciones get_template_ siempre apuntará al directorio del tema principal, mientras que la familia de funciones get_stylesheet_ siempre apuntará al directorio del tema hijo.
La ventaja de usar get_stylesheet_directory_uri() es que los desarrolladores de temas hijos pueden usar su propia imagen simplemente creándola en la ubicación correcta. Por otro lado, si la imagen no existe en el tema secundario, no se mostrará en absoluto.
La razón para esto es que si un tema secundario está activo, la función get_stylesheet_directory_uri() no verifica (y no sabe) qué archivo está cargando para que no verifique su existencia, siempre escupirá la URI para el tema hijo.
Funciones modificables
El otro método que debe usar es lo que WordPress llama funciones conectables. Esto hace posible que los autores de temas secundarios sobrescriban las funciones que defina en el tema principal. Esto implica envolver sus funciones en function_exists().
Supongamos que crea una función para una visualización de metadatos personalizada my_meta(). No hay forma de que un tema secundario pueda modificar esta función porque no se puede definir dos veces. La solución es crear solo esta función si no se ha definida (recuerde, el archivo de funciónes del tema secundario se carga primero).
Conclusión
Con unos pocos pasos simples de copiado, puede crear un entorno a prueba de futuro para su tema, lo que le ahorrará muchos dolores de cabeza. Si bien puede ser tentador utilizar el editor de temas integrado en WordPress, casi siempre causa más problemas de los que resuelve si no está utilizando un tema hijo.
Tómese unos minutos para seguir el tutorial y su sitio web y su desarrollador se lo agradecerán. Finalmente, si tiene buenos consejos sobre temas hijo, háganoslo saber.
