WordPress : Afficher une entrée sur plusieurs colonnes

Voici un petit bout de code très utile que j’ai développé afin de permettre très simplement de gérer des billets s’affichant sur plusieurs colonnes via l’interface de WordPress.

Pour ce faire, j’ai choisi d’utiliser à mon avantage le séparateur d’introduction, à savoir la balise <!–more–> qui s’insère facilement en cliquant sur le bouton de l’éditeur.

Ainsi, le script suivant permet de détourner son utilisation pour enrober chaque élément de contenu séparé par <!–more–> d’un DIV permettant ultimement d’afficher le tout sur plusieurs colonnes.

Il vous suffit donc de coller ce script dans le fichier functions.php de votre thème :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

function moreToCols($content) 
{					
	$cols = array();
	
	//remplacer le span de remplacement par <!--more-->
	$content = eregi_replace('<span id="more-[0-9]+"></span>', '<!--more-->', $content);
	
	//trouver les <!--more--> et séparer le texte
	preg_match('/<!--more(.*?)?-->/', $content, $matches);
	if(sizeof($matches)==0) return $content; 
	$sections = explode($matches[0], $content);
		
	//colonnes
	$colClass = array('', 'unique','half','third','fourth','fifth','sixth','seventh');
	$nbCols = sizeof($sections);
	
	//remove filter wpautop (wp-includes/formatting.php:181)
	remove_filter('the_content', 'wpautop');
	
	//output
	$html = '';
	for($i=0; $i<$nbCols; $i++) {
		$last = ($i == ($nbCols - 1)) ? 'last' : '';
		$html .= '<!-- colonne #'.($i+1).'/'.$nbCols.' -->';
		$html .= '<div class="one_' . $colClass[$nbCols].' '.$last.'">';							
		//appliquer le filter 'wpautop' colonne par colonne plutôt que globalement
		$html .= wpautop(trim($sections[$i]));
		$html .= '</div>';
	}
	
	return trim($html);
}

Ensuite, dans toutes vos pages de gabarits où vous souhaitez activer ce filtre, il vous suffira d’ajouter la ligne suivante avant l’appel à la fonction <?php the_content(); ?> :

1

add_filter('the_content', 'moreToCols', 1);

Personnellement, je vous recommande de ne l’utiliser que sur les gabarits single.php ou page.php afin de ne pas briser l’affichage des listes (archive.php, index.php, etc.).

–

Votre contenu sera alors modifié de sorte que chaque élément sera enrobé d’un DIV avec une classe vous permettant aisément d’ajuster l’aspect visuel via CSS. Ainsi, un billet avec 2 séparateurs produira le code suivant :

<div class=’one_third’>texte avant le premier séparateur</div>
<div class=’one_third’>texte avant le deuxième séparateur</div>
<div class=’one_third last’>texte après le deuxième séparateur</div>