Cómo integrar Bootstrap en WordPress




🔸 Suscríbete a mi canal (si quieres :P)🔸 :
❔¿Quieres contactar conmigo?❔ Mándame un mensaje a:

💡 Para consultar el código o más información visita💡:

¡Buenos días! En el vídeo de hoy vemos cómo integrar Bootstrap en WordPress de una manera muy simple y sin utilizar ningún plugin. ¡Vamos allá!

Transcripción del vídeo:

Lo primero que vamos a hacer es irnos a la página de Bootstrap, concretamente a Bootstrap CDN y copiar este primer enlace que no sale. Lo copiamos y por FTP nos vamos a la carpeta de nuestro tema porque vamos a integrarlo esto directamente en el código. Buscamos carpeta theme, la carpeta de nuestro tema y abrimos el archivo functions. php.

Lo que vamos a hacer es crear una pequeña función para cargar este archivo Bootstrap y aquí tenemos dos opciones: la primera opción es muy probable que ya exista una función así como está de aquí que os estoy enseñando que viene con un add_action(‘wp_enqueue_scripts’…) así que si ya existe una función así simplemente añadimos esta línea dentro de esta función y lo que vamos a escribir el lo siguiente: Ponemos wp_enqueue_style (style en singular, es importante) y abrimos paréntesis.

Dentro ponemos nombre cualquiera (por ejemplo como es Bootstrap ponemos ‘bootstrap’, es para identificar este script) y luego ponemos entre comillas la URL que hemos copiado antes. Y ya estamos. Ahora guardamos este archivo y me voy a ir a la página para comprobar que este archivo se está cargando bien.

Voy a abrir el inspector de Chrome y aquí en Sources podemos ver podemos ver qué recursos se están cargando y aquí como véis del CDN de Bootstrap se esta cargando el framework (de Bootstrap).

Os voy a enseñar en un segundo cómo hacer esta función de 0 por si vuestro tema no la lleva. Simplemente creamos una función y le damos un nombre cualquiera cualquiera mientras no exista antes esta función por ejemplo ponemos esto de aquí (bootstrap_cdn) y luego necesitamos el add_action que es el que ejecuta este script así que lo podemos copiar de aquí o igualmente os lo dejaré en el blog para que lo copiéis y lo peguéis:

Sólo quedaría cambiar este nombre de función para que cargue esta función de aquí. Y ahora simplemente la línea que hemos escrito antes la podemos pegar dentro de esta función. Y ya estamos.

Lo guardamos y ahora si nos vamos al mismo inspector que hemos visto antes a Sources veremos que está cargando el Bootstrap igual que antes. Y ya estamos.

Ahora solo quedaría hacer un par de pruebas para ver qué tal funciona y supongo que ya sabréis que hiciste la documentación de Bootstrap donde podemos ver ejemplos de todos los elementos que lleva así que nos vamos a ir a la página de Bootstrap y vamos a extraer un par de ejemplos para comprobar si funciona en nuestra web.

Voy a ir desde el inicio, vamos a Documentación y voy a ver los componentes por ejemplo. Vamos a probar insertar un botón y vamos a copiar desde aquí este trozo de código y voy a crear una página y lo voy a pegar ahí. Voy a ponerle un título cualquiera y ahora importante en la pestañita de HTML no en la visual pegamos el código (porque esto es código crudo digamos) entonces lo ponemos aquí y vemos que ya nos está cargando los estilos de Bootstrap.

Y si queremos cambiar por ejemplo… le cambiamos la clase a danger para que salga en rojo, la cambiamos simplemente aquí y ahora nos carga el estilo rojo. Vamos a probar con otro elemento y vamos a alertas que es una cosa que se utiliza bastante e igual que antes vamos a copiar directamente de aquí este div y lo pegamos aquí abajo. Vamos a vista previa y vemos que nos esta cargando los estilos de esta alerta.

Y ya hemos terminado. Ya lo sabéis: para cualquier duda, pregunta, sugerencia o soborno me podéis encontrar en los siguientes lugares. Hasta la próxima 😀

🌐Web:
👱LinkedIn:
🌈Instagram:


Fuente – Source

Cómo integrar Bootstrap en WordPress

Necesitas ayuda con wp? Entonces WPVideo es tu sitio.
Encuentra lo que buscas entre cientos de miles de videos y experiencias personales de otros usuarios. Todos los que empezamos con wp deberíamos tener acceso a esta web, ojalá yo hubiera tenido algo así cuando empecé mi camino como webmaster 🙂
Pero ahora quiero y puedo poner esta web a vuestra disposición.
Disfrutadla 😉

Need help with wp? Then WPVideo is your site.
Find what you are looking for among hundreds of thousands of videos and personal experiences of other users. All of us who started with wp should have access to this website, I wish I had something like that when I started my journey as webmaster 🙂
But now I want and I can put this website at your disposal.
Enjoy it 😉

https://www.wpvideo.eu

Publicado en Plugins, Temas (Themes), Wordpress y etiquetado .

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *