Ce module fonctionne grâce à un bout de code que je vous avais publié ici ;
Lire : Afficher les miniatures des articles de votre blog. Ce code récupère la première image que vous avez envoyée sur votre serveur pour illustrer votre article ou votre page. Cependant, il faudra configurer la taille des miniatures dans les réglages de WordPress.

La bonne méthode

Pour afficher les articles similaires en image, il vous suffit de coller le code suivant, là où vous souhaitez apparaitre ce nouveau module. Une fonctionnalités regroupant beaucoup de lignes de codes, mais cela vous permet, selon les mots-clefs de vos articles d’afficher les relations. Nous avons ajoutés une fonctionnalité pour afficher l’image de présentation des articles. Entièrement personnalisable, il vous suffit de modifier la présentation pour avoir le résultat voulu.

<?php
  $backup = $post;  //Sauvegarde des objets
  $tags = wp_get_post_tags($post->ID);
  $tagIDs = array();
  if ($tags) {
  $tagcount = count($tags);
  for ($i = 0; $i < $tagcount; $i++) {
  $tagIDs[$i] = $tags[$i]->term_id;
}

  $args=array(
  'tag__in' => $tagIDs,
  'post__not_in' => array($post->ID),
  'showposts'=>4,
  'orderby'=>rand
);

  $my_query = new WP_Query($args);
  if( $my_query->have_posts() ) {
  while ($my_query->have_posts()) : $my_query->the_post();
?>

<?php
  global $post;
  $args = array(
  'post_type' => 'attachment',
  'post_mime_type' => 'image',
  'numberposts' => 1,
  'orderby' => 'menu_order',
  'order' => 'ASC',
  'post_parent' => $post->ID
);

  $images = get_posts($args);
?>

<?php // 4. Loop through the images and show them
  if($images)
{
  foreach($images as $image)
{
  echo wp_get_attachment_image($image->ID, $size='medium');
      }
}
  else
      {
  echo '<img src="http://geekeries.fr/medium.png" title="" alt="" />';
}
?>
	<p>
		<a href="<?php the_permalink() ?>" title="Liens vers <?php the_title_attribute(); ?>">
			<?php the_title(); ?>
		</a>
	</p>

L’ancienne méthode

Tout d’abord, il faut créer la fonction présentée dans l’article que je cite plus haut. Cette fonction est à ajouter dans le fichier “functions.php” de votre thème entre les balise habituelle de PHP : . Il n’y a pas grand-chose à modifier, a moins que vous préfériez personnaliser a votre sauce l’affichage de l’image ou rajouté des fonctions ! Si c’est le cas n’hésitez pas à partager ! Cette fonction ne sert qu’à récupérer la dernière image de l’article concerné. Par la suite nous allons appeler la fonction pour simplement afficher l’image des articles similaires.

function getpostgk_img($postId) {
$iPostID = $postId;

$arrImages =& get_children('post_type=attachment&post_mime_type=image&post_parent=' . $iPostID );
if($arrImages) {

$arrKeys = array_keys($arrImages);

foreach($arrImages as $oImage) {
$arrNewImages[] = $oImage;
}

for($i = 0; $i < sizeof($arrNewImages) - 1; $i++) {
for($j = 0; $j < sizeof($arrNewImages) - 1; $j++) {
if((int)$arrNewImages[$j]->menu_order > (int)$arrNewImages[$j + 1]->menu_order) {
$oTemp = $arrNewImages[$j];
$arrNewImages[$j] = $arrNewImages[$j + 1];
$arrNewImages[$j + 1] = $oTemp;
}
}
}

$arrKeys = array();
foreach($arrNewImages as $oNewImage) {
$arrKeys[] = $oNewImage->ID;
}

$iNum = $arrKeys[0];
$sThumbUrl = wp_get_attachment_thumb_url($iNum);

$sImgString ='<img src="' . $sThumbUrl . '" width="60" height="60" alt="" title="" />';

echo $sImgString;
}
}

Commençons maintenant la modification de votre thème. Principalement, ce module est utilisé dans la page d’article ou de pages de WordPress, c’est-à-dire “single.php“. Le code est à placer dans la boucle de wordpress, pour la récupération de l’ID de l’article l’article et ainsi généré la liste des articles similaires grâces aux catégories. Pour une optimisation de votre fichier PHP je vous conseille quand même de créer un nouveau fichier PHP dans le dossier de votre thème.

Ce fichier contiendra le code PHP et ainsi il sera beaucoup plus simple d’appeler le module n’importe où sur votre blog. Le code qui vous permet d’appeler un fichier de votre dossier thème se trouve à la fin de l’article. Par la suite, vous pouvez personnaliser l’affichage des images, changer les liens, etc. Par défaut, le titre du lien de l’image contient un petit extrait de l’article concerné, précédé du titre de l’article. Mais, maintenant voici la petite astuce du jour !

<?php
$backup = $post;
$tags = wp_get_post_tags($post->ID);
$tagIDs = array();
if ($tags) {
$tagcount = count($tags);
for ($i = 0; $i < $tagcount; $i++) {
$tagIDs[$i] = $tags[$i]->term_id;
}
$args=array(
'tag__in' => $tagIDs,
'post__not_in' => array($post->ID),
'showposts'=>5,
'orderby'=>rand
);
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
while ($my_query->have_posts()) : $my_query->the_post(); ?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Lire l'article : <?php the_title_attribute(); ?>"><?php getpostgk_img($post->ID); ?></a>

<?php endwhile;  } }  $post = $backup; wp_reset_query(); ?>

Comme dit plus haut, voici une petite astuce pour inclure un fichier de votre dossier thème dans single.php ou n’importe qu’elle autre fichier. Si par exemple le fichier contenant le code précédant s’appelle “related.php”, nous allons utiliser cette fonction. (Uniquement pour ceux qui veulent un code propre)

<?php include (TEMPLATEPATH . "/related.php"); ?>

L’introduction

Tout d’abord et pour commencer, nous allons essayer de décrire l’utilité d’une page d’options. Cette page, accessible depuis le panel d’administration de votre blog vous permet, tout simplement, d’éditer n’importe quel contenu de votre blog, dynamiquement. Nous allons tout simplement mettre en place un formulaire de saisie de données, dans une page et bien évidemment créer un nouveau menu pour accéder à votre page d’options.

Soyons clairs, la première partie de ce tutoriel est très basique. Nous allons définir un texte à afficher. Parfait pour les débutants qui souhaitent connaître l’utilisation des informations pour développer par la suite quelque chose de plus complexe. Cependant, nous allons aller un peu plus loin à l’étape 5.

La préparation

Il faut en fait éditer le fichier “functions.php”, présent ou à créer dans le dossier de votre thème WordPress. Ensuite, il faut créer un dossier “functions” (par exemple) qui contiendra le ou les fichier(s) d’administration de vos données. Voici le schéma que nous allons obtenir.

• lights (nom de votre thème)
• – functions.php
• — functions (dossier)
• —- index.php

Partie 1 – Développement des premières fonctions.

Tout d’abord, vous devez créer un dossier “functions” (ou autre) vous vous devez placer dans le dossier de votre thème WordPress. Dans ce dossier, vous devez créer un fichier. Nous allons le nommer “index.php”. Il contiendra les fonctions principales de votre page d’options et permettra par la suite d’ajouter d’autre page d’options.

Dans le fichier “index.php” du dossier “functions” que vous venez de créer, nous allons lui ordonner de créer un menu et nous allons renseigner les paramètres de bases de votre page d’options. Coller les lignes ci-dessous dans le fichier.

add_action('admin_menu', 'GkMenu');

function GkMenu() {
	add_menu_page('Paramètres du blog', 'Paramètres', 'administrator', 'Blog', 'GkLtextes', 'http://www.geekeries.fr/gk.png', '3');
	add_action( 'admin_init', 'register_mysettings' );
}

function register_mysettings() {

	//Paramètres de la page
	register_setting( 'gkltextes', 'txt1' );
	register_setting( 'gkltextes', 'txt2' );

}

• “Gk.png”

est en fait l’icône de votre menu. Il vous suffit de modifier l’adresse pour afficher vôtre icône. La taille doit être de 16×16.

• “txt1”

est essentiel et doit être unique ! Elle permet d’enregistrer, récupérer et d’afficher la valeur envoyé et enregistrée depuis la page d’options.

• “Blog”

permet de définir l’adresse de la page d’option, vous pouvez la modifier.

• “3”

définie le positionnement du nouveau menu. Dans notre cas, il sera placé en dessous du module “Tableau de bord”, juste avant le séparateur.

• “GkLtextes“

est le nom de la fonction qui regroupe les informations de la page d’options.

Partie 2 – Création de la page d’options.

En espèrent que cela est compréhensible, passons à la suite. Toujours dans le même fichier ‘index.php” du dossier “functions” et à la suite du code précédemment cité, il faut maintenant définir notre fonction qui contiendra la page d’option. À la suite du code, coller l’ensemble des lignes suivantes.

function GkLtextes() {
if ( $_REQUEST['updated'] )
echo '
<div id="message" class="updated">
<p>C'est sauvegardé :)</p>
</div>
';
?>

<div class="wrap">
<div id="icon-edit" class="icon32"></div>

<h2>Les options du blog</h2>

<table class="widefat">
<thead>
	<tr>
		<th>Accueil</th>
	</tr>
</thead>

<tbody>
   <tr>
     <td>
		<form method="post" action="options.php">
		<?php settings_fields( 'gkltextes' ); ?>
		<input type="text" name="txt1" value="<?php echo get_option('txt1'); ?/>" />
	</form></td>

 </tr><tr>
     <td>
		<form method="post" action="options.php">
		<?php settings_fields( 'gkltextes' ); ?>
		<input type="text" name="txt2" value="<?php echo get_option('txt2'); ?/>" />
	</form></td>

   </tr>
</tbody>
</table>

	<p class="submit">
		<input type="submit" class="button-primary" value="<?php _e('Save Changes') ?/>" />
	</p>

</div>

<?php } ?>

• “table”

est un tableau. Il sera présent ou non (à vous de voir) sur votre page d’options. Il reprend bien évidemment le style des modules de bases de WordPress.

• “gkltextes”

est donc la valeur de base de vos options. Elle est unique et doit être présente avant chaque utilisation d’un nouveau formulaire.

• “txt1” et “txt2“

sont également des valeurs uniques. Elles doivent être renseignées deux fois pour chaque nouveaux formulaires. Dans l’attribut “value” (formulaire) et “name“. Cela permet d’enregistrer le texte que vous avez renseigné dans le formulaire.

• “updated”

est en fait l’attribut qui permet d’afficher un message de confirmation si l’ensemble de vos données, lors de la saisie et l’envoi des données textes.

Nous avons maintenant une page d’options dynamique, très simple d’utilisation. Vous pouvez facilement dupliquer les formulaires d’envoie de nouvelles données pour cela il faudra bien faire attention à ne pas oublier d’ajout votre nouvelle valeur dans le haut de votre fichier “index.php” du dossier “functions“. Il vous suffit d’ajouter cette ligne à la suite logique de la fonction “register_setting“.

register_setting( 'gkltextes', 'nouveau_texte' );

Vous pouvez maintenant dupliquer le formulaire d’envoie convenablement et sans erreur. Voici ce que vous devez copier et coller. Vous pouvez bien évidemment respecter la structure du tableau pour créer une page d’options parfaite.
Pour cela rendez-vous à la partie 4.

 <tr>
     <td>
		<form method="post" action="options.php">
		<?php settings_fields( 'gkltextes' ); ?>
		<input type="text" name="nouveau_texte" value="<?php echo get_option('nouveau_texte'); ?/>" />
	</form></td>

   </tr>

Partie 3 – Utilisation du fichier functions.php

Nous y voilà, le fichier “functions.php” de votre thème WordPress permet tout simplement d’injecter toutes les préférences et fichiers précédemment cités. Ouvrez le fichier et copiez le bout de code suivant juste après la première ligne la boucle php.

require_once (TEMPLATEPATH . '/functions/index.php');

Partie 4 – Un tableau d’informations complet

Pour en revenir sur l’affichage du tableau (qui n’est pas obligatoire, mais ceci est un exemple), voici comment adapté plusieurs colonnes avec plusieurs formulaires pour des informations précises. Il vous suffit de remplacer le tableau “widefat” présent dans le code présenté précédemment par celui-ci. Dans ce code, presque final, nous avons quatre fonctions pour quatre colonnes et une seule rangée.

<table class="widefat">
<thead>
	<tr>
		<th>Accueil</th>
		<th>Colonne</th>
		<th>Articles</th>
		<th>Commentaires</th>
	</tr>
</thead>

<tbody>
   <tr>
     <td>
		<form method="post" action="options.php">
		<?php settings_fields( 'gkltextes' ); ?>
		<input type="text" name="txt1" value="<?php echo get_option('txt1'); ?/>" />
	</form></td>

     <td>
		<form method="post" action="options.php">
		<?php settings_fields( 'gkltextes' ); ?>
		<input type="text" name="txt2" value="<?php echo get_option('txt2'); ?/>" />
	</form></td>

     <td>
		<form method="post" action="options.php">
		<?php settings_fields( 'gkltextes' ); ?>
		<input type="text" name="txt3" value="<?php echo get_option('txt3'); ?/>" />
	</form></td>

	   <td>
		<form method="post" action="options.php">
		<?php settings_fields( 'gkltextes' ); ?>
		<input type="text" name="txt4" value="<?php echo get_option('txt4'); ?/>" />
	</form></td>

   </tr>
</tbody>
</table>

Partie 5 – Ajout d’une autre page d’options

Cette étape n’est pas très complexe, mais de dispose pas d’une grande utilité. Cela dépend de votre besoin.
Pour effectuer cette opération, nous devons revenir en arrière et éditer le fichier “index.php” du dossier “functions”. Nous allons ajouter une nouvelle fonction, ordonnant à WordPress d’attribuer un sous-menu à celui de base, que nous et vous venons de créer. Repérez la ligne suivante.

add_menu_page('Paramètres du blog', 'Paramètres', 'administrator', 'Blog', 'GkLtextes', 'http://www.geekeries.fr/gk.png', '3');

Après cela, il suffit de coller la ligne suivante et le sous-menu sera automatiquement attribué à votre module grâce à la valeur “Blog”.

add_submenu_page('Blog','Autres', 'Autres', 'administrator', 'Autres', 'GkAutres');

Restons dans le même fichier. Nous devons maintenant créer et dissocier les deux paramètres de la page d’options “GkLtextes” et “GkAutres“. Pour cela, rendez-vous à la fonction “register_mysettings” et rajouter (autant de fois qu’il est nécessaire) la ligne suivante. Cela permet d’avoir deux paramètres différents.

register_setting( 'gk_autres', 'autre_1' );

• “autre_1″

est à modifier à chaque duplication de la ligne, elle doit être à chaque fois unique.

• “gk_autres”

est à utiliser avant chaque nouveaux formulaires texte. Comme expliqué précédemment.

Partie 6 – Développement de la deuxième page d’options.

Nous pouvons maintenant créer la deuxième page. Le fichier doit être dans le même dossier “functions” que “index.php“. Ce n’est pas obligatoire, mais un minimum d’organisation est nécessaire pour une bonne compréhension. Nous allons donc créer le fichier “autres.php” (c’est un exemple) contenant les lignes suivantes.

<?php

function GkSub() {
add_action( 'admin_init', 'register_mysettings' );
}

function GkAutres() {
if ( $_REQUEST['updated'] )
echo '
<div id="message" class="updated">
<p>C'est sauvegardé :)</p>

';

?>

<div class="wrap">
<div id="icon-post" class="icon32"></div>

<h2>Les autres options du blog</h2>

		<form method="post" action="options.php">
		<?php settings_fields( 'gk_autres' ); ?>
		<input type="text" name="autre_1" value="<?php echo get_option('autre_1'); ?/>" />

	<p class="submit">
		<input type="submit" class="button-primary" value="<?php _e('Save Changes') ?/>" />
    </p>

	</form>
</div>

<?php } ?>

Partie 7 – Modification du fichier “functions.php”.

Maintenant que nous avons ajoutés un sous menu (vous pouvez en ajouter autant que vous voulez), il vous faut modifier le fichier “functions.php” de votre thème WordPress. En effet, vous devez simplement appeler votre nouvelle page d’options, pour cela coller la ligne suivante.

require_once (TEMPLATEPATH . '/functions/autres.php');

Partie 8 – Afficher les données enregistrées.

L’une des parties les plus importantes, puisque cela est l’essentiel d’une page option. Afficher les données et extrêmement simple. Il vous suffit de renseigner la valeur unique du formulaire (étape 1, register_setting) dans la fonction suivante. À coller là où vous souhaitez voir apparaitre l’information.

<?php echo get_option('txt1'); ?>

Si vous souhaitez récupérer une information enregistrées directement dans une variable de type “query”, il vous suffit de coller la balise suivante, sous la forme présenté.

' '.get_option('txt1');.' '

En voici un exemple d’intégration.

<?php
	//The Query
	query_posts('showposts='.get_option('sidebar_first_left_count').'');

	//The Loop
	if ( have_posts() ) : while ( have_posts() ) : the_post();
?>

	<a href="<?php the_permalink();?>" title"<?php the_title(); ?>">
		<?php the_title(); ?>
	</a>

<?php endwhile; else: endif;
//Reset Query
wp_reset_query();
?>

Partie 9 – Les éléments graphiques (icône, tableau)

Étant dans le panel d’administration de WordPress, vous pouvez bien évidemment utiliser son style graphique. Nous avions utilisés une icône personnalisée pour le menu, maintenant nous pouvons utiliser les icônes par défauts de WordPress, le tableau de base comme dans nos exemples ou encore les boutons stylisée.

Tout d’abord, nous devons appeler la balise principale.
Elle permet d’avoir une bonne structure pour notre page d’options.

<div class='wrap'>
Le contenu de notre page d'options.
</div>

Les boutons :

//Bouton principal
<p class="submit">
	<input type="submit" class="button-primary" value="<?php _e('Enregistrer') ?/>" />
</p>

//Lien
<a class="button-secondary" href="#" title="#">Texte</a>

//Autre bouton
<p class="submit">
	<input type="submit" value="<?php _e('La recherche'); ?/>" class="button-secondary" />
</p>

Afficher un bouton pour illustrer la page d’options :

<div id="icon-ms-admin" class="icon32"></div>
<div id="icon-edit" class="icon32"></div>
<div id="icon-upload" class="icon32"></div>
<div id="icon-themes" class="icon32"></div>
<div id="icon-plugins" class="icon32"></div>
<div id="icon-users" class="icon32"></div>
<div id="icon-tools" class="icon32"></div>
<div id="icon-options-general" class="icon32"></div>
<div id="icon-link-manager" class="icon32"></div>
<div id="icon-edit-pages" class="icon32"></div>
<div id="icon-edit-comments" class="icon32"></div>

Insérer un tableau vierge :

<table class="widefat">
<thead>
	<tr>
		<th>Menu</th>
		<th>Un autre menu</th>
		<th>Encore un</th>
		<th>Le dernier</th>
	</tr>
</thead>
<tbody>
   <tr>
     <td>Le texte 1</td>
     <td>Le texte 2</td>
     <td>Le texte 3</td>
     <td>Le texte 4</td>
   </tr>
</tbody>
</table>

Présentation

Le code présenté a été tout simplement trouvé sur le Codex de WordPress. Il a été modifié pour optimiser le besoin. La possibilité d’avoir les mots aux pluriels est également présente. Nous avons alors trois variables qui nous permettrons d’optimiser l’affiche des nouvelles informations dans le module “Aujourd’hui” du tableau de bord de votre installation WordPress

• $types // Nous permet simplement de définir le nom du type de contenu.
• $nbr_ // Le nom du type de contenu au singulier
• $nbr_s // Le nom du type de contenu au pluriel

La fonction

La fonction ci-dessous est à insérer dans le fichier “functions.php” de votre thème WordPress. Veuillez alors indiquer les variables de vos types de contenus dans les attributs cités plus haut. La fonction affiche également les contenus de vos modules en attentes de relecture.

add_action('right_now_content_table_end', 'GkTypes');

function GkTypes() {
	$types = 'decouvertes';

        if (!post_type_exists(''.$types.'')) {
             return;
        }
        $num_posts = wp_count_posts( ''.$types.'' );

        $nbr_s = 'Découvertes';
        $nbr_ = 'Découverte';

        $num = number_format_i18n( $num_posts->publish );
        $text = _n('' . $nbr_ . '', '' . $nbr_s . '', intval($num_posts->publish) );
        if ( current_user_can( 'edit_posts' ) ) {
            $num = "<a href='edit.php?post_type=$types'>$num</a>";
            $text = "<a href='edit.php?post_type=$types'>$text</a>";
        }
        echo '<td class="first b">' . $num . '</td>';
        echo '<td class="t">' . $text . '</td>';

        echo '';

        if ($num_posts->pending > 0) {
            $num = number_format_i18n( $num_posts->pending );
            $text = _n( '' . $nbr_ . ' en attente', '' . $nbr_s . ' en attentes', intval($num_posts->pending) );
            if ( current_user_can( 'edit_posts' ) ) {
                $num = "<a href='edit.php?post_status=pending&post_type=$types'>$num</a>";
                $text = "<a class=\"waiting\" href='edit.php?post_status=pending&post_type=$types'>$text</a>";
            }
            echo '<td class="first b">' . $num . '</td>';
            echo '<td class="t">' . $text . '</td>';

            echo '';
        }
}

L’affichage

Le module “Aujourd’hui” s’affiche sur deux colonnes. Si vous avez beaucoup de types de contenus et que vous souhaitez établir un affichage parfait sur deux colonnes, il vous suffit de modifier la variable de “action” de la première ligne disponible dans le code cité plus haut.

Afficher les statistiques de vos types de contenus sur la colonne de gauche (par défaut)

add_action('right_now_content_table_end', 'GkTypes');

Afficher les statistiques de vos types de contenus sur la colonne de droite (discussions)

add_action('right_now_discussion_table_end', 'GkTypes');

Pour le mettre en place, il vous suffit d’envoyer le fichier “timthumb.php” sur l’installation de votre blog WordPress (serveur) et d’ajouter ce code dans l’adresse de votre image. Nous devons toutefois citer dans cette adresse le lien direct du fichier “timthumb.php” suivi du lien de votre image. Par la suite vous devez y ajouter les paramètres suivants en fin d’adresse pour enfin effectuer les changements. Une fois cet outil en place et la compréhension de son fonctionnement il vous sera facile t’intégrer plusieurs tailles d’images.

h=150&w=150&zc=1&q=100

Plusieurs solutions sont disponibles. La taille et la largeur de l’image bien évidemment, mais également la qualité de l’image et le zoom effectué sur la dite image. Pour utiliser la qualité maximale de votre image il vous suffit de renseigner en fin d’adresse l’attribut “q=100″. Concernant le zoom, il vous suffit de renseigner la valeur suivante “zc=0″ ou “1″. Nous allons maintenant combiner les différentes valeurs ce qui nous donne une adresse plutôt complète et entièrement fonctionnelle.

<img src="/scripts/timthumb.php?src=/images/whatever.jpg&h=150&w=150&zc=1" />

Qualité du script : [rating=4]
Version améliorée : Cliquez ici
Voici un exemple complet : sur le site

Téléchargement et documentation du script : Cliquez ici

WP Include File n’affiche pas le code source d’un fichier donné, mais exécute bien le fichier complet, s’il s’agit bien évidemment de contenu dynamique php. Vous pouvez donc par exemple afficher, d’une façon dynamique les statistiques personnalisés de votre blog WordPress ou les articles similaires selon l’article en question depuis un fichier de thème. Chaque partie de votre thème peut être insérée dans vos article sans contrainte. Ce plugin est plutôt destiné aux développeurs ou aux personnes plus expérimenter, pouvant ainsi jouer avec du contenu dynamique dans leurs articles.

Utilisation

Une fois le plugin configuré (choix du répertoire), il vous suffit simplement de coller cette balise dans votre article contenant le nom exacte de votre fichier.

[include file="Twitter.php"]

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;
}

