¿Cómo crear un índice de contenidos para tus posts sin usar plugins?

Crear índice de contenidos sin plugin en WD

Blog  Recursos WordPress  Por Cristinamk  10 MIN (948 palabras)
Crear índice de contenidos sin plugin

Con este simple código HTML
Crear índice de contenidos sin plugin

<a id=“*introduccion”></a>

Si has llegado hasta aquí es porque aprecias el espacio que te ofrece tu hosting y no quieres malgastarlo utilizando plugins si hay otras opciones que también te ofrecen los mismos resultados.

 Pues bien, en este post te enseño a como crear un índice de contenidos para tus posts, en el cual, los usuarios puedan hacer clic en el apartado del índice que más se adapte a su búsqueda y automáticamente la página se dirija a esa parte del post.

Es muy sencillo de hacer, tan sólo sigue los pasos 🙂

✏️ Creamos nuestro post

Lo primero que debemos hacer es crear nuestro post; (yo suelo crear primero el contenido, y, una vez tengo el post terminado es cuando creo el índice); en la imagen te muestro un post de prueba donde ya he añadido todo el contenido y el índice correspondiente a mi entrada.

Crear índice de contenidos sin plugin

📍Modo edición “Classic Mode”

La siguiente imagen muestra cómo es la vista del post en el modo edición Classic Mode de WordPress.

Crear índice de contenidos sin plugin

📍“Classic mode” ⇢ “Visual” ⇢ “HTML”

Bien, en este paso debemos de desactivar el editor “Classic Mode” , tan sólo haz clic encima del botón azul para pasar al modo de ediciónVisual . Una vez hecho, justo al lado de la pestaña “Visual” nos aparece la pestaña HTML haz clic sobre ella y te quedará una visión de tu post similar a la siguiente.

Crear índice de contenidos sin plugin

🔗¿Cómo insertar un enlace ID en html?

Ahora viene la parte que tiene más lío; una vez que tenemos nuestro editor en HTML y nuestro contenido se ve como tal, debemos copiar este código HTML que os pego a continuación:

Crear índice de contenidos sin plugin

<a id=“introducción”></a>

 Así es cómo se ven los códigos de un enlace a vista HTML, es decir, ese código no es más que un enlace en lenguaje HTML; lo único que tenemos que hacer es cambiar la palabra que sigue al  por la que nosotros elijamos (introduccion), y escribirla sin el .

Una vez copiado (ctrl+c o cmd+c) buscamos en nuestro texto en formato HTML el título, encabezado, o apartado principal que corresponde a cada párrafo; para que se entienda bien, en mi post de prueba yo he creado tres párrafos diferentes, (¿Qué es lorem Ipsun?, ¿Por qué lo usamos? y ¿De dónde viene?)

Bien, una vez que hemos encontrado en nuestro texto HTML el título correspondiente a cada párrafo pegamos el enlace HTML que os di anteriormente, quedaría como aparece en la siguiente imagen:

Crear un índice de contenidos para tus post sin plugins

En el ejemplo he puesto la etiqueta mucho antes de llegar al título “¿Qué es Lorem Ipsum?” para que al hacer clic en el apartado del índice ¿Qué es Lorem Ipsum? me lleve justo a esa parte del post; tú puedes poner la etiqueta justo delante del título, y, si al visualizar ves que no te lleva justamente a esa parte del post, puedes hacer como en mi caso.

¡Recuerda! al poner el código HTML debes quitar el y sustituir la palabra introduccion por la que tú consideres apropiada para tu post; por ejemplo: <a id=“parte1”></a>, <a id=“paso1”></a>, <a id=“parrafo1”></a>… etc.

Yo en el ejemplo he utilizado el código HTML en tres ocasiones, (he colocado tres enlaces en HTML); el primero lo he dejado con la palabra “introduccion” <a id=“introduccion”></a>, el segundo lo he llamado  <a id=“parrafo1”></a> y el tercer enlace  <a id=“parrafo2”></a>

Ya sabes que debes de poner tantos enlaces como elementos en tu índice vayas a añadir, para que cada enlace en HTML corresponda a un elemento de tu índice de contenido.

Te comparto otro ejemplo de como he añadido el código de enlace a mi post en HTML.

Crear un índice de contenidos para tus post sin plugins

Esta vez el enlace añadido corresponde al título “¿De dónde viene?” , y lo he llamado <a id=“parrafo2”></a>, y como en el caso anterior, he colocado el enlace mucho antes del propio título para que concuerde exactamente al dirigir el elemento del índice seleccionado, tú puedes probar a introducirlo justo delante del título y ver como queda al dirigir el post.

De esta forma iríamos añadiendo todos los códigos de enlace que necesitemos, y poniendo un nombre diferente en cada uno de ellos.

🔗¿Cómo insertar enlaces en el modo “Visual” ?

En este paso, una vez que ya tenemos todos nuestros códigos de enlace en nuestro post HTML, hacemos clic de nuevo en la pestaña Visual ; ahora nos centramos en nuestro índice; seleccionamos el primer elemento del mismo y le damos al icono de Insertar Enlace.

Crear un índice de contenidos para tus post sin plugins

En mi ejemplo, al nº  que corresponde a mi primer enlace HTML, al que he llamado: <a id=“introduccion”></a>, le he puesto de nombre al insertar el enlace en el elemento “¿Qué es Lorem Ipsum?” en el campo visual: #introduccion; al nº  (que es el que muestra la imagen) que en el enlace HTML fue llamado: <a id=“parrafo1”></a>, al insertar el enlace en el elemento “¿Por qué lo usamos?” lo he llamado: #parrafo1; y con el parrafo y enlace restante: #parrafo2 (tanto de nombre en el enlace HTML como en el enlace del elemento de mi índice)

Cada elemento que contenga nuestro índice deberá tener un código enlace HTML (insertado en la pestaña HTML), y deberá tener su enlace (#loquesea) insertado en el propio elemento del índice.

Y ¡listo!, ya lo tendríamos; sólo nos quedaría hacer un índice de contenidos a nuestro gusto.

Para posts extensos y de mucho contenido tener un índice así viene perfecto; de esta forma nuestros usuarios pueden encontrar fácilmente lo que estén buscando.

En el vídeo siguiente os muestro como quedaría.

Espero que mi post os sirva de ayuda,

Saludos!

Crear índice de contenidos sin plugin


¡Hola! soy Cristina autora y administradora de Cristinamk.com, si necesitas tu propia web no dudes en escribirme, ¡estaré encantada de ayudarte!✍

He leído y estoy de acuerdo con el aviso legal de esta página.

Posts que te pueden interesar ↓
Sin Comentarios

Publica un Comentario