CSS personalizado: ¿debería usar un tema secundario de WordPress o el personalizador?

WordPress es una herramienta dinámicamente flexible que puede ser utilizada tanto por desarrolladores web expertos como por propietarios de sitios novatos. Si no puede encontrar una manera de diseñar algo a su gusto, puede agregar estilos personalizados, también llamados CSS (hojas de estilo en cascada) para modificar la apariencia de su sitio, desde diseños y posicionamiento hasta colores, fuentes y más.

Históricamente, los usuarios de WordPress han utilizado temas secundarios para personalizar la apariencia de un sitio web de WordPress. Un tema hijo hereda todas las cualidades de un tema padre, sin embargo, hace un poco más. A medida que se agregó el personalizador de WordPress, se hizo más fácil agregar un poco de CSS para lograr algunas de las mismas cosas que hemos hecho tradicionalmente con los temas secundarios.

¿Cuándo usa un tema secundario en lugar de simplemente agregar CSS al personalizador? ¿Hay casos en los que un complemento de fragmento de código tiene más sentido?

En esta publicación de blog, analizamos la personalización de sus temas con su propio CSS a través de una variedad de formas y discutimos cuándo tiene sentido usar un método sobre otro. Primero, sin embargo, aclaremos algunos términos. ¿Qué es el personalizador, qué es un tema secundario y qué complementos también hacen estos trabajos?

¿Qué es un tema hijo?

Un tema hijo es un tema de WordPress que hereda todas las cualidades de otro tema de WordPress. El tema principal, el tema principal, puede ser un tema comercial, uno que haya desarrollado usted mismo o cualquiera de los temas gratuitos en el directorio de temas de WordPress.org. Y sí, puedes crear un tema hijo de Kadence. Hablaremos más adelante en esta publicación sobre si es posible que no lo necesite o no, o los casos en los que es posible que desee hacerlo.

Para crear un tema secundario, creará un directorio separado en wp-content/themes/ en el mismo nivel del tema principal. Por lo general, comenzará con dos archivos, style.css y functions.php, pero también puede agregar muchas otras personalizaciones a un tema secundario que desee. Tenemos una guía que habla sobre la creación de temas secundarios en caso de que necesite uno. Hay una serie de complementos que crearán un tema secundario para usted, y puede eliminar estos complementos de configuración de tema secundario una vez que se crea el tema secundario.

¿Por qué la gente usa temas infantiles?

Los usuarios de WordPress crean temas secundarios cuando necesitan modificar el tema principal, pero quieren un proceso de actualización fácil para el tema principal.

Por ejemplo, desea agregar sus etiquetas de Google Analytics al encabezado de su sitio, o desea asegurarse de que todos los formularios, imágenes o botones tengan un estilo determinado, o tal vez está realizando personalizaciones en los correos electrónicos de WooCommerce que deben ser guardado en su área temática.

Cuando crea un tema secundario, todas sus personalizaciones se guardan y protegen contra sobrescritura cuando su tema principal requiere una actualización. Por razones funcionales y de seguridad, siempre es importante mantener actualizados los temas y complementos. Pero no desea tener que volver a personalizar su tema cada vez que su tema requiere una actualización, por lo que tiene sentido agregar estilos a un tema secundario. De esta forma, el tema principal se actualiza mientras que el tema secundario sigue siendo el mismo.

¿Necesitas un tema infantil?

En la historia de WordPress, agregar un tema secundario ha sido una de las personalizaciones más importantes de un nuevo sitio de WordPress. No importa lo que estés haciendo con WordPress, un tema nunca ha sido el final de todo. Históricamente ha habido dos razones para crear un tema hijo.

1. Para agregar CSS adicional.
2. Para añadir funciones adicionales.

Históricamente, para la mayor capacidad de personalización, un tema secundario ha sido la forma más fácil de hacerlo mientras se preserva la integridad del tema principal. Pero mucho de eso ha cambiado con la adición del Personalizador de WordPress.

¿Qué es el personalizador?

Cuando está viendo una página de WordPress o una publicación como usuario registrado con derechos de edición o administrativos, hay una opción en la barra de administración para personalizar WordPress. Al hacer clic aquí, se abre un marco de dos ventanas donde hay un personalizador a la izquierda y el sitio en sí a la derecha.

En el personalizador, tiene acceso a todo lo que se puede personalizar para un sitio en particular. Hay algunos controles generales que agrega el núcleo de WordPress, pero muchos temas, incluido Kadence, también agregan algunas opciones de configuración aquí.

La adición del personalizador brinda a los propietarios de sitios nuevas formas de configurar cualquier cosa, incluida una opción para agregar CSS adicional. En el pasado, la única forma de aplicar CSS adicional a un sitio de WordPress era hacerlo a través de un tema secundario.

Los ajustes de colores, fuentes e incluso diseños de encabezado/pie de página se pueden realizar con el personalizador.

La versión de Kadence de temas secundarios, personalizadores y complementos

Kadence ha tomado la postura de que debería poder personalizar su sitio de WordPress a través del Personalizador tanto como sea posible. Hay una variedad de configuraciones disponibles para usted en las opciones de Personalización de Kadence, e incluso puede agregar su código de Google Analytics a través del Personalizador a su sitio temático de Kadence usando la versión Kadence Pro.

Y si agrega funciones adicionales a su sitio de WordPress, hacerlo con el complemento Code Snippets ha sido la forma más fácil de hacerlo para la mayoría de los usuarios.

