Entraînez-vous à réaliser un site WordPress professionnel

Vous devez créer un site web pour un club de sport qui vient d’être lancé. Ce club cible spécifiquement les jeunes actifs souhaitant garder la forme dans une ambiance décontractée et conviviale.

Le club proposera ainsi de nombreux cours et animations. Il communiquera à la fois sur son blog et sur les réseaux sociaux pour promouvoir les événements à venir, et partager les photos et comptes rendus des événements passés.

Ce client vous commande donc un site vitrine destiné à promouvoir le club sur Internet et à communiquer sur ses actualités et événements.

L’image du site doit être professionnelle, mais chaleureuse. La palette de couleurs pourra être au choix :

• sombre, avec des couleurs chaudes (orange foncé, bordeaux…) ;

• claire, avec des couleurs vives (rouge, rose, vert…).

Le site devra par ailleurs être optimisé pour le référencement naturel, pour un chargement rapide, et les règles principales d’accessibilité devront être respectées.

Cahier des charges

Le client vous demande de respecter les consignes suivantes pour la structure du site web à créer.

• Un header (en-tête) présente :

  • le logo de la société ;

  • le numéro de téléphone ;

  • un bouton “tester gratuitement” en évidence ;

  • le menu principal de navigation qui contient : activités, coachs, actualités, infos pratiques.

• Une page d’accueil est composée de :

  • un “hero” (section visuelle pleine largeur) présentant le slogan du club et un bouton incitant à s’inscrire à une séance gratuite ;

  • une section présentant les différents services et activités proposés par le club : fitness, crossfit et boxe. Chaque activité sera illustrée à l’aide d’une image adaptée libre de droits et d’un court texte de description ;

  • une section présentant les coachs ;

  • une section “Témoignages” présentant les avis de différents clients ;

  • une section Tarifs avec 3 formules : 29 €/mois (1 activité), 49 €/mois (2 activités) et 69 €/mois (3 activités) ;

  • une section “Informations pratiques” incluant :

    • les coordonnées du club,

    • un formulaire de contact permettant de sélectionner 3 types de demandes : cours gratuit, inscription ou partenariat,

    • une carte Open Street Map ou Google Map montrant les localisations des différentes salles.

• Une page “Actualités” de type blog, avec :

  • le flux des actualités sous forme de grille et avec la possibilité de filtrer par type d’actualités (communauté, promotions, événements) ;

  • le flux Instagram et/ou Twitter dans la sidebar (barre latérale). Pas la peine de créer de compte sur ces réseaux sociaux ; pour cela, utilisez les comptes Instagram de marques de sport à titre d’exemple.

Vous pouvez télécharger le logo FitActive en suivant ce lien.

Pour créer ce site, vous pouvez choisir entre ces deux solutions :

• utiliser Themecloud ;

• créer le site en local.

Quel que soit votre choix, il faut créer un export du site réalisé avec le plugin “All in One WP Migration” sous la forme d’un fichier .wpress.

Attention, si vous exportez le site depuis Themecloud, pensez à cocher la case concernant les “mu plugins” avant l’export.

Vérifiez bien que vous avez les éléments suivants :

• Les couleurs et polices de caractère du thème correspondent à celles décrites dans le brief.

• Le logo est inséré dans le header et en favicon.

• Le menu est correctement configuré dans le header et correspond à l’arborescence décrite dans le brief.

• Les sections et pages correspondantes sont créées et paramétrées (en particulier la page d’accueil et la page pour les actualités).

• Les composants choisis valident les critères de sélection décrits dans le cours.

• Les composants sont correctement configurés et fonctionnent comme décrit dans le cahier des charges :  carte Open Street Map ou Google Maps et formulaire de contact (les champs doivent bien correspondre).

• Les composants sont bien intégrés et s’accordent avec le design général du site (couleurs et polices de caractères cohérentes, en particulier).

• La structure de pages (en particulier la page d’accueil) respecte le cahier des charges.

• Les pages s’affichent correctement sur tous types d’écrans (desktop, mobile et tablette).

• Les images ont leurs champs meta renseignés.

• Les liens dont le label n’est pas explicite disposent bien d’une balise titre explicite.

• Un plugin SEO (Yoast ou SEO Press) est installé et bien configuré.

• Les fichiers sitemap.xml et robots.txt ont été créés.

• Toutes les pages ont un titre et une description (meta) renseignés.

• Les expressions de recherche choisies en focus sur chaque page sont pertinentes (adaptées au secteur, bon équilibre entre trafic potentiel et concurrence). Les titres dans les contenus sont bien optimisés en fonction des expressions de recherche choisies, et le balisage (h1, h2, h3) respecte les bonnes pratiques (1 unique H1, 3 ou 4 H2, etc.).

• Les images sont compressées pour le web.

• Les formats d’images choisis dans les contenus sont adaptés à leur taille effective à l’écran.

• Un plugin de cache est installé et configuré.

Alors, vous êtes allé au bout ? Voici un exemple pour vous permettre de vérifier votre travail.