Se former à WordPress
De la conception à la réalisation
Avant de se lancer :
- Établir ses besoins et ses objectifs
- Définir son arborescence
- Examiner les sites de la concurrence et repérer des sites références (design, ergonomie, fonctionnement)
- Lister les fonctionnalités particulières (multilingue, e-commerce, formulaires complexes, filtres…)
- Propre à WordPress : définir la répartition du contenu entre pages, articles et catégories
Installer WordPress et configurer son site
Si l’hébergeur ne propose pas de module d’installation de WordPress…
- Créer une base de données chez l’hébergeur et noter ses identifiants de connexion (adresse/hôte, nom de la base de données, identifiant, mot de passe)
- Se munir des identifiants de connexion au serveur FTP (fournis par l’hébergeur)
- Se connecter au serveur via le logiciel Filezilla et y copier le dossier WordPress, préalablement téléchargé
- Aller sur le site pour finaliser l’installation
Ensuite :
- Effectuer les réglages de bases de WordPress
- Installer et personnaliser un thème (si besoin, créer un thème enfant avant de le personnaliser)
- Créer l’arborescence (pages, catégories, articles)
- Créer le menu principal
Pour se connecter au Tableau de Bord par la suite :
https://monsite.com/wp-admin
https://monsite.com/wp-admin
Intégrer le contenu
- Intégrer le contenu avec l’éditeur standard Gutenberg ou avec le constructeur Elementor (pour créer des mise en forme plus riches et des gabarits/modèles)
- Créer un formulaire de contact
- Construire le pied de page avec les Widgets
Extensions et customisation
- Personnaliser son thème avec les CSS Additionnelles
- Créer une newsletter avec MailPoet
- Optimiser son référencement avec SEO Press
- Sécuriser son site avec Wordfence
- Créer une page de maintenance/site en construction
- Ajouter des boutons de partage et des pop-up avec Hustle
- Ajouter un flux Instagram
Elementor
Trucs et astuces pour enrichir sa mise en forme
Créer une colonne cliquable avec un bouton et une image en arrière-plan
Avant de vous lancer, vous aurez besoin de l'extension Make Section & Column Clickable Elementor.
Créer un Header et un Footer personnalisés avec Elementor Header & Footer Builder
Un entête personnalisé avec l'extension Elementor Header, Footer & Blocks
Afficher un carrousel d’Articles sur la page d’accueil avec Livemesh for Elementor
Pour rendre la page d’accueil plus dynamique, on peut appeler des Articles dessus, les dernières actualités par exemple. Ici, un carrousel fait défiler les 9 derniers articles classés dans la catégorie Programmation. Pour filtrer les contenus à afficher, on doit définir la « taxonomie » : ce terme regroupe les catégories et les étiquettes.
Afficher une grille d’Articles dans une Page avec Livemesh for Elementor
Les Catégories de thèmes affichent souvent en titre « Archive de la catégorie : … ». Pas très esthétique ! Avec l’extension Livemesh Addons for Elementor, on peut appeler des listes d’articles dans le contenu d’une Page, et ainsi afficher du contenu en plus (texte d’introduction, sous-titres, images…). Pour filtrer les articles à afficher, on sélectionne la […]
Classe CSS dans Elementor
Apparence > Personnaliser > CSS Additionnels On peut ajouter une classe CSS à n’importe quel élément dans Elementor (section, colonne, outil), puis lui donner des instructions en CSS personnalisé. Ainsi, plutôt que de customiser à chaque fois l’apparence d’un élément récurrent, on lui ajoute simplement une classe.
Image en arrière-plan / Modifier un modèle – Elementor
2 étapes dans cette vidéo :• Modifier un modèle créé avec Elementor.• Mettre une image en arrière-plan d’une colonne. À noter : lorsqu’on modifie un modèle Elementor, la mise à jour ne se fait pas automatiquement sur les articles/pages dans lequel il a déjà été inséré. Il faudra aller les modifier « manuellement » ou insérer à […]
Customisation de l'apparence
Menu, CSS personnalisé, options de thème
...
Réglages du site / Paramétrer sa charte graphique dans Elementor
Définir son Design System (Polices et Couleurs globales) avec Elementor.
Créer un Header et un Footer personnalisés avec Elementor Header & Footer Builder
Un entête personnalisé avec l'extension Elementor Header, Footer & Blocks
Utiliser une Google Font dans un Thème enfant
Le lien vers la Google Font doit être copié dans le <head> du site, qui est toujours contenu dans le fichier header.php d’un thème. On doit donc copier le fichier header.php du thème parent (Cenote) dans notre thème enfant (Cenote Child), pour y ajouter le lien d’intégration de la typo. Une fois la typo appelée, […]
Personnaliser l’ordre des Articles
Extensions > Post Types Order Articles > Trier Permet de choisir l’ordre d’affichage des articles, classés par défaut du plus récent au plus ancien.
Créer un thème enfant
Créer un thème enfant permet de faire des modifications dans le code du thème activé sans l’affecter. En cas de mise à jour du thème, nos modifications sont ainsi conservées. Les étapes de création d’un thème enfant Télécharger le dossier du thème parent et créer un nouveau dossier qui contiendra le thème enfant. Dans le […]
Classe CSS dans Elementor
Apparence > Personnaliser > CSS Additionnels On peut ajouter une classe CSS à n’importe quel élément dans Elementor (section, colonne, outil), puis lui donner des instructions en CSS personnalisé. Ainsi, plutôt que de customiser à chaque fois l’apparence d’un élément récurrent, on lui ajoute simplement une classe.
Les extensions
Référencement, formulaires, sécurité
...
Créer un Header et un Footer personnalisés avec Elementor Header & Footer Builder
Un entête personnalisé avec l'extension Elementor Header, Footer & Blocks
Optimiser son référencement naturel avec SEO Press
Pour chaque Page, Article et Catégorie, on peut indiquer un Meta Title et une Meta Description, qui s'afficheront dans les résultats de recherche Google.
Afficher un carrousel d’Articles sur la page d’accueil avec Livemesh for Elementor
Pour rendre la page d’accueil plus dynamique, on peut appeler des Articles dessus, les dernières actualités par exemple. Ici, un carrousel fait défiler les 9 derniers articles classés dans la catégorie Programmation. Pour filtrer les contenus à afficher, on doit définir la « taxonomie » : ce terme regroupe les catégories et les étiquettes.