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.