Wordpress

Presentation

Wordpress : Presentation

Wordpress est un CMS (Content Management System)

Son rôle est de pouvoir créer des site web sans aucune lignes de code

Wordpress est open source, ce qui veut dire que son code, et son utilisation est gratuite

Il représente aujourd'hui 40% des sites internet du monde !

C'est le CMS le plus utilisé au monde

Wordpress : Presentation

Pour comprendre Wordpress il faut tout d'abord savoir comment fonctionne le web

Wordpress : Presentation

Prenons le dessin suivant :

Wordpress : Presentation

Le Client

Le client c'est une personne sur son navigateur (chome, firefox, etc ...) explorant internet

Wordpress : Presentation

Le Server

Le server c'est un ordinateur hébergé chez un fournisseur connécté 24/24h à internet. Il contient notre site wordpress et son rôle est de fournir toutes les pages du site

Wordpress : Presentation

URL

Afin que le client puisse accéder à notre site, il doit passé par une URL

C'est l'adresse de notre site internet

Wordpress : Presentation

Afin de bien comprendre comment le client et le serveur communique, il faut détaillé le fonctionnement d'une URL

Voici un exemple :

https://mon-site.com/vetements?page=2

Wordpress : Presentation

https://mon-site.com/vetements?page=2

Le Protocole

Le 1er partie (https), c'est le protocole. Il correspond à la langue parlé entre le client et le serveur

Comme 2 humains, le client et le serveur doivent parler la même langue pour se comprendre

Wordpress : Presentation

https://mon-site.com/vetements?page=2

Le Nom De Domaine

La 2nd partie (le nom de domaine ou DNS) correspond à l'adresse postale sur internet de notre site internet

Nous pouvons acheter ces « DNS » au près de fournisseur comme OVH, etc ...

Wordpress : Presentation

https://mon-site.com/vetements?page=2

La Resource

La 3eme partie (la resource) correspond à la page de notre site internet que le client consulte

Wordpress : Presentation

https://mon-site.com/vetements?page=2

Les QueryString

La dernière partie, les query strings sont des filtres

Ils permettent de filtrer les informations que nous souhaitons obtenir sur notre page

Wordpress : Presentation

Afin de mettre en ligne notre site internet il faut donc se procurer les 2 choses suivantes

1. Un serveur ou hébergeur

2. Un nom de domaine (ex: mon-site.com)

Installation

Wordpress : Installation

Afin d'installer wordpress nous avons 2 solutions possible

1. Installer wordpress en local

2. Utiliser un hebergeur

Wordpress : Installation

