Cómo poner un índice en un post en wordpress

Poner un índice en un post te puede ayudar a mejorar la experiencia del usuario. Cuando escribes un post muy largo y dividido en varias secciones, se hace complicado leerlo de una sola vez, además, habrá usuarios que puedan conocer alguna parte del contenido y quieran saltarse lo básico. Es por ello que usar un índice facilitará esa experiencia.

Existen varias formas de poner un índice en una web, la que sirve a todas es hacerlo directamente en HTML y si usas wordpress (como nosotros) también puedes utilizar un plugin.

indice de contenidos

Índice en una página con HTML

Si tienes conocimientos básicos de HTML conocerás el código para poner un enlace externo:

<a href=”http://dominio.com” >Este es el texto ancla</a>

Para poner un índice en un post, tendrás que hacer uso de la atributo “name:” para acompañar a la etiqueta de los enlaces de la siguiente forma:

  1. Pon la etiqueta <a> con el atributo “name:” en el sitio al que quieras que dirija el enlace de tu índice.
  2. En el índice, pon la etiqueta <a href> normal, pero acompáñala del símbolo #, y este será el enlace que irá a la parte del documento que quieras que vaya.

Si usas wordpress, tendrás que entrar en la pantalla “Texto” (junto a Visual) para escribir código HTML y este será el código


"<a name="seccion1">Aquí todo el texto de la sección</a>
<a name="seccion2">Aquí todo el texto de la sección</a>

Y para enlazar con cada sección, así tendrás que poner el índice en forma de lista:


<ul>
<li><a href="#seccion1">Seccion 1</a></li>
<li><a href="#seccion2">Seccion 2</a></li>
</ul>

El índice de este post lo hemos hecho de forma manual, si entras en el código de la página (del índice y del título de cada sección) puedes ver bien como se hace.

Plugin para poner índices en wordpress

Puedes usar el plugin Table of Contents Plus que puedes descargar aquí.

Una vez instalado el plugin debes ir a Ajustes y entrar en  TOC+ para configurarlo:

table of contents

 

Aquí podrás indicar donde colocar los índices: en posts, páginas, formularios de contacto,… opciones que permitan al usuario ocultarlo, plantillas de apariencia y el modo de transición a una sección determinada. Y estas creando una regla, en la imagen aparecerá en cualquier post que tenga 4 o más Encabezados de forma automática.

Y ya está, no tienes que hacer nada más, aparecerá en cualquier post que cumpla la regla que hemos establecido.

8 Comentarios. Dejar nuevo

Lo acabo de probar y me ha salido bien!! Gracias por la explicación! Una única duda que tengo es si el título del índice, por ejemplo, <<Tabla de contenidos>> lo tengo que poner en formato normal (desde visual) como si escribiese sin más, o hay alguna manera para incluirlo en html. Ah! Yo lo he hecho de la primera opción que has dado la del html. Repito, buen post, gracias! un saludo

Responder
Daniel Iglesias
09/12/2016 09:34

Hola Cristina, para el título como quieras, puedes usar un formato de "Titular 2, titular 3,.." en visual o meter una etiqueta <h2>Título</h2> en HTML

Responder

gracias!! llevaba mucho tiempo pensando en implementar algo así y me ha resultado de mucha ayuda, un saludo

Responder

Un buen recurso, gracias por la dirección del plugin.

Responder

Ha quedado perfecto en varios proyectos he tenido en mano, muchas gracias por tu tiempo y aportación Daniel, tengo un error 404, tienes algún artículo sobre este error? me gustaría solucionarlo, será borrando algán plugin manualmente?

Responder

Holaaa!! Vaya tela, es algo que he ido dejando porque pensaba que requería de mas trabajo y es super facil!! Además es que sale automático en cualquier post que cumpla con lo que has configurado!

Me encanta. Gracias!!

Responder

¡Hola! ¡Buenas tardes! Soy un novato en esto. Me pareció bueno el método con HTML, solo que cuando hago clic en los enlaces y me lleva a los títulos correspondientes, estos me aparecen cortados (solo se ve la mitad de abajo); no sé por qué sucederá eso (quizá copié mal el código o no lo puse en el lugar correcto). Otra duda que me surge es cómo puedo darle ese formato de fondo con color; no lo encontré en el código fuente de la página.

Con respecto a la otra forma, quiero contarle que tengo una cuenta libre de WordPress (no de pago), por lo que no puedo instalar «plugins» desde el panel lateral. Para eso está su vínculo, pero creo que la instalación no es tan simple y, al parecer, se necesita PHP 5. Me parece que requiero de asistencia (por favor).

Hallé un código en Google Sites, pero no me funcionó en WordPress. No sé si se podrá adaptar para WordPress o si existirá un código similar (o equivalente) para este. Saludos cordiales. Aquí le adjunto el código:

Responder
Daniel Iglesias
03/10/2018 08:37

Para la versión de host de wordpress tendrás que utilizar la forma manual de HTML, para que no se corte el texto, el truco es poner la etiqueta un poco más arriba del título del bloque. Saludos

Responder

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *