Cómo retener CSS personalizado al actualizar un tema de WordPress
Publicado: 2022-05-05Los temas determinan el diseño y la apariencia de los sitios web de WordPress. Independientemente del tema que elija, es posible que deba personalizarlo un poco para satisfacer sus necesidades específicas.
Una forma de personalizar su tema es usar hojas de estilo en cascada (CSS). Este popular lenguaje de hojas de estilo le permitirá cambiar casi cualquier elemento de su tema. Puede agregar CSS personalizado a su tema para especificar colores de fondo, cambiar tamaños de fuente, crear espacios entre el contenido, cambiar la posición de los menús y más. Sin embargo, el CSS personalizado puede eliminarse la próxima vez que actualice su tema.
Por qué las actualizaciones de temas rompen el CSS personalizado
Todos los temas tienen un archivo style.css. Disponible en la carpeta del tema, contiene el CSS. Cuando actualice su tema, descargará una versión nueva y diferente con la que reemplazará la versión existente.
Actualizar su tema eliminará el archivo style.css existente y lo reemplazará con un nuevo archivo style.css nuevo. El nuevo archivo style.css no contendrá ningún CSS personalizado que haya agregado anteriormente. Siempre puede volver a agregar el CSS personalizado eliminado, pero hacerlo después de cada actualización del tema puede ser tedioso.
Añadir al Personalizador
Puede conservar el CSS personalizado al actualizar su tema agregándolo al personalizador. El personalizador es una herramienta de personalización de temas en el panel de control de WordPress. Cuenta con un campo "CSS adicional". En lugar de agregar CSS personalizado directamente al archivo style.css de su tema, puede agregarlo a este campo.
El campo "CSS adicional" se introdujo en la versión 4.7 de WordPress para evitar que se elimine el CSS personalizado durante las actualizaciones del tema. No afecta al archivo style.css ni a ningún otro archivo de la carpeta del tema. Cuando agrega CSS personalizado al personalizador a través de este campo, se almacenará en la base de datos de su sitio web. Luego puede actualizar su tema manteniendo el CSS personalizado.
Para acceder al personalizador, haga clic en "Apariencia" en el panel de control de WordPress y elija "Personalizar". La pestaña "CSS adicional" está cerca de la parte inferior. Al hacer clic en esta pestaña, se mostrará un campo donde puede ingresar CSS personalizado. Actualizar su tema solo reemplazará los archivos en la carpeta del tema. No reemplazará ni afectará la base de datos de su sitio web, por lo que se conservará el CSS personalizado.
Agregar CSS personalizado al personalizador le permite obtener una vista previa. El personalizador tiene una función de vista previa integrada para todos los cambios. Ya sea que esté configurando nuevos widgets o agregando CSS personalizado, el personalizador revelará cómo se verá su sitio web. A continuación, puede optar por continuar con la personalización haciendo clic en "Publicar". Si su sitio web no se ve bien, puede cambiar las opciones de personalización antes de publicarlo. Independientemente, el personalizador mostrará una vista previa de su sitio web con el CSS personalizado.
Crear un tema hijo
Otra solución es crear un tema hijo. Los temas secundarios son esencialmente copias de otros temas que puede personalizar sin temor a perder los cambios. No son copias completas. Más bien, la mayoría de los temas secundarios consisten en solo unos pocos archivos básicos, incluido un archivo style.css y un archivo functions.php.
Los temas secundarios están diseñados para heredar las propiedades de un tema principal. Puede utilizar su tema como tema principal. El tema secundario tendrá su propia carpeta, que contendrá su propio archivo style.css y archivo functions.php. Sin embargo, el tema secundario no contendrá un archivo index.php, un archivo page.php, un archivo single.php u otros archivos de tema estándar. Aprovechará el tema principal para estas propiedades.
Debido a que los temas secundarios tienen su propio archivo style.css, admiten CSS personalizado. Más importante aún, los temas secundarios conservan todo su CSS personalizado cuando se actualizan sus temas principales. Actualizar el tema principal no afectará el archivo style.css del tema secundario. Para obtener instrucciones sobre cómo crear un tema secundario, visite developer.wordpress.org/themes/advanced-topics/child-theme. Alternativamente, algunos temas premium vienen con un tema secundario.
Por solo unas pocas líneas de CSS personalizado, es posible que desee agregarlo al personalizador. Para grandes cantidades de CSS personalizado, probablemente valga la pena crear un tema secundario. Un tema secundario le proporcionará un archivo style.css independiente que puede personalizar.
Incluso puede trabajar en el archivo style.css del tema secundario sin conexión y, dado que es un archivo separado, tendrá mucho espacio para CSS personalizado. Agregar CSS personalizado al personalizador lo restringirá a un campo pequeño al que solo se puede acceder en línea. El personalizador ofrece la ventaja de un modo de vista previa, mientras que un tema secundario ofrece la ventaja de un archivo style.css separado.
Use un complemento CSS personalizado
Puede usar un complemento CSS personalizado. El complemento Simple Custom CSS, por ejemplo, hace exactamente lo que parece: le permite agregar fácilmente CSS personalizado a su tema. El CSS personalizado agregado al complemento anulará el propio CSS de su tema.
Una vez que haya activado el complemento CSS personalizado simple, debería ver una nueva pestaña "CSS personalizado" en "Apariencia" en el panel de control de WordPress. Aquí es donde puede agregar CSS personalizado. Cuando actualice su tema, se conservará el CSS personalizado. Actualizar su tema reemplazará el archivo style.css del tema, pero el complemento anulará el nuevo archivo style.css con su CSS personalizado.
También está el complemento Simple Custom CSS y JS, que admite tanto CSS personalizado como JavaScript personalizado. Puede usarlo para crear CSS personalizado que anula el CSS propio de su tema. Si no quiere meterse con la creación de un tema secundario, es posible que desee utilizar un complemento CSS personalizado. La descarga de un complemento de CSS personalizado es una manera fácil de conservar el CSS personalizado durante las actualizaciones de temas.
Conclusión
Es frustrante perder el CSS personalizado después de actualizar un tema. Incluso si guardó el CSS personalizado localmente en su computadora, tendrá que regresar y agregarlo. Puede conservar el CSS personalizado de su tema usando el personalizador en el tablero de WordPress, creando un tema secundario o usando un complemento de CSS personalizado.
