(mise à jour 6/3/2021 : l’hébergeur gratuit livehost.fr ne fonctionne plus ; le tutoriel reste valable, mais en changeant d’hébergeur gratuit)
(mis à jour le 7/10/2014 : document téléchargeable sur http://tinyurl.com/wordpress-tuto)

De quoi avez-vous besoin ?

– une connexion internet haut-débit.

– un email valide et accessible facilement, si possible en en créant un sur un webmail comme yahoo.fr ou gmail.com… en lien avec le futur nom du site.

– Le Bloc-notes de Windows (à trouver dans le menu Démarrer de Windows dans Programmes/Accessoires)

– le logiciel Filezilla, à télécharger ICI pour tout système d’exploitation, ou ICI (pour Windows XP), ou éventuellement sur le site d’origine (en faisant attention à refuser d’installer d’autres logiciels qui vous seront proposés pendant l’installation). Filezilla servira à transférer des fichiers depuis votre disque dur vers votre hébergeur de site.

Vue d’ensemble

Le site que nous allons créer sera administré par WordPress, un CMS (content management system) à télécharger (au format zip) sur http://fr.wordpress.org/ et qui permet de distinguer les données (textes, images, liens, etc… stockées sur une base de données MySQL) et leur mise en forme (thème, feuille de style stockées dans le CMS) : on peut ainsi changer le look du site, sans toucher aux articles et pages.

Pour accueillir le CMS et la base de données MySQL, il faut un compte sur un hébergeur, qui peut être payant comme ovh.com ou 1and1.fr qui proposent pour 2 à 10 € par mois un service sans publi­cité, et un nom de domaine en « .fr ». Mais pour débuter dans la création de sites web, nous préférons un hébergeur gratuit comme http://www.livehost.fr/ avec très peu de publicité en bas de page du site, mais facilement désactivable (au moyen notamment d’Adblock pour Chrome, Internet Explorer, Sa­fari ou Firefox) et un nom de site en « .livehost.fr ». Cet hébergeur est gratuit mais demande en fait 1,50 € au démarrage pour s’inscrire (via un simple SMS permettant d’obtenir un code d’inscription). livehost.fr est un suffixe un peu compliqué pour votre site, mais le nom de site lui-même pourra être simplifié grâce à une adresse de redirection en « .fr.cr » (voir plus bas).

 

Voilà ci-dessous détaillées les 10 premières étapes, les plus fastidieuses, pour héberger CMS et base de données MySQL. Une fois cela fait, c’est plus facile et vous pourrez continuer seul avec des tutoriels bien faits pour la partie « créativité » de la conception de sites web.

A- 10 étapes de « bidouillage » un peu fastidieux, mais que l’on ne fait qu’une fois !

(1)   Ouvrir un compte sur http://www.livehost.fr/ : cliquer sur inscription et fournir un pseudo (en lien avec le futur nom de votre site), un mot de passe (plus de 8 caractères), un email valide puis recopier les caractères indiqués, puis « M’enregistrer ». Aller sur votre email retrouver le mail de « Bienvenue sur livehost ! » et activer votre compte en cliquant sur le lien http://www.livehost.fr/activation.php?key=etc… Cliquer ensuite sur « ICI » pour accéder à votre compte livehost.

(2)   Dans la colonne de gau­che, cliquer sur « Mes coordonnées », puis « Modifier mes coordon­nées » pour les renseigner exactement et « Valider ». Rq : la mention de votre adresse postale est légalement obligatoire. Ensuite, cliquer sur « Créer un nouveau site ». Donner alors un nomdesite (court, uniquement en minuscules, sans accent, ni espace, ni ponctuation, ni caractères spéciaux), et un mot de passe, si possible le même que celui de l’étape (1) ; cliquer sur « Créer un site web », puis sur « Ok ». Ouvrir le Bloc-notes de Windows et y copier-coller les informations de Connexion FTP (elles sont sous la forme : Hôte : ftp.livehost.fr Port : 21 identifiant : nomdesite_autrescaracteres). Notez aussi le mot de passe que vous avez choisi et laisser le Bloc-notes ouvert.

(3)   Dans la colonne de gauche, cliquer sur « Créer une nouvelle base de données ». Donner alors un nom à cette base, si possible le même que celui du site (uniquement des minuscules, sans accents, ni espace, ni ponctuation, ni caractères spéciaux), et un mot de passe, si possible le même que celui de l’étape (1) et (2) ; cliquer sur « Créer la base de données ». Une fois la base de données créée, cliquer sur [Gérer cette base de données], et copier-coller dans le Bloc-notes de Windows, sous les informations de (2) les informations de Connexion Mysql (elles sont sous la forme : Hôte : localhost Nom de la base : nomdesite_autrescaracteres identifiant : nomdesite_autrescaracteres). Notez aussi le mot de passe que vous avez choisi et laisser le Bloc-notes ouvert. Attention : le nom de l’hôte ou de l’identifiant de connexion FTP en (2) ne sont pas les mêmes que le nom de l’hôte et de base de données de connexion Mysql en (3) !

(4)   Après avoir dézippé le fichier wordpress-etc.zip (cf. clic droit, extraire tout…) dans un répertoire directement dans Mes documents, aller dans le dossier wordpress y trouver le fichier wp-config-sample.php. Le renom­mer en wp-config.php. Clic droit, ouvrir avec…, Bloc-notes, Ok pour l’ouvrir. Pour le lire correctement, cliquer sur « Format », « Retour automatique à la ligne ».

(5)   Rechercher dans ce fichier texte (touffu !) les 3 parenthèses : (‘DB_NAME’, ‘votre_nom_de_bdd’), (‘DB_USER’, ‘votre_utilisateur_de_bdd’) et (‘DB_PASSWORD’, ‘votre_mdp_de_bdd’). Remplacer alors les expressions votre_nom_de_bdd et votre_utilisateur_de_bdd (selon la version de WordPress, cette expression peut être légèrement différente) par le Nom de la base que vous aviez collé dans le Bloc-notes en (3). Attention, ce n’est pas l’Hôte ou l’identifiant en (2) qui correspondent plutôt aux informations de connexion FTP qui serviront en (6) ! Remplacer votre_mdp_de_bdd par le mot de passe noté en (3). Attention : bien laisser les apostro­phes ‘ encadrant ces remplacements et vérifier que la parenthèse (‘DB_HOST’, ‘localhost’) y est bien. Cliquer sur Fichier, Enregistrer, puis fermer ce fichier wp-config.php.

(6)   Après avoir téléchargé puis installé le logiciel Filezilla, le lancer. Renseigner les 4 plages Hôte [ftp.livehost.fr], Identifiant, Mot de passe et Port [21], avec les informations de connexion FTP que vous aviez collées dans le Bloc-notes en (2), puis cliquer sur « Connexion rapide ». Si tout fonctionne, il devrait y avoir des infos en noir, bleu ou vert dans le cadre juste en dessous des informations de connexion. En bas, en colonne de droite, figure alors le dossier d’hébergement sur livehost.fr. S’il y a du rouge, c’est que votre connexion a échoué.

(7)   En colonne de gauche, dans le cadre du haut (« site local »), rechercher dans l’ar­bre des dossiers, le dossier word­press où se trouvent les fichiers wp-etc… (Si le dossier wordpress est sur le bureau, il vous faut aller à C:/Utilisateurs/votre_nom/bureau ou C:/Users/votre_nom/bureau…) Vérifiez notamment que le fichier wp-config.php apparaît dans le cadre sous l’ex­plorateur. Cliquer gauche sur un des fichiers de ce cadre, Ctrl-A au clavier pour sélectionner tous les fichiers, puis glisser-déposer ces fichiers dans le ca­dre juste à droite. Le transfert du mil­lier de fichiers du CMS wordpress a lieu vers l’hébergeur livehost.fr, et on peut en suivre l’avancement dans le ca­dre du bas. Cela dure quelques minu­tes, selon le débit de votre connexion internet.

(8)   Sur votre navigateur internet (Chrome, Internet Explorer, Firefox…), ouvrir un nouvel onglet et aller sur le site http://nomdesite.livehost.fr/wp-admin – pour cela, copier-coller ce texte dans la barre d’adresse de votre navigateur internet, et sans quitter cette barre, remplacer nomdesite par le nom exact de votre site (cf. (2)).

(9)   La page de bienvenue de votre CMS WordPress s’ouvre. Donner un nom de site en toutes lettres (avec possibilité d’utiliser majuscules, accents, espaces, caractères spé­ciaux, etc…). Changer l’identifiant « admin » en un iden­tifiant personnel en lien avec le nom du site – à copier-coller sur votre Bloc-notes, puis indiquer un mot de passe (pour accéder au CMS via internet) si possible le même qu’en (1), (2) et (3), et votre adresse mail, puis cliquer sur « Installer WordPress ».

(10)    Vous accédez alors au cadre d’entrée ou de login de votre CMS WordPress. Entrer l’iden­tifiant et le mot de passe, notés dans le Bloc-notes en (9). Si vous êtes sur un ordinateur sûr, cocher « Se souvenir de moi » et acceptez que votre navigateur internet « enregistre le mot de passe ». La page qui s’ouvre : http://nomdesite.livehost.fr/wp-admin/ doit être gardée dans vos favoris : elle est votre « tableau de bord » et désormais votre unique porte d’entrée à l’administration de votre site. La partie « bidouillage » est terminée !

B- Enfin créatifs…

C’est maintenant plus facile, et plus intéressant… puisqu’il s’agit d’explorer soi-même le « tableau de bord » avec toutes les facettes de la création de votre site internet. La suite du tutoriel est sur les multiples tutoriels expliquant comment se servir de WordPress. Vous y trouverez comment :

 

–  Utiliser et régler le « tableau de bord ». Vous aurez à alterner entre le tableau de bord et le site tel qu’il est vu par les autres, moyennant clic gauche sur le premier lien en haut à gauche (juste à droite du W dans le coin supérieur). Mieux, en appuyant sur la touche CTRL, et en cliquant sur ce lien, un nouvel onglet apparaît : le site et son tableau de bord sont côte à côte.

–  Changer l’apparence du site, et notamment du « thème » (Apparence/Thèmes) pour la mise en forme globale du site, parmi les centaines de thèmes téléchargeables (cf. http://wordpress.org/themes/). Choisir un thème « responsive », c’est-à-dire qui s’adapte au format de l’écran (smartphone, tablette, ordinateur).

–  Utiliser les « widgets » (cf. Apparence/Widgets pour enrichir votre site web par des petits programmes comme : agendas, flux rss (servant à importer des données d’actualité venant d’autres sites internet émettant régulièrement de nouvelles infos), liste d’articles, ou texte libre (enrichi grâce au langage html, facile à apprendre et dont un tutoriel se trouve sur : http://fr.html.net/tutorials/html/)

–  Rédiger Pages (informations stables, accessibles via menu) ou Articles (informations d’actualité, accessibles comme dans un blog dans l’ordre chronologique inverse, avec possibilité de mettre en avant certains articles). Deux modes sont proposés : « Visuel » ou « Texte » (cf. onglet en haut à droite du cadre d’édition de la page ou de l’article). Le mode « Texte » permet d’écrire en html, bien pratique pour aller plus loin dans la présentation de vos textes et images, et même vos vidéos (grâce aux boutons « share » ou « partager », et « embed » ou « intégrer » sur une vidéo Youtube, pour en insérer le code html : <iframe width= »560″ height= »315″ src= »//www.youtube.com/embed/######### » frameborder= »0″ allowfullscreen></iframe>).

–  Enrichir votre tableau de bord de nouvelles Extensions/ajouter (ou « plugin » en anglais), notamment les plus utiles : Jetpack (le « couteau suisse » de WordPress, qui requiert une inscription sur le site de WordPress.com) et Ultimate TinyMCE (améliorant le traitement de texte pour pages et articles).

–  Créer votre image d’en-tête (cf. Apparence/En-tête), en vous servant de Google pour trouver des images à assembler, modifier, découper… sur Gimp, un super logiciel de dessin, à télécharger sur http://www.gimp.org/.

C- Faire connaître votre site

L’adresse de votre site en http://nomdesite.livehost.fr n’est pas très pratique à retenir et à transmettre aux autres. Grâce au site azote.org, vous pouvez créer gratuitement et sans publicité une adresse de redirection directe en nomdesite.fr.cr, ou si vous préférez en .fr.nf, .asso.st, qui ressemblent presque à un nom de domaine en .fr, certes plus court mais payant.

 

Les sites et blogs que j’ai créés ont ainsi pour adresses :

http://ndhs12.fr.cr, http://sbes.fr.cr, https://textala.fr.cr , http://vocations12.fr.cr

 

 

p. Raphaël Bui

rbui12@yahoo.fr – 06 12 31 46 00

 : Raphael Bui