Integración de WordPress con Bootstrap

Esto es una guía para la integración de WordPress con Bootstrap, para no complicarnos la vida, solo basta con incluir 4 link de Bootstrap en nuestro documento HTML , a continuación esto son los link.

CSS

Copie y pegue la hoja de estilo <link>en su <head>antes de todas las demás hojas de estilo para cargar nuestro CSS.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

JS

Muchos de los componentes requieren el uso de JavaScript para funcionar. Específicamente, requieren jQuery , Popper.js y sus propios complementos de JavaScript. Coloque los siguientes <script>s cerca del final de sus páginas, justo antes de la </body>etiqueta de cierre , para habilitarlos. jQuery debe ir primero, luego Popper.js y luego nuestros complementos de JavaScript.

Usamos la versión delgada de jQuery , pero la versión completa también es compatible.

Pero si quieres tener elemento de Bootstrap a nivel global en tu tema debes colocar el siguiente código al final de archivo (Functions.php) es recomendable que lo haga el tu tema hijo de tu WordPress.

// Incluir Bootstrap CSS
function bootstrap_css() {
wp_enqueue_style( 'bootstrap_css', 
  					'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css', 
  					array(), 
  					'4.1.3'
  					); 
}
add_action( 'wp_enqueue_scripts', 'bootstrap_css');
// Incluir Bootstrap JS y dependencia popper
function bootstrap_js() {
wp_enqueue_script( 'popper_js', 
  					'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js', 
  					array(), 
  					'1.14.3', 
  					true); 
	wp_enqueue_script( 'bootstrap_js', 
  					'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js', 
  					array('jquery','popper_js'), 
  					'4.1.3', 
  					true); 
}
add_action( 'wp_enqueue_scripts', 'bootstrap_js');

Ahora vamos probar algunas códigos de Bootstrap en esta entrada, para que usted pueda apreciarlos

Ejemplos de Botones:

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

Nota: Esta integración afecta el comportamiento del blog, en mi caso decidí quitarlo, por esa razón los botones se ven sin color.

A continuación: link de Referencia de la página oficial:

Vive del Internet crea tu página web en el hosting recomendado:

Servicio de ayuda de WordPress 20 $ o BTC por Whatsapp: