Implementar la guía de estilo de dependencias de gobierno de México en WordPress

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.