29 Ene El editor visual de wordpress y el HTML5
En muchas formaciones de nivel introductorio de wordpress el temario suele ser parecido a:
- Diferencias entre wordpress.com y wordpress.org
- Páginas, entradas, categorías y etiquetas
- Menús y widgets
- Plugins
- Plantillas
- Formularios
- En ocasiones algo de photoshop
Y algo más en función del grupo y de lo que de tiempo según horas disponibles.
El editor texto es el gran olvidado de muchas formaciones.
Todos los profesionales del sector terminamos siguiendo un guión bastante parecido y es que se trata de un índice de contenidos bastante correcto para una iniciación.
Sin embargo, a medida que vas profundizando en el uso de wordpress poco a poco te vas dando cuenta de pequeños detalles que no están del todo «pulidos» en la herramienta.
Veamos un error típico que muchos (y me incluyo) cometemos cuando redactamos una entrada…. y este es el de abuso de etiquetas semánticas de html5.
El editor de wordpress
El editor de entradas y páginas (y widget de texto) es el gran olvidado de muchas formaciones. Su simplicidad y parecido con el word hace que a menudo no se le preste la atención que debiera. Lo cual en mi opinión es una verdadera lástima.
Empecemos por los básicos.
El editor de wordpress tiene un editor visual y un editor html.
El editor visual
El editor visual incluye por defecto todas las funciones mínimas para un redactado.
Ordenados de izquierda a derecha en la imagen encontramos: párrafos, encabezados hasta 6 niveles, negritas, cursivas, listas no ordenadas, listas numeradas, citas, alineado a la izquierda, centrado, alineado a la derecha, enlaces (permalinks), una línea divisoria, tachado, colores personalizadas, pegar desde word, borrar formatos, caracteres especiales, sangría a la derecha, sangría a la izquierda y el gran Ctrl + z.
Y en caso de que tengas una plantilla de pago o algún plugin instalado algunos iconos extra que añaden shortcodes.
Pero…. y el editor HTML?
El editor HTML
En los cursos normalmente se suele explicar el visual y nos olvidamos de la parte de lenguaje de marcado. Como lo hacemos si queremos insertar tablas?
En ocasiones la solución pasa por insertar algún tipo de plugin cuando en realidad no haría falta. Únicamente sería necesario escribir un poquito de html básico…
Pero esto no es grave…
El editor visual conlleva el riesgo de que es demasiado visual. En ocasiones ensucia mucho el código. Etiquetas vacías, saltos de línea a mansalva nbsp que no deberían estar, párrafos vacíos, css en línea en lugar de usar clases, … etc
Uso indebido de etiquetas html
Démosle al César lo que es del César. En cualquier formación de web se explica que el html únicamente se debe usar para aportar contenido y forma y que el css sirve para dar formatos.
Es decir, que por poner un ejemplo… nunca debería usar un «título 1» en lugar de un «título 2» porqué nos gusta más lo bonito que queda el «título 1» en nuestra plantilla de wordpress.
Es más, el título de la entrada es por defecto siempre un «Título 1». Por temas de SEO en una página únicamente debería haber uno… por lo tanto directamente evita el uso de este «formato».
Nunca deberíamos usar una etiqueta en detrimento de otra simplemente porque «nos gusta como artísticamente«
El editor de wordpress y el HTML5
Veamos que etiqueta html usa wordpress en algunos casos.
| Formato | Etiqueta wordpress | ¿HTML5? | Equivalente no semántico |
|---|---|---|---|
| Negrita | <strong> | Si | <strong> |
| Cursiva | <em> | Si | <i> |
| Cita | <blockquote> | Si | Se haría mediante css |
| Tachado | <del> | Si | Se haría mediante css. Las etiquetas <s> y <strike> están "deprecated" |
Si nos pasamos pintando corremos el riesgo de diluir la fuerza semántica de nuestras etiquetas.
Las etiquetas html5 sirven para dar significado semántico a nuestro documento web. Por ejemplo una etiqueta <header> indicará a los navegadores que están leyendo una parte del documento que típicamente tendrá el logotipo y un menú de navegación. <nav> indicará el menú de navegación principal de nuestra web.
En un documento web, deberíamos usar únicamente un <nav>, una <header> y una <footer> por poner un ejemplo….
Si queréis profundizar sobre la semántica de html5 os recomiendo este escrito.
Pues bien, las etiquetas que se muestran en la tabla lateral indican a google que el contenido que se está leyendo es «especial» y que destaca sobre las otras palabras de la web. De algún modo le estamos pidiendo que los ojos de google presten en estas etiquetas su atención.
¿Genial verdad?
¿Pero que pasa si en un documento web empezamos a poner negritas en todas partes? En algunas ocasiones será un uso acertado, pero en otras simplemente estético para facilitar la lectura diagonal de nuestro visitante.
¿Se entiende por dónde voy?
Si nos pasamos pintando corremos el riesgo de diluir el mensaje.
Consejos para un redactado óptimo en wordpress
- Para terminar con esta entrada remarcaremos una vez más que debemos tener el costumbre de revisar el editor de html cuando redactemos directamente en wordpress.
- No abusaremos de las negritas, itálicas, comentarios… y si debemos hacerlo miraremos de combinar las etiquetas que el editor visual escribe por defecto con aquellas de html que no tienen significado semántico y que resultan en el mismo formato.
- Evitaremos instalar nuevos plugins para usos que únicamente requieren de un html muy sencillo.
¡Y hasta aquí la entrada de hoy querido lector! Espero que a partir de ahora mires las herramientas de editor visual y editor html con otros ojos 😉
¡Hasta mañana!
Entradas relacionadas:
En cualquier formación de web es inevitable acabar hablando sobre gestores de contenidos (CMS) y el más exitoso de todos: WordPress. Detrás de este proyecto open source se esconde la realidad de una e...
Si estás buscando dónde comprar plantillas para wordpress en esta publicación encontarás mi top 10 de lugares favoritos y algunos criterios que tengo en cuenta para asegurarme una buena elección para ...
¿Necesitas modificar un texto o palabra que aparece muchas veces en páginas o entradas de tu web? Te planteo dos propuestas para todos los gustos.
En esta entrada tocamos un clásico en el mundo wodpress. Hablamos de que son las plantillas hijas, porqué debemos usarlas, como se crean y usos indebidos a evitar.
Visual Composer es un plugin de wordpress que dota al editor visual de una gran variedad de shortcodes con muchísima fuerza. Gracias a VC he ganado entre 10 y 15 minutos diarios antes dedicado al maqu...
Si tu plantilla wordpress no te permite personalizar la página de categorías entonces tendrás que hacerlo a partir de una plantilla hija y el archivo category.php. Te cuento como lo he hecho en mi cas...
No Comments