Faut-il tout transférer ?

La réponse à cette question simple l’est tout aussi : non. Pour savoir ce qu’il faut transférer il faut faire une distinction entre les fonctions qui impactent le contenu et celles qui impactent le design. Celles qui ont un impact sur le contenu ont tout intérêt à être déplacées dans un (ou plusieurs) plugins alors que les autres servent uniquement le design ou layout du site et doivent rester dans le fichier functions.php du thème.

Que faut-il (ou peut-on) transférer ?

Dès l’instant où le fait de ne plus avoir une fonction va poser un problème il serait judicieux qu’elle se retrouve dans le plugin, par exemple :

• Les shortcodes
• Les filtrages de contenu
• Les custom post types
• Les custom taxonomies
• Les ajouts à l’admin de WordPress

Que faut-il conserver dans functions.php ?

Si une fonction n’a qu’un impact visuel, notamment sur le design et la structure du site, dans ce cas il appartient directement au thème et doit par conséquent rester dans functions.php – par exemple :

• Les menus
• Les sidebars
• La pagination

Créer le plugin de fonctionnalités

La création d’un plugin est très simple et si vous savez ajouter des fonctions à functions.php alors vous pouvez créer votre plugin !

Première étape

Créez un repertoire qui porte le nom de votre plugin en n’utilisant que des lettres non accentuées, des chiffres et des tirets. Pour cette article on partira du principe que le nom du plugin est monsite-fonctions.

Dans ce répertoire créez un fichier PHP qui porte exactement le même nom : monsite-fonctions.php.

Deuxième étape

Ajoutez les commentaires en début de fichier qui permettront à WordPress de voir qu’il s’agit bien d’un plugin :

/*
Plugin Name: Fonctions de monsite
Plugin URI: http://www.monsite.com/
Description: Déplace les fonctionnalités qui impactent le contenu dans un plugin
Author: Nom Prénom
Version: 0.1
Author URI: http://www.monsite.com/
*/

Troisième étape

Il n’y a plus qu’a insérer les fonctions dans ce fichier, puis activer le plugin dans l’administration de WordPress et le tour est joué !

Conclusion

Comme vous l’avez vu il est très simple de créer un plugin rendant les fonctions clés d’un site sous WordPress indépendantes de son thème. Cela peut être également très utile dans le cas où votre client veut pouvoir changer de thème sans pour autant perdre ses fonctions. Vous pouvez également vous constituer une bibliothèque de plugins réutilisables dans d’autres thèmes.

Pour en savoir plus sur la création de plugins, je vous invite à consulter le codex de WordPress (en anglais) : writing a plugin

Happy coding !

Functions.php

Il suffit d’ajout un tout petit bloc de code dans le fichiers functions.php :

// filtrage des recherches -> limite aux articles publiés
function filtre_recherche( $query ) {
	if ( $query->is_search && !is_admin() ) {
		$query->set( 'post_type', 'post' );
	}
	return $query;
}
// ajout du filtrage sur le hook 'pre_get_post'
add_filter( 'pre_get_posts', 'filtre_recherche' );

Ce bout de code restreindra la recherche aux seuls articles (posts) publiés. Si l’on souhaite étendre la recherche à plusieurs types, il suffit de modifier légèrement la fonction :

// filtrage des recherches -> limite aux articles publiés, aux pages et à un custom post type
function filtre_recherche( $query ) {
	if ( $query->is_search && !is_admin() ) {
		$query->set(  'post_type', array( 'post', 'page', 'custom-post-type' ) );
	}
	return $query;
}
// ajout du filtrage sur le hook 'pre_get_post'
add_filter( 'pre_get_posts', 'filtre_recherche' );

Vous l’aurez remarqué, seule la partie $query->set() change : on lui passe un array des types de posts que l’on souhaite voir apparaître dans les résultats de recherche.

Pour en savoir plus

Rendez-vous sur le Codex de WordPress : la class WP_query (qui contient la propriété $query) et le hook pre_get_posts

