• 15 hours
  • Easy

Free online content available in this course.

course.header.alt.is_certifying

Got it!

Last updated on 3/5/24

Mettez en place une page d’accueil personnalisée et créez votre menu de navigation

Vous avez réglé les paramètres de votre site ? Il est temps de nous attaquer à la page d'accueil !

Créez votre page d’accueil et votre page de blog

Avant de configurer votre page d’accueil, il faut tout d’abord en créer une !

Regardez la vidéo de démonstration pour suivre les étapes clés.

Commençons par faire un peu de ménage et supprimons les pages créées par WordPress lors de l’installation. 

  1. Allez sur l’onglet “Pages”.

  2. Passez votre souris sur chaque page.

  3. Cliquez sur “Corbeille”. Si vous ne videz pas régulièrement la corbeille, son contenu sera supprimé automatiquement au bout de 30 jours.

Nous allons maintenant créer notre page d’accueil.

  1. Cliquez maintenant sur “Ajouter” pour créer la page.

  2. Saisissez “Banana WordPress Design” comme titre de page. 

  3. Saisissez “Banana WordPress Design est une agence de webdesign bordelaise spécialisée dans la création de sites WordPress.” dans la zone de contenu, histoire qu’elle ne soit pas vide.

  4. Cliquez sur "Publier" pour créer la page.

Répétons la manipulation pour créer une page “Blog”. Ne mettez en revanche aucun contenu. Dans la prochaine étape nous paramètrerons cette page pour qu'elle affiche automatiquement la liste des articles publiés sur le site. La zone de contenu ne sera donc pas utilisée.

Configurez votre page d’accueil et votre page de blog

Maintenant que nos pages sont publiées, suivez ces étapes.

  1. Rendez-vous dans Réglages >> Lecture pour les configurer en pages d’accueil et de blog. 

  2. En face de “La page d’accueil affiche”, sélectionnez “Une page statique”.

  3. Choisissez “Banana WordPress Design” pour la page d’accueil et “Blog” pour la page des articles.

  4. Enregistrez les modifications.

Allons sur notre site pour voir ce que ces changements donnent. Comme prévu, la page d’accueil affiche bien le contenu que nous avons inséré dans la page d’accueil. En revanche, impossible d’accéder à la page du blog ! Il faut en effet maintenant créer un menu de navigation pour pouvoir accéder aux différentes pages du site. C’est ce que nous allons faire dans la prochaine section.

Créez votre menu de navigation

Regardez la vidéo de démonstration pour suivre les étapes clés.

Dans WordPress, les menus peuvent être gérés à plusieurs endroits selon la version et le thème de WordPress choisis.

  1. Dans notre cas, nous allons les gérer via le menu Apparence >> Menus

  2. Dans Structure du menu”, donnez le nom “Principal” à votre menu.

  3. Sélectionnez l’emplacement “Menu supérieur”. 

  4. Cliquez sur “Créer le menu”. 

Votre menu est créé, il faut désormais lui attribuer un lien vers la page “Blog”.

  1. Dans la colonne de gauche, sélectionnez “Tout voir” pour voir toutes les pages de votre site. 

  2. Cochez les deux pages “Banana WordPress Design” et “Blog”.

  3. Cliquez sur “Ajouter au menu”.

Les pages apparaissent maintenant dans la structure du menu et vous pouvez les réorganiser en “glisser-déposer” pour changer l’ordre (faire glisser vers le haut ou vers le bas) ou la hiérarchie (faire glisser vers la gauche ou vers la droite). La hiérarchie des menus vous permet de créer des sous-menus. Très utile si vous avez de nombreuses pages, par exemple.

Cliquez sur l’indispensable bouton bleu “Enregistrer le menu” et visitez à nouveau votre site. Le menu est bien visible en bas de page !

En résumé

  • La page d’accueil et la page “Blog” listant les articles se définissent dans Réglages >> Lecture.

  • Dans Apparence >> Menu, vous pouvez construire votre menu en glisser-déposer.

  • L’onglet “Options de l'écran” présent sur les pages d’administration permet d’afficher des options supplémentaires.

Nous avons mis en place la structure de notre site. En revanche, son apparence n’est pas franchement sympathique… Mais pas d'inquiétude, nous allons voir dans le chapitre suivant comment personnaliser l’apparence de notre site !

Example of certificate of achievement
Example of certificate of achievement