Uso de Bootstrap para desarrolladores de temas WordPress responsive

El desarrollo de plantillas con diseño receptivo (Responsive Design) es uno de los aspectos fundamentales en los que todo diseñador o desarrollador de plantillas de WordPress debe enfocarse, considerando la existencia de múltiples dispositivos con diferentes tamaños de pantalla a través de los cuales se navega por estos sitios web. Las visitas a sitios provenientes de dispositivos móviles van en aumento cada día, ya que la mayoría de las personas prefieren usar sus teléfonos para buscar cualquier cosa y el uso de computadoras de escritorio para navegar por internet ha disminuido. Por lo tanto, la adaptación del sitio a tamaños de pantalla pequeños y la facilidad de visualización, navegación y exploración en estos dispositivos pequeños se ha convertido en una necesidad imperativa. En el artículo de hoy destacaremos la importancia de usar Bootstrap en WordPress para desarrollar plantillas receptivas (Responsive themes) que se adapten a todos los tamaños de pantalla, ajustando automáticamente los elementos del sitio web según el tamaño de la pantalla y contribuyendo a mejorar la legibilidad y la experiencia general del usuario del sitio.

Contenidos del artículo ¿Qué es Bootstrap? Aprender Bootstrap 1-¿Aprender clases de Bootstrap? 2-Comprender el sistema de cuadrícula en Bootstrap ¿Cómo aprovechar Bootstrap en WordPress?

Pasos prácticos para crear una plantilla de Bootstrap en WordPress Paso 1-Crear la carpeta de plantilla y sus archivos básicos Paso 2-Agregar Bootstrap a una plantilla de WordPress Método 1-Acceder a los archivos de origen de Bootstrap desde una red de distribución de contenidos (CDN). Método 2: Descargar los archivos de origen de Bootstrap. Paso 3-Programar y diseñar los archivos de la plantilla 1-Programar el archivo de estilos style.css 2-Programar el archivo de funciones functions.php 3-Programar el archivo de encabezado de la plantilla 4-Programar el archivo de plantilla principal index.php Método auxiliar para acelerar el proceso de crear una plantilla Bootstrap en WordPress Conclusión ¿Qué es Bootstrap?

Bootstrap es un marco de trabajo de código abierto creado por el equipo de diseñadores de Twitter, posteriormente puesto a disposición de la comunidad de código abierto, y es compatible con todos los navegadores modernos (Chrome, Safari, Internet Explorer, etc.). Bootstrap se utiliza principalmente para desarrollar interfaces de usuario (front-end) de sitios web receptivos para dispositivos móviles, obligando a los diseñadores a crear sitios diseñados para tamaños de pantalla pequeños en primer lugar (Mobile First CSS framework) y luego expandir los diseños para pantallas más grandes. También consta de un conjunto de herramientas de programación listas para usar que facilitan a los desarrolladores el proceso de diseño de sitios web complejos. Bootstrap se ha convertido en uno de los marcos de trabajo de interfaces de usuario (Front End frameworks) más populares debido a su estructura ligera, ya que consiste en una combinación de código HTML, CSS y JavaScript, permitiendo diseñar y crear sitios web profesionales y receptivos con el mínimo código y el menor número de consultas de medios (Media Queries), que normalmente se utilizan para crear diseños personalizados para diferentes tipos de dispositivos. Incluso puedes prescindir de escribir estas consultas por ti mismo si no estás acostumbrado a trabajar con ellas.

La versión más reciente de Bootstrap es Bootstrap 5, lanzada en mayo de 2021. Difiere de las versiones anteriores en que ya no utiliza jQuery, facilitando el uso de Bootstrap en proyectos que no requieren o utilizan jQuery. Sin embargo, aún puedes usar jQuery con Bootstrap si lo necesitas en tu sitio web. Aprender Bootstrap Aunque aprender Bootstrap no es tan simple como aprender WordPress, disfruta como WordPress de una comunidad de soporte sólida en la que puedes recurrir en cualquier momento.