Pour installer wordpress en local (c'est à dire sur notre machine) il faut installer tout les outils nécessaire à son bon fonctionnement

1. PHP

2. Apache ou Nginx

3. MySql

Ce qui peut se montrer délicat ! 

Wordpress : Installation

Enfin, nous pouvons aussi directement s’inscrire et générer notre site sur un hébergeur

Pas besoin d'installer quoi que ce soit, en quelques click notre site est près

Cependant ces solutions sont souvent payante

Wordpress : Installation

Durant cette formation nous allons utiliser themecloud

C'est un service français d'hébergement de site wordpress gratuit pendant 30 jours

Sinon l'hébergement peut coûter entre 9.6 € pour des sites simple dit "vitrine" ou 26 € pour des sites de commerce

Wordpress : Installation

Voici comment créer un site wordpress sur themecloud

Les Premiers Pas

Wordpress : Les Premiers Pas

Afficher et se connecter à l'administration wordpress

Wordpress : Les Premiers Pas

Par défaut, wordpress propose 2 types de contenue

Les Articles : Se sont des contenues datés accessible sous forme de liste (archives)

Les Pages : Se sont des contenue static généralement accessible via un menu

Wordpress : Les Premiers Pas

Wordpress utilise aussi 2 systèmes de classification :

Les Catégories : Les catégories sont hiérarchiques et permettent de situer le contenu au sein d’une arborescence.

Les Tags : Les tags n’ont pas de hiérarchie et reflètent généralement les thématiques liées au contenu.

Wordpress : Les Premiers Pas

Afin d'éditer un article, wordpress possède un éditeur basé sur un système de block : Gutenberg

Les articles et les pages peuvent être enregistré en brouillon, en mode privé ou publique,  nous pouvons aussi planifier leurs mise en ligne !

Wordpress : Les Premiers Pas

Créer son premier article !

Paramétrer les options de son site

Wordpress : Paramétrer les options de son site

Vous pouvez facilement paramétrer tout un panel d'option pour votre site wordpress comme :

La langue

Le fuseaux horraire

Titre et description de votre site

etc ...

Wordpress : Paramétrer les options de son site

Pour cela :

Wordpress : Paramétrer les options de son site

Vous pouvez aussi modifier les paramètres d'écriture de vos articles (Réglages > Écriture)

Ainsi, vous pouvez sélectionner par exemple la catégorie par défaut de vos articles

Wordpress : Paramétrer les options de son site

Un autre paramètre important sont les permaliens (Réglages > Permaliens)

Ces réglages vous permettent de définir le format des liens de vos articles. Très utile lors du référencement !

Wordpress : Paramétrer les options de son site

Vous pouvez aussi dans les paramètres de lecture (Réglages > Lecture) paramétrer l'indexation par les moteurs de recherche

Accueil et Menu

Wordpress : Accueil et Menu

Dans ce chapitre nous allons mettre en place une page d'accueil ainsi qu'un menu pour notre site internet

Wordpress : Accueil et Menu

Créer sa page d'accueil

Wordpress : Accueil et Menu

Configurer un menu

Apparence et Customizer

Wordpress : Apparence et Customizer

Il est possible de gérer l'apparence ainsi que certains paramètres comme le logo, la disposition etc ...

Pour cela il faut accéder au customizer (Apparence > Personnaliser)

Wordpress : Apparence et Customizer

Ajoutez le logo

Wordpress : Apparence et Customizer

Options d'apparence

Définir les objetifs

Wordpress : Définir les objetifs

Il est très important avant même de se lancer dans la création d'un site internet de définir les objectifs de notre site

Si par exemple il s'agit de vendre des produits, de promouvoir un événement, de présenter une activité etc ....

Voici quelques astuces pour démarrer sereinement

Wordpress : Définir les objetifs

Penser au référencement

Il est très important que votre site soit référencé correctement sur les moteurs de recherche

Pour cela vous pouvez définir des expressions, mots, phrase ou votre site doit remonter

Des outils comme Neil Patel peuvent être très utile !

Wordpress : Définir les objetifs

Définir la structure du site

C'est une étape crucial pour votre site internet. Cela permet de savoir comment un utilisateur et les moteurs de recherche vont naviguer sur votre site

Il suffit de noter en vrac tout ce dont le site doit parler et d'ensuite les les organiser en grande section :

Wordpress : Définir les objetifs

Définir la structure du site

Un exemple pour un site d'agence web :

Wordpress : Définir les objetifs

Faire des wireframe

Cela consiste à faire des schémas très simple de nos pages afin de déterminer comment présenter les choses

Vous pouvez vous aider d'outils comme Cacoo, wireframe.cc ou encore figma !

Wordpress : Définir les objetifs

Faire des wireframe

Voici un exemple de wireframe

Thème et Page Builder

Wordpress : Thème et Page Builder

Le thème est le composant le plus important d'un site wordpress, c'est celui qui définie l'apparence de votre site, les options de personnalisation, les menus, les fonctionnalités etc ...

Chaque thème possède sont propre gabarit (layout en anglais)

Wordpress : Thème et Page Builder

Voici un exemple de gabarit de thème classique

Wordpress : Thème et Page Builder

La page builder est un outil que met à disposition wordpress afin de créer des pages avec des design personnalisées.

Basé sur un system de glisser déposer (drag and drop) de widget ou composant

La aussi vous avez la possibilité de choisir parmis plusieurs page builder

Elementor : Pour les « designer », il possède de nombreux composant même en mode gratuit (nous utiliserons ce dernier)

Beaver Builder : Pour les « développeurs »

Wordpress : Thème et Page Builder

Il existe de nombreux type de thèmes wordpress classé en 3 familles

Tous peuvent utiliser leurs propre « Page Builder ». Il est important de sélectionner des thèmes utilisant un page builder « officiel » comme Elementor afin de ne pas rester bloqué.

Wordpress : Thème et Page Builder

Les Gratuits

Ce sont des thèmes entièrement gratuit, minimaliste, mais souvent de qualité « médiocre ».

Nous pouvons les obtenir directement depuis le site « wordpress.org »

Wordpress : Thème et Page Builder

Les Freemium

Ce sont des thèmes gratuit mais dispose d'une version payante plus approfondie. Certains sont très limité en version gratuite mais d'autre offres de très bon service même gratuitement !

C'est la catégories dominante, ils sont généralement tous disponible sur le site « wordpress.org »

Wordpress : Thème et Page Builder

Les Premium

Ce sont des thèmes payant. Souvent très jolie, et plus fournie en fonctionnalité.

Ils ne sont pas disponible sur « wordpress.org » mais génarelement se situe sur des marketplace comme themeforest

Wordpress : Thème et Page Builder

Il faut ensuite bien regarder la destination du thème, c'est à dire l'utilisation auquel le thème est destiné

Certains thèmes sont destiné pour des sites de commerces, d'autre vitrine, blog etc ...

Voici les 3 grandes destinations

Wordpress : Thème et Page Builder

Les Starter themes

Il s'agit de thèmes neutres, minimaliste souvent destiné au développeurs pour être personnalisé

Wordpress : Thème et Page Builder

Les thèmes spécialisés

Il s'agit de la majorité des thèmes, il cible un fonctionnement bien spécifique comme un blog, un e-commerce, un site de reservation etc ...

Wordpress : Thème et Page Builder

Les thèmes multipurpose

Il s'agit de thèmes souvent très très lourds, générant du code passable mais permettant de faire tout un panel de fonctionnalité et pouvant s'adapter aux besoins. La plupart de ces thèmes sont à éviter mais certains comme OceanWP ou Astra sont véritablement très intéressant !

Wordpress : Thème et Page Builder

Enfin, afin de bien choisir un thème wordpress il est important de comparer touts ces critères, tels que :

Notes et commentaires, Notoriété, Rapidité de chargement, Multilingue ou non, La Source, Son design et surtout le support des fonctionnalités et des plugins (tel que WooCommerce, BuddyPress etc ...)

Wordpress : Thème et Page Builder

Installer un thème

Wordpress : Thème et Page Builder

Gagner du temps en important un site de dèmo !

Les Extensions

Wordpress : Les Extensions

Nous l'avons vue lorsque nous avons installé notre thème, il existe de nombreuse extension disponible ajoutant des fonctionnalités à notre site internet

Par exemple, parmi les extensions installé nous avons ajouté « WPForm ». Cette extension nous permet d'ajouter simplement des formulaires de contact

Enfin, certains de ces composant wordpress possède aussi leurs propres extensions : les addons

Wordpress : Les Extensions

Installons quelques extension supplémentaire

Wordpress : Les Extensions

Voici une liste de plugins bien utile :

• SEO Press : (ou Yoast SEO) pour optimiser le référencement naturel
• Broken Link Checker : pour être alerté en cas de lien cassé sur notre site
• Redirection : pour identifier les erreurs 404 et les rediriger vers des pages existantes
• ShortPixel : pour optimiser le poids des images
• Duplicate Page : pour dupliquer facilement une page
• Central color palette : pour définir de façon centralisée les couleurs disponibles dans les palettes de choix de couleur du thème et de l’éditeur WordPress classique.

Wordpress : Les Extensions

Et maintenant quelques addons

Wordpress : Les Extensions

Voici les addons installé :

• Premium addon for elementor : Ajoute toute une série de widget pour Elementor
• Hustle : permet de générer des pop-up
• WPForm : Créer et gére des formulaires HTML
• Elementor : Page builder le plus populaire de wordpress

Wordpress : Les Extensions

Attention

Lorsque vous installez des extensions, assurez-vous que ces dernières répondent au même critères que les thèmes !

Essayez aussi de ne pas installer trop d'extension inutile, afin de garder un site performant et d'éviter les bugs

Le Design

Wordpress : Le Design

Pour que votre site internet face professionnel, il est essentiel de respecter une charte graphique précise

Si vous n'êtes pas « designer » vous pouvez vous inspirez de site existant ou de plate forme comme dribble ou collect ui

Wordpress : Le Design

La palette de couleurs

Le premier élément de tout design commence par une « palette de couleur ». C'est à dire une suite de couleurs cohérente pour votre site

Vous pouvez vous aider de site comme coolors.co ou encore colormind afin de générer une palette cohérente

Wordpress : Le Design

La police d'écriture

Un autre élément essentiel. C'est elle qui déterminera l’expérience de celui qui vous lira

Généralement, la plupart des design ne possède pas plus de 2 polices d'écritures voir 3 dans certains cas.

Pour choisir vos police vous avez le service googlefont

Wordpress : Le Design

Le master visuel ou Hero unit

Il s'agit ici de trouver un logo pour notre site ainsi qu'une image assez large qui servira de bandeaux de présentation.

Vous pouvez trouver de l'inspiration sur unplash.com ou encore freepik

Wordpress : Le Design

Voici comment paramétrer un thème en fonction de votre charte

Wordpress : Le Design

Et voici comment paramétrer les polices

Wordpress : Le Design

Nous allons maintenant prendre en main Elementor et personnaliser notre page d'accueil

Pour cela, rendez-vous sur la page à modifier et cliquez sur « Modifier avec Elementor »

Wordpress : Le Design

Voici comment personnaliser le Hero de notre page

Wordpress : Le Design

Voici comment personnaliser le Hero de notre page

Wordpress : Le Design

Et voici comment personnaliser le contenue de notre page d'accueil

Wordpress : Le Design

Nous pouvons aussi modifier les blocks de services

Wordpress : Le Design

Personnalisation de la deuxième section

Wordpress : Le Design

Personnalisation des autres sections