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 las horas disponibles en la formación.
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.
El editor clásico es el gran olvidado de muchas formaciones.
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 | <b> |
| Cursiva | <em> | Si | <i> |
| Cita | <blockquote> | Si | Se haría mediante CSS |
| Tachado | <del> | Si | Se haría mediante CSS. La etiqueta <strike> está deprecated |
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.
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!
Deja una respuesta