DigWp nous offres un article très complet concernant l’affichage des images. Grâce à de simples fonctions à insérer dans le fichier “functions” de votre thème, il est possible d’afficher et de personnaliser une galerie contenant les images de vos articles. Plutôt pratique pour les sites d’hôtels, blog photos, ou encore blog professionnel affichant beaucoup d’images dans leurs articles.

Le fonctionnement

À la fin de son article, il donne une fonction complète de quelques lignes vous permettant d’afficher n’importe valeur de vos images. On peut par exemple afficher : l’adresse de l’image, l’adresse de la page contenant l’image (attachement), le nom de l’image, l’adresse de l’article, l’image (code html). Le mieux étant d’afficher l’image (miniature) avec l’adresse de l’image en taille réelle et en option (tout dépend de votre style graphique) le titre de l’image ou de l’article.

La fonction

Voici la fonction vous permettant tout cela. À insérer dans le fichier “functions.php” de votre thème WordPress. Quelques fonctions ne vous sont pas nécessaires. Il vous suffit de les supprimer ou de les garder au cas où…

function attachment_toolbox($size = thumbnail) {

	if($images = get_children(array(
		'post_parent'    => get_the_ID(),
		'post_type'      => 'attachment',
		'numberposts'    => -1, // Le nombre d'images (-1 = toutes)
		'post_status'    => null,
		'post_mime_type' => 'image', // Le type
	))) {
		foreach($images as $image) {
			$attimg   = wp_get_attachment_image($image->ID,$size); // Code html brut de l'image
			$atturl   = wp_get_attachment_url($image->ID); // Adresse de l'image en taille réelle
			$attlink  = get_attachment_link($image->ID); // Adresse de la page de l'image
			$postlink = get_permalink($image->post_parent); // Adresse de l'article
			$atttitle = apply_filters('the_title',$image->post_title); //  Le titre de l'article

			echo '<a href="'.$atturl.'">'.$attimg.'</a>'; // Affiche les données
		}
	}
}