Para aprender Bootstrap necesitas básicamente aprender las clases listas de Bootstrap y comprender el sistema de cuadrícula en el que opera este marco. 1-¿Aprender clases de Bootstrap? Bootstrap proporciona muchas clases o utilidades listas para usar (Utility Classes) que puedes usar para crear diseños para las páginas de tu sitio y dar formato a los elementos dentro de estas páginas de manera fácil y flexible.

La versión Bootstrap 5 incluye una amplia gama de clases listas para usar que ya estaban presentes en Bootstrap 4 e integra algunas nuevas clases. Estas clases se utilizan para aplicar rápidamente algunos estilos y patrones a elementos HTML sin necesidad de escribir ninguna regla CSS personalizada, y se dividen en diferentes grupos. Clases para botones (Buttons) Clases para dar formato a texto (Typography) Clases para formularios (Forms) Clases para carruseles de imágenes (Carousel) Clases para tablas (Tables) Clases para barras de navegación (Navbar) y muchas más...

Por ejemplo, Bootstrap 5 proporciona nueve clases para dar formato a botones como se muestra en la siguiente imagen Estilos de botones personalizados de Bootstrap, y todo lo que necesitas hacer es agregar la clase deseada dentro del código HTML del botón para que se le aplique el estilo correspondiente y se agregue la interacción de JavaScript predeterminada correspondiente directamente. Primary Secondary Success Danger Warning Info Light Dark Link Puedes revisar todas estas clases y conocer cómo funcionan desde aquí. 2-Comprender el sistema de cuadrícula en Bootstrap Es esencial comprender cómo funciona el sistema de cuadrícula de Bootstrap para que puedas diseñar tu página y aprovechar al máximo todas las características de Bootstrap al preparar tu diseño.

Bootstrap proporciona un sistema de cuadrícula flexbox flexible y receptivo que se extiende hasta 12 columnas receptivas basadas en porcentajes que reordenan automáticamente los elementos que contiene cuando cambia el tamaño de la pantalla. Puedes pensar en Bootstrap como un lienzo que transforma una página web en una cuadrícula horizontal que consta de un contenedor principal que representa un marco que reúne todos los demás elementos, y cada contenedor contiene filas (elementos div con la clase row) y columnas (elementos div con la clase col), colocando los elementos dentro del área visible de la página web (viewport) según aumenta o disminuye el tamaño de la pantalla. Hay tres tipos de clases de contenedor en Bootstrap que puedes usar para elementos div (o section) en tu página: container container-fluid responsive container Este sistema de cuadrícula soporta seis puntos de ruptura (Breakpoints) receptivos.

