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 :)

Pourquoi commenter ?

Les intérêts sont multiples et variés allant du simple « j’en suis là » à la fin de la journée jusqu’à la documentation d’une application.

Commenter pour comprendre ce qu’on a fait

Lors d’une session de développement on est souvent confronté à un problème nouveau à gérer et la solution n’est pas forcément toujours évidente. On fait quelques recherches, on trouve une solution ou l’inspiration pour la créer et on l’intègre. Tout fonctionne, c’est parfait, on est content.
3 mois plus tard on doit revenir dessus car il faut améliorer la fonction en y intégrant de nouveaux paramètres ou s’en resservir pour un autre projet, et là c’est le drame : on ne comprend plus comment ça fonctionne, voire même à quoi sert ladite fonction… Les 30 secondes nécessaires à écrire les quelques commentaires salutaires nous auraient permises d’éviter une décapilarisation crânienne subite et la perte de pas mal de temps.

Commenter pour expliquer aux autres

On peut travailler en équipe sur un projet et d’autres développeurs risquent d’avoir à intervenir sur votre code pendant que vous faites autre chose. Autre cas de figure : vous développez seul un projet puis un peu plus tard c’est un autre développeur qui le reprend ou qui vous rejoin dessus. Vous pouvez également être en train de développer un script/module/librairie/application destiné(e) à être partagé(e) avec d’autres (dans le cadre d’open source par exemple).
Encore une fois, le temps passé à commenter le code évitera aux autres d’être complètement perdus à la lecture de votre chef d’oeuvre. Ceci est d’autant plus vrai que chaque développeur a son style et sa manière de coder et qui, bien souvent, n’est limpide que pour lui-même…

Commenter pour se faciliter la tâche

Les IDE de qualité sont capable de lire les commentaires DocBlock et de s’en servir pour afficher, lors de la saisie, les informations d’utilisation que vous avez pris le soin d’entrer. Dans le cadre du développement d’une application répartie en plusieurs fichiers (souvent le cas en POO ou en utilisant un framework), les commentaires révèlent toute leur puissance en vous évitant de replonger dans le code d’une fonction pour retrouver quels arguments lui passer ou encore ce qu’elle retourne.
Ce type de commentaire peut aussi être utilisé pour l’écriture automatique de la documentation d’une API, par exemple, à l’aide d’un générateur de documentation tel que PHPdocumentor ou Doxygen

Les différents types de commentaires

Il existe 3 types de commentaires : ligne simple, multiligne et DocBlock. Les 2 premiers ne servent qu’à indiquer des informations courtes au sein même du code alors que le DocBlock permettra aux IDE et générateurs de documentation d’en faire bien plus.

Les commentaires simples et multilignes se présentent de la manière suivante :

// je suis un commentaire sur une seule ligne
/* je suis
un commentaire
sur plusieurs lignes */

Le commentaire DocBlock se présente ainsi :

/**
 * Cette fonction sert à faire ceci...
 * un commentaire
 * sur plusieurs lignes
 *
 * @param string $text Description du paramètre
 * @param int $id Description du paramètre
 * @return bool Description de ce que retourne (ou non) la fonction
*/

Notez l’utilisation de certains mots clés (@param, @return) dont vous trouverez la liste complète ici. C’est précisément ces mots-clés qui permettrons à l’IDE et au générateur de documentation de travailler.

Un exemple d’utilisation

Voici un petit exemple d’utilisation des 3 types de commentaires dans un modèle du framework CodeIgniter :

<?php

class Blog_model extends CI_Model {

	// constructeur
	function __construct() {
		parent::__construct();
	}

	/**
	 * Recupération des derniers posts de wordpress
	 *
	 * @param	int $count	Le nombre de posts que l'on veut afficher (optionnel)
	 * @return	object		Les posts à afficher
	 */
	function get_latest_posts($count = 5) {
		// requete mysql à l'aide d'ActiveRecord
		$this->db->select('post_title, post_name');
		$this->db->where('post_status', 'publish');
		$this->db->where('post_type', 'post');
		$this->db->limit($count);
		$this->db->order_by('ID', 'desc');

		$query = $this->db->get('wp_posts');
		
		/* on récupère les posts
		sous forme d'objet */
		$data = $query->result();

		//var_dump($data); exit; // test des résultats obtenus
		
		// renvoi des résultats au controlleur
		return $data;
	}

}

