Crear un Índice de Contenidos en WordPress, sin Plugin, con listas HTML y CSS

En este post vamos a crear el típico índice o tabla de contenidos para un post de manera manual, sin utilizar ningún plugin, mediante la utilización de las listas HTML y el CSS, para darle estilo.

Ultimamente en cualquier post no puede faltar el típico índice que nos resume el contenido con enlaces a los distintos apartados del artículo.

Normalmente estará hecho con un plugin de WordPress que crea automáticamente ese índice y que, además, es muy configurable. El más usado es el Table of Contents Plus (TOC+), que triplica en instalaciones a Easy Table of Contents.

En este post vamos a realizar esa tabla de contenidos o índice para nuestros post de manera manual, utilizando HTML y las hojas de estilo CSS. Es un poco más laborioso que utilizar el plugin, pero de esa manera nos ahorramos un plugin y depender de sus actualizaciones.

Este es el índice o tabla de contenidos de nuestro post, hecho. como no, de manera manual, sin ningún plugin. Al final del post tienes el código HTML y los estilos CSS, para que pruebes en tu blog. Una vez hayas hecho uno es copiar y pegar.

 

1. ¿Por qué es positivo añadir un índice en los post?

He visto Tablas de Contenido más largas que el propio post.  Será positivo para el SEO pero la apariencia es un poco pobre. También he visto otras tablas que son infinitas. Con tropecientosmil apartados, subapartados y subsubapartados. Cada párrafo sale en el índice.

Aunque posicione mucho, a veces hay que pensar un poco en el usuario, en el que va a leer ese post, y menos en el SEO. La usabilidad y un poco de diseño también son importantes.

Lo que hacen todos estos plugins es un índice basado en las etiquetas HTML de los encabezados. Así, el título de toda la tabla será el H1. Los H2 (título 2) serán los apartados principales, los H3 (título 3) los subapartados…  y así sucesivamente. Por eso para utilizarlos tienes que tener bien estructurado tu post, en base a los encabezamientos HTML.

Los índices o tablas de contenido es bueno implementarlos.

• Buena experiencia de usuario. El usuario puede ir directamente a la parte del post que más le interesa. Si es un post de mucho contenido le facilitas la navegación por el post y que pueda ir a la parte que le interesa.
• Reduce el porcentaje de rebote porque al pinchar en el enlace de la tabla Google considera que ya ha ido a otra parte del blog y no lo considera rebote.
• Añade enlaces internos que pueden posicionar para esas palabras clave. Esos enlaces Google los indexa.

2. Plugins para WordPress de Tablas de Contenidos

El más utilizado, sin ninguna duda, es el Table Of Contents Plus, conocido también como TOC+.

La Wikipedia utiliza estos índices o sumarios desde el principio para ordenar toda la información de sus artículos. Como son artículos muy extensos pinchando en el índice en cualquier sub apartado te lleva directamente a él, sin tener que buscarlo mediante el scroll.

El plugin TOC+ es muy completo. Puedes ponerlo, o en todos los artículos que ya tienes en tu blog (tendrán que estar ordenados con el H1,H2 y demás) o, por medio de un shortcode, sólo en los que te interesen.

Es un plugin muy configurable. Puedes cambiar el diseño. Colores de fondo, borde, tamaños…

Puedes añadir la tabla de contenidos donde quieras. Por ejemplo, sólo en las entradas para que no aparezcan en páginas. Además, puedes colocarlo en el lugar que quieras dentro del artículo.

Insistimos, lo único es que debes tener el post bien estructurado. Del título dos (H2) colgarán los títulos 3 (H3) y de estos, los títulos 4 (H4). Y esto lo hará automáticamente.

3. Utilizar listas en HTML para crear un índice de contenidos

Si le tienes manía a los plugin y, a lo mejor, solo vas a poner el índice en algunos post, igual es mejor hacerlo de manera manual y nos ahorramos un plugin. Más artesanal.  Aunque cuesta un poco más, como es normal, es muy fácil y, así, tu tienes todo el control.

Además, aprendemos a realizar listas en HTML y a utilizar los estilos CSS que son de mucha utilidad para maquetar algún post especial.

Vamos ver los tipos de listas en HTML y cómo se hace una para que nos sirva como índice. Luego  añadiremos el diseño utilizando los estilos CSS.

