Concevoir un site vitrine avec WordPress

Voici un petit cours simple pour concevoir un site vitrine avec WordPress. Dans cet exercice, nous allons concevoir le site d'un restaurant imaginaire nommé Restaurant Chez Lulu.

Front-office et back-office

En allant sur notre URL, nous voyons l'installation de base de WordPress :

WordPress1

Première chose à faire, accéder au back-office, c'est à dire le Tableau de bord de WordPress qui va nous permettre de modifier le site.

Accès au Tableau de bord

Ajoutez /wp-admin à votre URL.

Dans cet exemple, il faudra écrire http://127.0.0.1/wordpress/wp-admin

  • Si vous utilisez MAMP sous MacOS, il faudra écrire http://localhost:8888/wordpress/wp-admin
  • Si vous avez installé WordPress sur un nom de domaine, il faudra écrire http://www.monsite.fr/wp-admin

Connectez-vous puis accédez au Tableau de bord.

WordPress2

Voici le Tableau de bord (back-office)

WordPress3

Accès au front-office

Pour accéder à votre site (front-office), cliquez en haut à gauche sur l’icône maison avec le titre de votre site. Notez la barre noire en haut de votre site. Elle ne sera pas visible pour les internautes, elle est présente seulement lors de la connexion. Des liens Modifier sont également apparus dans les pages.

WordPress4

Pour revenir au Tableau de bord, cliquez à nouveau en haut à gauche sur Tableau de bord.

Réglage du titre et du slogan

Allez dans Réglages -> Général puis Tapez un titre pertinent pour votre site ainsi qu'un slogan. Évitez des mots génériques comme Bienvenue sur mon site car les mots tapé serviront au référencement dans les moteurs de recherche. Si vous voulez qu'on vous trouve, pensez que le titre et le slogan pourraient être les mots tapés par des internautes lors d'une recherche dans Google.

WordPress5

Choisir un thème

Le thème contient la charte graphique et la thématique de votre site. Votre site peut prendre plusieurs directions :

  • s'afficher dans un cadre limité (boxed)
  • étalé sur toute la largeur de l'écran (full width)
  • scindé en plusieurs pages
  • scindé en quelques rubriques sur une unique page (one page)
  • blog
  • boutique en ligne
  • site vitrine, etc.

Choisissez le thème qui s'approche le plus de votre projet, sachant qu'il sera possible de changer de thème après avoir réalisé le site. Les textes, les pages, les articles, les images, les vidéos, les menus seront conservés.

Pour l'exemple, allez dans l'onglet Apparence->Thème, trouvez le thème Twenty Twelve, installez puis activez.

wordpress-theme

Ce thème est un thème minimaliste assez facile à travailler.

Ajouter une page

Une page est une partie d'un site à caractère statique, c'est à dire que son contenu n'est pas censé varier toutes les semaines. Par exemple : la page contact, la page d'accueil, la page services, etc.

Pour ajouter une page, cliquez sur le lien Créer->Page dans le menu du haut.

wordpress-page

Comme nous souhaitons créer un site vitrine pour un restaurant, nous allons créer 4 pages dont les titres seront :

  • Accueil
  • Notre carte
  • Les recettes de Lulu
  • Contact

Commencez par saisir Accueil dans la zone de titre, puis tapez un texte de présentation du restaurant dans la zone de texte.

wordpress-page2

Pour publier la page, cliquez sur le bouton bleu Publier.

Pour voir votre page cliquez  sur Afficher la page

wordpress-page3

Créez de la même façon les pages : Notre carte, Les recettes de Lulu et Contact. Laissez la page Recette de Lulu vide, car elle sera destinée à recevoir les articles.

Définir la page d'accueil et la page des articles

