✅Tabla de CONTENIDOS en WordPress (Sin Plugins)

Este código de WordPress proporciona una funcionalidad para que los creadores de contenido puedan mostrar u ocultar una «Tabla de Contenido» en las entradas.

Al editar una entrada, se presenta una casilla de verificación para controlar la visibilidad de la tabla de contenido. Además, se aplican estilos CSS específicos para mejorar la presentación visual de la tabla de contenido en el frontend.

La generación automática de una tabla de contenido con enlaces a los encabezados <h2> facilita la navegación del usuario. En resumen, este código mejora la experiencia de edición y visualización de las tablas de contenido en el sitio de WordPress.

El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS. (Copia a partir de la línea 3.)

<?php

// Agregar el campo personalizado al editor de entradas
function agregar_campo_mostrar_ocultar_tabla_contenido() {
    add_meta_box(
        'mostrar_ocultar_tabla_contenido',
        'Mostrar Tabla de Contenido',
        'mostrar_ocultar_tabla_contenido_meta_box',
        'post',
        'side',
        'default'
    );
}
add_action('add_meta_boxes', 'agregar_campo_mostrar_ocultar_tabla_contenido');

function mostrar_ocultar_tabla_contenido_meta_box($post) {
    // Recuperar el valor actual del campo personalizado
    $mostrar_tabla_contenido = get_post_meta($post->ID, '_mostrar_tabla_contenido', true);

    // Agregar una casilla de verificación
    echo '<label for="mostrar_tabla_contenido">';
    echo '<input type="checkbox" id="mostrar_tabla_contenido" name="mostrar_tabla_contenido" ' . checked($mostrar_tabla_contenido, 'on', false) . '>';
    echo ' Mostrar Tabla de Contenido en el Frontend</label>';
}

// Guardar el valor del campo personalizado al actualizar la entrada
function guardar_mostrar_ocultar_tabla_contenido($post_id) {
    if (isset($_POST['mostrar_tabla_contenido'])) {
        update_post_meta($post_id, '_mostrar_tabla_contenido', 'on');
    } else {
        update_post_meta($post_id, '_mostrar_tabla_contenido', 'off');
    }
}
add_action('save_post', 'guardar_mostrar_ocultar_tabla_contenido');

// Función para agregar estilos CSS a la tabla de contenido
function agregar_estilos_tabla_contenido() {
    ?>
    <style>
        .tabla-contenido {
            border: 1px solid #ccc;
            padding: 10px;
            margin-bottom: 20px;
            background-color: #f4f4f4;
        }

        .tabla-contenido h2 {
            margin-bottom: 5px;
        }

        .tabla-contenido ul {
            list-style-type: none;
            padding: 0;
        }

        .tabla-contenido li {
            margin-bottom: 5px;
        }

        .tabla-contenido a {
            text-decoration: none;
            color: #3366cc;
            transition: color 0.3s;
            font-size: 14px;
            color: black;
        }

        .tabla-contenido a:hover {
            color: #cc4444;
        }

    </style>
    <?php
}

// Función para el contenido del meta box del interruptor
function mostrar_tabla_contenido_meta_box_callback($post) {
    $mostrar_tabla_contenido = get_post_meta($post->ID, '_mostrar_tabla_contenido', true);
    ?>
    <label for="mostrar_tabla_contenido">
        <input type="checkbox" id="mostrar_tabla_contenido" name="mostrar_tabla_contenido" <?php echo $mostrar_tabla_contenido === 'on' ? 'checked' : ''; ?>>
        Mostrar Tabla de Contenido
    </label>
    <?php
}

// Guardar el estado del interruptor cuando se guarda el post
function guardar_estado_tabla_contenido($post_id) {
    if (isset($_POST['mostrar_tabla_contenido'])) {
        update_post_meta($post_id, '_mostrar_tabla_contenido', 'on');
    } else {
        delete_post_meta($post_id, '_mostrar_tabla_contenido');
    }
}

