8768 sujets

Développement web côté serveur, CMS

Wordpress thème js

salut, j'essaie d'inclure les dossier js du fameux particleground pour le mettre sur wordpress mais j'arrive vraiment pas, j'ai beau à voir des tutos mais rien à faire.

Mon CSS marche mais le reste pas moyen qui pourrais m'aider ? j'essaie de le mettre sur wordpress comme un thème que j'ai cré.

Les fichiers sont ici: https://github.com/jnicol/particleground

J'ai crée un header.php 

<!doctype html>
<html <?php language_attributes (); ?>>
 <?php wp_head(); ?>
<head>
  <meta charset="<?php bloginfo( 'charset' ); ?>" />
  <title><?php the_title(); ?></title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" />
  <link href="<?php bloginfo('stylesheet_url'); ?>" type='text/css'>
  <!-- remember, jQuery is completely optional -->
  <!-- <script type='text/javascript' src='js/jquery-1.11.1.min.js'></script> -->
  <script type='text/javascript' src='../jquery.particleground.js'></script>
  <script type='text/javascript' src='js/demo.js'></script>
</head>


index.php


 <?php

/*
Template Name: accueil
*/

  get_header();?>


  <?php if (have_posts()) ; ?>
               <?php while (have_posts()) : the_post(); ?>    
 

  <?php the_content(); ?>



     <?php endwhile; ?> 

 <?php
get_footer();
?>

</body>
</html>


function.php

<?php

// lgmac_custom va représenter la feuille de style à l'intérieur de worpdress. C'est nom arbitraire.
//All interviens sur tout type d'écrant. 
//1.0.0 est la version de wordpress


function lgmac_scripts(){
	wp_enqueue_style('lgmac_custom' , get_template_directory_uri(). '/style.css', array(),false);

	$js_directory = get_template_directory_uri() . '/js/';
	wp_register_script( 'lgmac_script', $js_directory . 'js/demo.js', 'jquery', '1.0' );
	wp_register_script( 'lgmac_script', $js_directory . '../jquery.particleground.js', 'jquery', '1.4' );

	wp_enqueue_script( 'jquery' );



} // fin function lgmac_scripts

add_action('wp_enqueue_scripts', 'lgmac_scripts');

?>
Il ne faut pas inclure tes fichiers directement dans ton header.php mais utiliser le fichier functions.php.

Si tu mets le même nom en premier argument de wp_register_script, ton second js va remplacer le premier.

En utilisant wp_register_script, tes fichiers ne seront inclus dans ton header que si ils sont requis comme dépendance par d'autres ressource. Tu dois donc utiliser wp_enqueue_script() à la place.

Tu n'as pas besoin de enqueue jQuery car il est déjà présent dans wordpress.
du coup ma function.php donnerai ça

Le chemin du ftp pour mon js serait: wp-content/themes/particlegroud-master/demo/js/demo.js

function lgmac_scripts(){
	wp_enqueue_style('lgmac_custom' , get_template_directory_uri(). '/style.css', array(),false);

	$js_directory = get_template_directory_uri() . 'wp-content/themes/particlegroud-master/demo/js/demo.js';
	 wp_enqueue_script( 'demo', $js_directory . 'js/demo.js', ['jquery','particleground'], '1.0' );
	 wp_enqueue_script( 'particleground', $js_directory . '../jquery.particleground.js', 'jquery', '1.4' );


} // fin function lgmac_scripts

add_action('wp_enqueue_scripts', 'lgmac_scripts');

?>
get_template_directory_uri() te donne déjà le chemin vers le dossier ton thème donc si tu concatènes, ne remet pas tout le chemin, juste celui de ton dossier js à partir du thème. Dans $js_directory , tu mets en plus le chemin d'un fichier auquel tu rajoutes ensuite encore 'js/demo.js', ça ne va pas.

N'hésites pas à afficher le code source de ta page, utiliser les outils de développement de ton navigateur ou print_r tes variables car tu ne pourras pas t'en sortir en tâtonnant.
Sujet clos
Aller à