Implementar la guía de estilos del gobierno de México a un tema de WordPress

Implementar la guía de estilos del gobierno de México a un tema de WordPress

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 g

Convertir numero a columna tipo hoja de calculo en PHP
Corregir el error A java Runtime Environment (JRE) or Java Development Kit (JDK)
Servidor apache para desarrollar PHP
Corregir hora incorrecta en PHP
Comillas dentro de comillas dentro de comillas en javascript

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.

COMMENTS

WORDPRESS: 0