Forum

Ask for help to thousands of professionals from different fields
Question
author_picture
| Etudiant en Génie Logiciel
| Cameroon
Standard Level
10 Points

Comment intégrer Bootstrap à mon plugin Wordpress

Salut chers membres,

Je suis en train d'apprendre à développer un plugin pour Wordpress et mais j'ai une difficulté depuis hier.  J'aimerais que mon plugin utilise Bootstrap, mais je ne sais pas exactement où intégrer les liens CDN du Javascript et du CSS comme ci dessous:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

J'ai essayé dans mon code comme j'ai l habitude de faire en HTML mais ça ne fonctionne pas. Quelqu'un peut il m'aider? Merci d'avance.

BootstrapWordpress
9.11.2017 9:47
author_picture
| Etudiant
| Germany
Junior Level
60 Points

Salut Christian, C'est vrai que je ne suis pas un pro en développement de plugin Wordpress, mais j ai eu le même problème que toi une fois et j ai finalement résolu en faisant comme ceci:

  1. Télécharges Bootstrap sur le site officiel 
  2. Extrais le fichier .zip et copies les fichiers (bootstrap.js et bootstrap.css) dans un dossier nommé par exemple bootstrap_lib dans le dossier de ton plugin.
  3. Dans ton code tu fais comme ci dessous:
//configure le chemin des fichiers js et css
wp_register_script( 'bootstrap-js', plugins_url( '/boostrap_lib/bootstrap.js', __FILE__ ), array( 'jquery' ) );
wp_register_style( 'bootstrap-css', plugins_url( '/boostrap_lib/bootstrap.css', __FILE__ ), array(), '20120208', 'all' );

//charge les fichiers js et css
wp_enqueue_style( 'bootstrap-css' ); 
wp_enqueue_script('bootstrap-js');

Je pense qu'avec ceci, tu auras Bootstrap configuré sur ton plugin. 

You have already upvoted this answer !!! You have already downvoted this answer !!! You can not vote your own answer
author_picture
| Etudiant en Génie Logiciel
| Cameroon
Standard Level
10 Points

Merci pour ton aide Salvador. Mais où dois je exactement ajouter le code que tu proposes dans mon code? 

You have already upvoted this answer !!! You have already downvoted this answer !!! You can not vote your own answer
author_picture
| Etudiant
| Germany
Junior Level
60 Points

Dans le constructeur de base de ton plugin, tu as certainement la ligne ci dessous:

add_action( 'admin_menu', array( $this, 'nom_d_une_fonction' ));

Tu dois appeler le script et la feuille de style juste avant.

Je reformule encore bien ma réponse précédente:

// Ton constructeur
    function __construct() {

        // Tu ajoutes cette action qui va appeler la fonction "appel_js_css"
        add_action( 'wp_enqueue_scripts', array( $this, 'appel_js_css' ));

        add_action( 'admin_menu', array( $this, 'nom_d_une_fonction' ));
        
        ...

    }

//Puis la fonction "appel_js_css" pour charger le js et le css
    function appel_js_css() {
        wp_register_script( 'bootstrap-js', plugins_url( '/boostrap_lib/bootstrap.js', __FILE__ ), array( 'jquery' ) );
        wp_register_style( 'bootstrap-css', plugins_url( '/boostrap_lib/bootstrap.css', __FILE__ ), array(), '20120208', 'all' );
        wp_enqueue_style( 'bootstrap-css' ); 
        wp_enqueue_script('bootstrap-js');
    }

N.B: Le nom de la fonction "appel_js_css" est juste un exemple. Tu peux l'appeler comme tu veux.

J'espère que cette fois j'ai été un peu plus clair.

You have already upvoted this answer !!! You have already downvoted this answer !!! You can not vote your own answer
author_picture
| Etudiant en Génie Logiciel
| Cameroon
Standard Level
10 Points

Désolé je n'ai pas encore eu le temps de tester ta proposition. Mais je le fait ce soir et je te tiens informé. Merci.

You have already upvoted this answer !!! You have already downvoted this answer !!! You can not vote your own answer
× You are not logged in. Please login or sign up for free to answer this post.

Your Answer

×

You gain:

  • +15 points when your answer is marked as accepted
  • +5 points when your answer is voted up

You lose:

  • -2 points when your answer is voted down
forum_icon Related Topics