Creer un modèle d’article avec plusieurs colonnes

Creer un modèle d’article avec plusieurs colonnes

Los de la création d’un article dans wordpress, si l’on veut créer plusieurs colonnes, on peut le faire en séparant le contenu à partir de la fonction more de l’éditeur de texte. A chaque fois que l’utilisateur insérera une balise more, cela rajoutera une colonne. Voici une fonction trouvée sur stackoverflow pour y parvenir :

function my_multi_col_v2($content){
	// run through a couple of essential tasks to prepare the content
	$content = apply_filters('the_content', $content);
	$content = str_replace(']]>', ']]>', $content);

	// the first "more" is converted to a span with ID
	$columns = preg_split('/(<span id="more-\d+"><\/span>)|(<!--more-->)<\/p>/', $content);
	$col_count = count($columns);

	if($col_count > 1) {
		for($i=0; $i<$col_count; $i++) {
			// check to see if there is a final </p>, if not add it
			if(!preg_match('/<\/p>\s?$/', $columns[$i]) )  {
				$columns[$i] .= '</p>';
			}
			// check to see if there is an appending </p>, if there is, remove
			$columns[$i] = preg_replace('/^\s?<\/p>/', '', $columns[$i]);
			// now add the div wrapper
			$columns[$i] = '<div>'.$columns[$i].'</div>';
		}
		$content = join($columns, "\n").'<div></div>';
	}
	else {
		// this page does not have dynamic columns
		$content = wpautop($content);
	}
	// remove any left over empty <p> tags
	$content = str_replace('<p></p>', '', $content);
	return $content;
}

Le css

On peut ensuite styliser le tout en ciblant les colonnes.

div.dynamic-col-1 { float: left; width: 38%; padding-right: 2%;}
div.dynamic-col-2 { float: left; width: 38%;padding-right: 2%;}
div.dynamic-col-3 { float: left; width: 20%;}
div.clear { clear: both; }

Afficher ses colonne sur la page

Enfin, dans son fichier index.php on remplace l’habituelle fonction the_content() par le code suivant :

$content = get_the_content('',FALSE,''); // arguments remove 'more' text
echo my_multi_col_v2($content);

Mis à jour le Par Copier coller | Dans wordpress