Cómo crear una tabla de contenido en una publicación de WordPress

Una tabla de contenido es una parte necesaria de las publicaciones de WordPress, especialmente las publicaciones largas con muchos encabezados. La creación de una tabla de contenido ayuda a los lectores a seguir y comprender la idea de forma fácil y rápida. Además, también te ayuda a agregar más palabras clave en las publicaciones, lo cual es muy bueno para el SEO.

Métodos para crear una tabla de contenido

Hay 2 métodos para crear una tabla de contenido en una publicación de WordPress.

El primer método es utilizar un complemento. Eso es simple, rápido y gratuito tanto para los expertos en código como para los novatos en WordPress.

El segundo está usando código. Eso le permite personalizar su tabla de contenido, incluso los detalles más pequeños, pero es bastante complicado para los que no codifican. Escribiremos el código para crear una tabla de contenido en esta publicación. ¡Solo cópialo y pégalo!

Primero veamos el proceso de creación de una tabla de contenido con un complemento:

Método 1: use un complemento para crear una tabla de contenido

Paso 1: crear y configurar contenido para la tabla de contenido

Hay muchos complementos gratuitos para crear una tabla de contenido en WordPress. Elegimos la tabla de contenido de LuckyWP porque nos proporciona un resultado hermoso y altamente personalizable. Sin embargo, este complemento tiene bastantes configuraciones, lo que podría confundirlo al principio. Por lo tanto, siga nuestras instrucciones para ahorrar tiempo.

LuckyWP Table of Contents es un complemento gratuito y está disponible en wordpress.org. Simplemente instale y active el complemento en Dashboard .

Luego, vaya a Configuración > Tabla de contenido , verá la pantalla de configuración.

Aquí, hay 4 pestañas a las que debe prestar atención: General, Apariencia, Inserción automática, Encabezados de procesamiento . Son pestañas que se utilizan para configurar y personalizar la visualización de la tabla de contenido. Misc. es una pestaña que tiene configuraciones complejas y sin importancia, por lo que puede ignorarla.

En este paso, solo trabaja en la pestaña General .

Hay muchas configuraciones en esta sección. Para ahorrar tiempo, debe concentrarse en las siguientes partes importantes:

• Numeración: Numerar los títulos. Debe elegir una de estas opciones: sin numeración, números decimales (anidados), números romanos (anidados) .

Elijo números decimales (anidados) , por lo que mi TOC se ve así:

• Título: Título del índice. Es Contenido por defecto.

Dejemos el resto de configuraciones por defecto, porque eso no afecta mucho a tu TOC.

Haga clic en Guardar cambios para finalizar. Entonces, hemos realizado la configuración general del TOC. Pasemos al siguiente paso.

Paso 2: inserta la tabla de contenido en la publicación

Hay 2 métodos para insertar una tabla de contenido en su publicación: insertando automáticamente y manualmente.

Insertar automáticamente significa que se agrega una tabla de contenido en todas las publicaciones automáticamente. De esta manera, se ahorra mucho tiempo y esfuerzo, pero no funciona si desea insertar una tabla de contenido en solo algunas publicaciones.

Insertar manualmente significa que si desea tener un TOC en una publicación, debe insertarlo usted mismo en esa publicación. Esto puede llevar más tiempo y puede cometer errores.

Introduciremos ambos métodos en detalle. Puedes elegir la opción que más te convenga.

Inserción automática

Vaya a la pestaña Auto Insertar> Habilitar . El complemento elige Publicar como predeterminado. Si no lo desea, puede cambiar a otro tipo de publicación.

En la sección Posición , elija dónde desea insertar la tabla de contenido. ¡No olvide hacer clic en Guardar cambios !

Por lo tanto, todas las publicaciones del tipo de publicación elegido tienen las tablas de contenido.

Inserción manual

Insertar manualmente suena complicado, pero en realidad es muy sencillo. Vaya a la pestaña Procesamiento de encabezados . Allí, elija también el tipo de publicación, luego haga clic en Guardar cambios .

Luego, vaya al editor de publicaciones de una publicación en el tipo de publicación que eligió, haga clic en Habilitar TOC .

Ahora, tu TOC está básicamente hecho. Además, incluso podemos diseñar su color, fuente, tamaño de elementos,… para hacerlo más bonito. Siga el siguiente paso.

Paso 3: personalizar la visualización de la tabla de contenido

También hay 2 métodos para personalizar la visualización de la tabla de contenido: personalícela en todas las publicaciones a la vez y personalícela individualmente en cada publicación.

Personalizar la tabla de contenido en todas las publicaciones

Puede personalizar todas las tablas de contenido en detalle yendo a la pestaña Apariencia . Hay muchas configuraciones, como Tamaño de fuente del título, Tamaño de fuente de los elementos, Color del enlace ,…

No es necesario fijarse en todas las configuraciones, solo concéntrese en lo que desea.

Por ejemplo, no me gusta el azul y el tamaño de fuente del título actual. Quiero cambiar el color a gris oscuro y de menor tamaño para que se vean mejor con la publicación. Por lo tanto, personalizaré el tamaño de fuente del título, el tamaño de fuente de los elementos, el color del enlace y mantendré el resto de configuraciones como la siguiente imagen:

Mi TOC después de la personalización se ve así:

Ahora parece mucho más armonioso.

