Ce court guide va droit à l’essentiel afin de vous permettre de créer votre premier site web en quelques minutes. La plupart des aspects techniques n’y sont pas développés et je vous recommande de consulter les autres articles dédiés à chaque fonction pour une meilleur compréhension globale de WordPress.

Pour commencer simple nous allons nous concentrer sur la création d’un site de type vitrine.

Le blogging faisant appel à des notions plus techniques, je vous recommande de l’étudier dans un second temps. D’autant qu’il est facile de faire évoluer ultérieurement un site vitrine vers un blog.

• Le tableau de bord de WordPress
• Créer sa première page
• Créer un maillage entre les différentes pages
• Créer un maillage via un menu
• Créer un nouveau menu
• Sous-menu, créer une arborescence
• Créer un maillage via des liens hypertexte
  • Créer un lien
  • Créer un lien sous forme d’image
  • Note : cas des adresses emails
• Tester son site web
• Personnaliser son site web : modifier l’entête, le titre du site et la charte graphique
  • Changer de thème
• Les extensions

Le tableau de bord de WordPress

La marge de gauche du tableau de bord vous donne accès à toutes les options permettant de modifier votre site web.

Les seuls menus nécessaires pour démarrer dans un premier temps sont :

• Pages (dans le cas d’un site vitrine) : création et gestion du contenu des pages
• Articles (dans le cas d’un blog) : création et gestions des actualités
• Apparence : gestion de l’apparence globale du site (choix du thème, personnalisation du thème, de l’entête / pied de page, du menu du site, et des widgets

Consulter cet article pour en apprendre un peu plus sur la philosophie et l’organisation de WordPress

Choisir un thème

Se rendre dans le menu Apparence, puis Thème.

Cliquez sur Ajouter pour choisir un thème. Lorsque vous aurez trouvé le thème qui vous convient, cliquez sur Installer, puis une fois installé, cliquez sur Activer.

Créer sa première page

Se rendre dans le menu Page du tableau de bord, puis cliquez sur Ajouter pour ouvrir l’éditeur de page

Saisir le titre de la page. Ce titre servira également d’identifiant pour lier cette page à d’autres via les liens hypertextes et les menus

L’insertion de contenu dans vos pages (texte, image, …) se fait par l’intermédiaire de bloc. Chaque bloc est dédié à un type de contenu. Pour consulter la liste des blocs disponibles et les insérer dans la page, il faut cliquer sur le bouton + situé en haut à gauche de l’éditeur et sélectionner l’un des blocs proposés.

Important : cliquez sur le bouton Publier ou Mettre à jour pour sauvegarder les modifications.

Les blocs sont regroupés en 5 catégories :

• Texte
• Média
• Mise en page
• Widget
• Contenu embarqué

Retournez sur le tableau de bord en cliquant sur le logo (3) situé en haut à gauche de l’écran

Note : A ce stade votre page est disponible mais n’est pas encore accessible pour les visiteurs. Pour que les visiteurs puissent y accéder, il est nécessaire de mettre à disposition de vos visiteurs un lien permettant d’y accéder. Soit via un menu, soit via un lien hypertexte. (voir plus bas : « créer un maillage entre les différentes pages« )

Note 2 : Dans le cas où vous souhaiteriez créer une page d’accueil, il y a une manipulation supplémentaire à effectuer afin de d’activer une page en tant que page d’accueil. Depuis le tableau de bord, allez dans le menu « Réglage » puis « Lecture« . Sélectionnez l’option « Page Statique« , puis en face de « Page d’Accueil« , sélectionnez la page que vous souhaitez activer comme page d’accueil

Vous pouvez maintenant créer d’autres pages, tel que la page de présentation de vos services ou la page d’information pratiques (accès, horaires d’ouverture, contact, …)

? Note : vous remarquerez qu’il existe également la possibilité de créer des « articles ». Il s’agit d’un autre type de page dédié aux évènements. Un article s’apparente aux publications sur un réseau social. Il est daté et possède une zone commentaire permettant de favoriser les interactions sociales. Les articles possèdent également des outils supplémentaires que nous détaillerons dans le support de cours « Page et article« .

Créer un maillage entre les différentes pages

Créer un maillage via un menu

Le menu représente la structure de votre site web. C’est à partir de ce menu que vos visiteurs pourront accéder aux différentes pages.

Il est également possible de créer un maillage à l’aide de liens hypertexte qui seront insérés dans les pages. Voici un exemple de lien hypertexte : Créer un maillage via un menu

Créer un nouveau menu :

Dans le menu de la marge de gauche, se rendre dans « Apparence » puis « Menu« .

Créer un nouveau menu

Dans le cadre supérieur, cliquez sur le lien « Créez un nouveau menu »

Nom du menu

Saisissez un nom pour votre nouveau menu puis cliquez sur « Créer le menu ».

? Note : Ce nom servira à le distinguer lorsque vous aurez à gérer plusieurs menus

La page des menus est divisée en 3 zones :

• Le cadre supérieur, permet de basculer entre les différents menus existants
• Le cadre de droite, permet de manipuler les éléments constituant le menu
• Le cadre gauche, liste les différents éléments pouvant être ajoutés au menu

Intéressons nous aux éléments du cadre de gauche. Ils sont regroupés en quatre sections :

• Les pages
• Les articles
• Les catégories
• Les liens personnalisés

En cliquant sur chaque section vous pourrez voir les éléments disponibles. Les éléments listés correspondent aux pages, articles et catégories que vous avez déjà créés.

Eléments pouvant être ajoutés au menu

Nous nous intéresserons pour le moment uniquement aux pages

Dans la section « Pages« , cochez les pages que vous souhaitez intégrer à votre menu, puis cliquez sur le bouton « Ajouter au menu« .

? Note : si vous ne trouvez pas un élément, essayez de cliquer sur le bouton « Afficher tout« . Par défaut seul les éléments récemment créés sont affichés

Les éléments insérés dans le menu apparaitront sous la forme de cadres empilés. Bien qu’ils soient affichés de manière verticale, le menu sera lui affiché de manière horizontale. Le cadre le plus haut est l’élément le plus à gauche de votre menu, le cadre le plus bas, l’élément le plus à droite

Pour modifier l’ordre des éléments dans le menu, cliquez sur un élément et le faire glisser vers le haut ou vers le bas. Essayez dans un premier temps de les garder bien alignés verticalement. Nous verrons juste après à quoi cela correspond lorsque un cadre est décalé vers la droite.

Les éléments peuvent êtres déplacés en les faisant glisser

Pensez bien à enregistrer votre menu en cliquant sur bouton « Enregistrer le menu »

Sous-menu, créer une arborescence :

Il est possible de créer des sous-menus, ou liste déroulante. Un sous-menu est composé d’un élément principal (dit parent) et de plusieurs sous éléments (dits enfants)

Pour créer un sous menu, faites glisser un élément sous l’élément parent en le décalant légèrement sur la droite. En procédant ainsi nous créons une affiliation entre ce dernier et l’élément supérieur.

L’on peut créer une arborescence plus profonde en combinant d’autres éléments et en opérant des décalages plus importants. Voir illustration ci-dessous :

Encore une fois pensez à enregistrer vos modifications avant de quitter cet écran

Pour apprécier le résultat de vos modifications cliquez sur l’icône représentant une maison se trouvant en haut à gauche de votre écran

Vous devriez obtenir quelque chose comme ceci :

Pour revenir au tableau de bord, cliquez sur le W situé dans la barre d’outils en haut à gauche

Créer un maillage via des liens hypertexte

Il existe avec la plupart des blocs Texte et Média, la possibilité de créer un lien permettant d’afficher une page, qu’elle soit interne ou externe à notre site

Faites un essai avec le bloc paragraphe et le bloc image (attention tous les blocs image, n’intègrent pas cette fonction, utilisez le bloc image standard)

Créer un lien

Saisir un texte d’accroche (ancre) sur la page, surlignez le texte, puis cliquez sur l’icône en forme de chainon dans la barre d’outils flottante.

Une fenêtre s’ouvre demandant de rentrer une URL.

Si l’on souhaite créer un lien vers une page interne (de notre propre site), saisissez les premières lettres de la page que vous souhaitez lier. WordPress va vous proposer les pages qu’il aura trouvé parmi les pages existantes. Sélectionnez celle qui convient et validez avec la touche Entrée.

Si l’on souhaite créer un lien vers une page externe, il faudra alors copier l’URL du site concerné à partir de la barre d’adresse, puis coller l’URL dans le champs dédiés et validé par la touche Entrée.

? Note : par convention et pour diverses raison pratique, l’on ouvre généralement un lien externe dans un nouvel onglet. Cliquez dans ce cas sur le bouton « Ouvrir dans un nouvel onglet »

Créer un lien sous forme d’image

Cela se passe de la même manière qu’avec un lien texte. Il suffit d’insérer un bloc image puis de cliquer sur le chainon pour transformer l’image en lien

Note : cas des adresses emails

Dans le cas où l’on souhaiterait créer un lien vers une adresse email, il faut procéder de la même manière excepté le fait qu’il faudra saisir la balise mailto: devant l’adresse email. Exemple :

               mailto:dupond@mail.fr

Tester son site web

Une fois le menu créer votre site devient exploitable. Vous pouvez le tester en cliquant sur l’icône maison se trouvant dans la marge supérieure du tableau de bord WordPress.

Lorsque vous souhaitez revenir au tableau de bord, cliquez sur le W situé dans la barre d’outils en haut à gauche

Personnaliser son site web : modifier l’entête, le titre du site et la charte graphique

Se rendre dans le menu Apparence puis Personnaliser. Vous trouverez ici les options permettant de modifier l’identité du site (titre, slogan, logo), l’entête et le pied de page (texte et image), les couleurs de fond et de polices, le fonctionnement de la page d’accueil, et bien d’autres choses encore

? Note : le module de personnalisation, également appelé « Page Builder », change d’un thème à un autre. Certains thèmes proposeront plus d’option que d’autres, voir une refonte complète de la de l’ergonomie du page builder et de l’éditeur de thème.

Le Blogging : pour plus de souplesse

Nous avons vu comment réaliser un site vitrine basique. Mais dans le cas de certains projets il pourra être nécessaire d’exploiter les outils liés au blogging (Articles, Catégories et Page des Articles).

Les outils liés au blogging permettent de gérer avec plus d’aisance une grande quantité de contenu (actualités, articles, tutoriels, curation de contenu, …)

Tandis que les pages standards sont adaptées à une structure possédant un faible nombre de pages (une dizaine tout au plus), les outils du blogging seront utilisés dans le cas d’un site dont le contenu est amené à évoluer et dont le nombre de page n’est pas défini à l’instant T. Ils permettent en outre une organisation et une classification plus poussées qu’un site standard (voir le support de cours « Article et Page – les différences »)

Les outils du blogging :

• Les articles : les articles sont un type de page avec plus de fonctions. Ils peuvent être associés à des catégories et des étiquettes afin d’être organisés et classifiés avec plus de souplesse. Pour qu’un visiteur puisse consulter un article, à l’inverse de tous les autres éléments déjà cités et pour lesquels l’on créer des liens d’accès dans les pages et le menu principal, l’on accède aux articles via les catégories.
• La Page des Articles : liste chronologiquement l’ensemble des articles publiés. Ce sommaire interactif permet au visiteur d’accéder aux divers articles quel que soit leurs catégories.
• Les catégories : permettent d’organiser vos articles par thématiques. Les catégories sont en réalité des pages fonctionnant de la même manière que la Page des Articles mais opérant à la manière d’un filtre. Les catégories peuvent être glissées dans le menu principal (ou la barre latérale) pour permettre au visiteur de naviguer entre les différents articles.
• Les étiquettes : idem que ci-dessus, mais permettant de rassembler des articles selon une thématique secondaire. Equivalent du # dans certains réseaux sociaux. Cela permet de retrouver et lier des articles qui appartiennent à des catégories différentes.

Exemple : pour un site de voyage catégorisé par continent. Pour permettre à un visiteur de retrouver tous les articles évoquant des plages quel que soit le continent auquel ils appartiennent, l’on va associer une étiquette « Plage » à chacun de ces articles. Les étiquettes peuvent ensuite être glissée dans une colonne latérale, un menu secondaire, au bas d’un article, …

Pour configurer une page des articles, créez une page vide du nom de votre choix. Puis rendez vous dans les options de configuration de la page d’accueil pour définir une « page des articles » :

• Dans le tableau de bord WordPress aller dans « Réglage » puis « Lecture« . Sélectionnez l’option « Page Statique« , puis en face de « Page des Articles« , sélectionnez la page que vous souhaitez activer comme page des articles
• Il conviendra ensuite d’insérer cette page dans votre menu principal pour que le visiteur y ait accès

Les catégories sont traditionnellement insérées dans le menu principal, dans un menu secondaire, dans une page pilier ou dans la barre latérale.

Les étiquettes sont traditionnellement insérées dans la barre latérale ou au bas d’un article. Eventuellement dans un menu tertiaire.

Les extensions

La grande force de WordPress réside dans ses extensions qui permettent de repousser les limites de ce logiciel. Il existe une extension pour chaque besoin : newsletter, mise en page, formulaire de contact, réseaux sociaux, widget, apparence, …

!!

Pour en apprendre plus sur les extensions, consultez le support de cours « Présentation de WordPress et de ses menus » ainsi que le support « Extensions conseillées«