Comment ajouter un simple script jQuery à WordPress?

Question

J'ai lu le Codex et quelques billets de blog sur l'utilisation de jQuery dans WordPress, et sa très frustrant. J'ai aussi loin que le chargement de jQuery dans functions.php le fichier, mais tous les guides sont de merde, car ils supposent que vous avez déjà une tonne de WordPress expérience. Par exemple, ils disent que maintenant que je suis de chargement de jQuery par le biais de l' functions.php le fichier, maintenant tout ce que j'ai à faire est de charger mon jQuery.

Comment dois-je faire exactement? Ce fichiers, en particulier, dois-je ajouter le code? Exactement comment dois-je ajouter pour une seule page WordPress?

Answer 1

Je sais ce que tu veux dire sur les tutoriels. Voici comment je le fais:

D'abord, vous devez écrire votre script. Dans votre thème dossier, créez un dossier appelé quelque chose comme " de js. Créer un fichier dans ce dossier pour votre javascript. E. g. your-script.js. Ajouter votre script jQuery pour ce fichier (vous n'avez pas besoin d' <script> tags dans une .fichier js).

Voici un exemple de la façon dont votre script jQuery (en wp-content/themes/your-theme/js/your-scrript.js):

jQuery(document).ready(function($) {
  $('#nav a').last().addClass('last');
})

Notez que j'utilise jQuery et pas $ au début de la fonction.

Ok, maintenant, ouvrez votre thème functions.php fichier. Vous aurez envie d'utiliser le wp_enqueue_script() fonction de sorte que vous pouvez ajouter à votre script, tout en disant à WordPress qu'il s'appuie sur jQuery. Voici comment faire:

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_enqueue_script(
        'your-script', // name your script so that you can attach other scripts and de-register, etc.
        get_template_directory_uri() . '/js/your-script.js', // this is the location of your script file
        array('jquery') // this array lists the scripts upon which your script depends
    );
}

En supposant que votre thème est wp_head et wp_footer dans les bons endroits, cela devrait fonctionner. Laissez-moi savoir si vous avez besoin de plus d'aide.

WordPress questions peuvent être posées sur à WordPress Réponses.

Answer 2

Après beaucoup de recherches, j'ai enfin trouvé quelque chose qui fonctionne avec la dernière WordPress. Voici les étapes à suivre:

1. Trouvez votre thème répertoire, créez un dossier dans le répertoire custom js (custom_js dans cet exemple).
2. Mettez votre personnalisé jQuery dans une .fichier js dans ce répertoire (jquery_test.js dans cet exemple).

3. Assurez-vous que votre personnalisé jQuery .js ressemble à ceci:

   (function($) {
   $(document).ready(function() {
   $('.your-class').addClass('do-my-bidding');
   })
   })(jQuery);
   

4. Aller à la thématique de l'annuaire d'ouvrir functions.php

5. Ajouter un peu de code dans le haut ressemble à ceci:

   //this goes in functions.php near the top
   function my_scripts_method() {
   // register your script location, dependencies and version
      wp_register_script('custom_script',
      get_template_directory_uri() . '/custom_js/jquery_test.js',
      array('jquery'),
      '1.0' );
    // enqueue the script
     wp_enqueue_script('custom_script');
     }
   add_action('wp_enqueue_scripts', 'my_scripts_method');
   

6. Découvrez votre site pour vous assurer qu'il fonctionne!

Answer 3

À côté de mettre le script dans à travers les fonctions que vous pouvez "juste" d'inclure un lien ( un lien balise rel) dans l'en-tête, pied de page, dans n'importe quel modèle, où jamais. Vous avez juste besoin de s'assurer que le chemin est correct. Je suggère d'utiliser quelque chose comme ceci (en supposant que vous êtes dans votre thème directory).

<script type="javascript" href="<?php echo get_template_directory_uri();?>/your-file.js"></script>

Une bonne pratique consiste à inclure ce droit avant la balise body de clôture ou au moins juste avant votre pied de page. Vous pouvez également utiliser les includes php, ou plusieurs autres méthodes de tirer de ce fichier.

<script type="javascript"><?php include('your-file.js');?></script>

Answer 4

**#Méthode 1:** * Essayez de mettre votre jquery code dans un autre fichier js.

Maintenant s'inscrire que dans le script functions.php fichier.

function add_my_script() {
    wp_enqueue_script(
      'custom-script', get_template_directory_uri() . '/js/your-script-name.js', 
        array('jquery') 
    );
}
add_action( 'wp_enqueue_scripts', 'add_my_script' );

Maintenant que vous avez terminé.

L'enregistrement d'un script dans les fonctions de, elle a de nombreux avantages car il vient en <head> section lors du chargement de la page donc c'est une partie de header.php toujours. Si vous n'avez pas à répéter votre code à chaque fois que vous écrivez un contenu html.

#Méthode 2: mettre le code de script à l'intérieur du corps de la page, en vertu <script> balise. Ensuite, vous n'avez pas à inscrire dans les fonctions.

Answer 5

Vous pouvez utiliser la fonction prédéfinie de WordPress pour ajouter un fichier de script au plugin WordPress.

 wp_enqueue_script( 'script', plugins_url('js/demo_script.js', __FILE__), array('jquery'));
 

Regardez l' article qui vous aide à comprendre à quel point il est facile d'implémenter jQuery et CSS dans le plugin WordPress.