Utilisation

Dans le code précédé nous avons affiché l’image (miniature) avec le lien de l’image réelle. Si vous souhaitez personnaliser les différents éléments il vous suffit simplement de modifier les variables.

Nous avons en fait cinq variables différentes : attimg – atturl – attlink – postlink et atttitle. Vous pouvez facilement modifier les variables. Pour afficher le titre de l’image tout en gardant l’image et le lien il vous suffit d’ajouter la variable “atttitle”. Remplacer la ligne 17 – echo… – par celle-ci :

echo '<a href="'.$atturl.'">'.$attimg.'</a><br />'.$atttitle.';

Installation du code

Une fois le fichier “functions.php” enregistré il vous suffit simplement de coller le code suivant là où vous souhaitez afficher la galerie. Vous pouvez bien évidemment son affichage en ajoutant une simple “div“.

<div class="galeriegk">
<?php attachment_toolbox('thumbnail'); ?>
</div>

Le style graphique

Vous pouvez par exemple utiliser cette feuille de style pour personnaliser votre galerie. Les bordures de vos images seront arrondies (en option). L’apparence et les couleurs devront tout-de-même être en parfaite harmonie avec le reste de votre blog.

.galeriegk {
background-repeat: repeat-x;
padding: 10px;
margin: 10px 0 0px 30px;
width: 574px;
background-color: #EFEFEF;
color: #FFFFFF;
}