Happy coding !

Voici ce que l’on veut obtenir : afficher sur la page d’accueil la liste des articles (ou les extraits) dans 2 colonnes, avec les plus récents en haut. Pour y parvenir nous utiliserons l’opérateur modulo de PHP et de la fonction rewind_posts() de WordPress.

Le problème

On pourrait tout simplement utiliser la propriété float de CSS pour arriver à nos fins et ça fonctionnerai parfaitement dans le cas de figure où tous les blocs contenant les articles ont la même hauteur (comme dans l’image précédente).

Mais il est très probable que ça ne soit pas le cas : la hauteur de chaque bloc va varier en fonction de son contenu (l’extrait ou l’article). Dans ce cas de figure il y aura 2 problèmes : l’espacement aléatoire entre les blocs (en hauteur) et le non respect de l’ordre chronologique :

Ce n’est pas un bug mais seulement la manière dont fonctionnent les éléments « floatants ».

Pour résoudre le problème d’espacement on pourrait utiliser 2 div pour créer les colonnes et y insérer nos articles, mais dans ce cas l’ordre chronologique des articles se fera de haut en bas, colonne par colonne (voir l’image ci-dessous). Hors nous voulons que les 2 derniers articles soient en haut de la page.

La solution

Nous utiliserons tout de même les 2 div pour créer nos colonnes, c’est au niveau de la boucle de WordPress que nous agirons pour respecter la chronologie de nos articles.

Voici la structure HTML de base que nous utiliserons:

<div id="page">
	
	<div id="header"></div>
	
	<div id="contenu" class="clearfix">
		<div class="colonne"></div>
		<div class="colonne"></div>
	</div>
	
	<div id="sidebar" class="clearfix"></div>
	
	<div id="footer"></div>
	
</div>

Les règles CSS qui vont avec :

#page { width: 960px; margin: 0 auto }
#header { padding: 10px; margin: 20px 0 }
#contenu { width: 660px; float: left }
.colonne { width: 300px; margin-right: 30px; float: left }
#sidebar { width: 300px; float: right }
#footer { padding: 10px; margin: 20px 0 }
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }

J’ai mis la structure complète mais ce qui nous intéresse ici c’est surtout le contenu de la div #contenu

Le template WordPress

Dans le cas d’un blog classique il n’y a qu’une seule boucle pour afficher les articles. Pour ce que nous souhaitons réaliser on pourrait utiliser 2 boucles sur mesure, mais ce n’est pas nécessaire et utiliserai inutilement plus de ressources (2 requêtes MySql au lieu d’une seule, plus de mémoire) et de temps.
Nous utiliserons la fonction rewind_posts() qui permet de revenir au début de la boucle pour ensuiter la parcourir à nouveau. L’astuce réside dans la manière dont nous allons la traiter : grâce à l’opérateur modulo nous filtrerons l’affichage (ou non) des articles…

Dans le template de la page d’accueil :

<div id="contenu" class="clearfix" >

	<!-- 1ere colonne -->
	<div class="colonne">
		<?php
		// variable qui servira pour filtrer l'affichage des posts
		// et qui sera incrémentée à chaque itération
		$i = 1;
		if( have_posts() ) :
			while( have_posts() ) :
				the_post();

				// s'il ne s'agit pas du 1er article dans la série de 2
				// on passe à l'itération suivante sans rien afficher
				if( $i%2 != 1 ) :
					$i++; // incrémente le compteur
					continue; // on passe directement à l'itération suivante

				else : // pas nécessaire mais clarifie le fonctionnement ?>

					<div class="article">
						<h2><?php the_title(); ?></h2>
						<?php the_excerpt(); // le résumé de l'article ?>
					</div>

				<?php
				endif; // fin if $i%2
				$i++; // incrémente le compteur
			endwhile; // fin boucle while
		endif; // fin if have_posts() ?>

		<?php
		// on se remet au début de la boucle des articles 
		// pour pouvoir la traiter à nouveau
		rewind_posts();
		?>
	</div><!-- fin 1ere colonne -->

	<!-- 2eme colonne -->
	<div class="colonne">
		<?php
		$i = 1; // variable qui servira pour filtrer l'affichage des posts
		if( have_posts() ) :
			while( have_posts() ) :
				the_post();

				// s'il ne s'agit pas du 2eme article dans la série de 2
				// on passe à l'itération suivante sans rien afficher
				if( $i%2 != 0 ) :
					$i++; // incrémente le compteur
					continue; // on passe directement à l'itération suivante

				else : ?>

					<div class="article">
						<h2><?php the_title(); ?></h2>
						<?php the_excerpt(); // le résumé de l'article ?>
					</div>

				<?php
				endif; // fin if $i%2
				$i++; // incrémente le compteur
			endwhile; // fin boucle while
		endif; // fin if have_posts() ?>

	</div><!-- fin 2eme colonne -->

