Cómo usar un tema Bootstrap en WordPress

Si está familiarizado con el trabajo con código, puede usar un tema de inicio como Underscores, que es solo el código básico sin estilo necesario para un tema de WordPress y puede envolver el código con el html adecuado para bootstrap.

Ejemplo: a continuación se muestra una demostración. Bootstrap funciona con un sistema de cuadrícula de 12 columnas y anidaría sus etiquetas html de esta manera.

Nota: Normalmente, la clase de contenedor de apertura se ubicaría en el archivo header.php y el cierre de esa etiqueta de contenedor se encontraría en el archivo footer.php. Pero puede personalizarlo como quiera.


<? php
/ **
* El archivo de plantilla de índice.
* @package
* /
get_header (); ?>

<? php get_footer ();

Lo anterior es una demostración de cómo se vería su archivo index.php. ¿Puede cambiar la clase col-md-9 a cualquier número siempre que la combine con otra col-md-? clase y ambos necesitan sumar hasta 12 combinados.

  • col-md-6 y col-md-6
  • col-md-3 y col-md-9
  • col-md-8 y col-md-4
  • col-md-5 y col-md-7
  • col-md-12 por sí mismo
  • etc.

También puede reemplazar el md con sm o xs o lg.

Hay muchas formas de combinar WordPress y Bootstrap. Puede personalizar su archivo de descarga de bootstrap para que solo obtenga el código que necesita y eliminar la hinchazón o puede obtener todo el marco de arranque e implementar todos los aspectos de su tema.

Por lo general, crearía post-tipos personalizados si va a trabajar con los controles deslizantes u otras funciones y posiblemente necesite personalizar su bucle.

A algunas personas no les gusta usar Bootstrap con WordPress porque es mucho trabajo, pero creo que pueden funcionar extremadamente bien juntas siempre que comprenda cómo implementarlas correctamente.

Estoy trabajando en una serie de videos para mi canal de YouTube que profundiza sobre cómo trabajar con WordPress y Bootstrap para el desarrollo de temas. Con suerte deberían levantarse pronto. Ya tengo otros videos relacionados con WordPress en ellos que pueden ser útiles. El enlace está abajo.

Si esta respuesta ayudó, consulte más de mis respuestas a preguntas similares y si desea obtener más información sobre quién soy y qué hago, consulte mi sitio web y mi canal de YouTube.

  • Diseño y desarrollo de temas y complementos de WordPress – PixemWeb
  • PixemWeb en YouTube

Espero que esto haya ayudado, buena suerte.

Bootstrap es solo un montón de código HTML, CSS y JS. Como capa de presentación de su tienda web, se puede usar exactamente igual que cualquier otro código HTML. Puede tomar el código de arranque de vainilla e inyectarlo con un código PHP específico de WordPress. De esta forma obtendrá un tema WP válido que está escrito en Bootstrap.

Para facilitar las cosas, hay muchos temas de inicio listos que solo necesitan más estilo y adaptación, lo que le ahorra toneladas de trabajo. Aquí hay unos ejemplos:

  • Sabio
  • comienzo
  • CyberChimps
  • UnderStrap
  • Bootstrap Four
  • _tk

Aquí hay un buen artículo que explica cómo implementarlo.

> Cómo construir un tema responsivo de WordPress con Bootstrap

Sin embargo, hay algunas razones por las que a veces debes evitar usarlo:

> Cuándo usar Bootstrap para su tema de WordPress (y cuándo no)

Bootstrap es un marco CSS simple para su sitio web. Puede usar la compilación de temas usando bootstrap de una manera similar a la que aplica otros temas cargándolos a través del panel de administración o directamente a la carpeta de temas en wp-content

Simplemente registre sus scripts y estilos en su archivo functions.php.

Y agregue acción para llamarlo en el encabezado.

Tendrás bootstrap en funcionamiento.

Además, puede usar CDN en línea, que es mucho más sencillo pero se considera una mala práctica.

¡Por supuesto que puede!

Cargue el CSS básico y luego cargue todos los scripts que le gustaría usar y regístrelos utilizando los métodos correctos. Simplemente no registres el contenido que no quieres.

Personalmente, casi siempre uso al menos el marco CSS Boostrap en todos los temas altamente modificados. Hace que el desarrollo sea MUCHO más fácil y limpio.

Simplemente instálelo como cualquier otro tema. Ahora hay muchos temas que se basan en el estilo Bootstrap.