Una vez hecho un índice para un post, cada vez que quieras volver a utilizarlo simplemente es hacer un copia pega cambiando texto y enlaces. Fácil.

 

Tipos de listas en HTML

Recuerda que en el editor de WordPress tienes dos pestañas (arriba a la derecha) a la hora de escribir un post. La Visual y la de HTML.

No está mal que cada vez que vayas a publicar un post le eches un vistazo a la de HTML para ver si todo está correcto. A veces si has cometido algún fallo puede llenarte de código inservible tu artículo.

Vamos con los tipos de listas que podemos hacer con HTML.

Listas de definición

Casi ni se utilizan pero pueden venir bien para algún artículo. Es parecido al funcionamiento de un diccionario, donde pondrías la palabra y una definición.

<dl> abre y cierra la lista html, <dt> se utiliza para el término y <dd> para la definición. Vemos un ejemplo de lista de definición.

y se vería así.

Término1

Definición 1

Término 2

Definición 2

Si tienes alguna oportunidad de usarlas hazlo. Es interesante para romper la monotonía del post. Obviamente hazlo en la pestaña de HTML.

Listas ordenadas

Las listas ordenadas son las que los elementos tienen un orden representado por un número. Se forman con la etiqueta <ol>…</ol> para abrir y cerrar la lista y la etiqueta <li>…</li> para abrir y cerrar los elementos que componen la lista.

y se ve así

1. Apartado 1
2. Apartado 2
3. Apartado 3

Una pregunta que nos podemos hacer ¿Cómo empezar una lista ordenada HTML por un número distinto al 1? Pues si quieres empezar una lista ordenada en HTML por el número 4 simplemente a la etiqueta <ol> le añades <ol start="4"> y todo lo demás igual.

4. Apartado 1
5. Apartado 2
6. Apartado 3

Y si quieres que la numeración sea decreciente, en vez de ascendente <ol reversed>…</ol>

Listas desordenadas

Las más utilizadas. Muestra una lista sin ningún orden. Simplemente puntos, cuadrados o la imagen que quieras. Se forman igual que las listas ordenadas pero con la etiqueta <ul>...</ul>.

y se vera así

• Apartado 1
• Apartado 2
• Apartado 3

Podemos cambiar la viñeta de las listas, como en las listas ordenadas, añadiendo a la etiqueta <ul> el atributo type.

Si no quieres que tenga ninguna viñeta <ul type="none">...</ul>, un cuadrado <ul type="square">...</ul>, un círculo <ul type="circle">...</ul> y un círculo hueco <ul type="disc">...</ul>

Estas serían las viñetas gráficas. También podrías utilizar viñetas numéricas y alfanuméricas utilizando estos valores para el type:

decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha |

Listas anidadas

Para nuestra tabla de contenido vamos a utilizar las listas anidadas para añadir los subapartados. La podemos hacer numéricas, con <ol>…</ol>, o con viñetas gráficas con <ul>…</ul>. El código HTML sería el siguiente:

y se vería así

• Apartado 1
  • Apartado 1.1
  • Apartado 1.2
• Apartado 2
• Apartado 3

Simplemente abriendo y cerrando con la etiqueta <ul>…</ul>  en los elementos de la lista que quieres que estén anidados. Date cuenta que el  cierre de la etiqueta </li> del Apartado 1 va después de los apartados anidados.

Nos quedan dos pasos. Darle formato por medio de CSS para dejarlas a nuestro gusto y, por último,  añadir los enlaces que nos llevará desde el índice hasta el apartado que queramos de nuestro post.

4. Aplicar diseño a nuestras listas HTML con CSS

CSS son las hojas de estilo. HTML es simplemente un lenguaje de marcado para páginas web. Un documento. Para darle formas, tamaños, colores, fondos, fuentes… usamos el código CSS.

Utilizamos las CSS para darle el diseño o “acabado” final, en este caso, a nuestras listas que formarán nuestra Tabla de Contenidos.

Hay dos formas de implementar el código CSS en nuestro post.

En el propio post o en la hoja de estilos de la plantilla.

Si miramos en el FTP, en la carpeta de nuestra plantilla veremos que hay una carpeta que se llama CSS. Dentro están las hojas de estilo CSS. Son simplemente unos archivos .css con el código que da forma a nuestra plantilla.