J’ai eu la main un peu lourde ici mais en même temps il vaut mieux trop de commentaires que pas assez !

Conclusion

Il y a peu de temps j’ai eu l’occasion d’intervenir sur un gros projet de CRM/ERP qui était quasiment abouti et dont le développeur a du se retirer. Malheureusement il n’avait pas jugé utile de commenter son code et la conséquence directe à été une grosse perte de temps pour moi (le temps de comprendre le fonctionnement) et une grosse perte de temps et d’argent pour le client car il a du supporter le coût de « temps de compréhension » du code existant en plus du temps de développement nécessaire au résultat demandé…
Pour faire bref, passez un peu de temps à commenter votre code – votre client, les utilisateurs de votre code et vous-même ne vous remercieront jamais assez !

HTaccess à la rescousse !

La première étape consiste à créer un fichier .htaccess que l’on placera à la racine du site. Il faut noter que dans le monde unixien les fichiers commençants par un point sont invisibles. Si cela pose un problème il suffira de nommer le fichier htaccess.txt puis de le renommer une fois transféré sur le serveur.

Contenu du fichier .htaccess :

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L,QSA] 

Ces directives indiquent au serveur Apache de rediriger toute requete qui ne cible pas un dossier ou un fichier spécifique vers le fichier index.php et de lui passer en argument tout ce qui suit le nom de domaine. En clair, une url du type « http://mon-site.com/contact » sera redirigée vers « http://mon-site.com/index.php/contact.

Bien sûr on peut intégrer des directives plus élaborées mais ce n’est pas nécessaire si l’on ne cherche qu’à supprimer l’infâme index.php

Modification du fichier de configuration

Il faut ensuite modifier le fichier /system/application/config/config.php en changeant la ligne

$config['index_page'] = "index.php";

en :

$config['index_page'] = "";

Et voila, plus d’index.php !

Préambule

Nous partirons du principe que nous voulons isoler le (ou les) template(s) du reste des views. Nous partirons également du principe que nous voulons isoler le header et le footer du template pour plus de flexibilité, et notamment pouvoir créer plusieurs templates dont le corps principal est différent (avec ou sans sidebar par exemple).

Le template HTML

Dans le répertoire /application/views créez un dossier nommé « templates« . C’est dans celui-ci que nous placerons les fichiers de notre template. Il y aura 3 fichiers : « template.php », « header.php » et « footer.php ».

template.php

Le fichier le plus simple dont le contenu peut se résumer à ceci :

<?php
$this->load->view("templates/header"); 
$this->load->view($contents);
$this->load->view("templates/footer"); 
?>

Vous remarquerez 3 choses :

• « templates/ » correspond au dossier que nous avons créé dans le répertoire « application/views ».
• Nous omettons l’extension des fichiers « header.php » et « footer.php », car c’est CodeIgniter qui l’ajoutera.
• $contents est une variable (dont le nom importe peu) qui sera définie dans le controlleur et correspondra à la view qui remplira le corps de la page.

header.php

Ce fichier contiendra la partie haute du site — traditionnellement nommée « header » — avec notamment l’en-tête de la page (déclarations html, section head) et la navigation du site (ce qui est à peu près la norme actuelle). Voici un exemple de ce que pourrait contenir ce fichier :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<title><?php echo $title; ?></title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="description" content="<?php echo $description; ?>" />
	<meta name="keywords" content="<?php echo $keywords; ?>" />
	<link href="/css/styles.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>
<div class="wrap">
	<div id="header">
 		<a href="/"><img src="/css/img/logo.png" alt="logo" /></a>
		<ul id="navigation">
 			<li><?php echo anchor(base_url(), 'Accueil'); ?></li>
			<li><?php echo anchor('services', 'Services'); ?></li>
			<li><?php echo anchor('about', 'A propos'); ?></li>
			<li><?php echo anchor('contact', 'Contact'); ?></li>
		</ul>
	</div><!-- end header -->

