Tri en Jquery pour wordpress
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:
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:
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:
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:
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:
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.