Si nosotros creamos unos estilos nuevos para nuestras listas, deberíamos copiarlo en esas hojas de estilo. Pero como no es bueno manipular esos archivos, porque como borremos algo se nos viene abajo toda la plantilla, añadiremos los CSS que creemos en el apartado que todas las plantillas suelen tener para este menester. Normalmente en Opciones de Tema – CSS personalizado.

Ahí añadiremos las nuevas reglas CSS que vayamos haciendo. Vamos a crear unos estilos para una lista cualquiera.

Por ejemplo, una lista ordenada. Nuestro código HTML sería este:

Sin aplicar ningún CSS se vería así.

1. Este será el primer h2 de mi tabla de contenidos
2. Aquí aparece el siguiente H2 de mi post
   • Este es un h3 que aparece como subapartado
   • Este es otro h3 que aparece como subapartado del segundo h2
3. Y este es el último H2

 

Como queremos que esa lista tenga un poco de diseño vamos a añadirle unos estilos. Vamos poner un fondo de color y un borde arriba y abajo, por ejemplo. Algo discreto pero que nos diga que esto es un índice o tabla de contenidos.

Para eso englobamos todo este código HTML entre las etiquetas <div>…</div>.

Un <div> (división) es una etiqueta HTML que sirve para crear secciones. Lo que hacemos es crear un <div> para darle forma a esa sección sin que afecte al resto de la página.

Ahora a ese div le añadimos un estilo o diseño modificando el background (fondo), y añadiendo unos bordes, por ejemplo. Este sería el código que tendríamos que añadir en la pestaña de HTML.

 

Se vería así:

 

Hemos aplicado las CSS dentro del mismo documento (con div style="..."), cosa que no es conveniente hacer. Para ir viendo como queda lo podemos utilizar pero los suyo es cuando ya tengamos los estilos como nos gustan darles un nombre (una clase) y copiarlos en el CSS personalizado de nuestra plantilla (suele estar en opciones de tema) de la siguiente manera:

.listas{
background: #bbe0b2;
border-top: 2px;
border-bottom: 2px;
border-style: solid;
border-color: #003366;
padding: 20px;
}
.listas a { color: #135604; }
.listas a:hover { color: #003300; }

Y ahora en el HTML de nuestro post <div class=”listas”>...</div>

Lo que hemos hecho ha sido crear una clase para las listas (en CSS es .nombre). Así cuando pongamos <div class=”listas”>...</div> las listas tendrán el diseño que hemos creado. Y  podemos utilizar este estilo en todos nuestros post.

Los elementos de la lista son enlaces que nos llevarán a una parte de nuestro post por lo que mediante .listas a damos color a esos enlaces y mediante .listas a:hover mostramos el color que queramos cuando el ratón pasa por encima del enlace.

El padding es la separación o relleno entre el fondo y los enlaces. Prueba a cambiar el número de pixels para probar.

Al final del post os dejamos el HTML y el CSS que utilizamos en este blog para los índices.

Ya solo nos falta crear los enlaces ancla.

5. Crear  enlaces ancla en HTML

La mayoría de los enlaces en html van dirigidos hacia una página o url de tu propia web o blog (enlace interno) o hacia otra página web (enlace externo). Su sintaxis sería:

Este sería un enlace externo hacia la Wikipedia. Si fuera hacia una página de tu blog sería igual, cambiando la url de la wikipedia por la url de la página de tu blog que quieras enlazar.

Los enlaces ancla son los que enlazan puntos específicos de tu documento, enlazan dentro de la misma página. Se escriben así:

donde id1 es el identificador o nombre que le des al enlace.

Donde quieras que te lleve el enlace dentro de tu documento añades el mismo id o nombre al enlace pero sin almohadilla y con esta  sintaxis:

En nuestro caso si estamos haciendo un índice de nuestro post en WordPress podemos hacerlo así:

Escribimos nuestra lista y le añadimos el enlace. Para ir rápido puedes ponerle de nombre al enlace un título genérico, de lo que va el post, por ejemplo, y el número del apartado. Así irás copiando y pegando más rápido.

Y en el H2 al que nos lleva el enlace del índice añadimos en la pestaña HTML

Una vez cogido el truco se hace realmente rápido y sin ninguna complicación.

Aquí tienes el HTML y CSS de nuestra Tabla de Contenidos manual.

 

Para este post hemos hecho, también, una caja para poner el código HTML . Simplemente fondo negro con letras blancas. Este es el CSS y el HTML.