Anteriormente se indicó cómo evitar el problema de compatibilidad de la guía de estilos del gobierno de México a temas de WordPress, debido a que la guía implementa una versión de jQuery que hace que algunos temas de WordPress no se puedan ver correctamente.

En esa ocasión debíamos sacrificar los efectos del tema debido a la incompatibilidad de jQuery, pero en esta ocasión podemos tener ambos utilizando un pequeño truco.

Se puede colocar una página web donde aplique la guía de estilos del gobierno de México incluyendo su versión de jQuery y Bootstrap, y en el contenido de la misma, in iframe que mande a llamar la página con el tema de WordPress con lo que evitaría cualquier conflicto entre las bibliotecas.

Para ello debemos indicar un poco de estilo al iframe para que quede acorde al tamaño de la pantalla.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pagina de ejemplo</title>

<!-- CSS -->
<link href="/favicon.ico" rel="shortcut icon">
<link href="https://framework-gb.cdn.gob.mx/assets/styles/main.css" rel="stylesheet">

<!-- Respond.js soporte de media queries para Internet Explorer 8 -->
<!-- ie8.js EventTarget para cada nodo en Internet Explorer 8 -->
<!--[if lt IE 9]>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Foss.maxcdn.com%2Frespond%2F1.4.2%2Frespond.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fie8%2F0.2.2%2Fie8.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<![endif]-->

</head>
<body>

<!-- Contenido -->
<main class="page">

<div class="container" style="height: 1000px">

<iframe src="wordpress/index.php" style="position: absolute; left: 0px; background: #fff; width:100vw; height: 1000px; border: none;" ></iframe>

</div>

</main>

<!-- JS -->
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fframework-gb.cdn.gob.mx%2Fgobmx.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

</body>
</html>

Con ello disfrutaríamos de cualquier efecto o funcionalidad de jQuery/Bootstrap que tenga el tema de WordPress, así como cumplir con el requerimiento de la guía de estilos.


angelinux

Desarrollador de páginas web desde el año 2000 y con experiencia en programación de sistemas para empresas desde el 2008; cofundador de CONSoluciones; autor del blog de software libre “Angelinux-slack”; docente en maestría en UPAV y fundador de la distribución Linux Falco que está en desarrollo para la Universidad Veracruzana. Además, ponente, organizador de congreso, laborista social, impartidor de cursos de programación y servidores Linux, webmaster, y ex invitado en programa de televisión.

4 Comments

Moises · 7 agosto, 2018 a las 14:13

De gran ayuda!!!

angelinux · 8 septiembre, 2018 a las 13:08

Me alegra que fuese de ayuda. Saludos.

Desarrollador Ocasional · 14 octubre, 2018 a las 12:26

Man!!, me salvaste el trasero!! Mil gracias! =D

    angelinux · 14 octubre, 2018 a las 18:25

    Logro desbloqueado: Salvar un trasero.
    Que bueno que te haya servido, saludos.

Deja un comentario