Para Personalizar una plantilla WordPress de Genesis debemos prever el futuro inmediato de nuestra web.
Son muchas las plantillas gratuitas o de pago que se pueden instalar en nuestro WordPress. Algunas necesitan de un Frameword para funcionar.
Esta opción es la más recomendable porque al instalar un tema padre y una plantilla hija se jerarquiza mejor las instrucciones y el código es más ligero y eficiente.
Por esa razón vamos a personalizar una plantilla WordPress de Genesis, que creo que es el mejor frameword del mercado.
En primer lugar nos hacemos con la plantilla padre y con alguna plantilla hija, las instalamos las dos y activamos la hija.
Si modificamos el código de la plantilla hija vamos a tener un problema cuando la plantilla hija se actualice, ya que perderemos todas las modificaciones.
Ya que nuestro objetivo es modificar el CSS de la plantilla, podemos clonar la plantilla hija con el plugin “Child Theme Configurator” y de esta forma creamos una plantilla propia que no se actualizará nunca.
Evidentemente, si la plantilla no se actualiza estaremos expuesto a los hackers y cuando se actualice el frameword o wordpress puede que deje de funcionar correctamente.
Por ese motivo, vamos a optar por crear un plugin con una función que llame a un archivo “custom.css” que siempre estará disponible incluso después de una actualización.
Esta es la única forma de tener una plantilla actualizada y personalizada, sin coste y con poco esfuerzo. CDI
Vamos con la operativa para Personalizar una plantilla WordPress de Genesis.
#1 Creamos un archivo custom.css en la carpeta del tema hijo.
Para crear un archivo css acudimos a nuestro FTP o a Cpanel del hosting y creamos un archivo.
Nos situamos en la carpeta y pulsamos +Archivo, introducimos el nombre “custom.css”
#2Creamos el plugin.
Para crear el plugin abrimos el bloc de notas introducimos los metadatos y lo guardamos con la extensión php: “mi-plugin.php”
<?php /*Plugin Name: Mis funciones personalizadas Description: Plugin para ir poniendo mis funciones personalizadas Version: 0.1 Author: Juande2Marin */
#3 Comprimir y subir el plugin.
En nuestro plugin vamos a incluir una única función que introduzca en cola de carga nuestro archivo “custom.css”
Meter en cola un archivo css después de style.css
/* Soporte para custom.css ---------------------------------------------------------------------- */ function enable_custom_css() { wp_register_style( 'style_css', get_stylesheet_directory_uri( ).'/style.css' ); wp_enqueue_style( 'style_css' ); wp_register_style( 'custom_css', get_stylesheet_directory_uri( ).'/custom.css' ); wp_enqueue_style( 'custom_css' ); } add_action( 'wp_enqueue_scripts', 'enable_custom_css' );
Para poder subir este archivo desde el escritorio de wordpres lo comprimimos en ZIP.
Desde el escritorio en la opción pugins/añadir nuevo, subimos el archivo ZIP y lo instalamos y activamos.
#4 Creamos la carpeta /mu-plugins y movemos el plugin.
Ya tenemos nuestro plugin instalado y activado. El problema es que este plugin está accesible para el administrador de la web. Si lo desactiva o borra todas las modificaciones CSS dejarán de funcionar.
Para poder Personalizar una plantilla WordPress de Genesis, sin riesgo es aconsejable subir el plugin a una carpeta “mu-plugins” que activará el plugin sin que este aparezca en el listado de plugins instalados.
#5 Creamos el css y lo pegamos en custom.css
Ahora vamos a crear nuestro CSS personalizado, y para ello utilizaremos el inspector de nuestro navegador. Con el podemos modificar el css y ver como va quedando la web.
Cada CSS podemos guardarlo en el personalizador de la plantilla. Escritorio > Apariencia > Personalizar
Cuando tengamos el CSS completo y probado, solo tenemos que buscar con el gestor de archivos del Cpanel el archivo custom.css y pegar el código.
Ya está.
Hemos personalizado / implementado una plantilla a medida a partir de un tema de Genesis que se puede actualizar sin perder las modificaciones. Sin código y aprovechando las ventajas de un frameword y su trabajo de mantenimiento.
Es sin duda la solución más efectiva, profesional y rentable que se puede poner en práctica sin coste adicional al de tu trabajo.
Cómo Implementar CSS Personalizado en WordPress
Para aquellos que buscan dar un toque único y distintivo a su sitio web WordPress, el CSS personalizado se convierte en una herramienta indispensable. Con unos pocos ajustes, puedes transformar la apariencia de tu sitio y destacar entre la competencia. Aquí te explicamos cómo puedes agregar fácilmente CSS personalizado a tu WordPress y llevar el diseño de tu sitio al siguiente nivel.
Antes de comenzar, es importante tenes claro que cualquier cambio que realices en el CSS debería ser hecho con precaución. Un error común es la edición directa de los archivos de estilo de la plantilla principal, lo cual no es recomendable, ya que podría causar problemas al momento de actualizar el tema. En lugar de esto, vamos a utilizar métodos seguros que mantienen nuestros cambios intactos a lo largo del tiempo.
Una de las formas más seguras y efectivas de añadir CSS personalizado es a través del personalizador de WordPress. Simplemente dirígete a Apariencia > Personalizar en tu escritorio de WordPress y busca la sección ‘CSS adicional’. Aquí puedes introducir tus estilos personalizados y ver los cambios en tiempo real. Esta opción garantiza que tus ajustes permanezcan incluso después de una actualización de tema.
Otra alternativa es el uso de plugins específicos para manejar CSS personalizado. Estos plugins ofrecen una interfaz amigable y algunas funcionalidades adicionales, como la posibilidad de aplicar estilos a diferentes dispositivos o programar su aplicación para ciertas fechas.
Para los desarrolladores o usuarios avanzados, crear un tema hijo es la opción más profesional. Al hacerlo, puedes editar los archivos de estilo o añadir archivos nuevos sin temor a perder tus personalizaciones. Si optas por esta ruta, considera usar un plugin como «Child Theme Configurator» para simplificar el proceso.
Independientemente del método que elijas para agregar CSS personalizado en WordPress, recuerda siempre probar tus cambios en un entorno de desarrollo antes de aplicarlos en tu sitio en vivo. Esto te ayudará a evitar errores y asegurará que tus visitantes tengan la mejor experiencia posible.
Con estos consejos, ya estás listo para mejorar la estética de tu sitio WordPress con tu propio CSS personalizado. ¡Manos a la obra y a darle vida a tus ideas!
Las Mejores Plantillas Genesis Para 2024
Seleccionar la plantilla ideal es crucial para el éxito de cualquier sitio web en WordPress. En el año 2024, la gama de plantillas Genesis estuvo a la vanguardia, ofreciendo diseños atractivos y funcionalidades robustas. A continuación, exploraremos algunas de las mejores plantillas Genesis del 2024 que continuaron marcando tendencia y proporcionando a los usuarios soluciones excepcionales para sus webs.
El Framework Genesis goza de una reputación bien merecida por su seguridad, optimización SEO y diseño responsivo. Las plantillas de Genesis para el año 2024 elevaron aún más estas características, integrando diseños innovadores y flexibilidad de personalización. Echemos un vistazo a las que destacaron por su excelencia y adaptabilidad.
Authority Pro
Authority Pro es una plantilla que captó la atención de muchos por su enfoque en establecer la confianza en línea. Con un diseño moderno y limpio, es ideal para profesionales y emprendedores que buscan posicionarse como líderes en su industria.
Magazine Pro
Para sitios de noticias o blogs con un alto volumen de contenido, Magazine Pro se consolidó como una de las favoritas. Su estructura organizada y su presentación dinámica permiten mostrar una gran cantidad de artículos de manera cohesiva y atractiva.
Essence Pro
Essence Pro, con su elegante diseño y su enfoque en el bienestar y estilo de vida, proporciona una estética serena adecuada para sitios web que buscan transmitir tranquilidad y sofisticación.
Business Pro
Para las empresas que necesitan un sitio web corporativo con un aspecto profesional, Business Pro fue una opción indiscutible. Su diseño limpio y funcionalidades de negocios integradas hacen de esta plantilla una herramienta poderosa para la presencia online de cualquier empresa.
Las plantillas Genesis se distinguen por su seguridad, rendimiento y por ser amigables con los motores de búsqueda, y las opciones de 2024 no fueron la excepción. Con estas plantillas, personalizar y optimizar un sitio web para un rendimiento óptimo es más accesible y eficiente.
Al elegir la mejor plantilla Genesis para tu proyecto, es importante considerar no solo el diseño, sino también las características específicas que necesitas para tu sitio web. Ya sea que busques una estética minimalista o una plataforma para contenido masivo, el conjunto de opciones de Genesis del 2024 tiene algo que ofrecer para todos.
Recuerda que aunque estas plantillas fueron populares en 2024, sigue siendo importante verificar la compatibilidad y las actualizaciones para asegurarse de que se ajustan a las necesidades actuales de tu sitio web en términos de diseño, SEO y seguridad.
Juande Marín
Profesor de Marketing digital, divulgador de inteligencia artificial y neuroeducación. Especializado en posicionamiento en buscadores y diseño web. Autor de varios libros relacionados con el comercio electrónico y el marketing digital (McGraw Hill, Paraninfo,…) Juande2marin