Cuando vas a iniciar tu proyecto web probablemente te decantes por utilizar el CMS más popular: WordPress.
Esta decisión que toman 1 de cada 4 proyectos web ya de por sí va a implicar ciertas limitaciones aunque no seré yo quien diga que con WordPress no puedes construir cualquier web. Las limitaciones impuestas por la tecnología pueden casi siempre ser salvadas por los conocimientos y profesionalidad del que la usa. Puedes hacer grandes fotografías con tu móvil, trabajar con ratón o con tableta gráfica, con Mac, Linux o Windows, etc.
WordPress es en sí un framework
Elegir WordPress frente a programación ad hoc u otro CMS es una elección que dependiendo de tus conocimientos limitará tu web. WordPress es en sí un framework, una colección de código que te facilita el desarrollo, gestión y administración de un sitio web. Está basado en PHP, MySQL y cada vez más JavaScript, conocer a fondo estos lenguajes te permitirán ampliar este framework, igual que conocer CSS a fondo te permite usar sin limitaciones Bootstrap.
Si por ejemplo necesitas una funcionalidad que no encuentras en ningún plugin de WordPress, aunque difícil es posible, y no sabes crearlo tú mismo pensarás que WordPress no es tu solución.
Con el diseño ocurre lo mismo, si no tienes conocimientos de diseño de temas para WordPress, PHP, CSS, HTML, JavaScript y puedes crear uno tú mismo tendrás que elegir uno de los miles que existen. Puedes optar por un tema gratuito o uno de pago y esa elección será de nuevo una limitación. Si eres capaz de crear un tema hijo (lo explico al final del artículo) y hacer las modificaciones que necesitas genial, si no estarás limitado a las posibilidades de personalización que ofrezca.
Para diseñar y personalizar un tema de WordPress tienes varias opciones, el enfoque también puede variar según sea un tema para tu proyecto, para un cliente o para compartirlo o comercializarlo:
- Elegir uno gratuito o premium
- Elegir un framework como base de tu tema
- Empezar a desarrollar un tema desde cero con un starter theme
- Empezar a desarrollar un tema desde cero picando código
Una vez que has tomado esta decisión y tienes el tema puedes seguir personalizando su diseño de tres formas:
- crearle un tema hijo para personalizar algún aspecto y no perder las posibles actualizaciones del tema que has elegido,
- desde la versión 3.4 puedes configurar las opciones de personalización que ofrezca el tema en el panel de administración de WP desde el customizer, si has decidido crearlo no creo que emplees tiempo en añadir opciones al customizer a no ser que pretendas compartirlo,
- instalar plugins como los Page Builders u otros plugins que añadan capas de diseño.
En este artículo vamos a centrarnos en dos aspectos, los frameworks y los Page Builders.
Diferencias entre Frameworks y Page Builders para WordPress
Crear un tema para WordPress con multitud de opciones de personalización, con multitud de módulos, con un sistema WYSIWYG, de soltar y arrastrar, con buena documentación y soporte hará que sea utilizado por multitud de usuarios de WordPress. Incluso profesionales del diseño web y de WordPress utilizarán estos temas como base para crear los proyectos de sus clientes.
Es lo que conoce como framework, un esqueleto, un armazón que tiene funciones ya definidas para ahorrarte un trabajo de programación. Elegir un framework nos va a facilitar el uso y el mantenimiento de una tecnología pero también puede limitarla (de nuevo) Si pensamos en CSS por ejemplo podríamos usar Bootstrap, tenemos ya un diseño base de botones, tipografía, grid, etc. Dependerá de nuestros conocimientos de CSS para personalizar o añadir lo que nos falte.
La primera limitación de un framework es que debemos aprender a utilizarlo, la curva de aprendizaje puede ser mayor o menor, ayudará que exista buena documentación. Cuando se utilizan frameworks por usuarios no avanzados el resultado puede ser óptimo pero limitado a lo que ofrece. Su uso implicará una dependencia más, confiamos en que el desarrollo de WordPress continúe por mucho tiempo pero cómo asegurarnos que ocurrirá lo mismo con el framework que hemos elegido.
Mi consejo es que te documentes antes de decantarte por uno u otro framework:
- quién lo desarrolla,
- el tamaño de su comunidad,
- la documentación que existe,
- su flexibilidad,
- su rendimiento,
- el impacto en WPO, etc.
Podemos hacer dos grupos de herramientas que nos sirven para diseñar un tema de WordPress, los que integras o vienen ya integrado en un tema, los frameworks, y los que funcionan como plugins, los llamados Page Builders que permiten diseñar páginas y posts. Sus principales diferencias son:
- Normalmente los frameworks se utilizan para desarrollar un nuevo tema, normalmente como tema hijo del tema framework mientras que los Page Builders son plugins que puedes utilizar en un proyecto en marcha en el tema que ya tengas activo para por ejemplo diseñar una página nueva o añadir contenido a algún post.
- Otra diferencia es el usuario final, normalmente los plugins son utilizados por usuarios sin conocimientos avanzados de programación mientras que los frameworks son utilizados por diseñadores y desarrolladores web, profesionales y estudios de diseño para mejorar la productividad de sus encargos.
Muchos Page Builders son compatibles con frameworks e incluso puedes utilizar más de un Page Builder, consulta la documentación y asegúrate de que no hay conflicto.
19 Frameworks para WordPress
Hacemos una relación de los frameworks más populares, los que tienen multitud de opciones de configuración. En 2009 publiqué un listado que actualizaré en breve de otro tipo de frameworks, sin apenas opciones de configuración, desnudos de estilos, son conocidos como starter themes.
Los starter themes como Undesrcore, a diferencia de los frameworks que listamos aquí no tienen opciones de configuración simplemente incluyen los archivos y estilos más básicos para empezar a desarrollar tu tema desde cero.
Características comunes a los frameworks de WordPress:
- los temas framework se instalan como cualquier tema, funcionan como temas padre.
- Muchas veces se descargan ya con un tema hijo y si no lo creas tú.
- Requieren conocimientos de programación y una curva de aprendizaje mucho mayor que los Page Builders,
- Suelen utilizarlos por diseñadores y desarrolladores web que quieren mejorar la productividad.
El tema de WordPress más vendido en la popular tienda Themeforest, creado por ThemeFusion, lo han comprado más de 182,896 veces, unos beneficios de más de 8 millones de dólares con un solo tema. Su éxito es que lleva incluido Fusion Builder
Es parte de una suscripción a Elegant Themes (desde 69$), con dicha suscripción puedes descargar todos sus temas. Este y otros temas de Elegant Themes vienen con el plugin Divi Page Builder para WordPress. Es el tercer tema más popular entre los usuarios de WordPress.
Quizás el framework más popular para WordPress, puedes adquirirlo como Frameork o junto con un tema hijo.
4. Canvas – 99$ – 119$
Uno de los temas más populares, el puesto nº 12 según wpsniffer. con multitud de opciones de personalización.
Totalmente gratuito, lo instalas y haces una llamada desde el archivo functions.php de tu tema.
Gratuito, puedes leer más en el artículo Themify Flow: crea temas WordPress desde el front-end
Gratuito aunque puedes ampliar sus funciones con Layers Pro – Extended Customization for Layers por 29$. Puedes leer la reseña en Layers y Upfront ¿Es este el futuro de WordPress?
8. Upfront (Demo) – 24,5$/mes
Este framework es el que utilizan los temas Premium de WPMU DEV, no puedes adquirirlo por separado, tienes que comprar una suscripción desde 24,5$ al mes. Puedes leer la reseña en Layers y Upfront ¿Es este el futuro de WordPress?
TemplateMonster es un software de escritorio con el que generas plantillas para WordPress, Joomla, Magento, Drupal, HTML Website, PrestaShop, VirtueMart y WooCommerce.
Puedes empezar de cero o descargar algún tema, hacer las modificaciones, exportar el tema e instalarlo en tu WordPress, el tema incluirá el framework de TemplateToaster
Este framework es de los más veteranos, desde 2009, entre las opciones está la de guardar un historial, una captura (snapshot) con el que poder volver a un estado anterior de tu diseño.
En esta tienda tiene su propio Builder integrado en los temas, el pack de 80$ incluye 6 starter themes y el plugin.
Gratuito, de código abierto y ligero.
Quizás de las opciones gratuitas y de código abierto la más completa, actualizado recientemente en su versión 5.2.7. Detrás del proyecto está la tienda Rockettheme que lo liberó creando una gran comunidad con mucha documentación. Basado en Bootstrap es un framework tanto para WordPress como para Joomla!
Gratuito, de código abierto y ligero. Actualizado recientemente.
Este framework lo que hace es integrar en tu tema el panel de opciones del plugin gratuito Options Framework
Otro framework, utilizado también como plugin, liberado por una tienda, en este caso ThemeFuse. En la web oficial puedes descargar un starter theme para este framework.
Un reciente framework que está compuesto de dos partes Awesome Dev Platform y Awesome Studio. Basado en shortcodes. Ahora mismo en beta privada aunque han subido un plugin para descargarte los módulos mediante shortcodes y utilizarlo como builder.
Este framework añadía un panel de opciones pero lo han integrado en el customizer. WordPress.org no permite en su repositorio oficial de temas ningún tema con panel de personalización propio.
Una captura de su impresionante demo
Un panel del opciones que funciona con el customizer, gratuito y de código abierto aunque parece que no se actualiza desde hace un tiempo.
16 Plugins Page Builders Drag & Drop
Las características más comunes de los Page Builders son:
- Generalmente son independientes del tema que utilices,
- no necesitan de conocimientos de programación,
- funcionan con módulos que se arrastran y sueltan (drag & drop) en el editor de páginas o posts,
- pueden ser compatibles con algún framework de los anteriormente vistos,
- aunque no es lo habitual es posible que puedas utilizar o necesitar más de 1 plugin Page Builder y no tengas problemas de conflicto,
- los módulos o elementos de contenido suelen ser widgets, sliders, carrousel, testimonios, mapas, vídeos, imágenes, HTML personalizado, efecto parallax, etc.
- la mayoría ofrece opciones de configuración de dichos módulos,
- muchos permiten organizar los módulos en un nuevo layout en columnas responsive.
- muchos tienen la posibilidad de hacer esta edición en vivo en el front-end
- algunos permiten guardar plantillas para reutilizarlas,
- el resultado en código al utilizar un Page Builder puede ser mediante shortcodes o código, en cualquier caso si desinstalas el plugin no te va a funcionar pero si cambias de tema se mantendrá el trabajo que hayas hecho.
Más de 100.000 ventas en CodeCanyon hacen de este Builder el más popular. El sexto plugin más utilizado en sitios creados con WordPress según el servicio wpsniffer. Permite la edición desde el front-end y desde el backend. Puedes ampliar sus más de 45 módulos con más de 150 extensiones creados por su comunidad.
2. Beaver Builder – gratuito y PRO desde 99$
Uno de los más interesantes, con muy buenas plantillas de layouts y edición desde el front-end.
Puedes probar la versión gratuita Beaver Builder – WordPress Page Builder o adquirir la PRO por sólo en la web oficial desde 99$
Gratuito y con más de 700.000 descargas, puedes añadir cualquier widget en post o páginas y decidir su layout por columnas arrastrando y soltando. Viene con algunos widgets propios aunque puedes añadir los que quieras.
Anteriormente conocido como IG Page Builder cambió su nombre al comprarlo WooRockets.com
Soporta widgets en posts y páginas y multitud de shortcodes.
El plugin de Themify viene incluido en los temas de la tienda pero también lo venden por separado para utilizarlo en cualquier tema.
Edición en el backend y front-end, módulos, arrastrar y soltar y algo que se agradece, puedes importar y exportar el diseño y configuración de la página que hayas creado.
Uno de los más exitosos, puedes ver cómo funciona en esta Demo
Gratuito e intuitivo aunque más básico que el resto.
Es parte de una suscripción a Elegant Themes con acceso a sus populares temas y plugins.
Versión gratuita y de pago. Edición desde el Front-end y backend. Puedes ampliarlo con tus propios shortocodes y es compatible con custom post types, WPML y frameworks y temas de Studiopress, PageLines, Headway Themes, WooThemes, Template Monster, Theme Hybrid, etc.
Este reciente plugin del conocido Manuel Vicedo, creador de la tienda CPOThemes. El plugin tiene versión gratuita y una PRO. Más de 40 módulos diseñados con muy buen gusto que puedes añadir desde el mismo front-end.
Funciona con cualquier tema, tanto en páginas como en posts. Más de 50 elementos, antes a la venta en Codecanyon y ahora sólo en su web donde puedes probarlo antes de comprarlo.
Además del page builder con layouts incluye sliders, galerías, progress bar, testimonios…
Tiene versión lite gratuita en el repositorio, la versión de pago incluye más funciones a la edición front-end y 30 módulos más.
Puedes añadir sus más de 30 módulos desde el fornt-end. Interesante que además de poder editar el contenido de posts y páginas puedes editar el header y el footer, es decir, con este builder y un tema en blanco puedes crear todo el sitio.
Aunque es gratuito dispone de addons, algunos gratuitos y otros de pago. Puedes ver cómo funciona en esta demo.
Permite generar shortcodes, integrar módulos desarrollados en Bootstrap y también cualquier widget. Interesante la posibilidad de configurar animaciones para los widgets.
Este builder puede serte útil si eres desarrollador y quieres ampliarlo creando tus propios módulos.
Actualización 15/07/16
Plugin gratuito y de código abierto. Según me cuenta Ben Pines, su CMO, les ha llevado más de un año desarrollarlo. Como verás en las capturas y en el vídeo su uso es muy sencillo. Tienes un panel a la izquierda con los elementos que quieras añadir, sólo tienes que arrastrar y soltar para editar en vivo.
Otras opciones
Hay muchas más opciones:
- plugins de shortcodes, una opción simple para añadir multitud de cosas a tus posts o páginas aunque puede ser un quebradero de cabeza si algún día decides dejar de utilizarlo y tienes que eliminar todos los shortcodes de tu WP,
- el megaplugin Jetpack, uno de sus módulos te permite añadir otro CSS
- y cualquier plugin para funciones concretas como sliders, caja de autor, redes sociales, widgets, etc.
Una opción curiosa y distinta que nació en 2013 sin demasiado éxito. No es realmente un Builder, es un sistema de máscaras, de skins, para temas específicos de ElegantThemes, StudioPress, WPZOOM y WooThemes, busca si tu tema es compatible y descarga la máscara que añadirá una capa que cambiará el aspecto de tu tema mediante CSS y jQuery.
La gran ventaja es que tu tema queda intacto y su instalación y desinstalación es cuestión de segundos. Sólo necesitas un plugin y descargar tu máscara. Algo parecido a las Skins de DIYthemes.
Está a punto de lanzarse este builder construido enteramente en Javascript. Actualizaremos el post cuando eso ocurra, mientras puedes leer este artículo: The Benefits of Going 100% Javascript – PageLines
Con este plugin añades más de 50 shortcodes además de poder añadir los tuyos propios.
Puedes editar el CSS desde el front-end, totalmente compatible con frameworks como Genesis
Extensión para crear temas de WordPress directamente desde Dreamweaver, más de 140 módulos a incluir fácilmente pinchando y arrastrando en la vista Diseño. Puedes empezar con uno de los 13 temas que incluye. Crea secciones de autor, portafolios, testimonios, etc. Compatible con CS4 hasta CC 2015.
Bonus: Cómo crear un tema hijo
Ya sea porque te has decidido por un tema framework o porque necesitas hacer algún cambio a tu tema y no quieres perder sus posibles actualizaciones te dejo una breve guía de cómo crear un tema hijo o child theme de tu tema framework o tema padre:
- Instala el tema framework o padre como cualquier tema
- Crea una carpeta en wp-content/themes, por ejemplo: mitemaframework-hijo
- En esa carpeta crea el archivo style.css añade los metadatos de tu tema al inicio del archivo en los comentarios y muy importante añade la etiqueta Template con el nombre de la carpeta de tu tema padre:
/*
Theme Name: Mi temapadre hijo
Theme URI: http://miweb.com/mitemapadre-hijo/
Description: Mi temapadre Child Theme
Author: Tu nombre
Author URI: http://miweb.com
Template: mitemapadre
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mitemapadre-child
*/
Una vez hecho esto activa tu tema hijo en Apariencia -> Temas.
De esta forma ya tienes un tema hijo con todo lo del tema padre pero sin los estilos CSS. Si quieres mantener los estilos del tema padre crea un archivo functions.php y añade este código
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'estilos-tema-padre', get_template_directory_uri() . '/style.css' );
}
En este mismo archivo, el archivo functions.php es donde tendrás muchas veces que incluir una función que hará la llamada al framework.
Conclusiones
La pretensión de este artículo no es la de recomendar uno u otro framework o Page Builder, ni siquiera su uso. He intentado recoger todas, o casi todas, las opciones, de pago y gratuitas. Seguro que hay algún framework o Page Builder que se me ha pasado, es cuestión de acceder a los enlaces, a las demos, probar en una instalación local y decidir cuál es el quieres usar.
Recuerda que al igual que sistemas como Wix te facilitará el trabajo intenta no depender demasiado de trabajos de terceros y aprende cómo diseñar y crear tú mismo el tema y funciones que necesita tu WordPress.
