
À l’ère du digital toutes les entreprises migrent vers les activités en ligne. Pour ce, les organisations développent de plus en plus leurs présences en ligne. Quoi qu’il y ait plusieurs canaux aujourd’hui pour développer sa présence en ligne, un site web demeure le premier canal qui puisse mieux représenter une entreprise sur la toile. D’où celui-ci doit être bien développé en tenant compte d’un parcours client simple et fluide (User freindly) d’une part; et un bon design car retenez-le qu’une mauvaise image aura un impact néfaste sur l’activité de l’entreprise. Ce cours va vous permettre d’apprendre à créer des sites web modernes de A à Z avec WordPress sans passer par les codes.
Pour toute assistance :
Merci de nous laisser votre préoccupation dans les forum Udemy nous tâcherons de vous répondre ou veuillez nous contacter sur WhatsApp : +243 990 776
509
Pour se lancer dans la création d'un site web moderne avec WordPress nous avons besoin d'un certain nombre des ressources importante pour travailler dans les règles de l'art. Dans cette leçon nous allons voir comment réunir toutes ces ressources gratuitement.
Liens de téléchargement :
https://fr.wordpress.org/
https://filezilla-project.org/
https://www.apachefriends.org/fr/index.html
https://notepad-plus-plus.org/downloads/
Un site dynamique a besoin d'un serveur web pour fonctionner. Dans cette leçon nous allons voir comment installer un serveur local sur son ordinateur et apprendre à l'utiliser pour se lancer dans la création des sites dynamique sans forcement avoir la connexion internet en permanence.
Dans cette leçon, nous allons apprendre à installer WordPress et créer notre premier projet de site web sous WordPress.
Pour acheter des ressources envato telle que template WordPress, modèle graphique, musique, effets sonors... et bénéficier de certaines réductions, veuillez utiliser le lien ci-dessous :
https://1.envato.market/OMVon
Voici les étape à observer pour installer un template WordPress dans les règles de l'art :
Selection du thème gratuit ou installation du thème premium
Méthode du back office ;
Méthode du FTP;
Activation des extensions (plugins) requises ;
Importation des demos.
Création d'un thème enfant (child template) :
Créer un thème enfant pour WordPress
Les thèmes WordPress sont par nature déjà “customisables”, leur installation simple, les possibilités offertes sont nombreuses mais il y a toujours de petites choses que nous voulons changer. Une couleur ici, une taille de police là-bas, peut-être utiliser un autre appel à l’action, bref nous voulons modifier le CSS de notre thème WordPress et bien plus encore…
Le seul hic, c’est que la modification, même infime, d’un thème vous empêche de faire sa mise à jour vers une nouvelle version à l’avenir, parce que si vous mettez à jour, alors vous perdez toutes vos modifications :/
AU SOMMAIRE
Un thème enfant pour quoi faire ?
Les thèmes enfants résolvent ce problème en vous permettant d’utiliser toutes les fonctionnalités de votre thème tout en vous laissant mettre à jour ce dernier, sans peur de perdre vos modifications. Notons également que nous pouvons aussi utiliser, dans certains cas, les mu-plugins ;)
Un thème enfant, c’est quoi ?
Un thème enfant est un thème basé sur votre thème parent. Il en reprend toutes les fonctionnalités sans jamais le modifier. Ainsi vous pouvez apporter des modifications à votre enfant et en cas de mise à jour du parent, vous ne les perdez pas!
Tout fichier placé dans le thème enfant et portant le même nom que dans le thème parent, prendra le dessus et écrasera le fichier d’origine (sauf le functions.php).
A noter : de nombreux thèmes premium de nouvelle génération, embarquent dans leur zip un thème enfant prêt à l’emploi. Dans ce cas, il vous suffit juste de mettre en place ce dernier. Attention, il faut bien évidemment installer le thème parent (sans l’activer), puis installer le thème enfant et enfin activer ce dernier.
Comment mettre en place un thème enfant ?
Pour faire un thème enfant, nous avons besoin du thème d’origine que l’on qualifie de thème parent et de 2 fichiers que nous allons créer. Il faudra également créer un répertoire pour y placer les fichiers du thème enfant.
La première des choses à faire est donc de créer un dossier pour votre thème enfant dans le FTP. Il vous suffit d’aller créer le dossier du thème enfant dans /wp-content /themes /nomdevotrethemeenfant/.
Nous allons maintenant créer les deux fichiers dont nous avons besoin et que nous placerons dans le dossier de notre thème enfant :
un fichier functions.php
un fichier style.css
Pour l’exemple, je vais me baser sur un thème parent qui porte le nom de WPServeur, ceci étant également le nom du dossier de mon thème dans le FTP.
Dans le fichier functions.php, nous allons intégrer le code qui va permettre de combiner ou d’écraser le fichier style.css du parent autrement qu’avec le fameux @import css (on déconseille l’@import car cela ajoute une requête inutile cf: https://codex.wordpress.org/)
Voici donc le code à mettre dans le fichier functions.php du thème enfant :
<?php
/**
** activation theme
**/
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
Une fois ceci fait, nous avons déjà la partie qui va nous permet d’appeler notre fichier style.css. Il ne nous reste plus qu’a créer le fichier style.css du thème enfant. Voyons ce que doit obligatoirement contenir ce fichier :
/*
Theme Name: Theme enfant
Description: Theme enfant de Benoit WPServeur
Author: Benoit - WPserveur
Author URI: https://www.wpserveur.net
Template: WPServeur
Version: 0.1.0
*/
Description ligne par ligne du fichier style.css :
Theme Name : Le nom que je veux donner a mon thème enfant
Description : La description de mon thème enfant celle qui apparaîtra dans mon gestionnaire de thème WordPress
Author : L’auteur du thème enfant, en l’occurrence c’est vous
Author URI : L’url du site de l’auteur parce qu’un peu de pub ne fait pas de mal
Template : Le nom du thème parent en l’occurrence le nom du répertoire tel qu’il est écrit sur le FTP
Version : La version de votre thème enfant à titre indicatif
Petits détails à ne pas oublier sinon votre thème enfant ne fonctionnera pas :
Ne jamais mettre d’espace avant les deux points. Theme Name: fonctionnera mais Theme Name : ne fonctionnera pas
Pour l’attribut Template : Si votre thème dans l’admin se nomme par exemple “wpserveur” mais que le nom affiché dans le répertoire FTP est “WPserveur” alors il faudra obligatoirement respecter la casse et écrire WPserveur et non wpserveur
Pour le reste, vous pouvez ne rien mettre, cela fonctionnera quand même !
Afin d’égayer un peu votre gestionnaire de thèmes WordPress, vous pourrez aussi mettre un fichier screenshot.jpg (600×450 px conseillé) qui affichera la miniature de votre thème enfant dans le gestionnaire de thèmes.
Voilà, votre thème enfant est prêt !
Vous pouvez maintenant ajouter toutes vos modifications CSS dans le fichier style.css du thème enfant et vous ne les perdrez plus en cas de mise à jour du thème parent (n’oubliez pas de les commenter, ça aide parfois;).
Désormais, si vous voulez modifier votre single.php ou votre header.php, rien de plus simple! Copiez-les du parent vers le thème enfant et modifiez-les ! Vous pouvez également ajouter des fonctions dans le functions.php de votre enfant, tout en sachant que le functions.php du parent sera toujours chargé en dernier et qu’il prendra le dessus en cas de fonctions identiques.
Y’a pas un plugin pour le faire à ma place ?
Bien que ce ne soit pas vraiment nécessaire au vu de la simplicité de la création d’un thème enfant, nous sommes sous WordPress et forcément il n’y a pas 1 plugin qui peut le faire, mais 3. L’utilisation de ces plugins est à réserver aux purs débutants, pour ma part je préfère largement la méthode manuelle.
https://wordpress.org/plugins/one-click-child-theme/
https://wordpress.org/plugins/child-themify/
https://fr.wordpress.org/plugins/child-theme-configurator/
Modèle de thème enfant WordPress à télécharger :)
Pour faire encore plus simple et vous permettre d’utiliser rapidement un thème enfant, je vous propose un modèle à télécharger gratuitement et à adapter pour vos besoins. Cliquez sur l’icone ZIP ci-après pour télécharger (fichier zip de 97 ko) ce modèle de thème enfant prêt à l’emploi :)
Pour adapter ce thème enfant à vos besoins, il vous suffit de le décompresser, d’éditer la ligne “Template” du fichier style.css avec le nom exact du répertoire de votre thème parent et d’uploader le tout via FTP dans le répertoire /wp-content/themes/, enfin activez-le depuis le menu WordPress Apparence>>Thèmes.
Source : https://wpformation.com/theme-enfant-wordpress/
Dans cette leçon nous vous donnons les bases de la personnalisation d'un thème et nous vous montrons les base d'Elementor qui est l'un des éditeurs visuels les plus utilisés dans le monde pour personnaliser vos pages.
Recommandations :
Les recommandations ci-après sont des tâches à faire avant de vous lancer dans la création de votre site. Certe nous parlons de ça à ce stade précis de notre formation, mais dans la vie pratique, c'est ce qu'il faut faire avant de commencer à travailler sur votre projet.
Concevoir une arborescence de votre site web
L’arborescence d’un site web permet d’avoir une vision globale du site et des parcours de navigation avant de réaliser les maquettes des pages principales. Réaliser le plan de son site web est souvent un exercice très difficile.
Il n’est jamais évident d’organiser du contenu, souvent plus hétérogène qu’on l’imagine au départ. Surtout, faire un plan, c’est hiérarchiser, faire des choix, ce qui peut prendre du temps et créer des discussions dans une équipe.
C’est un exercice difficile, mais ô combien important. Sans une navigation bien pensée, un site web, aussi joli soit-il, a peu de chances d’atteindre ses objectifs. Cette fiche devrait vous donner toutes les clés pour comprendre les enjeux et réaliser concrètement l’arborescence de votre site web. En savoir plus lafabriquedunet.fr
Concevoir une maquete de votre site avec un logiciel graphique (Adobe XD, Photoshop ou Illustrator); En savoir plus twaino.com
Savoir se servir des logiciels graphiques (Photoshop et/ou Illustrator de préférence) pour le redimensionnement des vos images ou rapprochez-vous d'un graphic designer;
Dans cette partie du cours nous allons apprendre comment choisir un hébergeur pour lancer son site et ligne et voir comment configurer son nom de domaine.
Lien de l'hébergeur : https://hostinger.com
Lien registrar : https://namecheap.com
Tel que nous l'avions vu pour les serveurs locaux, les serveurs distants aussi ont un certains nombre de fonctionnalités à maitriser afin de bien héberger son site et gérer ses performance. Dans cette leçon nous allons prendre en main notre serveur distant choisi "hostinger" histoire de se familiariser avec ses différentes fonctionnalités.
NB: Bien que dans le cadre de ce cours nous nous exerçons avec Hostinger, il y a lieu de noter que les principes restent les mêmes pour tous les autres hébergeurs.
Vous avez sûrement déjà vu ou utilisé dans l'entreprise où vous travaillez, les adresses e-mail du type prenom.nom@nomdedomaine.com ou encore contact@nomdedomaine.com une adresse e-mail nominative reliée au nom de domaine de votre entreprise.
C'est ce qu'on appelle "adresse e-mail professionnelle ou personnalisée".
Dans cette leçon nous allons voir comment créer des adresses e-mail professionnelles reliée au nom de domaine de votre projet que vous venez de commander ou que vous allez commander plus tard... Bref comment créer des adresses e-mail professionnelles ou personnalisée :)
Après avoir réuni serveur distant, nom de domaine, bref tous les élément qui nous permettront de publier notre site en ligne, procédons maintenant à la migration proprement dite qui consiste à déplacer un site d'un serveur à un autre.
Dans notre cas nous allons prendre le site que nous avons créé en local pour l'héberger sur Hostinger pour que ça soit visible partout dans le monde entier.
Dans cette leçon nous voyons la première étape qui consiste à créer une nouvelle base de donnée dans le serveur distant.
Dans cette leçon nous allons apprendre les différente technique de transfert de fichier afin de transférer le dossier de notre site dans le serveur distant.
Dans cette dernière étape nous allons voir comment sauvegarder sa base de données locale et en suite importer toutes ses informations dans la nouvelle base de donnée distante.
À l’ère du digital toutes les entreprises migrent vers les activités en ligne. Pour ce, les organisations développent de plus en plus leurs présences en ligne.
Quoi qu’il y ait plusieurs canaux aujourd’hui pour développer sa présence en ligne, un site web demeure le premier canal qui puisse mieux représenter une entreprise sur la toile.
D’où celui-ci doit être bien développé en tenant compte d’un parcours client simple et fluide (User freindly) d’une part; et un bon design car retenez-le qu’une mauvaise image aura un impact néfaste sur l’activité de l’entreprise.
Ce cours va vous permettre d’apprendre à :
Créer des sites web modernes de A à Z avec WordPress sans passer par les codes ;
Créer des sites web de toute catégorie (Site vitrine, e-commerce, blog personnel ou professionnel, réseau social,...) ;
Choisir un meilleur hébergeur WordPress ;
Réserver un nom de domaine et maîtriser toutes les manipulations de pointage d'un nom de domaine ;
Créer des adresses email professionnelles ;
Utiliser les pages builder tels que Elementor pour personnaliser son site ;
NB : Ce cours fait partie de notre cursus sur le Marketing Digital que nous allons publier très prochainement sur Udemy.
A l'issue de cette formation, l'apprenant qui a suivi les différentes leçons de manière régulière sera aura un site moderne en ligne. Nous vous prions donc de bien vouloir prévoir un petit budget pour la réservation de votre hébergement et le nom de domaine et bien-sûr suivre à la lettre la formation pour arriver à cet objectif.
Le formateur Gracy Omokoso que je suis, je reste à votre disposition pour toute préoccupation. N'hésitez pas à me laisser un commentaire dans le forum du cours Udemy.
Bonne application à vous !