Là encore rien de compliqué, la seule subtilité tenant dans les variables $title, $description et $keywords qui permettrons simplement de définir ces données dans le controlleur…

footer.php

Ce fichier contiendra, vous l’aurez deviné, le pied de page ainsi que les balises de fermeture de page. Voici un exemple de contenu :

	<div id="footer">
		<p>Informations de copyright</p>
	</div>
</div><!-- end wrap -->

</body>
</html>

Le controlleur

Récoltons les fruits de notre (dur) labeur ! Dans notre controlleur au lieu d’appeler directement une view, nous chargerons celle-ci dans une variable que nous transmettrons à notre template (qui est lui-même une view). par exemple :

function about()
{
	// définition des données variables du template
	$data['title'] = 'Le titre de la page';
	$data['description'] = 'La description de la page pour les moteurs de recherche';
	$data['keywords'] = 'les, mots, clés, de, la, page';
	
	// on charge la view qui contient le corps de la page
	$data['contents'] = 'page_contenu_view';

	// on charge la page dans le template
	$this->load->view('template', $data);
}

Conclusion

Et voilà, vous pouvez maintenant créer très rapidement un ou plusieurs templates de pages !

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

Préambule

Nous utiliserons une structure de permaliens assez classique sous la forme de « monsite.com/blog/le-nom-du-post ». Si ce n’est pas le cas, il faudra adapter la requete mysql dans le model de Codeigniter. Un petit tour dans le gestionnaire de base de données permettra aisément de repérer les colonnes à utiliser.

Le model

Comme souvent dans Codeigniter, le gros du travail se situe dans le model. Nous allons créer le fichier ‘application/models/blog_model.php’ qui contiendra ce qui suit (à noter que le code est lourdement commenté pour plus de précision) :

<?php
class Blog_model extends Model {
  function __construct() {
    parent::Model();
  }

  /**
   * Recupération des derniers posts de wordpress
   *
   * @param $count Le nombre de posts (par defaut : 5)
   */
  function get_latest_posts($count = 5) {
    // les colonnes à récupérer : à adapter à la structure des permaliens de WordPress
    $this->db->select('post_title, post_name');
    // on ne récupère que les posts qui sont publiés
    $this->db->where('post_status', 'publish');
    // on ne récupère que les posts
    $this->db->where('post_type', 'post');
    // nombre de posts à récupérer
    $this->db->limit($count);
    // ordre décroissant pour avoir les derniers posts en premier
    $this->db->order_by('ID', 'desc');

    // wp_posts = la table par défaut contenant les posts de WordPress : à adapter à votre configuration
    $query = $this->db->get('wp_posts');
    // on effectue la requete dont le résultat sera un objet. Si l'on veut un tableau on utilisera la fonction result_array()
    $data = $query->result();

    // renvoi des données au controller
    return $data;
  }
}

Le controlleur

Dans notre controller il suffira d’appeler la fonction ‘get_latest_posts()’ en attribuant sa valeur de retour à une entrée du tableau (array) des valeur transmises à la vue.

// si le model n'est pas en autoload, il faut le charger dans le controlleur
$this->load->model('blog_model');
// $data est le tableau de données transmis à la vue, $blog_posts sera la variable disponible dans la vue
// get_latest_posts(10) indique que nous voulons récupérer les 10 derniers posts
$data['blog_posts'] = $this->blog_model->get_latest_posts(10);
// on charge la vue et transmet les données à celle-ci
$this->load->view('ma_view', $data);

La vue

Finalement dans la vue il suffit de faire une boucle sur la variable $blog_posts pour afficher les X derniers posts de WordPress.

<div>
  <h2>Derniers articles du blog</h2>
    <ul>
      <?php foreach($blog_posts as $post) : ?>
      <li><a href="blog/<?php echo $post->post_name; ?>"><?php echo $post->post_title; ?></a></li>
     <?php endforeach; ?>
   </ul>
</div>