La guía de estilos que el gobierno de México publicó, tiene como objetivo estandarizar las páginas web de las dependencias del gobierno, incluidas las escuelas oficiales.

Esta implementación inyecta en las páginas web un encabezado y un pié de página con entradas que el gobierno desea que estés disponibles en todas las páginas oficiales.

Esto se logra incluyendo un archivo de hoja de cascada (CSS) y uno de javascript (JS), los cuales a su vez, incluyen entre otras cosas las bibliotecas de jQuery y Bootstrap.

Cuando el desarrollador del sitio realiza la página usando WordPress, tiene problemas para incluir dichas bibliotecas funcionalmente ya que crean conflicto con la versión de jQuery que contiene el tema de WordPress.

Por lo que se verá como hacer la inclusión y que las bibliotecas del gobierno funcionen correctamente.

Primero, visitamos la documentación oficial del gobierno de México.

https://www.gob.mx/guias/grafica

En dicho sitio podemos ver las ligas de las bibliotecas en producción.

Ambiente de producción con certificado SSL

  • Hoja de estilos: https://framework-gb.cdn.gob.mx/assets/styles/main.css
  • Archivo javascript: https://framework-gb.cdn.gob.mx/gobmx.js

Por lo que debemos incluirlas en WordPress de la siguiente manera.

En el administrador de WordPress, nos dirigimos a la sección de plugins ->  añadir nuevo.

Buscamos el plugin “Insert headers and footers”

Una vez instalado y activado nos dirigimos a “Ajustes -> insert headers and footers”.

Y ahí podemos agregar el css y el js que nos pide el gobierno.

Al hacer esto, ya tendremos las bibliotecas agregadas pero con el problema de que la versión de jQuery que incluye el gobierno, causa conflicto con la versión de jQuery que trae consigo WordPress.

Para ello, debemos editar el archivo functions.php que viene dentro de la carpeta del tema que estemos utilizando y al final del archivo agregar el siguiente código.


if (!is_admin()) add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11);
function my_jquery_enqueue() {
wp_deregister_script('jquery');
}

Con esto, deshabilitamos la biblioteca jQuery que viene integrada con WordPress para que la versión de la biblioteca del gobierno sea completamente funcional.

La primera línea es muy importante (!Iis_admin()) ya que si no la colocamos, corremos el riesgo de deshabilitar jQuery en el administrador.

Cabe mencionar que al realizar estos pasos, es posible que funciones avanzadas de efectos que tengamos con jQuery en el tema podrían no funcionar. Esto es una limitante para temas muy llamativos que por otro lado para dependencias de gobierno se busca algo más sencillo.

Guardamos el archivo y cargamos la página.

Y podemos comprobar que el encabezado y pie de página se muestran correctamente.


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 Comentarios

Moises · 3 julio, 2019 a las 15:28

No funcionó in mi theme Polo. Se queda en blanco.

Enrique Alejandro Cuéllar Cortés · 19 febrero, 2021 a las 18:08

Hola, qué tal, muchas gracias por la información, me sirvió mucho y efectivamente como ya lo mencionas solo funciona para templates simples, veo que tu publicación es del 2017, actualmente 2020 existe alguna otra alternativa? ¿Que funcione con temas más complejos?

Implementar la guía de estilos del gobierno de México a un tema de Wordpress | Angelinux · 10 diciembre, 2018 a las 11:02

[…] 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. […]

Implementar guía de estilos del gobierno a WordPress. · 31 mayo, 2021 a las 06:59

[…] 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. […]

Deja un comentario