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.
CSSCopie 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>
JSMuchos 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: