Aller au contenu principal

#04 – Personnalisation : Thèmes & Plugins

SOMMAIRE

ThèMES WORDPRESS

Présentation & Contexte / Exemple de personnalisation / Bibliothèque de thèmes / Installation & thèmes enfants

Présentation des thèmes

Un thème WordPress n’est finalement qu’un ensemble de fichiers et de dossiers, qui servent à modifier et personnaliser l’apparence générale d’un site WordPress. Il sert également à définir comment les contenus vont s’afficher sur ton site.

 

En aucun cas, un thème WordPress n’impactera le contenu de ton site (titres, catégories, articles,etc …). La seule chose qu’il peut faire c’est, par exemple, de déplacer/cacher l’affichage de certains de tes contenus sur une page donnée.

 

Son objectif premier : personnaliser simplement le visuel de votre site . À noter qu’il peut être appelé skin.

Côté WordPress, les thèmes sont gérés depuis le back end à l’endroit suivant :

Apparence > Thèmes

On voit que, par défaut, certains thèmes sont installés

Tous les thèmes rajoutés par la suite seront activables/désactivables/supprimables via cet espace.

Emplacement des fichiers

À noter que ces thèmes sont trouvables directement dans votre dossier WordPress local :  htdocs > #votredossierwordpress# > wp-content > themes . Il ne s’agit ni plus ni moins que de plusieurs fichiers de codes.

Si ton site est en ligne, il est dans le dossier wp-content à la racine de ton hébergement (souvent dans un dossier nommé “public_html” ou “www“).

Bibliothèque de thèmes

Au delà des thèmes installés, on peut évidemment naviguer dans la fameuse bibliothèques de thèmes de WordPress. On va y trouver une multitudes de thèmes, qui sont classés selon plusieurs critères.

On peut notamment naviguer dans 3 types de filtres : Nouveautés / Populaire / Favoris , et si cela ne suffit pas à trouver son bonheur on peut accéder à un filtre poussé avec de nombreux critères :

Attention toutefois, les visuels présentés ne correspondent pas à ce que vous allez avoir, mais bien à ce qu’il est POSSIBLE de faire. Dans tout les cas, un thème dépend du contenu de votre site. Si ton thème te propose d’intégrer des contenus, il s’agit bien souvent d’une extension installée par ce même thème pour importer des templates

Thèmes gratuits

Les thèmes disponibles dans la bibliothèques sont tous des thèmes gratuits. Il existe des thèmes payants, récupérables depuis d’autres sites. Sous cette forme, on ne peut pas les installer depuis l’interface de WordPress

Thème enfant - tutoriel

  • 1
    Installes et actives le thème de ton choix

  • 2
    Rends-toi sur le site de WPMarmite pour accéder à l'outil de création du thème enfant

  • 3
    En fonction de la façon dont est hébergé ton site :

    Si ton site est en ligne, copie-colle l'URL dans le champ de formulaire
    Si ton site est en local, cliques sur le lien sous le champ de formulaire et suis les indications

  • 4
    Cliques sur le bouton de validation et récupères l'archive qui t'est proposée

  • 5
    Dans Apparence > Thèmes > Ajouter , cliques sur "Téléverser un thème" et choisis le dossier zip préalablement récupéré

Thèmes enfants

Le thème enfant est une copie presque conforme de votre thème “normal”, mais il vous permet de garder intact toutes les modifications faites si votre thème est mis à jour (réglages du thème + CSS personnalisées)

MENUS

Les menus sont la base de la navigation : pour les créer on se rends dans Apparence > Menus.

 

À noter : depuis la mise à jour WordPress 5.9 , en fonction du thème, le réglages des menus n’est plus forcément placé au même endroit !

 

Pour retrouver l’affichage “classique” de la gestion des menu (et celle qui nous est utile avec un page builder) vous devez télécharger et activer un autre thème que celui de base de WordPress. Si vous prévoyez de créer un site avec Elementor depuis une page blanche, vous pouvez vous tourner vers un peu n’importe quel thème.

 

Pour en savoir un peu plus sur comment créer une navbar et un menu sous WordPress et Elementor, c’est par ici !

Dans un menu WordPress on peut placer plusieurs éléments :

MENUS CRÉATION / AFFICHAGE

Il faut différencier les menus existants et les menus affichés par votre thème ! Un menu doit être crée via le back-end PUIS il faut définir ou il doit s’afficher sur votre site (en fonction du thème donc).

Si l’on utilise un constructeur de page (type Elementor) ces menus seront affichés via des widgets de type Menu (Elementor et autres extensions).

PLUGINS WORDPRESS

Présentation & Contexte / Exemples de plugins / Installations

Présentation et exemples

Pour bien comprendre le système de plugins, il faut voir votre site comme un puzzle, WordPress en étant la pièce centrale. Si vous souhaitez rajouter des fonctionnalités supplémentaires on va utiliser ce que l’on nomme des plugins (des extensions) que l’on va venir imbriquer à WordPress. Un plugin est donc comme une pièce de puzzle qui rajoute des fonctionnalités.