.galeriegk img {
height: auto;
overflow: hidden;
padding: 5px;
background-color: #c9d7d8;
-webkit-border-bottom-left-radius: 3px 3px;
-webkit-border-bottom-right-radius: 3px 3px;
-webkit-border-top-left-radius: 3px 3px;
-webkit-border-top-right-radius: 3px 3px;
float: left;
margin-bottom: 10px;
margin-top: 0px;
margin-left: 10px;
}

Découvrir d’autres méthodes

Je vous propose de découvrir deux autres méthodes pour pouvoir essayer ou étudier une autre façon que celle présentée dans cet article. À vous de choisir la bonne méthode pour votre blog.

Le module pouvant être placé là où vous le souhaitez, après le deuxième, troisième ou le quatrième article. L’affichage dépendra exclusivement du nombre d’article affiché sur la page d’accueil de votre blog. Le code en lui-même est fait pour afficher le contenu sur toutes les pages après x articles. Ce qui permet pour les utilisateurs visitant les pages d’accéder au module.

La structure

En elle-même, la structure est plutôt simple. Il n’y a pour le moment aucune intégration dans un thème WordPress basique. À la cinquième lignes nous avons un chiffre. Par défaut “0” est en fait la valeur permettant d’ajouter le contenu après l’article. Si nous mettons “1” le contenu ou la publicité sera affichée après le deuxième article.

