WordPress.com, c’est bien si vous voulez publier vite un (et un seul) site simple. C’est relativement pas cher (4€ TTC/mois tout de même) et facile à utiliser. Pour toute autre usage (par ex. dès que vous voulez deux sites ou plus), un hébergement mutualisé (type o2switch 6€ TTC/mois) est rapidement beaucoup plus rentable.

Néanmoins, quand wordpress.com est la bonne option, on veut parfois pouvoir personnaliser un peu le thème choisi. Voici par exemple comment ajouter un tableau responsive, par exemple pour afficher un menu graphique à base d’image en pied de page.

Un thème adapté à utilisé est « Intergalactic 2 » qui est de bonne facture (et responsive) et dispose d’emplacements widget en pieds de page. Le code du tableau est placé dans une widget texte à insérer dans un des emplacements disponible en pied de page :

Puis nous ajoutons la widget et le code dans cette dernière :

Enfin, voici le code pour créer un tableau à trois cellule, chacune contenant un lien vers une page catégorie, le lien étant illustré par  une image et un libellé :

<div style="display :flex ;flex-wrap :wrap ;">
<div style="padding :0 10px 10px ;flex-grow :1 ;flex-shrink :0 ;flex-basis :33.3333 % ;display :flex ;align-items :center ;justify-content :center ;">
<a href="/category/categorie_1/">
<div style="font-size :30px ;text-transform :uppercase ;text-align :center ;">Libellé catégorie 1</div>
<img class="alignnone size-full" src="https ://votre_domaine.wordpress.com/aaaa/mm/nom_image_1.jpg" alt="nom_image_1" width="640" height="460" />
</a>
</div>
<div style="padding :0 10px 10px ;flex-grow :1 ;flex-shrink :0 ;flex-basis :33.3333 % ;display :flex ;align-items :center ;justify-content :center ;">
<a href="/category/categorie_2/">
<div style="font-size :30px ;text-transform :uppercase ;text-align :center ;">Libellé catégorie 2</div>
<img class="alignnone size-full" src="https ://votre_domaine.wordpress.com/aaaa/mm/nom_image_2.jpg" alt="nom_image_2" width="640" height="460" />
</a>
</div>
<div style="padding :0 10px 10px ;flex-grow :1 ;flex-shrink :0 ;flex-basis :33.3333 % ;display :flex ;align-items :center ;justify-content :center ;">
<a href="/category/categorie_3/">
<div style="font-size :30px ;text-transform :uppercase ;text-align :center ;">Libellé catégorie 3</div>
<img class="alignnone size-full" src="https ://votre_domaine.wordpress.com/aaaa/mm/nom_image_3.jpg" alt="nom_image_3" width="640" height="460" />
</a>
</div>
</div>

L’astuce consiste à utiliser le nouvel objet css3 « flex ».

Bien sûr, il faut remplacer « categorie_1 », « Libellé catégorie 1 », « votre_domaine.wordpress.com/aaaa/mm/nom_image_1.jpg », « nom_image_1 » par vos propres données.

Pour trouver l’URL à utiliser pour afficher une page catégorie, il suffit de créer un menu avec toutes vos catégories et ensuite de naviguer dans le site sur chacune, l’URL s’affichera dans la barre d’adresse du navigateur.

Pour trouver le chemin d’une image, le plus simple est de créer une page ou un article avec toutes les images et ensuite d’afficher chaque image dans le navigateur à partir de la page.

Tags :

Classés dans :