Cómo cargar bootstrap css y js para poder utilizarlo en mi tema  

 
JUAN ANTONIO
 JUAN ANTONIO
Usuario experto

Buenas tardes:

Me gustaría incorporar css y js bootstrap a mi tema palene para poder utilizar sus componentes, tooltips, por ejemplo, pero no sé como hacerlo. Subir los archivos necesarios a cpnel? Dónde ubicarlos? O cargarlos añadiendo código a algún archivo? A cuál?

Podéis echarme una mano?

Gracias por adelantado
Saludos

URL del sitio: Contenido solo visible a usuarios registrados

Citar
Respondido : 05/01/2018 3:25 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

El CSS de bootstrap ya esta incluído con tu theme, lo puedes comprobar viendo el código fuente y buscando bootstrap

Contenido solo visible a usuarios registrados

Con esto podrás hacer columnas, dar estilos a mensajes, etc.

Sin embargo si quieres funcionalidad extra de bootstrap tendrás que incluír el archivo javascript, para agregar el archivo javascript te sugiero revisar el punto 4 del artículo: https://decodecms.com/insertar-javascript-en-wordpress-de-forma-correcta/

Saludos.

ResponderCitar
Respondido : 05/01/2018 5:53 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

JUAN ANTONIO
 JUAN ANTONIO
Usuario experto

Hola:

No me atrevo a tocar el archivo functions.php. Con css y html me defiendo, pero de funciones de se js muy poco. 🙁

De todas las opciones que aparecen en el enlace es la que me parece más complicada.

Un saludo

ResponderCitar
Respondido : 06/01/2018 11:02 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Juan Antonio.

Para añadirlo tienes que tocar código:

.- Accede a la página oficial de bootstrap y descarga la primera opción. Click en el botón ‘download bootstrap’.

Te descargaras un archivo ‘zip’ que debes descomprimir.

Este archivo contiene una carpeta con el nombre ‘bootstrap-3.3.6-dist’ esto varía según la versión actual.

En esa esa carpeta tienes 3 subcarpetas que contienen los archivos necesarios para implementar bootstrap en wordpress. Las carpetas son ‘css’, ‘fonts’ y ‘js’.

.- Renombra la carpeta principal (‘bootstrap-3.3.6-dist’) por su nombre simplemente (‘bootstrap’)
.- Sube la carpeta bootstrap a la carpeta de tu plantilla wp-content/themes/nombre_del_tema/bootstrap

Ahora toca añadirlos a tu tema. La forma más recomendada de integrar bootstrap a tu tema es a través del archivo ‘functions.php’.

.- Edita el archivo functions.php que encontraras en :
‘wp-content/themes/nombre_del_tema/functions.php’.

.- Añade las siguientes lineas al final del archivo:

function bootstrap_scripts() {
wp_enqueue_style( 'mytheme-bootstrap', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css' );
wp_enqueue_script('mytheme-bootstrapjs', get_template_directory_uri().'/bootstrap/js/bootstrap.min.js', array('jquery') );
}
add_action( 'wp_enqueue_scripts', 'bootstrap_scripts' );

Puedes probarlo por ejemplo en un clon -> https://www.webempresa.com/blog/clonar-wordpress-en-3-clics-sin-perder-tiempo.html

Otra opción es que te descargues una copia del archivo functions.php antes de hacer las modificaciones, si pasara algún imprevisto siempre puedes volver a subir el original.

Un saludo

ResponderCitar
Respondido : 06/01/2018 12:17 pm

Cursos Gratuitos WordPress

JUAN ANTONIO
 JUAN ANTONIO
Usuario experto

Hola Pepe:

La descarga que ofrecen es Bootstrap v4.0.0-beta.3 compilado CSS y JS y no incluye documentación, archivos fuente o cualquier dependencia opcional de JavaScript (jQuery y Popper.js). Los archivos fuente tienen descarga aparte.

Es Bootstrap v4.0.0-beta.3 compilado lo que he de descargarme?

Saludos

ResponderCitar
Respondido : 06/01/2018 1:29 pm
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Juan Antonio.

Pues parece que es la Beta 4.0 y como mucho tiene que haber salido esta mañana ya que ayer seguían con la anterior versión.

Adjunto tienes la versión 3.3 que es la anterior a la 4 ( La 4 no la probé y no se el resultado que pueda dar )

Un saludo

ResponderCitar
Respondido : 06/01/2018 3:01 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

JUAN ANTONIO
 JUAN ANTONIO
Usuario experto

Hola:

La cosa más tonta, subir el archivo, se me complica. No me deja subir todo el archivo bootstrap, sino archivos de dentro: cada js, cada css. Esto es normal, o soy un "negao" :S

ResponderCitar
Respondido : 06/01/2018 6:14 pm
JUAN ANTONIO
 JUAN ANTONIO
Usuario experto

Añade las siguientes lineas al final del archivo:
function bootstrap_scripts() {
wp_enqueue_style( 'mytheme-bootstrap', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css' );
wp_enqueue_script('mytheme-bootstrapjs', get_template_directory_uri().'/bootstrap/js/bootstrap.min.js', array('jquery') );
}
add_action( 'wp_enqueue_scripts', 'bootstrap_scripts' );

Exactamente dónde lo añado, principio, final? Me parece que estoy operando a corazón abierto... :pinch:

ResponderCitar
Respondido : 06/01/2018 6:40 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

JUAN ANTONIO
 JUAN ANTONIO
Usuario experto

Todo hecho. No funciona. 🙁

ResponderCitar
Respondido : 06/01/2018 7:36 pm
Luis Mendez Alejo
 Luis Mendez Alejo
Miembro Admin

Hola Juan Antonio,

Si no tienes conocimientos de CSS, JS y algo de PHP se te va a hacer muy complicado añadir funcionalidades avanzadas de bootstrap a tu tema en uso por lo que o bien te planteas recurrir a un Colaborador de Webempresa que pueda valorarte la implementación de bootstrap o bien te planteas cambiar a un tema actual, basado 100% en bootstrap (que no es que sea la moda en estos momentos) y te olvidas de complicaciones.

Ten en cuenta que en el foro no damos soporte de programación y la implementación que tu quieres hacer implica eso mismo.

Saludos

ResponderCitar
Respondido : 06/01/2018 7:49 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

JUAN ANTONIO
 JUAN ANTONIO
Usuario experto

Hola Luis:

Está bien que me digas eso, si es tan complicado. Yo pregunté, para saber si se podía, como de complicado era... Cada moderador entiendo que da su opinión. Gracias por tu respuesta Luis, seguro tienes razón, aunque he hecho cosas gracias a vuestros consejos que creí que no sería capaz. Si es tan complicado, paso de bootstrap js. No quería soporte de programación, sólo información si era viable o no. Ya veo que no. No pasa nada

ResponderCitar
Respondido : 07/01/2018 12:04 am
Luis Mendez Alejo
 Luis Mendez Alejo
Miembro Admin

Hola Juan Antonio,

La idea de mi respuesta no era desilusionarte en la tarea, siento haberte transmitido esa sensación. Lo cierto es que Palene es un tema que trabaja con el framework Gantry por lo que implementarle bootstrap no es una tarea sencilla (como se te mostraba en anteriores respuestas) y está sometida a más cambios en el tema (archivos del tema) y luego queda por ver como se lo toma el framework.

¿Que funcionalidades exactamente tratabas de añadir pensando en usar bootstrap en Palene?

Saludos

ResponderCitar
Respondido : 07/01/2018 1:06 am

Cursos Gratuitos WordPress