Création numérique
Atelier Conception et publication Web

Séance 8 - Les templates et plugins Wordpress

Les templates

La notion de templates

Appliqué à la création de site Internet, un Template ou thème ou encore modèle graphique est un moyen de séparer le contenu rédactionnel (contenu textuel) de la forme (la manière dont il est présenté). Un Template fait donc office de gabarit (modèle) où seuls certains éléments sont modifiables (le contenu texte, les images, les couleurs et le fond).

Un Template vous assure une parfaite cohérence entre vos pages et peut vous permettre de gérer la saisonnalité de votre site Internet. Prenons l’exemple d’un site de vente en ligne, le fond pourra s’ adapter à la période des soldes, aux offres spéciales, à une exclusivité produit…

Le potentiel offert par les Templates est donc bien réel, vous obtenez la possibilité de gérer l’ensemble de votre site par de « simples clics », à condition bien sur de l’avoir prévu dès sa conception et d’avoir un minimum de connaissances sur la console d’administration.

Toujours dans cette optique, changer la charte graphique du site revient à changer le Template, cela a pour effet de mettre à jour toutes les pages du site web. Ajouter une page ne consiste plus qu’à ajouter du contenu, cette nouvelle page aura la même présentation que l’ensemble du site.

Les Templates sont très utilisés dans la conception de site web, ils permettent de diminuer de manière significative les temps de conception et donc le coût de création d’un site Internet. Par opposition, un site sur-mesure est avant tout une création originale à partir d’une maquette souvent réalisée sur Photoshop suivie d’une intégration pour le web, cela implique des temps de recherches créatives, de retouches d’images, de web-design…Pour imager ce propos, le Template et le sur-mesure sont pour le web, ce que sont le prêt à porter et la haute couture pour la mode.

Les limites d'un template

Les limites des Templates sont directement liées à votre projet de création, en choisissant un Template, vous vous engagez à rester dans un cadre (structure des pages, position des menus de navigation…) définit par avance.

Si votre projet impose un design particulier, des évolutions fréquentes, une arborescence spécifique… le Template ne pourra pas satisfaire toutes vos exigences, le sur-mesure sera plus adapté. Attention aussi au choix de votre Template, le risque d’avoir le même site que votre voisin n’est pas exclu.

Installer un template

Apparence → Thèmes → Ajouter → Installer → Activer

Personnaliser un template

wp-content/themes/nom_du_theme/style.css

wp-content/themes/nom_du_theme/header.php

Les plugins

Installer un plugin

Extentions → Ajouter → Installer → Activer

Installer et activer le plugin « Contact Form 7 »

Quelques plugins utiles

Notions de shotcode

Un shortcode est une balise de texte formatée spécialement que l'on peut placer directement dans un article ou une page de votre blog. Cette balise est automatiquement interprétée par WordPress et permet d'ajouter des fonctionnalités (une galerie image, une insertion vidéo, etc.) sans programmation de votre part! Grâce aux shortcodes, votre blog devient dynamique puisque son contenu peut être changé à tout moment, en temps réel et sans compétence informatique.

Format

Pour utiliser un shortcode, il suffit de mettre son nom dans le contenu d'un article, encadré de crochets.

[nom_du_shortcode]

Par exemple, WordPress connaît un shortcode gallery qui renvoie l'ensemble des médias de type image associés à un article, dont l'affichage sur le site changera en fonction du nombre d'images dans la bibliothèque sans qu'il y ait besoin de modifier l'article en question.

Choisissez donc un article ou une page possédant des images, et introduisez le shortcode au sein de son contenu (voir la figure suivante).

Lorsqu'un visiteur parcourra l'article choisi, il verra, comme sur la figure suivante, l'ensemble des images associées à celui-ci.

Paramètres

Pour ajouter de la souplesse aux shortcodes, il est tout à fait possible de leur attribuer des paramètres utilisés par la fonction PHP lors du rendu, en rajoutant des paires clés/valeur à la suite du nom du shortcode.

[nom_du_shortcode attribut1="valeur1" attribut2="valeur2"]

On peut aussi ajouter une grosse portion de texte dans un shortcode en l'écrivant sous une forme différente, avec une balise ouvrante et une balise fermante. Ce texte sera alors considéré comme un nouveau paramètre, généralement utilisé comme contenu du shortcode.

[nom_du_shortcode]le contenu vient ici[/nom_du_shortcode]

De plus, le contenu peut être du texte brut ou bien du HTML ; il n'y a pas de restriction. Ce sera ensuite le rôle du shortcode de traiter le texte fourni en cas de besoin.

Plugin pour surcharger les CSS

Installer et activer le plugin « Simple Custom CSS »

Pratique

Mise en pratique sur les sites projet des étudiants

Ressources utilsées :