// Mostrar la tabla de contenido justo antes del primer h2
function generar_tabla_contenido($content) {
    global $post;

    // Verificar si se debe mostrar la tabla de contenido
    $mostrar_tabla_contenido = get_post_meta($post->ID, '_mostrar_tabla_contenido', true);

    if ($mostrar_tabla_contenido === 'on') {
        // Obtener todos los encabezados h2 del contenido
        preg_match_all('/<h2.*?>.*?<\/h2>/', $content, $encabezados);

        if (!empty($encabezados[0])) {
            // Inicializar la variable que contendrá la tabla de contenido
            $tabla_contenido = '<div class="tabla-contenido">';
            $tabla_contenido .= '<h4>Tabla de Contenido</h4>';
            $tabla_contenido .= '<ul>';

            $contador = 1; // Inicializar el contador

            foreach ($encabezados[0] as $encabezado) {
                // Obtener el texto del encabezado
                preg_match('/<h2.*?>(.*?)<\/h2>/', $encabezado, $titulo);

                // Limpiar el texto para generar un ID único
                $id = sanitize_title($titulo[1]);

                // Agregar el ID al encabezado
                $content = str_replace($encabezado, '<h2 id="' . $id . '">' . $contador . '. ' . $titulo[1] . '</h2>', $content);

                $tabla_contenido .= '<li><a href="#' . $id . '">' . $contador . '. ' . $titulo[1] . '</a></li>';

                $contador++; // Incrementar el contador
            }

            $tabla_contenido .= '</ul>';
            $tabla_contenido .= '</div>';

            // Encontrar la posición del primer h2
            $posicion_primer_h2 = strpos($content, '<h2');

            // Insertar la tabla de contenido justo antes del primer h2
            $content = substr_replace($content, $tabla_contenido, $posicion_primer_h2, 0);
        }
    }

    return $content;
}

add_filter('the_content', 'generar_tabla_contenido');
add_action('wp_footer', 'agregar_estilos_tabla_contenido');
add_action('save_post', 'guardar_estado_tabla_contenido');
Lenguaje del código: PHP (php)

Comprendiendo el código

1. Función: Agregar Metabox y Campo Personalizado

Descripción: Esta función, llamada agregar_campo_mostrar_ocultar_tabla_contenido, básicamente añade un cuadro especial en el editor de entradas. En ese cuadro, te da la opción de elegir si quieres mostrar o esconder una tabla de contenido en la parte visible de tu sitio web.

Detalles Clave:

• Usa add_meta_box para colocar el cuadro.
• El checkbox dentro del cuadro decide si la tabla de contenido se muestra.
• Se ejecuta cuando WordPress agrega las metaboxes con add_action('add_meta_boxes', ...)

2. Función: Mostrar/Ocultar Metabox y Guardar Estado

Descripción: La función llamada mostrar_ocultar_tabla_contenido_meta_box se encarga de lo que ves en ese cuadro. Muestra si actualmente la tabla de contenido está visible o no. Además, te deja cambiar ese estado.

Detalles Clave:

• Usa get_post_meta para ver si la tabla está activa o no.
• El cuadro tiene una etiqueta y un checkbox.
• Cuando guardas la entrada, guardar_mostrar_ocultar_tabla_contenido decide si activar o desactivar la tabla.

3. Función: Estilos CSS para la Tabla de Contenido

Descripción: La función agregar_estilos_tabla_contenido se enfoca en la apariencia. Agrega estilos de moda para que la tabla de contenido se vea más atractiva.

Detalles Clave:

• Define estilos como bordes, márgenes y colores.
• Todo este paquete de estilo se activa en el pie de la página con wp_footer.

4. Función: Generar Tabla de Contenido Dinámica

Descripción: La función generar_tabla_contenido es la que hace magia en segundo plano. Toma tus títulos h2 y los convierte en una tabla de contenido. Además, la pone justo donde quieres, antes del primer h2 en tu contenido.

Detalles Clave:

• Usa expresiones regulares para buscar tus títulos h2.
• Les da identificadores únicos para que todo sea ordenado.
• Inserta la tabla justo antes de tu primer título h2.

Implementación y Configuración

Descripción: Poner esto en acción es como darle superpoderes a tus entradas de WordPress.

Pasos Clave:

1. Ve al editor y busca el cuadro «Mostrar Tabla de Contenido».
2. Activa o desactiva el checkbox dependiendo de si quieres que aparezca o no.
3. Los estilos CSS le dan un toque moderno a la tabla.
4. La tabla se crea automáticamente basada en tus títulos h2.

Conclusión

Esta solución técnica no solo mejora cómo tus lectores interactúan con tu contenido, sino que también te da herramientas flexibles para hacer que tus entradas en WordPress sean más atractivas. Al echarle un vistazo más de cerca a cada función, puedes hacer que tu contenido sea más amigable y atractivo para tu audiencia.

Nos vemos en el siguiente tutorial.

Un saludo.