Les pages s'affichent, mais il semble y avoir 2 pages d'accueil. Il s'agit en fait de la page des articles. En effet, WordPress active par défaut sa partie blog, c'est à dire qu'il affiche sur une page d'accueil les derniers articles parus. Nous allons faire en sorte que les articles soient des recettes régulièrement publiées vers une page vide nommée Les recettes de Lulu. Pour gérer la page d'accueil et la page des articles, allez dans l'onglet Réglages->Lecture, puis réglez les options de lecture comme ci-dessous :

wordpress-page4

De cette manière, nous contrôlons les choses.

Ajouter un article

Les articles sont comme des pages, mais ils sont censés être renouvelés régulièrement. Ils peuvent relater des choses plus anecdotiques, ils sont classés par ordre inverse chronologique, le plus récent apparaissant en haut de la page. Les articles sont signés, datés et sont traditionnellement soumis aux commentaires.

Dans notre site Restaurant Chez Lulu, les articles seront des recettes de cuisines publiées par le chef de temps à autre. Pour ajouter une recette, une suffit donc de créer un article.

Cliquez sur le lien Créer->Article dans le menu du haut.

wordpress-article

Pour obtenir la deuxième barre d'outil qui peut être très utile, notamment pour choisir Titre 2, cliquez sur l'icône cerclé de rouge.

Publiez l'article et admirez le résultat dans votre partie blog Les recettes de Lulu.

Ajouter une image

Pour insérer une image, il faut d'abord modifier un article ou une page. Ensuite, 2 possibilités : l'image à la une ou l'insertion d'un média dans la page.

Image à la une

L'image à la une doit être une image représentative de l'article ou de la page. Dans la colonne de droite, cliquez sur le lien : Mettre une image à la une.

wordpress-image-une

Choisissez une image dont vous avez les droits. Pour optimisez le référencement, renommez votre image avec des mots pertinents séparés par des espaces et sans accents, par exemple : entrecote-frite.jpg, puis renseignez le champ titre, puis le texte alternatif. Le texte alternatif est censé être caché et implicite. Il est destiné à l'accessibilité et au référencement. Il est une accumulation de 3 ou 4 mots-clés. Le titre, quant à lui, doit être une petite phrase descriptive bien orthographiée car elle peut être affichée.

wordpress-image-une2

Cliquez sur le bouton bleu Mettre une image à la Une, mettez à jour, puis affichez votre article.

wordpress-image-une3

L'image à la Une s'affiche de manière différente selon les thèmes adoptés.

Ajouter un média

Une deuxième façon d'insérer des images dans nos articles ou nos pages consiste à cliquer sur le bouton Ajouter un média lors de la modification d'un article ou d'une page.

Modifiez un article, puis cliquez quelque part dans l'article. L'image apparaîtra là où le curseur se trouve, comme dans un traitement de texte.

Notez qu'avant l'insertion, il est possible de régler l'alignement  : laissez Aucun pour que la charte du thème s'applique sans contrainte. Il est également possible de faire un lien de l'image vers sa version en taille d'origine, ou de faire un lien vers n'importe quelle URL. Enfin, il est possible de choisir la taille de l'image insérée, laissez 300 pixels de large. Cela produira un effet de zoom quand on cliquera sur l'image.

wordpress-media

Et voici le résultat : notez la différence de présentation et d'interaction (zoom) par rapport à l'image à la Une.

wordpress-media2

Création du menu

Nous savons publier des pages et des articles mais il est temps d'arranger les menu pour maitriser l'ordre et l'arborescence des pages. Allez dans l'onglet Apparence->Menu.

Structurez votre menu comme ci-dessous :

wordpress-menu

Pour Supprimer la page d'exemple du menu, il faut cliquer sur la flèche descendante puis cliquez sur Supprimer en rouge.

wordpress-menu2

Cliquez ensuite sur le bouton bleu Créer le menu.

Cochez la case Primary menu pour que le menu soit activé dans notre thème.

wordpress-menu3

Enregistrez le menu. Désormais votre menu s'affiche dans l'ordre correct :

wordpress-menu4

Articles connexes