NOM DU PLUGIN DESCRIPTION
Elementor / DIVI
Constructeur de pages (constructeur de thèmes pour Elementor Pro et DIVI)
Yoast SEO (eng) / SEO Press (fr)
Outils de référencement pour votre site (titres, métas, sitemaps, réglages divers). Attention de ne pas en installer plusieurs pour éviter les conflits !
WPOptimize / WP Rocket
Outils de performances , d’optimisations (notamment pour les images, le cache, la base de données …). Le premier étant gratuit
Updraft / Backup Guard
Outils pour sauvegarder votre site et offrant des fonctionnalités diverses (automatiser, stockage cloud, etc ..)
Duplicator / All in one WP Migration
Permet de créer une “image” de votre site. Cet outil créer un fichier que vous pouvez réimporter depuis un autre site WordPress
Woocommerce
Transforme votre site en un site de ecommerce. Il est possible de créer des pages produits, un sytème de panier et d’autres éléments du genre.
LISTE DE PLUGINS

La liste n’est pas exhaustive, il est conseillé de faire des recherches en fonction de vos besoins, et de choisir les plugins avec les meilleurs retours / notes.

PLUGINS = FICHIERS DE CODES

  • Installation automatique : via l’interface WordPress, en recherchant et en cliquant sur Installer l’extension. Elle s’active ensuite dans l’onglet “Extensions > Extensions installées”.
  • Installation manuelle : si votre extension n’est pas proposée dans la bibliothèque (extension payante ou développée sur mesure), il faut alors installer le plugin via les fichiers. Cela consistera le plus souvent en un dossier à déposer dans votre dossier wp-content/plugin

EMPLACEMENT DES FICHIERS

Tout comme les thèmes, vous pouvez retrouver “physiquement” vos plugins dans votre dossier WordPress. Ils se situent dans #mondossierWP#/wp-content/plugins

ELEMENTOR WEBSITE BUILDER

Présentation & Contexte / Blocs / Plugins dédiés / Thèmes dédiés / Free vs Pro

PRÉSENTATION DU PLUGIN

Elementor est un très gros plugin qui va totalement changer la façon de créer des pages et des articles. Une fois installé, il va s’intégrer à la création de toutes nouvelles pages ou de tout nouveaux articles. Il remplace donc le constructeur de page Gutenberg (WordPress natif).

 

Il propose une construction de page à base de blocs à déposer en cliqué-glissé, et dont chaque bloc est paramétrable indépendamment.  Attention cependant, modifier une page créer via Gutenberg avec Elementor expose à des problèmes de structure (et vice versa). Il est fortement conseillé (voir impératif) de ne travailler qu’avec un seul de ces outil

ELEMENTOR VS DIVI

Elementor, contrairement à son homologue DIVI, est disponible en version gratuite (DIVI est uniquement payant, à hauteur de 200 € environ). La version gratuite est suffisante pour créer un site avec l’aide de quelques plugins additionnels

EXEMPLES DE BLOCS

Un bloc aux multiples fonctionnalités

Editeur de texte

Le bloc de base pour les visuels

Image

Apporter un peu d'interactivité à ta page

Bouton

Pour accompagner des photos avec du texte

Boîte d'image

Trier des contenus pour gagner de la place

Onglets

Pour un style FAQ impérissable sur ton site

Accordéon

PLUGINS Dédiés

Pour étendre les fonctionnalités déjà importantes d’Elementor, il existe des plugins, spécialement dédié à Elementor. Il en existe 4 des plus importants .

Ces plugins ajoutent énormement de blocs. Tout comme Elementor, ils existent en versions gratuite, et il faut payer une licence pour débloquer tout le contenu.

ELEMENTOR + PLUGINS

Si l’on couple Elementor en version gratuite avec ces plugins (en version gratuite également), on obtient suffisamment de blocs pour créer un site d’un niveau “professionnel”. En revanche, cela implique un grand nombre de fichiers et un poids bien plus important pour votre site.

Thèmes Dédiés

De la même façon que pour les plugins, il existe de nombreux thèmes spécialement développés pour Elementor :

Exemple avec le thème ASTRA : une fois installé, on peut récupérer un composant exprès pour le thème , qui va permettre d’importer un site “tout prêt”. L’utilisation d’Elementor permet d’uniformiser ces modèles et d’obtenir un modèle de site avec des blocs entièrement personnalisable.

On retrouvera dans ces thèmes par exemple des widgets personnalisé pour Elementor, ainsi que des modèles prédéfinis

ELEMENTOR ET CES THèmes

Bien que l’on parle de thèmes pour Elementor, il faut savoir que tous les thèmes WordPress vont fonctionner avec Elementor. Ils auront simplement moins de fonctionnalités sur mesure pour ce page builder

QUIZZ DE CONNAISSANCES

Test tes connaissances sur le sujet du cours

Bienvenue sur la plateforme de cours numérique Ekolearn

Envie d’une escapade nocturne  ?

Tapes ta recherche puis appuie sur Entrée (↵)

Pas d'autocomplétion, mais pourquoi ?

L’autocomplétion dans un formulaire de recherche consiste à proposer des mots clés, des résultats, à chaque lettre écrite dans le champ. 

Oui cela est pratique, mais en terme de consommation de ressources c’est très gourmand ! Aussi, dans un soucis d’écoconception, ce formulaire de recherche ne régira pas à vos interactions en temps réel, mais il fonctionne quand même !

Bonne pratique n°4 du guide de l’éco-conception web

Quizz - Deploiement de WordPress

ATTENTION A TA SANTÉ

Tu ne semble pas avoir bougé depuis
MIN
0

N’hésites pas à lever les yeux , à regarder un peu “au loin” pour les soulager.

Également, n’hésites pas à t’étirer le cou et le dos en suivant quelques gestes simples.