Implementar la guía de estilos del gobierno de México a un tema de WordPress.
En este nuevo tutorial de Con Soluciones te enseñaremos a como podemos implementar los estilos del gobierno de México a un tema de WordPress de manera fácil, rápida y sencilla.
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="<script>" title="<script>" />
<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="<script>" title="<script>" />
<![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="<script>" title="<script>" />
</body>
</html>Con esto 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.
Deja un comentario
Lo siento, debes estar conectado para publicar un comentario.