web-dev-qa-db-fra.com

Comment lier des fichiers JavaScript externes?

Je travaille sur un thème WordPress personnalisé. Tout fonctionne parfaitement jusqu'à présent, sauf pour une chose: les fichiers JavaScript externes ne fonctionneront pas.

J'ai suivi le conseil exact des liens ici et ici , mais cela ne fonctionne toujours pas.

J'ai cherché le codex, vérifié le code source, utilisé firebug. Je ne sais pas pourquoi cela ne fonctionne pas. Malheureusement, à cause d'un NDA , je ne suis pas autorisé à vous donner le code actuel du site, ni un lien vers celui-ci. Je vais donc devoir expliquer du mieux que je peux.

J'ai utilisé la wp_enqueue_script() pour inclure les fichiers dans le fichier functions.php. Les balises de script dans la tête sont les suivantes:

<script type='text/javascript' src='http://www.xx.com/wp-includes/js/jquery/jquery.js?ver=1.4.4'></script>
<script type='text/javascript' src='http://www.xx.com/wp-content/themes/twentyten/scripts/custom.js?ver=3.1'></script>

Donc, les fichiers se chargent, mais ils ne fonctionnent tout simplement pas. Je me demandais si le ?ver=3.1 à la fin de mon fichier custom.js pourrait avoir quelque chose à voir avec cela?

Le code de mon fichier functions.php:

function twentyten_custom_scripts() {
if ( !is_admin() ) // instruction to only load if it is not the admin area
{ 
   // register your script location, dependencies and version
    wp_register_script('custom_script', get_bloginfo('template_directory') . '/scripts/custom.js', array('jquery') );
   // enqueue the script
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script('custom_script');
}
}
add_action('template_redirect', 'twentyten_custom_scripts');

Je suis vraiment perdu à ce stade. J'ai même changé tous mes:

$('#elem').hide();

à

jQuery('#elem').hide();

Dans le fichier custom.js selon le codex wp_enqueue_script(), la section des wrappers sans conflits ici , toujours rien.

Oh, et j’ai besoin de ce fichier pour charger dans l’ensemble de mesPages, mais pas sur monBlog, car j’ai plusieurs pages statiques configurées pour le site principal. J'espère que cela à du sens.

customizationjavascriptwp-enqueue-script
1
AverageJoe

De mon point de vue, cela devrait fonctionner. Peut-être que vous pouvez poster votre fichier custom.js ici. Il est possible que ce fichier ait une erreur de syntaxe ou quelque chose de similaire. Vous pouvez également vérifier si le jquery intégré fonctionne immédiatement en ajoutant une simple commande jquery dans votre header.php .

Quelques astuces:

  1. L'action-hook template_redirect est utilisé pour inclure le fichier uniquement sur la page de couverture (pour que je puisse m'en souvenir). Si vous souhaitez charger le script une fois le thème chargé, vous pouvez utiliser le after_setup_theme action-hook.

  2. Vous n'avez pas à mettre en file d'attente votre fichier jquery manuellement, si vous définissez jquery comme une dépendance de votre custom.js , comme vous l'avez fait. Le fichier sera automatiquement chargé à partir de WordPress avant que votre custom.js soit attaché.

  3. Avez-vous ajouté la jQuery.noConflict(); au début de votre custom.js ?

Quelques exemples de travail:

functions.php 

function twentyten_custom_scripts() {
    if ( !is_admin() ) // instruction to only load if it is not the admin area
    { 
        wp_register_script('custom_script', get_bloginfo('template_directory') . '/scripts/custom.js', array('jquery') );
        wp_enqueue_script('custom_script');
    }
}
add_action('after_setup_theme', 'twentyten_custom_scripts');

custom.js 

jQuery.noConflict();

jQuery(document).ready(function() {
    // do your stuff e.g.
    jQuery("a[rel^='prettyPhoto']").prettyPhoto();
});
3
rofflox