<?php if (have_posts()) : ?>
	<?php $gkpost = 0 ?>

	<?php while (have_posts()) : the_post(); ?>
	<?php if ($gkpost == 0) : ?>
		Textes + informations
			<?php else : ?>
		Textes sans informations
	<?php endif; ?>

<?php $gkpost++; ?>

<?php endwhile; ?>
	Navigation
<?php else : ?>
	Erreur
<?php endif; ?>

Repérez

- Le début de la boucle (if (have_posts()) :)
- La récupération des données (while (have_posts()) : the_post();)
- Le bloc contenant les variables permettant d’afficher le titre et le contenu de vos articles.
- La pagination (navigation) des articles.

L’intégration

Une fois que vous avez repéré l’essentielle, il est très facile l’intégration le code. Par défaut, nous allons modifier le fichier “accueil” de votre thème (index.php), mais vous pouvez bien évidemment modifier d’autre fichier, tout dépendra de votre degré d’innovation.

<?php get_header(); ?>

	<div id="content" class="narrowcolumn" role="main">

	<?php if (have_posts()) : ?>
		<?php $gkpost = 0 ?>

		<?php while (have_posts()) : the_post(); ?>

			<div>
				<h2>
					<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">
						<?php the_title(); ?>
					</a>
				</h2>

				<?php if ($gkpost == 0) : ?>
				<div class="entry">
					<?php the_content('Lire la suite »'); ?>
				</div>

				<div class="infos"><h2>Informations ou publicités</h2></div>

				<?php else : ?>

				<div class="entry">
					<?php the_content('Lire la suite »'); ?>
				</div>

			<?php endif; ?>
				<?php $gkpost++; ?>

			</div>

 		<?php endwhile; ?>

		<div class="navigation">
			<div class="alignleft"><?php next_posts_link('« Articles suivants') ?></div>
			<div class="alignright"><?php previous_posts_link('Articles précédent »') ?></div>
		</div>

	<?php else : ?>

		<h2 class="center">Erreur</h2>

	<?php endif; ?>

	</div>