Estos puntos de ruptura se basan en media queries de ancho mínimo (min-width), lo que significa que afectan este punto de ruptura y todos los puntos superiores a él, como explicaremos en breve. Estos puntos son: Muy pequeño XS El predeterminado, que significa que el tamaño del dispositivo es menor a 576 píxeles (prefijo de clase correspondiente .col-) Pequeño sm, que significa que el tamaño del dispositivo es mayor o igual a 576 píxeles (prefijo de clase correspondiente .col-sm-) Medio md, que significa que el tamaño del dispositivo es mayor o igual a 768 píxeles (prefijo de clase correspondiente .col-md-) Grande lg, que significa que el tamaño del dispositivo es mayor o igual a 992 píxeles (prefijo de clase correspondiente .col-lg-) Muy grande xl, que significa que el tamaño del dispositivo es mayor o igual a 1200 píxeles (prefijo de clase correspondiente .col-xl-) xxl, que significa que el tamaño del dispositivo es mayor o igual a 1400 píxeles (prefijo de clase correspondiente .col-xxl-) Cada una de estas clases va seguida de un número del 1 al 12 asociado a valores porcentuales específicos, y puedes usar una combinación de estas clases (es decir, declarar múltiples clases al mismo tiempo en tu diseño) de modo que la clase mencionada primero es la que se aplica primero. Por ejemplo, la clase .col-xs-1 tendrá un ancho del 8.333333333333332% del ancho de la pantalla del teléfono. La clase .col-xs-2 tendrá un ancho del 16.666666666666664% del ancho de la pantalla del teléfono. La clase .col-xs-3 tendrá un ancho del 25% del ancho de la pantalla del teléfono. Y así sucesivamente hasta llegar a la clase .col-xs-12 que tendrá un ancho del 100% del ancho de la pantalla del teléfono. Lo mismo se aplica a las otras clases. Por ejemplo, la clase .col-sm-1 tendrá un ancho del 8.333333333333332% del ancho de la pantalla de la tableta. La clase .col-sm-2 tendrá un ancho del 16.666666666666664% del ancho de la pantalla de la tableta. La clase .col-sm-3 tendrá un ancho del 25% del ancho de la pantalla de la tableta. La clase .col-sm-12 tendrá un ancho del 100% del ancho de la pantalla de la tableta. Nota: Bootstrap es un sistema receptivo móvil-primero (min-width), por lo que si solo declares la clase .col-xs- en tu diseño, esta clase estará disponible para todos los dispositivos y aplicarla a un elemento no solo afectará su diseño en teléfonos pequeños, sino también en dispositivos más grandes como tabletas y computadoras de escritorio pequeñas y grandes si no hay otras clases. De igual forma, usar la clase .col-sm- en un elemento no solo afectará su diseño en tabletas, sino también en dispositivos más grandes como computadoras de escritorio pequeñas y grandes si no hay clases .col-md- y .col-lg-.

Por lo tanto, al diseñar el diseño de las páginas de tu sitio puedes personalizar el tamaño de tus columnas en dispositivos muy pequeños, pequeños, medianos, grandes o muy grandes según lo consideres apropiado. Se recomienda que declares primero la clase correspondiente a los dispositivos de los usuarios que más visitan el sitio y luego declares las clases que hacen que tu diseño sea receptivo con los demás dispositivos. Para diseñar cualquier página según un diseño de cuadrícula, primero debes crear un elemento div que represente un contenedor (container) para colocar todo el contenido de tu sitio web en él.

Bootstrap utiliza contenedores como base de su sistema de cuadrícula. Puedes usar tantos contenedores como desees, pero los contenedores no deben estar anidados. Luego puedes colocar columnas dentro de filas, y filas dentro de contenedores, y cada contenedor puede contener una o más filas, y debe incluir al menos una fila con columnas en cada contenedor.

Después de agregar el contenedor, primero agrega filas a cada contenedor, ya que una fila en Bootstrap es simplemente un conjunto de columnas de Bootstrap horizontales que se pueden dividir en 12 partes. Finalmente, agrega las columnas y especifica las divisiones de esta columna. La fila es lo que contendrá tus elementos col y el número de columnas dentro de la fila debe sumar 12.

Comprender las clases de Bootstrap y su sistema de cuadrícula puede tomar algo de tiempo para aprender y entender, pero una vez que lo comprendas bien, puedes crear diseños excelentes en poco tiempo. Te recomiendo que consultes la documentación oficial de Bootstrap para aprender cómo agregar características a tu sitio web y obtener fragmentos de código apropiados para lo que necesitas.

¿Cómo aprovechar Bootstrap en WordPress?

Bootstrap te permite crear sitios web completos de forma independiente o dentro de otro sistema. Sin embargo, también puedes aprovechar Bootstrap dentro del sistema WordPress para desarrollar plantillas o complementos de WordPress personalizados, como complementos para crear galerías de fotos u otros complementos que agreguen una apariencia estética y profesional a tu sitio y se vea excelente en dispositivos móviles. Sin embargo, en este artículo nos enfocaremos en el aspecto del desarrollo de una plantilla de WordPress a través del marco de Bootstrap. Si eres desarrollador de plantillas de WordPress, puedes agregar soporte de Bootstrap a tu plantilla de WordPress y aprovechar sus características poderosas.

