La mejor manera de incluir Bootstrap en WordPress

Question

La mejor manera de incluir Bootstrap en WordPress

12 oct 2017, 13:02:23

Vistas: 48.4K

Votos: 10

Vengo de trabajar con Laravel donde usar Bootstrap es relativamente fácil. Sin embargo, tengo un proyecto en WordPress donde estoy usando Bootstrap para mis barras de navegación. El problema es que están afectando el encabezado de mi página. El tema que estoy usando es Be Theme. Este es mi código:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="tabbable">
<div class="panel panel-default">
<div class="panel-body">
    <ul class="nav nav-tabs nav-justified" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#link" role="tab" style="color:black;"></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#link" role="tab" style="color: black; "></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#link" role="tab" style="color: black;"></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#link" role="tab" style="color: black;"></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#link" role="tab" style="color: black;"></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#link" role="tab" style="color: black;"></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#link" role="tab" style="color:black;"></a>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="link" role="tabpanel" style="; color: black;">  


    <form action="" method="get" name="" style="color: black;" class="form-inline">
    <br>

    <br>


<input type="submit" name="submit" class="btn btn-default" style="background-color: red;">
</form>

<table>

</table>




    </div>
  <div class="tab-pane " id="id" role="tabpanel" style=";">
  </div>
  <div class="tab-pane " id="id" role="tabpanel" style=";">
  </div>
  <div class="tab-pane " id="id" role="tabpanel" style=";">
  </div>

   <div class="tab-pane " id="id" role="tabpanel" style=";">
  </div>
   <div class="tab-pane " id="id" role="tabpanel" style=";">
  </div>
   <div class="tab-pane " id="id" role="tabpanel" style=";">
  </div>
</div>

</div>
</div>
</div>
</div>
</body>
</html>

He creado una página de plantilla usando este código gracias a la ayuda que recibí en una pregunta anterior.

¿Cómo puedo usar Bootstrap sin afectar los temas de WordPress y sus encabezados?

EDICIÓN: así es como se ve mi functions.php

add_action( 'wp_enqueue_scripts', 'mfnch_enqueue_styles', 101 );
function mfnch_enqueue_styles() {

    // Cargar la hoja de estilos del tema padre
//  wp_enqueue_style( 'parent-style', get_template_directory_uri() .'/style.css' );     //no necesitamos esto si está vacío

    // Cargar la hoja de estilos rtl del tema padre
    if ( is_rtl() ) {
        wp_enqueue_style( 'mfn-rtl', get_template_directory_uri() . '/rtl.css' );
    }

    // Cargar la hoja de estilos del tema hijo
    wp_dequeue_style( 'style' );
    wp_enqueue_style( 'style', get_stylesheet_directory_uri() .'/style.css' );

}

¿Cómo edito esta función para incluir Bootstrap? Lo intenté por mi cuenta pero no se renderiza.

¡Gracias de antemano!

R1ddler

137

temas twitter bootstrap

Comentarios

Debes encolar scripts y estilos en WordPress. Recomendaría crear un tema personalizado/hijo para tu propósito. Esto podría ayudarte

custom_scripts() { wp_enqueue_style( 'bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' ); wp_enqueue_script( 'bootstrap-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', array( 'jquery' ) ); } add_action( 'wp_enqueue_scripts', 'custom_scripts' );

Piyush Rawat

12 oct 2017 13:07:23

Todas las respuestas a la pregunta

Comentarios

¿Necesito agregar esto al functions.php del tema o del tema hijo?

R1ddler

12 oct 2017 13:10:51

Puedes agregarlo en el tema hijo si lo tienes.

Punitkumar Patel

12 oct 2017 13:12:00

Agregué mi función de estilo functions.php en el OP (sin Bootstrap)

R1ddler

12 oct 2017 13:16:37

Me he dado cuenta de que es este script el que está dañando mi encabezado <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

R1ddler

12 oct 2017 13:37:31

Deberías agregar // antes del enlace.

Punitkumar Patel

12 oct 2017 13:39:58

Mostrar los 5 comentarios restantes

¿Qué tal si ahorramos ancho de banda y posiblemente aumentamos la velocidad de carga de la página usando MaxCDN y NetDNA? Añade estas dos funciones a tu archivo functions.php

function pwwp_enqueue_my_scripts() {
    // jQuery se establece como una dependencia de bootstrap-js - será cargado por WordPress antes de los scripts de BS
    wp_enqueue_script( 'bootstrap-js', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', array('jquery'), true); // toda la potencia de javascript de bootstrap
}
add_action('wp_enqueue_scripts', 'pwwp_enqueue_my_scripts');

function pwwp_enqueue_my_styles() {
    wp_enqueue_style( 'bootstrap', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );

    // esto añadirá la hoja de estilos desde su ubicación por defecto en el tema si tu tema no la tiene ya
    //wp_enqueue_style( 'my-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'pwwp_enqueue_my_styles');

Documentación fuente

Alexius The Coder

31

1 ene 2021 21:55:29

Punitkumar Patel 328 · Accepted Answer · 2017-10-12T13:07:04Z

Puedes agregar Bootstrap en WordPress mediante la siguiente función en functions.php

Puedes cambiar la URL según lo necesites si tienes un CDN.

<?php 
/**
 * Encolar scripts y estilos
 */
function your_theme_enqueue_scripts() {
    // todos los estilos
    wp_enqueue_style( 'bootstrap', get_stylesheet_directory_uri() . '/css/bootstrap.css', array(), 20141119 );
    wp_enqueue_style( 'theme-style', get_stylesheet_directory_uri() . '/css/style.css', array(), 20141119 );
    // todos los scripts
    wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '20120206', true );
    wp_enqueue_script( 'theme-script', get_template_directory_uri() . '/js/scripts.js', array('jquery'), '20120206', true );
}
add_action( 'wp_enqueue_scripts', 'your_theme_enqueue_scripts' );

Punitkumar Patel

328

12 oct 2017 13:07:04