<?php get_sidebar(); get_footer(); ?>

Certes, des plugins wordpress existent, permettant de créer ce genre de boite de dialogue, mais pourquoi s’embêter avec du code en plus quand les fichiers sont déjà disponibles sur votre serveur, prêt à être utilisé. Nice2All nous donne cette petite technique qui se tient en trois lignes, puis, une simple classe à ajouter dans les balise “a href” de vos liens.

Tout d’abord, insérez ces trois lignes dans votre fichier “header.php” juste avant la balise “wp-head”

<?php wp_enqueue_style('thickbox'); ?>
<?php wp_enqueue_script('jquery'); ?>
<?php wp_enqueue_script('thickbox'); ?>

Dans vos articles, lorsque vous voulez activer l’effet d’agrandissement en ajax, il vous suffit d’ajouter la balise “class=”thickbox” au lien de votre miniature. Nous avons donc ce résultat.

<a class="thickbox" href="image-full.jpg"><img title="Titre" src="image-mini.jpg" alt="Titre 2" width="150" height="150" /></a>

Ce système est présent sur ce blog depuis hier, et vous permet d’afficher deux modes de vu des articles : un affichage normal et un affichage par vignettes suivi d’un court extrait de l’article. Utilisant la fonction présenté dans cet article, il est donc très simple d’afficher une vignette correspondant à l’article. Cependant, certains articles n’en contiennent pas. Cet article vous montrera donc comment changer la vue principale de votre blog, mais également comment afficher les miniatures de vos articles suivi d’un extrait. Si l’un de vos articles n’a pas d’image, il vous suffit de renseigner celle par défaut dans la fonction suivante.

