Cómo usar Bootstrap con WordPress

Bootstrap y WordPress parece una pareja natural. Ambos están diseñados para ocultar una gran cantidad de cosas técnicas bajo el capó debajo de una interfaz o marco fácil de usar (más o menos).

Pero no fueron creados para integrarse entre sí, por lo que usar Bootstrap no es tan fácil como instalar un tema o complemento de WordPress.

Ya conoces WordPress y por qué construir un sitio a su alrededor es una opción confiable. Si está pensando en crear su propio tema, es posible que se haya topado con Bootstrap y haya pensado que sería un excelente marco para usar en un tema.

Bootstrap fue creado por diseñadores en Twitter (aunque no para usar en el sitio de Twitter, lo cual es un error común). Ahora es de código abierto y se ha convertido en el marco de diseño más popular.

Bootstrap y WordPress, manzanas y naranjas

Entonces, todos comenzamos en la misma página, vale la pena señalar que Bootstrap es un marco de diseño y WordPress es un sistema de gestión de contenido ( CMS ). Esas son dos cosas muy diferentes. La forma en que Bootstrap y WordPress funcionan juntos es en el uso de Bootstrap como base para un tema de WordPress.

Puede crear un sitio web desde cero con Bootstrap, pero estamos hablando de usar fragmentos para crear un diseño de WordPress receptivo. Por lo tanto, no estamos agregando Bootstrap a WordPress , en sí, sino jugando con las fortalezas de ambos sistemas.

Necesitará una cuenta de alojamiento de WordPress para crear y usar su propio tema de WordPress. No puede hacer este tipo de desarrollo en una cuenta de WordPress.com. Para el alojamiento de WordPress, prefiero GreenGeeks , como puedes imaginar. GreenGeeks tiene planes optimizados para WordPress que utilizan la tecnología PowerCacher rápida y eficiente .

Cómo usar Bootstrap

Bootstrap se puede usar de dos maneras diferentes. Puede descargar los archivos de origen o hacer referencia a ellos desde una red de entrega de contenido (CDN). Cuando digo «hacer referencia» a los archivos, me refiero a agregar un enlace a ellos en el encabezado de su(s) página(s). Al igual que:

<enlace rel="hoja de estilo" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integridad="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anónimo" >

Cuando hace referencia a los archivos, se cargan desde la CDN y no tiene que descargar los archivos de origen.

Prefiero hacer referencia a los archivos solo porque puedo evitar descargar los archivos de origen y subirlos a mi sitio. Pero no hay ninguna ventaja significativa en ninguno de los métodos, por lo que es estrictamente una cuestión de preferencia.

Cómo construir un tema básico de WordPress con Bootstrap

Crear un tema de WordPress desde cero puede ser un proyecto complicado y complicado. Lo que les mostraré cómo hacer hoy es crear el tema de WordPress más simple, con la cantidad mínima de archivos.

Incluso con un enfoque mínimo como ese, podemos integrar Bootstrap. Una vez que tengamos los conceptos básicos, puede llevar el tema tan lejos como lo permitan sus habilidades o curiosidad.

Primero, hablemos de cómo funciona un tema de WordPress. Puedes pensar en un tema como una superposición. La estructura subyacente y el funcionamiento del CMS de WordPress siguen siendo los mismos independientemente del tema utilizado. El tema es solo el estilo o la apariencia que se coloca sobre el núcleo de WordPress para hacer que la apariencia del sitio web sea única.

Un tema de WordPress requiere solo un directorio y dos archivos, style.css e index.php. Agregaremos un encabezado y un pie de página a esos archivos requeridos, y hablaremos (pero no implementaremos) de otro archivo de tema útil, functions.php.

Los bloques de construcción de un tema de WordPress

Como mencioné, establecer un nuevo tema desde cero puede ser bastante complicado. Entonces, de lo que voy a hablar aquí es de un método abreviado. Cada vez que estoy aprendiendo algo nuevo, me gusta abordarlo usando una base que sé que es sólida, y luego cambiándola hasta que se rompe.

En ese sentido, la forma más fácil de experimentar con un tema de WordPress basado en Bootstrap es copiar algunos archivos necesarios de un tema predeterminado de WordPress y luego editarlos para incorporar Bootstrap.

Entonces, primero, crearemos un directorio para guardar los archivos del tema. El directorio va en /wp-content/themes. Llamaremos a nuestro tema WPBootstrap y le daremos al directorio el mismo nombre (en minúsculas), wpbootstrap.

Puede usar cPanel para crear o trabajar con archivos en el servidor o un programa FTP. Para las ilustraciones aquí, usaré una conexión FTP regular en lugar del administrador de archivos cPanel .

el directorio de temas

