Daniel Soriano·hace 1 meses· 8 respuestas

Cómo Crear un Índice de Contenidos Sticky en ASAP Theme

Cómo Crear un Índice de Contenidos Sticky en ASAP Theme

Buenas a todos, antes de empezar me gustaría aclarar que todo el contenido de este tutorial es mérito de Sergio Canales y Fede. El primero por explicarme y ofrecerme varias ideas para crear un TOC Sticky y el segundo por crear este espacio, invitarme a publicar en él y sobre todo por crear ASAP Theme. Pasado este momento donde declaración de amor eterno os voy a explicar (aportando captura de pantalla) cómo crear una Tabla o Índice de Contenidos - a partir de ahora TOC - que te persiga durante la lectura de un artículo.

¿Para qué Necesitas un TOC Sticky?

Para muchos de vosotros quizás el tener un TOC sticky puede ser un engorro y debe aportar poco para la experiencia de usuario y sí, es cierto, tener un elemento que se queda ahí fijo puede ser algo que moleste. Pero, y ahí viene el matiz, si eres docente (como es mi caso) y deseas crear una entrada sobre el Tema 1 de tu materia es un modo efectivo para que el alumnado pueda revisar constantemente el material. Me explico, gracias a un TOC Sticky puedes:

• Situar al alumno en todo momento
• Permitirle navegar de manera constante durante el temario
• Ofrecerle contenido "call to clic" en todo momento (descargas, resúmenes, enlaces...)

¿Cómo se hace un TOC Sticky en ASAP Theme sin Plugins?

Personalmente tengo una cruzada con los plugins, llevo desde que WordPress se tenía que instalar a mano pensando que cada elemento que añades a una web son vulnerabilidades y añadidos que empeoran el rendimiento (sé que esto no es del todo cierto). Pero esto hace que cada vez que desee añadir un plugin mire muy bien si su utilidad cubre más de una necesidad o mejora mucho el rendimiento de un Theme (ahí viene el motivo por el que siempre adquiero los plugins de Fede, ya que su integración con Asap son fetén).

Bien, lo primero que hay que hacer o al menos lo que yo he hecho para añadir este theme es lo siguiente:

Paso 1 - Ampliar el Ancho Contenedor de las Entradas

Para realizar este paso en ASAP Theme sólo hay que ir al menú superior y seguir la siguiente secuencia:

Personalizar -> Asap Theme - Opciones -> Apariencia y una vez allí cambiar el Ancho contendedor entradas de 980 a 1290

Paso 2 - Añadir un Bloque - Columnas

Una vez dentro de la Entrada debes añadir un bloque Columnas (de 2 columnas) y ajustar la Anchura. Por lo que suelo situarme en la columna de la derecha y cambio el 33,33% o el 50% (dependiendo del tipo de columna que has escogido) y lo cambio por el 35%.

Con ello se crean 2 espacios de trabajo, el del contenido con un aspecto del 65% del ancho lo que estoy dejando un ancho de aproximadamente 839px para el apartado y un segundo espacio donde se verá en todo momento la TOC Sticky.

Paso 3 - Añadir un Texto dentro de la Columna destinada al Contenido

Recuerda que la columna de la izquierda debe ser el "contenedor" donde añadir todo el texto que deseas que se visualice dentro del TOC Sticky. Suele ser un error frecuente que por ir rápido, despiste, cansancio o cualquier otro factor añadas texto fuera de la columna. Mi consejo es que vayas chequeando que todo queda dentro del contenido.

Paso 3 - Definir el TOC mediante ShortCode

Ahora vamos a ir a la segunda columna y le añadiremos un bloque Tipo Shortcode y dentro de la caja que aparece meteremos

Paso 4 - ¡TOC Sticky te Elijo a ti!

Sí, el título del paso 3 es un tanto freaky pero realizar tutoriales es algo monótono y pensé que así llamaría vuestra atención. Bien, para convertir un TOC de ASAP normal es una versión Sticky deberemos ir a Personalizar (menú superior) -> CSS adicional y añadir el siguiente código:

.post-index{
position: sticky !important;
top: 70px !important;
z-index: 9999 !important;}

Con ello conseguiremos que siempre y cuando el texto sea más largo que el TOC éste se fije en la parte superior de la pantalla y que el contenido sigua bajando.

¡Horror! Todas las Entradas tienen el TOC Sticky

Dani, has roto mi ASAP Theme y ahora todas las entradas y páginas que tengan una Tabla de Contenidos los mostrará en estado Sticky. Pues sí, es así porque sólo he pretendido asustaros para que entendáis la siguiente función. ¿Cómo hacer que se muestre el TOC Sticky en una Entrada o Página Específica? - Ríete tú del AI Overview que me voy a sacar -

Antes de explicarte cómo solucionar el problema, deberás saber que cada vez que estás creando una "page" o un "post" en WordPress se le asigna una ID (identidad) y que si te fijas en la barra del navegador aparece cómo un numerito ?post=x (dónde x es un número cualquiera), pues bien si al código anterior añades lo siguiente:

/* TOC Sticky para Entradas (cambiar X por número de Post) */ 

.postid-x .post-index{
position: sticky !important;
top: 70px !important;
z-index: 9999 !important;}

/* TOC Sticky para Páginas (cambiar X por número de Página) */ 

.page-id-x .post-index{
position: sticky !important;
top: 70px !important;
z-index: 9999 !important;}

Tendréis un maravilloso TOC Sticky con el que vuestros alumnos podrán navegar en mitad de la Entrada y si luego les metes anuncios de Adsense en zonas específicas (por ejemplo, donde deben ver un vídeo de Youtube o hacer clic en un resumen) No sólo estás ofreciéndoles un contenido de calidad sino que además se convierten en tus clientes recurrentes ya que son los que necesitan las herramientas que les propones para desarrollar la materia. Por que sí, soy profesor nichero y aprovecho cualquier oportunidad para monetizar.

Espero que les agrade el Tutorial, si tienen alguna duda no tengan ningún reparo en preguntar que para eso estamos.

Antentamente,

Daniel del Olmo

Daniel Soriano