Para separar el estilo del iframe y hacer que el iframe sea reutilizable con diferentes URL, puedes seguir estos pasos:
1. Agregar el Estilo con Code Snippets
Primero, agrega un snippet en el plugin Code Snippets para incluir el estilo personalizado:
function custom_iframe_styles() {
echo '<style>
/* Personalización del scrollbar */
.custom-iframe-container::-webkit-scrollbar {
width: 12px; /* Ancho del scroll */
}
.custom-iframe-container::-webkit-scrollbar-thumb {
background-color: #F7B90F; /* Color del scroll */
border-radius: 10px; /* Bordes redondeados */
}
.custom-iframe-container::-webkit-scrollbar-track {
background-color: #ffffff; /* Color del fondo del scroll */
}
</style>';
}
add_action('wp_head', 'custom_iframe_styles');
2. Crear el Shortcode del Iframe
Luego, agrega otro snippet para definir un shortcode que permita insertar el iframe con diferentes URL. Puedes hacer algo como esto:
function custom_iframe_shortcode($atts) {
// Atributos predeterminados
$atts = shortcode_atts(
array(
'url' => '',
),
$atts,
'custom_iframe'
);
// Generar el HTML del iframe
return '<div class="custom-iframe-container" style="position: relative; width: 100%; height: 80vh; overflow: auto;">
<iframe src="' . esc_url($atts['url']) . '" style="width: 100%; height: 100%; border: none;"></iframe>
</div>';
}
add_shortcode('custom_iframe', 'custom_iframe_shortcode');
3. Uso del Shortcode en WordPress/Elementor
Ahora puedes usar el shortcode en cualquier página, entrada o widget de texto en WordPress o Elementor. Por ejemplo:
[custom_iframe url="TU-URL-de-documento"]
Este shortcode insertará un iframe con la URL que proporcionas, aplicando los estilos definidos en el snippet.
De esta forma, puedes reutilizar el iframe con diferentes URLs y mantener los estilos separados para una fácil administración.