web-dev-qa-db-fra.com

Comment installer bootstrap dans un thème enfant

Quelque chose ne va pas quand j'essaie d'utiliser le bootstrap nav avec un thème enfant et je ne peux pas le comprendre pour la vie de moi.

Le thème parent s'appelle Revera.

C'est un thème bootstrap. Il comprend les fichiers bootstrap.min.js et bootstrap.min.css. Cependant, la version utilisée semble ancienne et je pense que c’est ce qui est à l’origine du bootstrap que j’ai ajouté, qui ne fonctionne pas tout à fait (il semble fonctionner, mais le style n’est pas correct. Les trois barres du menu mobile sont manquantes et le mot "Basculer la navigation" apparaît dans le bouton de navigation).

Ce que je voudrais faire est d'utiliser une version mise à jour de bootstrap avec un thème enfant. Mais tous les moyens que j'ai essayés pour y arriver ne semblent pas fonctionner. Dans le functions.php du thème de l'enfant, j'ai:

function enqueue_child_theme_styles() {

    wp_register_script( 'bootstrap-js', get_template_directory_uri() . '/bootstrap/js/bootstrap.min.js', array('jquery'), NULL, true );
    wp_register_style( 'bootstrap-css', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css', false, NULL, 'all' );

    wp_enqueue_script( 'bootstrap-js' );
    wp_enqueue_style( 'bootstrap-css' );    
}
add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX);

Le code ci-dessus ne semble rien faire cependant. J'ai essayé toutes sortes de choses pour essayer de résoudre ce problème, mais rien ne semble fonctionner. Qu'est-ce que je rate?

child-themetwitter-bootstrap
1
Digitaldervish

Ok, j'ai trouvé que le problème était multiple, mais une grande partie était une erreur de recrue.

Les autorisations sur les fichiers d'amorçage que j'avais inclus dans le thème enfant n'étaient pas correctement définies. Ils ont renvoyé une erreur d'interdiction 403 lors d'une tentative de mise en file d'attente. Je ne m'en rendais pas compte car les fichiers d'amorçage parent étaient toujours en file d'attente. Ce n'est que lorsque j'ai désenregistré les feuilles de style de fichier parent que j'ai réalisé l'erreur.

Mon code final:

function enqueue_child_theme_styles() {

//deregister the parent bootstrap style and script  
wp_deregister_style( 'bootstrap' );
wp_deregister_script( 'bootstrap' );

//enqueue my child theme stylesheet
wp_enqueue_style( 'child-style', get_stylesheet_uri(), array('theme') );

//enqueue bootstrap in the child theme 
wp_enqueue_script('bootstrap-js', get_stylesheet_directory_uri().'/bootstrap/js/bootstrap.min.js', array('jquery'), NULL, true);
wp_enqueue_style('bootstrap-css', get_stylesheet_directory_uri().'/bootstrap/css/bootstrap.min.css', false, NULL, 'all');

}
add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX);
1
Digitaldervish

get_template_directory_uri renvoie toujours l'URI du thème parent.

De la docs:

Si un thème enfant est utilisé, l'URI du répertoire du thème parent sera renvoyé.

Vous voulez probablement get_stylesheet_directory_uri .

add_action('wp_enqueue_scripts', 'wpse174502_styles', PHP_INT_MAX);
function wpse174502_styles()
{
    wp_enqueue_script('bootstrap-js', get_stylesheet_directory_uri().'/bootstrap/js/bootstrap.min.js', array('jquery'), NULL, true);
    wp_enqueue_style('bootstrap-css', get_stylesheet_directory_uri().'/bootstrap/css/bootstrap.min.css', false, NULL, 'all');
}

Chaque fois que vous déboguez des files d'attente, assurez-vous de ...

  1. Vérifiez la source de la page rendue. les actifs que vous espériez être inclus?
  2. Vérifiez la console des outils de développement dans le navigateur de votre choix. Y a-t-il des erreurs? Ces erreurs sont-elles liées à vos actifs?
1
chrisguitarguy