Sin embargo, tal vez desee tener diferentes tablas de contenido en diferentes publicaciones, simplemente desplácese hacia abajo para leer cómo personalizarlo en cada publicación.

Personaliza la tabla de contenido en cada publicación

Este trabajo también es sencillo y rápido. Primero, vaya al editor de publicaciones, elija Tabla de contenido> Personalizar .

Aparece una ventana emergente Personalizar tabla de contenido . Verá algunas pestañas conocidas como arriba. Son General, Apariencia y Misc. .

Vaya a la pestaña Apariencia y cambie algunas configuraciones también editando en el Panel de control del complemento. Haga clic en Guardar para finalizar.

Ahora, veamos el resultado final de personalizar la tabla de contenido.

Ambos métodos de personalización traen tablas de contenido muy bonitas y detalladas. Así que eres libre de elegir la forma que quieras.

Ahora, veamos cómo usar el código para crear una tabla de contenido.

Método 2: use el código para crear una tabla de contenido.

Paso 1: crear la tabla de contenido para la publicación

Vaya a Apariencia> Tema> Editor> functions.php .

Luego, agregue el siguiente código en el archivo functions.php para insertar tablas de contenido en las publicaciones.

Nota: Este código es para agregar solo 2 niveles de encabezado en la tabla de contenido .

 function create_toc ($ html) {
    $ toc = '';
    if (is_single ()) {
        if (! $ html) return $ html;
        $ dom = nuevo DOMDocument ();
        libxml_use_internal_errors (verdadero);
        $ dom-> loadHTML (mb_convert_encoding ($ html, 'HTML-ENTITIES', 'UTF-8'));
        libxml_clear_errors ();
        $ toc = '<div class = "toc-bound">
            <div class = "toc-ctr">
                Tabla de contenido
            </div>
            <ul class = "toc"> ';
        $ h2_status = 0;
        $ h3_status = 0;
        $ i = 1;
        foreach ($ dom-> getElementsByTagName ('*') como $ elemento) {
            if ($ elemento-> tagName == 'h2') {
                if ($ h3_status) {
                    $ toc. = '</ul>';
                    $ h3_status = 0;
                    }
                 if ($ h2_status) {
                    $ toc. = '</li>';
                    $ h2_status = 0;
                  }
                  $ h2_status = 1;
                  $ toc. = '<li> <a href="'. get_the_permalink().'#toc-'. $i.'">'. $ elemento-> textContent. '</a>';
                  $ elemento-> setAttribute ('id', 'toc-'. $ i);
                  $ i ++;
            } elseif ($ elemento-> tagName == 'h3') {
                if (! $ h3_status) {
                    $ toc. = '<ul class = "toc-sub">';
                    $ h3_status = 1;
                }
                $ toc. = '<li> <a href="'. get_the_permalink().'#toc-'. $i.'">'. $ elemento-> textContent. '</a> </li>';
                $ elemento-> setAttribute ('id', 'toc-'. $ i);
                $ i ++;
            }
        }
        if ($ h3_status) {
            $ toc. = '</ul>';
        }
        if ($ h2_status) {
            $ toc. = '</li>';
        }
        $ toc. = '</ul> </div>';
        $ html = $ dom-> saveHTML ();
    }
    volver $ toc. $ html;
}
add_filter ('el_contenido', 'crear_toc');

Explicación:

No olvide hacer clic en el archivo Actualizar después de insertar el código.

Entonces, aquí está el resultado:

Por supuesto, necesitamos darle un poco de estilo. Usaremos CSS, una de las herramientas favoritas de todos los programadores.

Paso 2: usa CSS para personalizar

Para personalizar con CSS, vaya al archivo style.css en el Editor de temas . Allí, debe insertar el código que escribe usted mismo para personalizar la tabla de contenido a su gusto.

Por ejemplo, quiero personalizar el color y la intensidad de la tabla de contenido, así que insertaré el siguiente código:

 .toc-bound {
    color de fondo: # 619162;
    color: #fff;
}
.toc-ctr {
    borde inferior: 1px sólido #fff;
    relleno: 10px;
    tamaño de fuente: 20px;
    transformación de texto: mayúsculas;
}
ul.toc {
    tipo de estilo de lista: ninguno;
    relleno: 10px;
    padding-left: 25px;
}
.toc li a {
    color: #fff;
}
ul.toc> li {
    tamaño de fuente: 18px;
    peso de fuente: 700;
    relleno: 5px 0;
}
ul.toc-sub {
    tipo de estilo de lista: ninguno;
}
ul.toc-sub li a {
    peso de fuente: 200;
}

No olvide hacer clic en el archivo Actualizar para guardarlo.

El resultado final se ve así:

En conclusión, tanto el uso de un complemento como la codificación nos brindan las mismas tablas de contenido bonitas. Puede elegir cualquier opción siempre que esté satisfecho.

Ultimas palabras

Como puede ver, crear una tabla de contenido en las publicaciones de WordPress no es nada complejo. Siga nuestro tutorial y tendrá hermosas tablas de contenido. Una buena tabla de contenido hace que su publicación sea más clara y profesional. Por lo tanto, sus espectadores pueden tener experiencias más amigables al leer su blog.

Si tiene alguna pregunta, por favor dígala en el cuadro de comentarios a continuación.