</div><!-- fin #contenu -->

Et voila, nous sommes arrivé à notre résultat ! Bien évidemment on pourrait vouloir 3 colonnes d’articles : l’opération est la même sauf que l’on utilisera $i % 3 au lieu de $i % 2 — Le diviseur servant à déterminer le nombre d’articles a ne pas afficher et sera égal au nombre de colonnes.
Il faudra également dupliquer tout le bloc de code pour ajouter la 3e colonne, sans oublier rewind_posts() à la fin de la 2e colonne ni de changer la valeur de test du modulo pour la 2e colonne ( if( $i%3 != 2 ) ).

A propos du modulo

Si vous ne savez pas ou ne vous souvenez pas du fonctionnement de modulo, voici l’explication :
On divise le chiffre de gauche par celui de droite et le résultat ne tient compte que du chiffre entier obtenu (donc sans chiffre après la virgule). Ce calcul retourne le reste de cette division (donc un entier également).
Par exemple 1 % 3 = 1 car 1 / 3 = 0 et il reste 1
Ceci est très pratique lorsque l’on doit faire quelque chose de particulier toutes les X itérations.

Conclusion

Nous avons pu obtenir la liste de nos articles sur 2 colonnes sans utiliser inutilement de ressources supplémentaires. Autre avantage de cette technique : elle respecte le réglage du nombre de posts à afficher dans le tableau de bord de WordPress.

Happy coding :)

Activation des post thumbnails

De base la fonctionnalité n’est pas active, certainement pour des raisons de rétro-compatibilité. Pour l’activer éditez le fichier functions.php de votre thème en ajoutant cette ligne :

// activation des post thumbnails si la fonction est disponible (wp 2.9+)
if( function_exists('add_theme_support') ) {
  add_theme_support('post-thumbnails');
}

Cette ligne ajoutera dans la sidebar de votre page d’édition d’article un onglet ‘Image à la une‘. Il suffira de cliquer sur ‘Mettre une image à la une‘ pour sélectionner (ou uploader) votre vignette. Je conseille de créer votre vignette manuellement pour en maîtriser les dimensions et la qualité.

Intégration des vignettes

Pour afficher vos belles vignettes, éditez le fichier contenantt la boucle qui liste vos articles (souvent index.php) en ajoutant à l’endroit approprié ceci :

<?php if(has_post_thumbnail()) : ?>
<?php the_post_thumbnail( ); ?>
<?php endif; ?>

Paramètres

Le template tag the_post_thumbnail() accepte des paramètres optionnels permettant de modifier la taille de la vignette ainsi que certains attributs : classe CSS, les attributs title et alt ainsi que la source de l’image. Voir le codex pour en savoir plus.

Un exemple

Pour transformer la vignette en lien vers l’article et lui donner le titre (alt et title) de l’article, utilisez le code suivant :

<?php if(has_post_thumbnail()) : ?>
<a href="<?php the_permalink() ?>"
<?php the_post_thumbnail( '', array('alt' => $post->post_title, 'title' => $post->post_title) ); ?>
</a>
<?php endif; ?>