WordPress – Mini projets

Mini projet : "Cyclones"

capture_ecran_cyclones

Niveau :

  • BIW2 ou supérieur
  • CMS (jusqu'à la leçon "Les plugins, modules et extensions")
  • CMS WordPress (jusqu'à la leçon "Installer un Plugin")

Prérequis :

  • Un système WAMP opérationnel - comme celui créé sur votre clé USB ou disque dur externe lors de la leçon "Intégration Web – Installation et configuration d’un système WAMP"

Projet :

Caractéristiques à remarquer et à reproduire :

  • Système CMS WordPress évolutif
  • Thème en Responsive Design : Flat par YoArts (voir lien dans le footer du site)
  • Logo graphique, slogan et image de fond
  • Menu interactif à 2 niveaux
  • Barre de recherche qui fonctionne
  • Articles avec intégration de sliders (plugin Soliloquy ou équivalent) et d'images et/ou d'animations (type gif animé)
  • Intégration d'au moins 2 sliders différents
  • Site multilingue (français + anglais, plugin Polylang) avec
    • drapeaux qui basculent entre les 2 langues pour la page actuelle (pas de renvoie à l'accueil svp!)
    • menu principal qui change selon la langue
    • possibilité de lier les pages connexes dans le back-office
  • Formulaire de contact en 2 langues (plugin contact-form-7)
  • Captcha sur formulaire de contact (plugin ReallySimpleCaptcha)
  • Plusieurs articles, chaque article en 2 langues (les textes ne sont pas important mais doivent être dans la bonne langue - pas de lorem ipsum svp!)
  • Chaque article a un en-tête graphique (les 4 mini-images près des drapeaux) - à définir dans le CSS
  • Au moins une page images avec galérie

Aller plus loin (les + à ajouter dans votre site) :

  • Pour le site "cyclones", la page "images" est assez rudimentaire : juste un tas d'images sans organisation ou mise en page particulière. Un + serait de faire une vraie galérie d'images (attention, pas un slider) pour présenter et organiser mieux l'affichage des éléments.
  • Quand on clique sur une image dans la page images, au lieu d'ouvrir l'image seule dans la page, ouvrir plutôt un diaporama en avant plan (lightbox) qui donne la possibilité de surfer toute les images de la page (comme un slider mais sans transition automatique).

Remarques :

  • pour faire fonctionner le module ReallySimpleCaptcha le moteur PHP doit avoir accès à la bibliothèque gd (ou gd2) : ouvrir le fichier php.ini, décommenter la ligne correspondant à la bibliothèque gd/gd2, enregistrer les changements et redémarrer le serveur Apache pour que les changements prennent effet.
  • on n'est pas obligé de reproduire le site "cyclones" (on peut choisir un autre sujet pour son site) mais ce qu'on produit doit avoir les mêmes features et le même niveau de qualité que le site cyclones.
  • pour ceux qu veulent reproduire à l'identique le site "cyclones" voici un fichier zip avec toutes les images

Astuces :

  • Les différentes pages du site devraient être des éléments de type page et non pas des éléments de type article.
  • Le plugin Polylang permet de lier les 2 pages qui sont les traductions d'un contenu. Si vous avez du contenu au moment de l'installation de ce plugin il faudrait spécifier la langue de ce contenu : pour ceci le plus facile estr de cocher la case destinée à marquer tout contenu existant avec la langue par défaut (français sûrement).
  • Pour réussir les menus en 2 langues, Il faudrait créer 2 menus, un pour chaque langue, puis réussir à associer la bonne langue à chaque menu.
  • Pour construire les menus à 2 niveaux il faut modifier chaque menu et, avec la souris, glisser les sous-éléments pour les indenter sous leurs parents.
  • Pour faire l'en-tête graphique (les 4 mini-images) : utiliser l'éditeur du thème pour ajouter des instructions dans le fichier style.css du thème. Ce fichier et mentionner après d'autres fichiers comme "template.css". Mettre l'image en background-image, sans répétition, pour l'élément avec identifiant #primary. Utiliser l'inspecteur Firefox pour comprendre.
  • Pour placer les drapeaux en haut de chaque page, utiliser l'éditeur de thème pour modifier le script PHP page.php. Ajouter le code suivant avant la div #content :

<div class="lang-flags-section">
  <ul>
    <?php pll_the_languages(array('show_flags'=>1,
                                  'show_names'=>1));?>
  </ul>
</div>

  •  Il faudrait éventuellement ensuite styler la section avec les drapeaux via l'éditeur (modifier le fichier style.css du thème). D'ailleurs, n'importe quel élément dans la page peut être restyler via ce fichier. Il suffit de repérer et d'identifier l'élément via l’inspecteur Firefox, puis créer des règles dans style.css du thème - ces règles primeront sur les règles de base.