Avec le plugin WP-columnize, vous pouvez présenter votre article sur 2 ou 3 colonnes, en y incluant même des images et un titre.

ATTENTION: par honnêteté, je dois attirer l’attention sur le fait que l’affichage sur 2 colonnes qui apparait dans l’article est une image. La raison en est simple : wp columnize est en conflit avec Lightbox2 ou Nextegen (sais pas lequel). J’ai l’ai donc désactivé. A vous de voir et d’essayer chez vous. Mais le code, le html et les styles sont bons – Poursuivons donc.

Nous partons du principe que vous avez téléchargé, activé le plugin et que vous avez remarqué les petits boutons ajoutés à l’éditeur (en mode html uniquement).

Vous savez bien sûr comment créer une page ou un article, votre problème c’est que vous voulez des colonnes, vous avez procédé comme indiqué sur le site de l’extension, visité des forum et malgré tout rien à faire,ça marche pas , toute votre composition est en vrac. normal.

C’est certainement un problème de CSS… mais reprenons depuis le départ.

Phase 1

Avant tout, avec votre client FTP, repérez la feuille de style de votre thème: wp-content/themes/votre thème/style.css et ouvrez-la. Ajoutez à la feuille de style, les classes suivantes:
/* ajout de classes pour columnize*/
column-sect {
float:left;
vertical-align:top;
}
div.post-column {
float:left;
border:1px solid #999999;
margin-right:10px;
margin-left: 0;
padding:3px;
width:270px;
}
.titre {
color:orange;
width:226px;
font-family:Verdana, Geneva, sans-serif;
font-size:13px;
font-weight:700;
background-color:transparent !important;
}
div.post-column p {
width:246px;
margin-left:auto;
margin-right:auto;
color:#666;
text-align:justify;
padding:3px;
}

Vous pouvez également y arriver par l’éditeur quand vous êtes dans la saisie de votre article/page.

Une fois la feuille de style.css modifiée, enregistrez le fichier et renvoyez le d’où il vient, c’est à dire sur le serveur.
(Si vous modifiez dans l’éditeur, faites « mettre à jour le fichier »)

Phase 2

Mettez vous en mode html et composez vos colonnes de cette manière en cliquant sur les boutons correspondants.

1ère colonne:
Ouvrez la balise col-sect puis la balise column, une fois votre texte rentré, fermez la balise /column.

2ème colonne:

Ouvrez votre 2ème balise column, entrez le texte ou l’image puis refermez-là.
Terminez par la fermeture de la balise /col-sect.
Vous avez remarqué que dans l’exemple ci-dessous, j’ai mis des titres.C’est pas compliqué, pour écrire un titre il suffit d’entourer le texte avec des balises span (ouvertes et fermées bien sûr) et de leur donner la classe « titre ».
Ca doit ressembler à ça :

Dans le cas affiché, j’ai réglé la présentation sur 2 colonnes avec un titre pour chacune d’entre elles.

En fait le nombre de colonnes dépendra de leur largeur et surtout de la dimension de votre conteneur, soit sur le thème que j’utilise (Prostart), 2 colonnes faisant chacune 270px avec une marge droite de 10 pixels (margin-right:10px).
Il faudra au préalable que vous entriez dans votre feuille de style, toutes les modifications permettant l’affichage tel que vous le voyez sur cette exemple, et en l’harmonisant avec votre charte graphique.

Vous pouvez bien entendu, compléter la feuille de style en affectant des classes différentes aux colonnes , pour les différencier du reste de l’article.

Retour à la présentation normale

Rien ne vous empêche de reprendre le cours normal de votre article une fois les colonnes refermées, avec des lignes qui font tout la longueur prévue dans le conteneur.