Ahora copiaremos lo siguiente de un directorio de temas predeterminado:

      • pie de página.php
      • funciones.php
      • encabezado.php
      • índice.php
      • estilo.css

El tema predeterminado de WordPress desarrollado más recientemente mientras escribo esto es Twenty Twenty. Entonces, si desea utilizar lo último y lo mejor, vaya al directorio de Twenty Twenty (/wp-content/themes/twentytwenty) y copie los archivos en su tema.

Pero cualquiera de los temas predeterminados escritos por WordPress son buenos puntos de partida para el tuyo.

archivos en el directorio del tema

El archivo style.css

style.css es el hogar de los estilos de tema, pero también es donde viven los metadatos sobre el tema. Abra la copia de style.css en un editor de texto. Los metadatos están en la parte superior.

Reemplazará todo lo que haya entre las líneas de comentarios, /* y */ , con su propia información. Me gusta:

/*

Nombre del tema: WPBootstrap


Autor: GreenGeeks


Descripción: Un tema de Bootstrap.


Versión: 1.0


Licencia: GNU General Public License v2 o posterior


Licencia URI: http://www.gnu.org/licenses/gpl-2.0.html


Dominio de texto: wpbootstrap


*/

Esas son las líneas requeridas de encabezado/metadatos de style.css, pero también puede agregar:

      • URI del tema: la URL de una página web pública donde los usuarios pueden encontrar más información sobre el tema.
      • URI del autor: la URL de la persona u organización autora.
      • Etiquetas: Palabras o frases que permiten a los usuarios encontrar el tema utilizando el filtro de etiquetas. Una lista completa de etiquetas se encuentra en el Manual de revisión de temas.
      • Ruta del dominio: se usa para que WordPress sepa dónde encontrar la traducción cuando el tema está deshabilitado. El valor predeterminado es /idiomas.

Guarde el archivo estilo.css. Ahora el tema debería estar visible en el panel de control de WordPress en Apariencia > Temas.

tema en el tablero de WordPress

Si desea agregar una imagen de vista previa para el tema, cree la imagen como un archivo PNG de 1200 x 900 píxeles. Asigne al archivo el nombre «captura de pantalla.png» y cárguelo en el directorio de temas.

imagen de vista previa del tema en el tablero de WordPress

Llevar Bootstrap a un tema de WordPress

Hay un par de formas de introducir Bootstrap en el tema. La primera es agregando las referencias a las bibliotecas Bootstrap CSS y JavaScript a los archivos header.php y footer.php.

Entonces, en header.php después de la etiqueta <head> , agrega:

<enlace rel="hoja de estilo" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integridad="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anónimo" >

Luego, en footer.php, antes de la etiqueta de cierre </body> , agregue el JavaScript:

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integridad="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anónimo">
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integridad="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anónimo">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integridad="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anónimo">

Ese es el método más fácil y probablemente el más familiar para todos nosotros. Pero no es el método recomendado.

El método recomendado es poner en cola los archivos y scripts CSS y JavaScript en el archivo functions.php.

¡ ¿Qué diablos está en cola?!

Se puede ver que estamos empezando a entrar en la maleza. Pero construir un tema de WordPress, al menos la primera vez, es mucho trabajo.

Por eso sugerí trabajar con archivos copiados de otro tema. De esa manera, todo funciona de inmediato, por lo que puede partir de ahí.

Pero poner en cola es solo una forma elegante de decir incluir. Entonces, al poner en cola Bootstrap CSS del CDN y nuestra propia hoja de estilo CSS (style.css) en functions.php, agregue esto:

función wpbootstrap_enqueue_styles() {
wp_enqueue_style( 'bootstrap', '//stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css' );
wp_enqueue_style( 'mi-estilo', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'wpbootstrap_enqueue_styles');

Mira, no tan mal.

El resto de la historia

Su nuevo estilo debería estar funcionando ahora con Bootstrap CSS y JavaScript incluidos. Eso es solo el comienzo, por supuesto. Las cosas se complican más cuanto más avanzas.

Por ejemplo, dependiendo de su versión de WordPress, es posible que no necesite llamar a todo el JavaScript de Bootstrap. Pero gran parte de esa configuración depende de su versión actual de WordPress (y estilos y complementos), por lo que no es una situación única para todos.

Y Bootstrap tiene su propio conjunto de reglas y prácticas, por lo que también es necesario profundizar un poco. Pero probablemente no estarías leyendo esto si no estuvieras dispuesto a investigar al menos un poco.

Así que te deseo suerte con tu nuevo tema. Recuerde que WordPress y Bootstrap tienen comunidades activas y apasionadas, por lo que una respuesta a cualquier pregunta nunca está lejos.