WP Responsive Tables Wrapper convierte todas tus Tablas en perfectas en móviles

Publicado el 22/06/2026
WP Responsive Tables Wrapper convierte todas tus Tablas en perfectas en móviles

Uno de los dolores de cabeza más comunes en el diseño web es la visualización de tablas de datos en pantallas móviles. Por su propia naturaleza estructural, las tablas requieren espacio horizontal, lo que suele romper la maquetación (layout) en smartphones o forzar zooms incómodos que arruinan la experiencia del usuario.

Para solucionar esto de forma definitiva y sin sobrecargar el sitio con librerías pesadas o frameworks innecesarios, nace Responsive Tables Wrapper.

¿Qué es Responsive Tables Wrapper?

Es un plugin utilitario ultraligero para WordPress. El plugin detecta automáticamente cualquier tabla insertada en el contenido de tus entradas o páginas y la envuelve dinámicamente en un contenedor adaptativo.

A diferencia de otras soluciones que inyectan scripts complejos, este plugin actúa directamente sobre el renderizado del contenido (the_content), garantizando un impacto nulo en el rendimiento de carga (WPO).

Características Principales

  • Automatización Total: No necesitas añadir clases CSS manualmente ni modificar el HTML de tus tablas existentes. El plugin se encarga de todo de forma transparente.

  • Indicador de Scroll Personalizable: Las tablas con scroll horizontal a veces pasan desapercibidas en móviles. El plugin introduce un aviso superior para advertir al usuario de que puede deslizar para ver más datos.

  • Panel de Configuración Integrado: Desde el propio backend de WordPress puedes modificar el texto de advertencia para adaptarlo al idioma o tono de tu web.

  • Arquitectura Limpia: Desarrollado bajo estándares estrictos de WordPress, utilizando la API de opciones nativa para asegurar la compatibilidad y la seguridad del sitio.

Con Responsive Tables Wrapper, tus datos siguen siendo legibles, estructurados y accesibles, sin importar el tamaño de la pantalla desde la que te visiten.

Manual de Usuario y Configuración

Este manual describe la estructura de archivos, el proceso de instalación y el flujo de configuración de Responsive Tables Wrapper.

1. Requisitos y Estructura del Plugin

Para que el plugin funcione correctamente, debe respetar la siguiente estructura de directorios dentro de wp-content/plugins/responsive-tables-wrapper/:

responsive-tables-wrapper/
– responsive-tables-wrapper.php 
– css/
+ – rt-styles.css

responsive-tables-wrapper.php

<?php

/*

Plugin Name: Responsive Tables Wrapper
Description: Convierte las tablas en responsivas con scroll horizontal y muestra un mensaje configurable para ayudar al usuario.
Version: 1.0
Author: Roberto Aleman
Web: ventics.com
Text Domain: responsive-tables-wrapper

*/

 

// Evitar acceso directo

if ( ! defined( 'ABSPATH' ) ) exit;

 

// Filtro para envolver tablas

function rt_wrap_tables_with_hint($content) {

if (strpos($content, '<table') === false) {

return $content;

}

 

// Obtener mensaje desde opciones

$options = get_option('rt_options');

$message = !empty($options['rt_message'])

? '<p class="" style="font-size:14px;color: var(--pico-contrast);">' . esc_html($options['rt_message']) . '</p>'

: '<p class="" style="font-size:14px; color: var(--pico-contrast);">? Scroll horizontal disponible en esta Tabla ?.</p>';

 

// Patrón regex para todas las tablas

$pattern = '/<table(.*?)<\/table>/s';

 

// Reemplazo con div responsivo

$replacement = '<div class="">' . $message . '<table$1</table></div>';

 

$content = preg_replace($pattern, $replacement, $content);

 

return $content;

}

add_filter('the_content', 'rt_wrap_tables_with_hint');

 

// Encolar CSS

function rt_enqueue_styles() {

wp_enqueue_style( 'rt-styles', plugin_dir_url(__FILE__) . 'css/rt-styles.css' );

}

add_action('wp_enqueue_scripts', 'rt_enqueue_styles');

 

// Registrar opciones

function rt_register_settings() {

register_setting('rt_options_group', 'rt_options');

add_settings_section('rt_main_section', 'Opciones del plugin', null, 'rt-options');

add_settings_field('rt_message', 'Mensaje superior', 'rt_message_callback', 'rt-options', 'rt_main_section');

}

add_action('admin_init', 'rt_register_settings');

 

function rt_message_callback() {

$options = get_option('rt_options');

echo '<input type="text" name="rt_options[rt_message]" value="' . esc_attr($options['rt_message'] ?? '') . '" style="width:100%">';

}

 

// Página de opciones

function rt_add_options_page() {

add_options_page('Responsive Tables', 'Responsive Tables', 'manage_options', 'rt-options', 'rt_options_page');

}

add_action('admin_menu', 'rt_add_options_page');

 

function rt_options_page() {

?>

<div class="">

<h1>Responsive Tables Wrapper</h1>

<form method="post" action="options.php">

<?php

settings_fields('rt_options_group');

do_settings_sections('rt-options');

submit_button();

?>

</form>

</div>

<?php

}

 

rt-styles.css

.table-responsive {
overflow-x: auto;
margin-bottom: 1em;
}

/* Mensaje por defecto oculto */
.scroll-hint {
display: none;
background: #f9f9f9;
padding: 6px;
text-align: center;
font-weight: bold;
margin-bottom: 8px;
border: 1px solid #ddd;
font-size: 14px;
}

/* Solo mostrar en pantallas menores a 600px */
@media (max-width: 600px) {
.scroll-hint {
display: block;
}
}

 

2. Instalación y Activación

  1. Comprime la carpeta responsive-tables-wrapper en un archivo .zip.

  2. Ve al panel de administración de WordPress > Plugins > Añadir nuevo.

  3. Haz clic en Subir plugin, selecciona el archivo .zip e instálalo.

  4. Haz clic en Activar.

3. Configuración del Mensaje de Aviso

Por defecto, el plugin muestra el texto: ? Scroll horizontal disponible en esta Tabla ?. si no se ha definido ninguna opción personalizada. Para cambiarlo:

  1. En el menú lateral de la administración de WordPress, dirígete a Ajustes > Responsive Tables.

  2. En el campo Mensaje superior, escribe la advertencia que deseas que vean tus usuarios (por ejemplo: «Desliza hacia los lados para ver la tabla completa»).

  3. Haz clic en Guardar cambios.

 

4. Funcionamiento Técnico Interno

El comportamiento del código se divide en tres bloques controlados por hooks de WordPress:

  • Filtrado de Contenido (the_content): Mediante una expresión regular (preg_replace), el plugin busca la etiqueta <table...> y la reemplaza inyectando el componente de aviso y el contenedor divisional con la clase .table-responsive. Si la entrada no contiene tablas, la función retorna inmediatamente para optimizar la ejecución.

  • Seguridad: Incluye la directiva de control defined('ABSPATH') || exit; para neutralizar intentos de ejecución remota de código fuera del entorno de WordPress.

  • Sanitización de Datos: Los datos de salida se procesan rigurosamente con esc_html() en el frontend y esc_attr() en el formulario del área de administración, previniendo vulnerabilidades de Cross-Site Scripting (XSS).