Share
Haga una búsqueda en Google para 'WordPress Theme with Bootstrap' y obtendrá cientos de resultados. Estas incluyen guías que le indican cómo usar Bootstrap para crear su tema, así como temas disponibles comercialmente y de forma gratuita utilizando el marco de Bootstrap..
Busque 'Bootstrap' en el repositorio de temas de WordPress y obtendrá 199 resultados. Eso es mucha eleccion.
Parece que el desarrollo de temas de WordPress usando Bootstrap está de moda. Pero, ¿es siempre el mejor enfoque para el flujo de trabajo de desarrollo de su tema??
Aquí veré las ventajas y desventajas de usar Bootstrap para la temática de WordPress, y te ayudaré a identificar cuándo usar Bootstrap te ayudará en tu flujo de trabajo y cuándo no..
El sitio web de Bootstrap describe a Bootstrap como:
El framework HTML, CSS y JS más popular para desarrollar primeros proyectos móviles adaptables en la web.
Esto te dice un par de cosas:
Si estás prestando atención, notarás que eso no incluye PHP. Si bien Bootstrap es un marco de aplicación, no es como un marco de tema: no le proporciona ninguno de los archivos de plantilla de tema que necesitará crear si va a aprovechar un tema. En su lugar, lo que le proporciona es un marco de estilos y secuencias de comandos que le facilitará la instalación y ejecución de un sitio receptivo y agregar interacciones y eventos que requieren JavaScript..
Bootstrap fue originalmente diseñado como un marco para ayudar a los desarrolladores de Twitter a trabajar de manera más eficiente y consistente. Su nombre inicial fue Twitter Blueprint, que se cambió a Bootstrap luego de que más desarrolladores se involucraron y el proyecto comenzó a crecer..
Fue lanzado como un marco de código abierto en 2011 y desde entonces se ha utilizado para impulsar una variedad de aplicaciones, incluidos los temas de WordPress..
Cuando me topé con Bootstrap, su principal punto de venta fue su capacidad de respuesta en un momento en que gran parte del desarrollo web (incluido el desarrollo de WordPress) aún tenía que ponerse al día con el diseño web sensible. Originalmente no respondía: esto se agregó en 2012 y el marco se hizo móvil por primera vez en 2013.
Si descarga Bootstrap, verá que consta de un conjunto de hojas de estilo (incluidas las versiones reducidas), archivos JavaScript y glifos, que se incluyen en los archivos de fuentes. Estos no reemplazan sus archivos de tema: en su lugar, los llama en su hoja de estilo y archivo de funciones según sea necesario.
No voy a proporcionar una explicación detallada de cómo usa Bootstrap con su tema de WordPress aquí: eso se trata en detalle en este tutorial. En su lugar, veré cómo Bootstrap puede ayudar u obstaculizar el flujo de trabajo de desarrollo de su tema de WordPress y las situaciones en las que puede o no puede usarlo..
La misma popularidad de Bootstrap como marco para los temas de WordPress indica que definitivamente tiene un lugar. Así que echemos un vistazo a algunos de los beneficios de usar Bootstrap.
Bootstrap le brinda automáticamente un estilo adaptable y móvil para su tema. Si ha estado luchando para familiarizarse con el desarrollo de temas receptivos, le ahorrará el arduo trabajo de aprender cómo hacer que sus propias hojas de estilo respondan y agregar consultas de medios..
Bootstrap usa un diseño basado en cuadrícula de 12 columnas con clases de cuadrícula que puede usar con los elementos en sus archivos de plantilla para hacer que su contenido se ajuste a la cuadrícula.
Los beneficios de este enfoque incluyen:
En mi opinión, el diseño y la tipografía que obtienes con Bootstrap es muy bueno. No ganará ningún premio de diseño, pero lo ayudará a crear un tema que sea moderno, fácil de interactuar y legible. Hay algunas características de estilo que me gustan particularmente:
Accentsconagua
Además de presentar sus propias clases de estilo, Bootstrap también incluye estilo para toda la gama de elementos HTML5 que puede esperar usar en su tema. Diseñar todo esto desde cero puede ser una verdadera molestia, por lo que le ahorra mucho trabajo y le facilita el uso del marcado semántico en su tema..
En lugar de tener que usar complementos o secuencias de comandos de origen de otra parte, Bootstrap le ofrece una amplia gama de secuencias de comandos que le ayudarán a agregar las animaciones e interacciones más utilizadas en su sitio. Éstos incluyen:
… y más. Esto puede acelerar su desarrollo, y también asegura que todos sus scripts jueguen bien entre sí. Si va a utilizar más de uno o dos de estos, Bootstrap puede hacer que el desarrollo de su tema sea mucho más fácil; Sin embargo, si solo va a utilizar uno o quizás dos, podría haber un enfoque más eficiente con menos código agregado..
Sin embargo, no creo que Bootstrap sea la herramienta adecuada para todos los desarrolladores de temas de WordPress. Estas son algunas de las desventajas de usar Bootstrap al desarrollar sus temas..
Ya me he referido al sistema de cuadrícula sensible utilizado en las hojas de estilo de Bootstrap, y a la multitud de clases que puedes usar para aprovechar esto en tu tema. Esto es genial si estás preparado para familiarizarte con esas clases y descubrir cómo usarlas en tu tema. Sin embargo, si no necesita un diseño tan complicado y solo va a utilizar algunos de los estilos, es posible que dedique una cantidad desproporcionadamente grande de tiempo a trabajar en todas las clases y determinar cuáles utilizar..
La hoja de estilo incluye 155 líneas de código solo para ese diseño de cuadrícula en el ancho de pantalla más pequeño: eso es mucho para comprender si desea aprovechar al máximo, y más de lo que la mayoría de los temas necesitarán.
Además de esto, hay clases para las glyphicons, para los botones, y mucho más.
Si su tema usará una proporción significativa de este estilo (o va a usar Bootstrap para admitir múltiples temas), entonces vale la pena tomarse el tiempo para aprender cómo funcionan los estilos de Bootstrap. Pero si solo necesita un par de columnas y un diseño sensible, entonces podría ser una exageración.
Las consultas de medios utilizadas por Bootstrap se basan en una suposición sobre el ancho de la pantalla y del dispositivo que se está quedando obsoleta.
Estas son las consultas de los medios:
/ * Dispositivos extra pequeños (teléfonos, menos de 768px) * / / * Sin consulta de medios, ya que este es el valor predeterminado en Bootstrap * / / * Dispositivos pequeños (tabletas, 768px y superiores) * / @media (min-width: @screen -sm-min) … / * Dispositivos medianos (equipos de escritorio, 992px y superiores) * / @media (ancho mínimo: @ screen-md-min) … / * Dispositivos grandes (equipos de escritorio grandes, 1200px y superiores) * / @media (min-width: @ screen-lg-min) …
Durante el último año, más o menos, el desarrollo responsivo se ha ido alejando de los puntos de interrupción predefinidos para consultas de medios y hacia puntos de interrupción basados en el diseño. Si bien estas consultas de medios se basan y ciertamente funcionarán con el diseño de Bootstrap (así que no debería causar ningún problema en ninguno de los dispositivos o navegadores compatibles, de los cuales hay muchos), no ofrece la flexibilidad que tiene si codificando tu propio.
Si decidiera agregar una consulta de medios intermedia a su hoja de estilo, entonces tendría que tomar las 155 líneas de diseño de diseño para el sistema de cuadrícula y adaptarlas a su nuevo punto de interrupción, no una tarea que envidiaría.!
Sí, supongo que esperabas esta respuesta de un desarrollador web escéptico a un nuevo marco o herramienta..
Sin lugar a dudas, Bootstrap te ofrece mucha funcionalidad y estilo que puedes usar en tu tema, y eso es una gran cosa. Sin embargo, si solo va a utilizar una fracción de lo que se proporciona, significa que está agregando todo ese código adicional para nada.
Los archivos están reducidos, lo que sí ayuda, pero aun así, ¿realmente necesitas todo ese código no utilizado en tu tema??
¡Agregue Bootstrap a su tema, llame a la hoja de estilos de la hoja de estilos de su tema y bam! Tienes un diseño listo para usar que responde bien y se ve bien. La mayoría de nosotros estaríamos tentados a dejarlo así, agregando algunos ajustes de color tal vez pero no mucho más.
Esto significa que su diseño se basará en lo que proporciona Bootstrap, y no en lo que se requiere para su sitio. Trabajo con muchos clientes, y antes de que incluso comencemos a hablar sobre el diseño de su sitio, les hago preguntas sobre los objetivos de su sitio, la audiencia y más. Todo esto informará el diseño del sitio, tanto en términos visuales como en términos de la interfaz de usuario..
El peligro de que muchos temas utilicen Bootstrap es que terminaremos con tantos temas que se ven esencialmente iguales. Los desarrolladores de temas de WordPress han estado haciendo un gran trabajo al deshacerse de las acusaciones de que sus temas "se parecen a WordPress" en los últimos años, así que queremos que todos nuestros temas se vean como Bootstrap?
En última instancia, creo que el factor más importante que podría hacer que dejes de usar Bootstrap es el hecho de que nunca fue diseñado para funcionar con WordPress, y que funciona de una manera muy diferente.
Un marco de tema de WordPress a menudo le dará todo lo que obtiene de Bootstrap, y de una manera que está mucho más alineada con la forma en que trabajan los desarrolladores de WordPress. Estos no tienen que ser caros o tener grandes bases de código: el tema Wonderflux, por ejemplo, es gratuito y de código abierto, e incluye un sistema de cuadrícula sensible (como Bootstrap pero menos hinchado) y una biblioteca de funciones y enlaces que no tiene. t conseguir con Bootstrap.
Un ejemplo de cómo Bootstrap y WordPress no son compatibles es el diseño de los menús de navegación. Tu menú de WordPress no funcionará directamente con Bootstrap habilitado: en su lugar, tendrás que crear un navegador de navegación personalizado. Esto no es difícil de hacer si se siente cómodo con el código, pero agrega otro paso a su desarrollo de tema.
Bootstrap definitivamente tiene sus beneficios. Si necesita un diseño atractivo, limpio y sensible para su sitio y acceso a una variedad de efectos de JavaScript, entonces puede ayudar a acelerar el proceso de desarrollo de su tema..
Sin embargo, si va a aprovechar al máximo Bootstrap, deberá dedicar un tiempo a aprenderlo. Hay mucho que aprender con Bootstrap, y si no vas a utilizar todo, entonces puede que no valga la pena..
Para concluir, recomendaría usar Bootstrap en una variedad de circunstancias:
Y te aconsejo no usarlo en estas circunstancias:
En definitiva la decisión es tuya.!