Hay muchas plantillas de WordPress basadas en Bootstrap en el repositorio de plantillas. Busca Bootstrap en la página oficial de plantillas de WordPress y obtendrás aproximadamente mil resultados de plantillas gratuitas destacadas y receptivas que se basan en el marco de trabajo Bootstrap en sus diversas versiones. Podrías hacer la siguiente pregunta: ¿Cuáles son los beneficios de desarrollar mi plantilla usando Bootstrap? Aquí está la respuesta: Desarrollar una plantilla de WordPress a través de Bootstrap hace que los elementos del sitio sean receptivos fácilmente a todos los tamaños de pantalla. Desarrollar una plantilla de WordPress utilizando el marco de Bootstrap te permite beneficiarte de elementos de diseño listos para usar que te proporciona, como botones, tablas, y menús precargados basados en código CSS y JavaScript, en el sistema WordPress para desarrollar plantillas de WordPress atractivas visualmente y receptivas para tu sitio.

Debido a que Bootstrap es de código abierto, cuenta con una gran comunidad de soporte y muchos recursos de aprendizaje, además de que se actualiza constantemente y es administrado correctamente por un equipo sólido, lo que significa que rara vez falla o sufre problemas graves, y puedes usarlo con seguridad para obtener diseños atractivos visualmente. Bootstrap también se caracteriza por estar bien integrado con HTML5, además de incluir clases especiales para diseño, también incluye diseños para un conjunto completo de elementos HTML5 que puedes usar en tu plantilla. Diseñar todas estas cosas desde cero es tedioso y toma tiempo, por lo que te ahorra mucho trabajo. Entonces, Bootstrap es un marco de diseño y WordPress es un sistema de gestión de contenidos (CMS), y aunque son dos cosas completamente diferentes, cada uno proporciona muchos elementos técnicos y los oculta tras una interfaz fácil de usar, y lo único que debe hacer el desarrollador del sitio es usarlos de manera simple sin preocuparse por todos los detalles complicados a través de los cuales se realizaron estos elementos.

Para poder trabajar con Bootstrap y desarrollar una plantilla de WordPress necesitas tener las siguientes habilidades: Conceptos básicos de HTML/CSS Conceptos básicos para trabajar con WordPress Conceptos básicos del lenguaje de programación PHP La estructura básica de los archivos de plantillas en WordPress Conceptos básicos de diseño de plantillas en WordPress Conocimiento básico de programación en términos generales Lee también: Conoce el sistema de programación de WordPress y sus componentes básicos Pasos prácticos para crear una plantilla Bootstrap en WordPress Para poder crear una plantilla Bootstrap personalizada para WordPress, debes tener el conocimiento necesario sobre diseño y creación de plantillas en WordPress de antemano. Aquí no explicaremos cómo crear una plantilla de WordPress con todas las funciones, nos enfocaremos más en explicar cómo usar Bootstrap en el diseño y desarrollo de esta plantilla. Paso 1-Crear la carpeta de plantilla y sus archivos básicos Una plantilla de WordPress, como sabemos, tiene una estructura de archivos predeterminada que puedes revisar en el siguiente artículo. Explicaremos en los párrafos siguientes paso a paso cómo crear una plantilla básica simple para un sitio WordPress basada en el marco de Bootstrap de la siguiente manera.

Primero, crearemos una carpeta llamada wpartheme para guardar los archivos de nuestra plantilla dentro del directorio /wp-content/themes del sitio (puedes usar el gestor de archivos en el panel de control o un programa FTP para trabajar con los archivos en el servidor). Esta carpeta será la carpeta de nuestra plantilla Bootstrap. Crearemos dentro de ella un conjunto de archivos vacíos necesarios para la plantilla. Algunos de estos archivos son opcionales y otros son obligatorios para que WordPress reconozca la plantilla. El primero que debemos crear es el archivo style.css, que es un archivo obligatorio que contiene los estilos de la plantilla.

