Tri en Jquery pour wordpress

**chokolatine35** · 15/02/2017, 21h58

Bonjour,

J'ai un petit soucis, j'aimerais ranger mes articles par catégorie. Je l'ai tout d'abord essayé en html ce qui marche très bien mais dès que j'essaye de l'intégrer sur wordpress c'est une histoire...^^ Dans function, j'ai bien appelé mes fichier js mais là où je bloque c'est par quelle class je dois les remplacer, ou s'il faut rajouter du php.

Voici les codes qui fonctionnent sans wordpress :

CODE HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
 
<!--menu tri-->
 
<a class="tous" href="#">Affiche tout</a>
 
<a class="bouton_1" href="#">Etats-Unis</a>
<a class="bouton_2" href="#">Canada</a>
<a class="bouton_3" href="#">Europe</a>
 
 
 
<!--articles -->
 
<div class="pays" role="article">
 
        <div id="article1" class="article element1">
          <a href="chicago.html"><img src="img/chicago.jpg" alt="chicago"/></a>
          <p>Chicago</p>
        </div>
 
        <div id="article2" class="article element1">
        <a href="miami.html"><img src="img/miami.jpg" alt="miami"/></a>
        	<p>Miami</p>
        </div>
 
        <div id="article3" class="article element1">
        <a href="philadelphie.html"><img src="img/philadelphie.jpg" alt="Philadelphie"/></a>
        	<p>Philadelphie</p>
        </div>
 
        <div id="article4" class="article element1">
          <a href="boston.html"><img src="img/boston.jpg" alt="Boston"/></a>
        	<p>Boston</p>
        </div>
 
        <div id="article5" class="article element1">
        <a href="newyork.html"><img src="img/new york.jpg" alt="ny"/></a>
          <p>New York</p>
 
        </div>
 
        <div id="article6" class="article element2">
        <a href="canada.html"><img src="img/canada.jpg" alt="canada"/></a>
        	<p>Canada</p>
        </div>
 
        <div id="article7" class="article element3">
          <a href="londres.html"><img src="img/londres.jpg" alt="londres"/></a>
        	<p>Londres</p>
        </div>
 
        <div id="article8" class="article element3">
          <a href="reunion.html"><img src="img/reunion.jpg" alt="reunion"/></a>
        	<p>île de la Reunion</p>
        </div>
</div>

CODE JS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
jQuery(document).ready(function ($) {
 
 
    $('.pays').isotope({
        // options
        itemSelector: '.article',
        layoutMode: 'fitRows'
    });
 
 
 
 
    $('.tous').on("click",function(){
        $('.pays').isotope({ filter: '*' });
    });
 
    $('.bouton_1').on("click",function(){
        $('.pays').isotope({ filter: '.element1' });
    });
 
    $('.bouton_2').on("click",function(){
        $('.pays').isotope({ filter: '.element2' });
    });
 
    $('.bouton_3').on("click",function(){
        $('.pays').isotope({ filter: '.element3' });
    });
 
 
});

Voici les codes que j'ai essayé sur wordpress :

HEADER.PHP

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
<!--tri -->
 
		<a class="tous" href="#">Affiche tout</a>
 
		<a class="bouton_1" href="#">Etats-Unis</a>
		<a class="bouton_2" href="#">Canada</a>
		<a class="bouton_3" href="#">Europe</a>
 
	</header><!-- #masthead -->

FONCTION.PHP

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
wp_enqueue_script( 'tri', get_template_directory_uri() . '/js/principal.js');
 
}
add_action('wp_enqueue_scripts' , 'trier');
 
function isotope(){
 
wp_enqueue_script( 'iso', get_template_directory_uri() . '/js/isotope.pkgd.min.js');
 
}
add_action('wp_enqueue_scripts' , 'iso');

FICHIER JS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
jQuery(document).ready(function ($) {
 
 
    $('.content-area').isotope({
        // options
        itemSelector: '.site-main',
        layoutMode: 'fitRows'
    });
 
    $('.tous').on("click",function(){
        $('.content-area').isotope({ filter: '*' });
    });
 
    $('.bouton_1').on("click",function(){
        $('.content-area').isotope({ filter: '.post-162 .post-159 .post-156 .post-153 .post-45' });
    });
 
    $('.bouton_2').on("click",function(){
        $('.content-area').isotope({ filter: '.post-47' });
    });
 
    $('.bouton_3').on("click",function(){
        $('.content-area').isotope({ filter: '.post-43' });
    });
 
 
});

Je pense qu'il faut rajouter du php mais je suis complètement bloquée...

Merci par avance.

Très bonne soirée.

**Watilin** · 16/02/2017, 03h03

Pas complètement sûr de ce qui se passe ici, car je ne suis pas très à l’aise avec Wordpress, mais :

Code PHP :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
 
wp_enqueue_script( 'tri', get_template_directory_uri() . '/js/principal.js');
 
}
add_action('wp_enqueue_scripts' , 'trier');
 
function isotope(){
 
wp_enqueue_script( 'iso', get_template_directory_uri() . '/js/isotope.pkgd.min.js');
 
}
add_action('wp_enqueue_scripts' , 'iso');

Il manque un bout au début, je suppose que c’est la fonction qui est censée s’appeler trier. Et à la fin, tu inscris une fonction 'iso' alors que la fonction que tu as déclarée juste au-dessus s’appelle isotope.

Pour que le code soit plus clair, essaye de ne pas donner à tes fonctions et à tes scripts des noms qui se ressemblent. Un nom de fonction devrait toujours être un verbe. Tu pourrais par exemple t’inspirer de la doc :

Code PHP :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
function bidule_enqueue_tri() {
  wp_enqueue_script( 'tri', get_template_directory_uri() . '/js/principal.js' );
}
 
function bidule_enqueue_iso() {
  wp_enqueue_script( 'iso', get_template_directory_uri() . '/js/isotope.pkgd.min.js' );
}
 
add_action( 'wp_enqueue_scripts' , 'bidule_enqueue_tri' );
add_action( 'wp_enqueue_scripts' , 'bidule_enqueue_iso' );

Où bidule est le nom du thème que tu utilises. Si tu ne sais pas ou ne veux pas utiliser le nom de ton thème, tu peux simplement mettre enqueue_tri. Toutefois, il vaut mieux préfixer tes noms pour réduire les chances de collision.

NB : normalement Worpress aurait dû remonter une erreur à propos d’un nom de fonction incorrect. Je ne sais pas où tu trouves / actives les erreurs de Wordpress, mais tu devrais sérieusement t’y pencher, ça te serait d’une grande aide.

**chokolatine35** · 16/02/2017, 10h16

Bonjour Watilin,

Merci pour tes conseils !! Malheureusement cela n'a pas fonctionné, je pense que le problème viendrait de ma syntaxe dans le header, je ne suis pas certaine qu'on puisse écrire du html simple dans le header sans php car dans le code source, mon code ne s'affiche pas.