7. Edición Avanzada

HOY APRENDERÁS: qué tipo de plugins nos permiten trabajar con editores más avanzados para crear nuestras páginas y cómo funcionan estos editores

Ya revisamos en el módulo «Crear contenidos» el editor que trae por defecto WordPress al instalarlo. Su interfaz gráfica es limitada, y no nos ofrece muchas opciones para diseñar páginas visualmente más complejas o atractivas para nuestros contenidos.

Aunque podíamos trabajar con las etiquetas HTML y los estilos CSS, a través de la pestaña ‘HTML’ del editor y complementar todo ello con los estilos personalizados en nuestro tema (theme), si no conocemos esos lenguajes (¡lo que siempre es recomendable!), esa gran funcionalidad al final no sería una solución adecuada para nosotros.

Por eso, en este apartado te vamos a describir varias alternativas que te pueden ser de mucha utilidad si quieres tener una mayor facilidad y control para editar y crear los diseños de tus páginas: potenciar el editor de WordPress o añadir un editor ‘visual’ avanzado. Incluimos dos videos donde mostramos más en detalle ejemplos concretos de ese tipo de plugins y los resultados que podemos alcanzar.

7.1 Potenciar editor de WordPress

Una posibilidad que tenemos es aumentar las opciones de incluye la versión del editor TinyMCE que implementa WordPress al instalarlo. Como podéis ver en su propia web, tiene algunas funcionalidades más que las que nos encontramos en nuestro WordPress. Por ejemplo:

• Elegir familia y tamaño de fuentes (tipografía)
• Elegir distintas viñetas para las listas: disco, círculo, cuadrado…
• Poner colores de fondo a elementos de la página (un párrafo, tabla,…)
• Insertar superíndices  ó subíndices
• Insertas tablas (aunque como veremos en el video, tenemos que formatearlas con estilos CSS)

Para tener estas opciones u otras que han creado otros desarrolladores, podemos buscar e instalar los correspondientes plugins. Os mostramos un ejemplo en este video, con el plugin TinyMCE Advanced, viendo algunas de esas funcionalidades. [restrict paid=true]

7.2 Editores ‘visuales’ avanzados

Otra opción que tenemos es instalar un editor ‘visual’ más avanzado, es decir, que nos ofrezca mayores posibilidades de maquetación (disponer los elementos en la página) mediante una interfaz gráfica que nos facilite el trabajo. Algunos ejemplos muy destacados son Page Builder, King Composer, Visual Composer o Thrive Content Builder aunque están apareciendo muchos editores de este tipo para WordPress por su gran aceptación. Aquí tienes una lista muy interesante de este tipo de plugin (en inglés).

En este tipo de editores podemos insertar filas y dividirlas en columnas para facilitar la ubicación de elementos (imágenes, texto,…) y se trabaja con una interfaz ‘drag and drop‘ (‘arrastrar y soltar’), es decir, seleccionamos un elemento con el ratón, por ejemplo una fila, y la podemos mover y colocar en otra posición.

Dentro de esas filas y columnas podemos colocar widget o elementos como cuadros de texto, imágenes, videos, y otra serie de elementos que no habíamos visto hasta ahora como cuadros con pestañas múltiples, acordeones que al pinchar se despliegan mostrando texto, slider o carruseles de posts o imágenes, botones, etc… Estos últimos elementos suelen estar programados con el lenguaje JavaScript, lo que les confiere esos efectos dinámicos.

Según el editor que elijamos tendrá más o menos funcionalidades de ese tipo y podrá ser o no de pago, aunque si no conocemos bien HTML/CSS y nos interesa mucho conseguir una presentación de nuestras páginas más atractiva o llamativa, posiblemente nos compense su adquisición. También es posible que alguno de estos editores venga incluido de forma ‘gratuita’ en algún theme de pago, es decir, al adquirir la licencia del tema ya obtenemos la de ese editor.

Una vez los probamos, parecen ser la mejor opción con diferencia, pero aunque nos facilitan enormemente la tarea de diseñar páginas sí conviene tener en cuenta dos aspectos menos positivos:

• Según el editor, puede crear un código HTML, CSS y JavaScript poco optimizado, y ralentizar la carga de nuestras páginas
• Quedamos ‘atados’ un poco al editor, ya que si lo desinstalamos/desactivamos, las páginas no se verán correctamente, salvo que convirtamos o eliminemos las partes que dependen del plugin.

Es algo similar a lo que ocurre con el Theme, donde ya os comentamos que conviene tomarnos nuestro tiempo para elegir, porque una vez escogido, puede ser algo complicado, o al menos trabajoso, cambiar con posterioridad.

En el siguiente video os mostramos unos de los editores que os hemos citado antes (King Composer). Lo hemos elegido porque tiene una versión gratuita con muchas funcionalidades que nos facilita probar este tipo de herramientas.

Nota: el editor King Composer tiene solo versión inglesa, aunque ser una interfaz gráfica muy intuitiva, en base a iconos, creemos que es fácil entenderla. Si quieres un plugin en español, puedes instalar por ejemplo Page Builder que es muy popular, aunque también deberías instalar adicionalmente el plugin SiteOrigin Widget Bundle (también gratuito) para disponer de los típicos elementos como botones, maps, slider de imágenes, etc… Simplemente búscalos por ese nombre en la opción de «Añadir nuevo plugin»

HOY HAS APRENDIDO: cómo puedes crear páginas más complejas potenciando el editor de WordPress o instalando algún editor visual que te proporciona una interfaz gráfica más intuitiva y con más posibilidades de maquetación 

[/restrict]