Grâce au système de catégorie et de tags de WordPress, il est très facile d’afficher du contenu autre que celui par défaut. Après les nombreux thèmes “Magazine” affichant les articles d’une certaine catégorie ou mot clés beaucoup de blog ont commencé à les utiliser. Mais certains utilisateurs de WordPress voudrons également créer cet effet magazine sur leur blog en affichant du contenu très spécifique. Dans ce billet nous allons voir comment créer un vrai module et comment l”insérer dans votre colonne latérale ou votre page d’accueil.

Nous allons utiliser, tout simplement, la fonction “Query_Post” de WordPress et spécifier les différents éléments qu’on a besoin. Munissez -vous de votre client FTP et d’un éditeur de texte. Préparez également les différentes catégories (le nom et l’identifiant dans certain cas) ou mots clés de votre blog (identifiant). Le titre et le contenu seront coupés pour ne pas abimé l’architecture graphique et l’ergonomie de votre blog.

Description

Query_post permet de créer une boucle externe à la boucle d’origine de WordPress. Cette boucle personnalisé est plutôt intéressante puisqu’elle peut être insérée autant de fois que vous le souhaitez. Entièrement personnalisable il est très simple d’afficher n’importe quel contenu de votre blog et ainsi optimiser l’affichage et la navigation au sein de votre blog. Vos visiteurs seront ravis de pouvoir naviguer librement dans certaines sections. Query_post est surtout utilisé dans les thèmes “Magazine” ou encore dans des modules type “Featured” ou “Mise en avant“.

Ce module est vraiment simple et facile à insérer dans n’importe quel blog. Il vous suffit simplement de créer une catégorie ou mot clés (conseillé) pour ensuite afficher le contenu n’importe où sur votre blog. De plus, grâce à une simple fonction, il vous est possible de modifier le nombre de caractère à afficher de vos titres ou de la courte description de vos articles.

Les paramètres

Plusieurs paramètres sont possibles et permettent ainsi un meilleur filtrage du contenu. Chaque paramètre peut être combiné, augmenter sans saisse l’affichage précis de caques éléments de votre blog. Dans cet article nous allons utiliser quelques variables simple et facile à intégrer.

- Affichage des catégories (cat)
- Affichage des mots clés (tag)
- Utiliser la première partie de l’article (globale more)
- Un extrait du titre et du contenu (strlen et content_rss)
- Boucler la boucle (reset_query)
- L’ordre d’affichage des articles (orderby)

Afficher les articles des catégories

Mettons-nous au développement de votre module. Nous allons d’abord créer la boucle comprenant les informations des catégories ou mots clés à afficher. Pour afficher le contenu d’une seule catégorie il vous suffit de coller le code suivant en modifiant bien l’identifiant de votre catégorie et le nombre d’article à afficher. Le titre et le contenu seront complet. Pour trouver l’identifiant de vos catégories, allez dans l’onglet “Catégories” de votre administration et survoler celle que vous souhaitez utiliser. À la fin de l’adresse affichée vous trouverez l’identifiant de votre catégorie (cat_ID=149)

<div class="featured">
 <?php query_posts('cat=149&showposts=2&orderby=rand'); global $more; $more = 0;  ?>
 <?php while (have_posts()) : the_post(); ?>
	<p class="titre">
	 <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
	 <?php the_title(); ?>
         </a>
	</p>

	<p class="content">
	 <?php the_content(); ?>
	</p>

<?php endwhile;?>
<?php wp_reset_query(); ?>
</div>

Pour afficher plusieurs catégories il vous suffit d’ajouter une virgule et d’insérer un nouvel identifiant d’une autre catégorie. Remplacez la ligne contenant la fonction “query_post” par celle-ci.

<?php query_posts('cat=75,149&showposts=2&orderby=rand');?>

Afficher les articles des mots clés

Maintenant, nous allons afficher les articles contenant certains mots clés, un seul ou plusieurs. Grâce aux paramètres de base de WordPress nous pouvons afficher les articles contenant un ou plusieurs mots clés.

<div class="featured">
 <?php query_posts('tag=infos&showposts=2&orderby=rand');?>
 <?php while (have_posts()) : the_post(); ?>
	<p class="titre">
	 <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
	 <?php the_title(); ?>
     </a>
	</p>

	<p class="content">
	 <?php the_content(); ?>
	</p>

<?php endwhile;?>
<?php wp_reset_query(); ?>
</div>

Pour afficher plusieurs mots clés il vous suffit d’ajouter une virgule et d’insérer un autre mot clés. Remplacez la ligne contenant la fonction “query_post” par celle-ci.

<?php query_posts('tag=infos,astuces&showposts=2&orderby=rand');?>

Ajouter les paramètres

Après avoir vu comment afficher les articles de vos catégories et de vos mots clés, nous allons voir comment combiner simplement ces deux paramètres et ainsi optimiser l’affichage de certains contenus. Nous allons afficher les articles de la catégorie “75″ et “149″ contenant les mots clés “infos” et “astuces”. Remplacez la ligne contenant la fonction “query_post” par celle-ci.

<?php query_posts('tag=infos,astuces&cat=75,149&showposts=2&orderby=rand');?>

Optimiser l’affichage du titre et du contenu

Optimiser vos titres pour ne pas heurter l’ergonomie de votre blog est assez facile en fait. Au lieu d’afficher le titre et le contenu au complet, nous allons ajouter un code “coupant” le titre et le contenu après un certain nombre de caractère. Pour le contenu de l’article nous allons simplement utiliser la fonction “content_rss” et spécifier le nombre de mots à afficher.

<div class="featured">
 <?php query_posts('tag=infos,astuces&cat=75,149&showposts=2&orderby=rand');?>
 <?php while (have_posts()) : the_post(); ?>
	<p class="titre">
	 <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
	  <?php if(strlen($post->post_title)>40){echo substr($post->post_title,0,40).'...';}else{the_title();} ?>
     </a>
	</p>

	<p class="content">
         <?php the_content_rss('', TRUE, '', 60); ?>
	</p>

<?php endwhile;?>
<?php wp_reset_query(); ?>
</div>

Personnaliser votre module

Après le développement d’une tel module, il faut également songer à son apparence et bien évidemment à son emplacement. Concernant son emplacement je ne peux que vous conseillez de faire en fonction de votre thème.

.featured {
	width:400px;
	height:auto;
	color:#598494;
	font-family:Arial;
	font-size:11px;
	text-align:left;
}

.titre {
	margin: 0px;
	font-style:normal;
	font-size:20px;
}

.titre a, .titre a:visited {
	color:#4e6c78;
	text-decoration:none;
	font-size:20px;
}

.titre a:hover, .titre a:active {
	color:#6f94a2;
	text-decoration:none;
	font-size:20px;
}