web-dev-qa-db-fra.com

Jquery in Child Theme

Je suis nouveau sur Wordpress et j’ai besoin d’aide pour intégrer mon propre jQuery dans un thème enfant.

J'ai cette info-bulle jquery qui fonctionne mais je veux l'inclure dans mon thème enfant wordpress.

Regardez le code source pour ceci:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script src="js/jquery.balloon.js"></script>

    <script>
    $(document).ready(function() {
    $('.sample').balloon({ position: "left" })  
    });
    </script>

Comment puis-je mettre tout cela dans le thème de l'enfant pour que l'info-bulle fonctionne? Merci

themesjqueryjavascriptchild-themetooltip
3
Finerwhite

Tout d'abord, jQuery est probablement déjà mis en file d'attente par le thème principal. Mais sinon, la méthode appropriée consiste à appeler wp_enqueue_script('jquery') dans une fonction pour le hook d’action wp_enqueue_scripts.

Exemple:

function enqueue_jquery() {
   wp_enqueue_script('jquery');
}

add_action('wp_enqueue_scripts', 'enqueue_jquery').

Ce code devra être ajouté au fichierfunctions.phppour votre thème enfant.

Vous ne spécifiez un nom de fichier dans wp_enqueue_script que si vous souhaitez charger une version de jquery différente de celle fournie avec wordpress ou de celle fournie avec votre thème principal. Et vous devrez alors vous assurer que toute version de jquery déjà chargée est déchargée en premier, avec wp_deregister_script('jquery'). Ne pas désenregistrer une version de jquery déjà chargée avant d'en charger une nouvelle entraînera des conflits (les mêmes fonctions de jquery sont définies deux fois ...).

Ensuite, pour votre fichierjquery.balloon.js, même remarque, utilisez wp_enqueue_script (et action hook wp_enqueue_scripts). Vous devriez également éviter d'utiliser des URL relatives. En supposant que vous mettiez le fichierjquery.balloon.jsdans le répertoire "js" de votre thème enfant, la norme dans WordPress serait d’utiliser du code le long des lignes suivantes:

wp_enqueue_script('jquery-balloon', get_stylesheet_directory_uri().'/js/jquery.balloon.js', array('jquery'), false, false);

La fonction get_stylesheet_directory_uri renverra l'URL du chemin d'accès complet à votre répertoire enfant-thème.

EDIT(avait oublié d'inclure l'activation de l'effet ballon)

Pour la partie activation (le code $(document).ready(...);), la méthode la plus standard de WordPress (et celle qui aura le moins de risque de perturbation en termes de relation thème-enfant) est de créer un fichier js avec elle, appelé par exemple "balloonactivate.js" et placez ce fichier dans le dossier "js" de votre thème enfant.

Supposons que le thème de votre enfant concerne un thème appelé "maintheme"; alors votre thème-enfant devrait être dans un dossier appelé "maintheme-child" (c'est-à-dire, wp-content/themes/maintheme-child). Dans le dossier "js" ci-dessous (qui existe déjà ou que vous aurez créé pour placer le fichier "jquey.balloon.js"), placez le fichier "** strong text ** balloonactivate.js". Il ne reste plus qu'à le mettre en file d'attente comme les scripts jquery et jquery.balloon.js.

Ainsi, le code complet qui pourrait fonctionner pour vous est le suivant:

function enqueue_jquery_balloon() {
   wp_enqueue_script('jquery');
   wp_enqueue_script('jquery-balloon', get_stylesheet_directory_uri().'/js/jquery.balloon.js', array('jquery'), false, false);
   wp_enqueue_script('activate-balloon', get_stylesheet_directory_uri().'/js/balloonactivate.js', array('jquery-balloon'), false, false);
}

add_action('wp_enqueue_scripts', 'enqueue_jquery_balloon').

Ce code doit être ajouté au fichierfunctions.phpdu répertoire de votre thème enfant.

Pour l'activation de l'effet ballon, le code $(document).ready(...); peut également être ajouté en ligne à la fin du fichier footer.php du thème enfant (si le thème enfant nécessite un pied de page différent de celui du thème principal). Mais si le pied de page principal du thème suffit, il serait dommage de créer unfooter.phpdans le thème enfant uniquement pour le script ballon (d'où le commentaire ci-dessus sur l'impact "le moins perturbant" duballoonactivate.jsfichier).

Mettre votre requête en file d'attente n'est probablement pas nécessaire dans votre cas, mais la mettre à nouveau en file d'attente n'est pas un problème. Le problème serait que si une version de jquery était déjà chargée et que vous en ayez chargée une seconde.

J'espère que cela t'aides.

2
Phil R.