WordPress : Impossible d’inclure des scripts jQuery personnalisés dans mon thème wp
J’essayais donc depuis un moment d’inclure mes scripts jQuery (un plugin, un auto-écrit) dans mon thème wordpress personnalisé. Malgré avoir beaucoup lu sur la façon de les inclure correctement, je n’arrive pas à le faire fonctionner.
J’ai donc un script de plugin (jQuery.fullPage.js) et un écrit personnalisé (main.js) qui sont (les deux !) placés dans le répertoire « assets/scripts/« .
Comme décrit dans les instructions, je les enregistre dans le functions.php :
function load_theme_scripts() {
wp_register_style('fullPageStyle', get_template_directory_uri() . '/custom-css/jquery.fullPage.css');
wp_enqueue_style( 'fullPageStyle');
wp_register_script( 'theFullPage', get_template_directory_uri() . '/assets/scripts/jquery.fullPage.js', array('jquery'), false, true );
wp_enqueue_script( 'theFullPage');
wp_register_script( 'mainScript', get_template_directory_uri() . '/assets/scripts/main.js', array( 'jquery' ), '1.0.0', true );
wp_enqueue_script( 'mainScript');
}
add_action( 'wp_enqueue_scripts', 'load_theme_scripts' );`
N’ayant que ce code, rien ne s’est passé du tout. Après quelques lectures, j’ai compris (je ne sais pas si c’est la bonne façon) que je dois également appeler les scripts dans le <head> du code html.
Donc dans le <head>de mon home.html j’ai maintenant le code suivant :
<head>
<title><?php wp_title()?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
<script type='text/javascript' src='http://localhost/portfolio_wordpress/wp-content/themes/myportfolio/assets/scripts/jquery.fullPage.js'></script>
<script type='text/javascript' src='http://localhost/portfolio_wordpress/wp-content/themes/myportfolio/assets/scripts/main.js'></script>
<?php wp_head(); ?>
</head>Maintenant, les scripts sont appelés (veuillez me corriger si quelque chose n’est pas conforme aux meilleures pratiques !) mais j’obtiens l’erreur : Can't find variable: $ in my main. js. Je pensais que c’était probablement à cause du mode de compatibilité de jQuery dans wordpress donc remplacez le $par jQuerymais alors l’erreur est Can't find variable: jQuery.
Le code main.js avec le $ :
$(document).ready(function() {
alert("Main script is workin!");
$('#fullpage').fullpage({
scrollingSpeed: 1000
});
alert("Main script is workin!");
});
Maintenant, les scripts sont appelés (veuillez me corriger si quelque chose n’est pas conforme aux meilleures pratiques !) mais j’obtiens l’erreur : Can't find variable: $ dans mon fichier main. js. Je pensais que c’était probablement à cause du mode de compatibilité de jQuery dans wordpress donc remplacer le $par jQuerymais alors l’erreur est Can't find variable: jQuery.
Le main.js avec le jQueryà la place :
jQuery(document).ready(function($) {
alert("Main script is workin!");
$('#fullpage').fullpage({
scrollingSpeed: 1000
});
alert("Main script is workin!");
});
S’il vous plaît, aidez-moi, ça me rend vraiment fou! Depuis que je suis nouveau dans l’écriture de thèmes personnalisés pour wp, des conseils pour coder cette fonctionnalité de manière meilleure ou plus propre sont les bienvenus !
Solution n°1 trouvée
Solution trouvée !
J’ai donc compris d’où venait le problème ! En fait qc vraiment stupide. Pour charger jQuery, le <?php wp_enqueue_script("jquery"); ?>doit être appelé avant le <?php wp_head(); ?>. Tous les scripts personnalisés, par exemple main.js, doivent être appelés comme ceci :
<script type='text/javascript' src="<?php bloginfo("template_url"); ?>/assets/scripts/main.js"></script> après la <?php wp_head(); ?>fonction.
Alors maintenant, mon total <head>du html ressemble à ceci:
<head>
<title><?php wp_title()?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>
<script type='text/javascript' src="<?php bloginfo("template_url"); ?>/assets/scripts/jquery.fullPage.js"></script>
<script type='text/javascript' src="<?php bloginfo("template_url"); ?>/assets/scripts/main.js"></script>
Le message de https://digwp.com/2009/06/incluant-jquery-in-wordpress-the-right-way/ de Chris Coyier m’a beaucoup aidé à résoudre ce problème ! Merci!
Solution n°2 trouvée
Si cela se trouve dans le dossier du plugin, vous devez utiliser le chemin plugin_url() au lieu de get_template_directory_uri(). La fonction de répertoire de modèles Becuase est utilisée pour le chemin localisé d’un thème activé. J’espère que cela vous sera utile. Par exemple:
add_action( 'wp_enqueue_scripts', 'load_plugin_scripts');
function load_plugin_scripts(){
wp_enqueue_script( 'plugin_custom_lm_js', plugins_url( 'assets/scripts/jquery.fullPage.js', __FILE__ ) );
}
Solution n°3 trouvée
C’est juste et exemple
Comment ajouter des scripts à partir d’un modèle et d’un plugin.
function wptuts_scripts_important()
{
// Register the script like this for a plugin:
wp_register_script( 'custom-script', plugins_url( '/js/custom-script.js', __FILE__ ) );
// or
// Register the script like this for a theme:
wp_register_script( 'custom-script', get_template_directory_uri() . '/js/custom-script.js' );
// For either a plugin or a theme, you can then enqueue the script:
wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'wptuts_scripts_important', 5 );
0 commentaire