En ocasiones cuando instalamos un tema de WordPress y empezamos a personalizarlo nos encontramos la limitante de que las opciones del tema son muy simples, y llega en momento en que queremos mejorar y personalizar el diseño del sitio. En este Post estaremos explicando cómo incluir MDB en WordPress, lo que nos permitirá personalizar aún más nuestro sitio web.
Y aunque es un hecho de que si estas en este post es porque ya sabes que es MDB vamos dar una breve explicación de que es este framework.
MDB (Material Design for Bootstrap) – MDBootstrap es lo que se conoce como un framework para el diseño de aplicaciones y sitios web, el cual es una integración entre el framework de Diseño Material Design y Bootstrap. Este framework al igual que todos los framework de este tipo contiene predefinido configuraciones, estilos y componentes que nos permiten crear menús, formularios, mensaje de alertas, botones entre muchas otras cosas de una manera muy fácil y práctica.
¿Cómo incluir MDB en WordPress?
Para incluir en un tema de wordpress las librerías de un framework o librerías externas se puede hacer modificando directamente el archivo functions.php del tema. Mas sin embargo lo recomendable es hacerlo a través de un Child Theme. Puedes obtener información de cómo crear un Child Theme en wordpress ingresando a este enlace.
Otra cosa que se debe hacer es corroborar que el tema no posea ya integrado las librerías de MDB debido a que esto pudiera traer graves conflictos. Para detectar si el tema que estas usando tiene integrado o no MDB, solo basta con irse a sitio web e ir inspeccionando el código HTML de tu sitio, específicamente lo que se encuentra entre las etiquetas <head></head> y < footer></footer>.
Ahora bien ya teniendo en cuenta las dos acotaciones anteriores procederemos a incluir MDB en WordPress. Para hacer esto existen dos maneras las cuales explicaremos a continuación.
I. Incluir MDB en WordPress a través de Archivos Descargados
Si deseamos tener mayor control sobre las librerías del framework lo ideal sería descargar los archivos de MDB y colocarlos en una carpeta del tema. Para descargar los recursos nos vamos al sitio oficial de MDBootstrap y nos dirigimos a la página de instalación.
Una vez descargado el archivo el cual tendrá un nombre similar a «MDB5-STANDARD-UI-KIT-Free-3.7.1.zip«, nos vamos a la capeta raíz del tema o child theme la cual se encuentra en la ruta wp-content/themes/ y creamos una carpeta donde subiremos los archivos descargados. En ejemplo que veremos más abajo se creo una carpeta de nombre lib y luego dentro de esta otra carpeta con el nombre del framework solo por efectos de estructura.
Cabe destacar que en este ejemplo se subieron todos los archivos del framework más sin embargo esto no es necesario basta con subir los archivos necesarios para el funcionamiento del framework de acuerdo a nuestras necesidades. Para este ejemplo se pudo haber subido solo los archivos mdb.min.css y mdb.min.js que son los archivos fundamentales para hacer uso MDBootstrap en un sitio web.
Nota: Si estas utilizando el administrador de archivos de tu hosting para acceder a los archivos del tema, lo más fácil es subir el archivo comprimido a la carpeta que hayas creado para colocar los archivos y luego descomprimir los archivos en esa carpeta.
Una vez ya realizado el procedimiento anterior solo resta enlazar esos archivos al tema mediante la modificación del archivo functions.php del tema o child theme. A continuación el código requerido para ello.
<?php
//Función para incluir CSS de MDB
function mdb5_css() {
wp_enqueue_style( 'mdb5_css',
get_stylesheet_directory_uri().'/lib/MDB5-STANDARD-3.7.1/css/mdb.min.css',
array(),
'3.7.1'
);
}
add_action( 'wp_enqueue_scripts', 'mdb5_css');
//Función para incluir JS de MDB
function mdb5_js() {
wp_enqueue_script( 'mdb5_js',
get_stylesheet_directory_uri().'/lib/MDB5-STANDARD-3.7.1/js/mdb.min.js',
array(),
'3.7.1',
true);
}
add_action( 'wp_enqueue_scripts', 'mdb5_js');
?>
Descripción del código anterior:
Para incluir los archivos del framework se emplearon dos funciones una para agregar el CSS y otra para el JS.
Para el caso del archivo CSS se utilizo la función wp_enqueue_style la cual es una función para encolar o cargar un archivo con estilos CSS a un tema basado en WordPress. A la cual se le paso como parámetros un identificador, la ruta del archivo, un array() vacío debido a que esta librería a cargar no tiene dependencias y por ultimo la versión del archivo.
Para el caso del el archivo JS se utilizo la función wp_enqueue_script que básicamente sirve para lo mismo que la función wp_enqueue_style, salvo que la función wp_enqueue_script se utiliza para archivos JS. A esta función también se le paso un identificador único, la ruta del archivo, un array() vacío debido a que tampoco este archivo es dependiente de otro, la versión y por último el valor true para indicar que este archivo se cargue en el footer.
Por último para ejecutar las funciones se empleo la función add_action la cual es una función nativa de WordPress para agregar una acción. A la cual le pasamos en este caso dos parámetros el primero fue el nombre de la acción en donde inyectaremos nuestro código y el segundo parámetro el nombre de la función que deseamos ejecutar. Nótese que en ambos casos a la función add_action se les paso como primer parámetro wp_enqueue_scripts debido a que este es el hook que es usado para colocar en cola scripts y estilos.
II. Incluir MDB en WordPress a través de CDN
Hacer la inclusión de los archivos a través del CDN es similar a lo realizado anteriormente con los archivos descargados solo que en este caso no se descargarán los archivos si no que se usaran los enlaces proporcionados por el sitio de MDBootstrap para inclusión por CDN. Lo que hay que tener en cuenta es que por medio de este método se tiene poco control sobre los archivos debido a que al estar integrados remotamente cualquier actualización o modificación que realice el equipo de MDBootstrap sobre los archivos se reflejara inmediatamente en nuestro sitio.
Ahora bien en este caso es más sencillo incluir estos archivos, solo nos dirigimos a la capeta del tema o child theme la cual se encuentra en la ruta wp-content/themes/ y procedemos a abrir el archivo functions.php para editarlo e incluir el código para la integración del framework. La los enlaces de las librerías y forma de incluir dichas librerías la podemos encontrar en la siguiente página en el apartado CDN.
<?php
//Funcion para incluir las librerías CSS necesarias para usar MDB
function mdb5_css() {
//Funcion para incluir Font Awesome requerido por MDB
wp_enqueue_style( 'font_awesome_mdb',
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css',
array(),
'5.15.1'
);
//Funcion para incluir Google Fonts requerido por MDB
wp_enqueue_style( 'google_fonts_mdb',
'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap',
array(),
''
);
//Funcion para incluir el CSS de MDB
wp_enqueue_style( 'css_mdb',
'https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.5.0/mdb.min.css',
array('font_awesome_mdb','google_fonts_mdb'),
'3.5.0'
);
}
add_action( 'wp_enqueue_scripts', 'mdb5_css');
//Funcion para incluir el JS de MDB
function mdb5_js() {
wp_enqueue_script( 'js_mdb',
'https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.5.0/mdb.min.js',
array(),
'3.5.0',
true);
}
add_action( 'wp_enqueue_scripts', 'mdb5_js');
?>Como se puede apreciar el código es similar al anterior, con el detalle de que en este caso se tuvieron que agregar dos librerías css extras debido a que las mismas son requerida por la librería css de mdb. Por lo mismo al cargar o encolar el archivo css de MDB en el parámetro array() se coloco los identificadores de las dos librerías de la cuál está dependía.
Ahora solo queda ir a nuestros sitio web y personalizarlo haciendo uso de los elementos que MDB pone a nuestra disposición en su página. Los cuales son muchos y en su mayoría son muy fácil de implementar.
Otra cosa que vale la pena mencionar es que aunque este procedimiento se hizo para Incluir MDBootstrap en wordpress. También se puede usar como guía para integrar otros framework como Bootstrap, Material Design, Bulma y hasta nuestras Propias Librerías css y js.