L'informatique mobile
Un article au hasard: ChargementUn autre!
Chargement
Chargement en cours..
12
24
2009

[WP] Article aléatoire dynamique

Vous aurez sans doute remarqué que depuis quelques jours, aucun nouvel article n’a vu le jour par ici. Mais vous avez sans doute pu remarquer qu’il y a eu de nombreux ajouts et autres améliorations dans mon thème, y compris une petite touche d’AJAX dans la page d’accueil et dans le header. Pour ceux qui modifient leur thème, astuce.

En fait, l’idée est toute simple:

  • on crée une « Page Template », un modèle de page, et on y met ce qui doit être chargé dynamiquement
  • on crée une page vide (ou pas), utilisant le modèle ci-dessus, et on lui donne un nom « adapté »
  • on charge tout ça, de préférence avec un framework Javascript, pour ma part ce sera jQuery, que je trouve magnifiquement simple :-P
  • Et il n’y a pas de 4ème étape! C’est aussi simple que ça.

Pour le modèle de page, il faut ajouter le créer dans le dossier du thème, et ajouter ceci au début du fichier, fichier enregistré en .php, bien entendu:

1
2
3
4
5
<?php
/*
Template Name: le-nom-du-modèle
*/
?>

Ensuite, dans le corps du fichier, et bah on met ce que l’on veut charger! Par exemple, si l’on veut charger un article aléatoire:

1
2
3
4
5
<?php
query_posts('showposts=1&orderby=rand');
the_post();
?>
<a href='<?php the_permalink(); ?>'><?php the_title(); ?></a>

Et voilà le travail! Maintenant, il s’agit de charger ça dynamiquement, grâce à jQuery. Ainsi, par exemple, pour mon article aléatoire, il suffit de créer un div qui contiendra cet article:

1
2
3
4
<div id="randpost">
<span>Un article au hasard: </span>
<span id="randomPost"><img src="une-image-de-chargement" alt="Chargement" /></span>
<a href="#" id="another">Un autre!</a></div>

On attache ensuite le script à ce conteneur: Quand on cliquera sur « Un autre! », un autre article au hasard sera chargé:

1
2
3
4
5
$("#another").click(function(){
$("#randomPost")
.html("<img src='l-image-de-chargement-choisie-precedement' alt='Chargement' />")
return false;
});

On ajoute la ligne qui chargera le tout, plus quelque chose pour contourner un problème sous IE (encore lui..), qui met en cache l’article au hasard: on aurait alors toujours le même article, et donc c’est plus vraiment du hasard, pas vrai? :-P

1
.load("/le-nom-de-la-page/?cachebuster=" + Math.floor(Math.random()*10001));

Enfin, on ajoute une ligne pour avoir un premier article lorsque la page a fini de se charger:

1
$("#randomPost").load("/le-nom-de-la-page/");

Ce qui donne en tout:

1
2
3
4
5
6
7
$("#randomPost").load("/le-nom-de-la-page/");
$("#another").click(function(){
$("#randomPost")
.html("<img src="le-lien-de-l-image" alt="Chargement" />")
.load("/le-nom-de-la-page/?cachebuster=" + Math.floor(Math.random()*10001));
return false;
});

Et voilà le travail! Vous pourrez admirer ça en haut de cette page!

Laisser un commentaire