Además, este archivo también tiene otra función, que es proporcionar información que describe la plantilla, como el nombre de la plantilla, descripción, nombre del autor, versión de la plantilla y otros detalles. El segundo archivo es el archivo index.php, que es un archivo obligatorio que representa la plantilla principal de WordPress que WordPress utiliza para mostrar cualquier página cuando no se puede encontrar ningún otro archivo de plantilla más específico para mostrar la página. Lea más sobre la jerarquía de plantillas de WordPress. Hay varios archivos opcionales que puede agregar a su plantilla para personalizarla aún más en cada sección del sitio, pero para nuestra plantilla de demostración en el artículo de hoy nos limitaremos a agregar solo los archivos de encabezado y pie de página: Archivo de encabezado header.php: se utiliza para diseñar y diseñar el encabezado de la plantilla, que generalmente se muestra en cada página del sitio.

Este archivo generalmente contiene información como el título y descripción del sitio, especifica qué archivos de estilo usaremos en el sitio habitualmente y otra información. Archivo de pie de página footer.php: este archivo es responsable de mostrar la información que se incluye al final de cada página del sitio. Aquí es preferible incluir códigos de JavaScript para que no causen lentitud en la carga de la página.

Archivo de funciones de la plantilla functions.php en este archivo escribiremos las instrucciones de programación necesarias para que funcione la plantilla. También agregaremos un archivo de imagen y lo llamaremos screenshot.png para que sea la imagen de la plantilla que aparecerá cuando se examine la plantilla en el panel de control del sitio. Paso 2 - Agregar Bootstrap a una plantilla de WordPress El sistema WordPress no admite Bootstrap de forma predeterminada, por lo que para poder usar Bootstrap como base para una plantilla de WordPress y aprovechar las fortalezas de ambos sistemas, puede seguir uno de los siguientes enfoques (teniendo en cuenta que no hay una ventaja significativa de uno sobre el otro y puede adoptar el método que prefiera) Primer enfoque - Recurrir a los archivos fuente de Bootstrap desde la red de entrega de contenidos (CDN).

En este caso no necesitamos descargar archivos Bootstrap en la carpeta de nuestra plantilla, es suficiente apuntar al enlace cdn de los archivos que necesitamos de la siguiente manera: apuntaremos al archivo css de Bootstrap agregando el siguiente enlace en el archivo de encabezado header.php dentro de la etiqueta head y antes de cualquier llamada a cualquier otro archivo de estilo: este enlace contiene una librería CSS y le permite usar las clases de Bootstrap en sus páginas web. Apuntaremos al archivo JavaScript de Bootstrap en el archivo de pie de página footer.php antes de la etiqueta de cierre de la etiqueta body.

Alternativamente, en lugar de incluir códigos de inserción de Bootstrap en los archivos de plantilla (en el encabezado y pie de página), puede agregar el código de enlace dentro del archivo de funciones de la plantilla function.php a través de las funciones de cola wp_enqueue_script/wp_enqueue_style, que son funciones especiales en WordPress conocidas como (hooks) y es simplemente otra forma de incluir códigos CSS y códigos JavaScript de Bootstrap - y también sus propios códigos - en la plantilla bootstraptheme_enqueue_styles(){ wp_enqueue_style('bootstrap-cdn-css', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css'); wp_enqueue_script('bootstrap-cdn-js', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js', 'jquery', false, true); wp_enqueue_style('my_style', get_stylesheet_directory_uri().'/style.css'); } add_action('wp_enqueue_scripts', 'bootstraptheme_enqueue_styles'); Nota: Para que Bootstrap 5 admita RTL para sitios en idioma árabe, debe agregar la versión en árabe de Bootstrap de la siguiente manera, y también necesita agregar el atributo de idioma árabe "lang = "ar y el atributo de dirección "dir = "rtl códigos HTML

¡Hola Mundo!

¡Hola Mundo! >