La fonction pour afficher les miniatures

Voici la fonction à ajouter dans votre fichier “functions.php“. Pour modifier la taille de l’image il vous suffit de modifier les balises “width” et “hight”. La dernière ligne de cette fonction permet d’afficher une image si l’article n’en a pas. C’est le cas quand on re-utilise une image d’un autre article, l’image n’est donc pas joint à l’article. Il vous suffit de modifier l’url. Ce code est utile, seulement si vous souhaitez afficher vos articles sous forme de vignette…

function getpostgk_img($postId) {
$iPostID = $postId;

$arrImages =& get_children('post_type=attachment&post_mime_type=image&post_parent=' . $iPostID );
if($arrImages) { 

$arrKeys = array_keys($arrImages); 

foreach($arrImages as $oImage) {
$arrNewImages[] = $oImage;
}

for($i = 0; $i < sizeof($arrNewImages) - 1; $i++) {
for($j = 0; $j < sizeof($arrNewImages) - 1; $j++) {
if((int)$arrNewImages[$j]->menu_order > (int)$arrNewImages[$j + 1]->menu_order) {
$oTemp = $arrNewImages[$j];
$arrNewImages[$j] = $arrNewImages[$j + 1];
$arrNewImages[$j + 1] = $oTemp;
}
}
}

$arrKeys = array();
foreach($arrNewImages as $oNewImage) {
$arrKeys[] = $oNewImage->ID;
}

$iNum = $arrKeys[0];
$sThumbUrl = wp_get_attachment_thumb_url($iNum); 

$sImgString ='<img src="' . $sThumbUrl . '" width="150" height="150" alt="" title="" />'; 

echo $sImgString;

}

else 

{ 

echo '<img src="/aucuneimage.png" width="150" height="150" alt="Article sans image" />'; 

}
}