De esta manera, para la mayoría de los usuarios de WordPress, Kadence ha simplificado la forma en que se agregan estilos y funcionalidades adicionales a WordPress, lo que facilita mucho la administración de un sitio de WordPress.

Dicho esto, no todos los sitios de WordPress son iguales, no todos los usuarios de WordPress son iguales, y las necesidades de un sitio y su implementación pueden ser diferentes a las de otro. Además, existen innumerables métodos para hacer algo con WordPress.

Aquí hay algunas cosas a considerar al agregar código personalizado a su sitio de WordPress.

¿Cuándo debería usar el personalizador?

Si solo está agregando unas pocas líneas de código CSS, el personalizador será su mejor opción. Puede agregar fácilmente algunas líneas, publicar y ver cómo el CSS tiene efecto en su sitio de WordPress directamente dentro de la vista del personalizador.

Para la mayoría de los propietarios de sitios, el personalizador es todo lo que necesitan.

Para los usuarios de Kadence Pro, hay lugares de eventos en el personalizador para agregar secuencias de comandos de etiquetas de encabezado, pie de página y cuerpo, por lo que incluso si está utilizando Google Tag Manager, Google Analytics o cualquier otro servicio que requiera la adición de secuencias de comandos personalizadas, el Personalizador puede acomodar fácilmente sus personalizaciones.

¿Cuándo debe usar el complemento Code Snippets?

Si solo está agregando unas pocas líneas de código PHP, el complemento Code Snippets es una excelente manera de agregar código. Puede activar y desactivar fácilmente el código usando el complemento para probar y asegurarse de que el código funciona correctamente.

En el ejemplo anterior, se agregó algo de código a un sitio usando Fragmentos de código para ejecutar solo en el área de administración para que LearnDash y Elementor funcionen mejor juntos para la edición del curso. Esto también podría haberse hecho con un tema secundario, pero para el propietario de este sitio, Code Snippets era una alternativa más fácil.

Por supuesto, para los minimalistas de complementos que desean ejecutar sus sitios con la menor cantidad posible de complementos, el complemento Code Snippets podría ser un gran salto. Equilibrar menos complementos con la funcionalidad necesaria es algo que debe hacerse caso por caso.

¿Cuándo deberías usar un tema hijo?

Si está agregando más de unas pocas líneas de código CSS o ampliando la funcionalidad del sitio con código PHP adicional, un tema secundario podría ser la mejor opción. El área CSS del Personalizador es bastante pequeña, por lo que agregar una gran cantidad de CSS podría ser abrumador o confuso de administrar. En un caso como este, un tema hijo será más fácil. Además, si está agregando funciones personalizadas que son más de lo que el complemento Code Snippets puede administrar fácilmente, un tema secundario puede hacerlo fácilmente.

Un tema secundario le permite agregar varias líneas de CSS y administrarlo con el sistema de archivos en lugar de tener CSS almacenado en la base de datos y agregado a cada página. A través de un tema secundario, el CSS se carga a través de un archivo style.css, que los navegadores pueden almacenar en caché, lo que proporciona un pequeño beneficio de rendimiento. Si está agregando un poco de código personalizado o funciones personalizadas, un tema secundario es la mejor manera de hacerlo.

Problemas de desempeño

Al usar la función CSS adicional del personalizador, los estilos agregados agregarán su código en línea en una etiqueta <style> en el encabezado de cada página. Esto significa que si tiene mucho CSS, aumentará el tamaño de todas sus páginas individualmente. El navegador del visitante de su sitio descargará sus estilos personalizados varias veces.

Por otro lado, si bien agregar CSS a un archivo de hoja de estilo significa que el navegador necesita descargar una hoja de estilo adicional, también significa que el navegador puede almacenar en caché el archivo para que los estilos adicionales no necesiten descargarse nuevamente para cada página individual.

Problemas de mantenimiento

Agregar CSS a CSS adicional significa que necesita usar el editor en el Personalizador, que es bastante limitado y no se adapta bien a grandes cantidades de CSS. Sin embargo, si los agrega en una hoja de estilo, puede usar el editor de texto que desee, en un tamaño más cómodo. Incluso puede usar el editor de temas en wp-admin para editar el archivo CSS directamente dentro del navegador. Puede encontrar el editor de temas en Apariencia > Editor de archivos de temas . Asegúrese de cambiar al tema correcto al editar, y le recomendamos enfáticamente que haga una copia de seguridad de su sitio antes de realizar modificaciones en los archivos del tema secundario.

Editando tus archivos de temas

Recomendamos encarecidamente que utilice uno de estos métodos enumerados en lugar de editar los archivos de su tema principal principal, ya sea que esté utilizando Kadence o cualquier otro tema. La edición de los archivos de su tema no solo puede dañar su sitio, sino que perderá esas personalizaciones la próxima vez que se actualice su tema.

O peor aún, al agregar código o modificar el código dentro de los archivos de su tema, se verá en la posición de tratar de descubrir cómo mantener sus personalizaciones mientras actualiza su tema para nuevas funciones o para solucionar un problema de seguridad.

Conclusión

Esperamos que esta mirada a los temas secundarios haya sido útil para comprender cuándo usar un tema secundario, cuándo no y nuevas formas de personalizar su sitio para un rendimiento óptimo al agregar personalizaciones. Si todas estas cosas parecen demasiado para considerar, probablemente esté bien con las herramientas en el Personalizador en este momento.