Le module “Changer de vue” !

Voici maintenant le début de la modification de votre thème : nous vous conseillons de faire des sauvegardes de vos fichiers, car vous allez travailler directement sur votre fichier “index.php”. D’abord, il faut insérer le code suivant aux premières lignes de votre fichier “index.php”. Nous allons ouvrir une session pour votre visiteurs et lui permettre de switcher entre les différents modes d’affichages. Vous devez renseigner l’url de votre blog à la ligne 19 et 24. Nous déclarons “get_header” pour afficher le haut de votre blog, si vous affichez, comme moi, le header puis la sidebar il suffit d’ajouter “get_sidebar” après la fonction header.

<?php
session_start();

if(isset($_SESSION['display']))
{
	$ap = $_SESSION['display'];
}
else
{
	$_SESSION['display'] = 1;
	$ap = 1;
}

if(isset($_GET['ap']))
{
	if($_GET['ap']==1)
	{
		$_SESSION['display']=1;
		header('Location: http://urlblog.com');
	}
	if($_GET['ap']==0)
	{
		$_SESSION['display']=0;
		header('Location: http://urlblog.com');
	}
}

get_header(); ?>

Juste avant le commencement des “div” de vos articles, insérez ce code. Celui-ci permet de créer le premier mode d’affichage, la version 0 ou la version normal du blog.

<?php //Version Normal
if($ap==1)
{
	echo '<a href="?ap=0">Afficher la version modifiée !';

	{ while(have_posts()) : the_post();
?>

Après ces quelques lignes de code, il vous suffit de coller l’affichage basique de votre blog, ou d’en créer un autre. Libre à vous de créer une nouvelle structure. Voilà, la première partie est fini… maintenant nous allons créer la deuxième en ajoutant ce bout de code. Ce code permet d’afficher le deuxième mode d’affichage s’il est sélection dans la section. En d’autres termes, si vous avez cliqué sur le lien activant cet affichage.

<?php
	}
}
//Autre Version
elseif($ap==0)
{ ?>

<a href="?ap=1">Afficher la version Normal !</a>

Maintenant il vous suffit de mettre le code que vous souhaitez. Je vous donne un exemple. Si vous souhaitez par exemple afficher, comme sur ce blog, une vignette et un extrait de l’article il vous suffit d’intégrer ces quelques lignes dans les divs qui construisent l’architecture de vos articles. La première ligne correspond à l’image, la deuxième correspond à l’extrait de l’article et la troisième permet de faire un lien direct vers l’article. Vous pouvez également faire le lien sur l’image. La dernière ferme la boucle définitivement.

<?php getpostgk_img($post->ID); ?>
<?php the_content_rss('', TRUE, '', 90); ?>
<strong><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">Lire cet article</a></strong>

<?php } ?>

Tout ces codes ce suivent. C’est à vous, de garder la structure de votre thème et d’ajouter ce code en fonction de votre thème. Si toutefois, vous rencontrez des erreurs, les commentaires sont là !