Tutoriel: Mettre un site WordPress en ligne

La mise en ligne d’un site est une étape majeure dans l’aboutissement d’un projet. C’est la toute dernière étape, et non pas la moins importante, dans la mise en production d’un site web.

Cette mise en production se déroule en deux grandes étapes. Tout d’abord, il y a la migration des fichiers qui consiste au transfert des fichiers du site d’un point A, souvent un serveur local, de type MAMP, WAMP, XAMP, … à un point B, un serveur en ligne hébergé chez un prestataire de services en hébergement (comme OVH, Gandi, 1&1 par exemple).
Il y a ensuite la migration de la base de données qui consiste, comme vu ci-dessus, au transfert de l’ensemble du contenu du site (articles, pages, réglages).

Prérequis

Pour que tout cela soit possible, il vous faut:

  • Un nom de domaine
  • Un hébergement
  • Une base de données

Migration de la base de données

Afin de procéder à la migration de la base de données. Connectez vous à l’administration de votre instance WordPress installée sur votre machine.

Installez l’extension “WP Migrate DB” via le menu “Extensions”/”Ajouter”. Une fois l’extension installée, activez là et rendez vous dans le menu “Outils”/”Migrate DB”.

capture-decran-2016-11-23-a-13-12-53

Une fois sur cette page, il vous suffit de taper votre nom de domaine final dans la colonne “Replace”. De ce fait, les urls enregistrées en base de données seront automatiquement remplacées par les bonnes une fois le site en ligne.

Concernant la ligne en dessous, vous pouvez laisser un “/”.

Une fois les informations saisies, vous pouvez cliquer sur “Export”. Téléchargez le fichier .sql sur votre ordinateur à la fin de l’export.

Maintenant que la base a été exportée, il faut l’importer de l’autre côté, sur le serveur de production. Connectez vous à phpMyAdmin côté serveur via les informations qui vous ont été communiquées par l’hébergeur et référez vous à la rubrique “Création de la base de données” dans le tuto précédent Tutoriel: Installer WordPress sur votre poste .

Une fois la base de données créée chez l’hébergeur, cliquez sur l’onglet “Importer” dans phpMyAdmin, sélectionnez le fichier d’export au format .sql et cliquez sur “executer”.

Votre base de donnée est correctement importée.

Migration des fichiers

Afin de procéder au transfert des fichiers, il faut installer sur votre machine un logiciel de Client FTP qui servira d’interface de communication entre votre ordinateur et le serveur installé cher l’hébergeur. Je vous recommande d’installer FileZilla.

capture-decran-2016-11-23-a-13-26-41

Une fois le logiciel installé, vous pouvez saisir les identifiants FTP (fournis eux aussi par l’hébergeur) dans la barre de connexion rapide. Cliquez ensuite sur “connexion rapide”.

capture-decran-2016-11-23-a-13-31-10

Une fois la connexion au serveur établie, vous verrez votre écran séparé en 2 blocs. Le bloc de gauche représente les fichiers de votre ordinateur et la bloc de droite représente les fichiers sur le serveur distant.

Rendez vous, dans le dossier où est stocké votre site en local dans le bloc de gauche (avec MAMP dans /Applications/MAMP/htdocs par défaut). Sélectionnez tout les fichiers et effectuez un glisser/déposer dans le répertoire /www sur le serveur distant.

Vous pouvez suivre la progression du transfert dans le bloc du bas.

Une fois tout les fichiers transférés, il vous reste à modifier le fichier /wp-config.php côté serveur afin d’établir la connexion entre les fichiers et la base de données en ligne. Pour ce faire, faites un clic droit sur le fichier puis cliquez sur “Afficher/Editer”.

capture-decran-2016-11-23-a-13-38-48

L’éditeur de fichier par défaut s’ouvrira alors et vous devrez remplacer les informations ci-dessus par les informations fournies par l’hébergeur.

Une fois les informations saisies, sauvegardez le fichier. Rendez vous alors sur la fenêtre FileZilla qui vous demandera une confirmation pour l’envoi du fichier modifié en ligne.

Une fois le fichier envoyé, rendez vous sur l’url du site. Votre site est en ligne.

 

Tutoriel: Installer WordPress sur votre poste

Prérequis

Avant de commencer, assurez vous d’avoir installé sur votre machine un environnement de travail serveur en utilisant des logiciels du type EasyPHP (pour les utilisateurs PC) ou MAMP pour les utilisateurs MacOS.

Lors de ce tutoriel, nous allons aborder les différentes étapes nécessaires à la création d’un site WordPress localement.
Tout d’abord, la création d’une base de données dans laquelle seront stockées toutes les données affichées sur le site.

A noter que ce tutoriel se déroule sur un environnement MacOS avec MAMP.

Créer la base de données

capture-decran-2016-11-15-a-23-52-03

Afin de créer la base de données, il vous suffit d’accéder à l’interface de PhpMyAdmin qui est gérée par le logiciel MAMP.
Pour ce faire, cliquez sur “Ouvrir la page WebStart” sur votre écran d’accueil.

Ensuite, sur la page WebStart de MAMP, cliquez sur “Outils/PhpMyAdmin” afin d’accéder à l’interface d’administration de la base de données.
capture-decran-2016-11-15-a-23-54-01

Cliquez ensuite sur “Nouvelle base de données”, en haut à gauche.

capture-decran-2016-11-15-a-23-58-10

Vous pouvez désormais entrer le nom de la base de données et sélectionner “utf8_general_ci” dans la liste déroulante “interclassement”. La sélection de cet interclassement évitera toute erreur d’encodage lors de la saisie de contenu évitant ainsi des erreurs d’affichage sur votre site (caractères spéciaux notamment).

capture-decran-2016-11-16-a-00-04-02

Cliquez ensuite sur “créer”.
Une fois la base de données créée, vous pouvez quitter phpMyAdmin.

Télécharger WordPress

Passons maintenant à la mise en place des fichiers du CMS sur notre environnement local.
Vous pouvez télécharger les fichiers de WordPress en cliquant sur ce lien: https://fr.wordpress.org/wordpress-4.6.1-fr_FR.zip

Décompressez ensuite l’archive et déplacez le dossier wordpress/ à la racine de votre environnement local qui se situe dans le dossier “Applications/MAMP/htdocs”.
Ce dossier contient ce qui est affiché quand on accède à l’adresse http://localhost:8888/

Par conséquent, vous pourrez accéder au site avec l’url suivante, une fois le dossier déplacé: localhost:8888/wordpress

Vous pouvez aussi renommer le dossier WordPress à votre guise afin d’obtenir l’url de votre choix.

Installer WordPress

Une fois ces opérations effectuées, vous pouvez accéder à localhost:8888/wordpress afin de procéder à l’installation et à la configuration du CMS.

capture-decran-2016-11-16-a-13-20-36

Cliquez sur “C’est parti !”

capture-decran-2016-11-16-a-13-23-40

Une fois sur cet écran, vous devez saisir les différentes informations relatives à la base de données que vous avez créé précédemment.

Le nom de la base de données correspond au nom que vous avez donné à la base de données lors de sa création dans phpMyAdmin.
Vous pouvez retrouver l’identifiant et le mot de passe sur la page “WebStart” de MAMP (voir au début du tuto).
Concernant l’adresse de la base de données, laissez “localhost” afin d’utiliser la base de données installée localement.

Pour ce qui est du préfixe des tables, il est très important de ne pas laisser le préfixe de base, qui est “wp_”, pour des raisons de sécurité notamment mais aussi afin de pouvoir stocker facilement plusieurs sites sur une même base de données et de pouvoir les différencier à partir de leur préfixe.

Une fois ces éléments remplis, cliquez sur “Valider”.

capture-decran-2016-11-16-a-13-35-12

Si vous arrivez sur cet écran, cela signifie que tout s’est bien passé et que WordPress arrive à communiquer avec la base de données. Si vous arrivez sur un écran d’erreur, vérifiez que les informations que vous avez saisies sont correctes.

Cliquez sur “Lancer l’installation”.

capture-decran-2016-11-16-a-13-44-57

Sur cet écran, vous êtes invités à saisir les informations de base de votre site internet, le titre du site, votre identifiant/mot de passe afin d’accéder à l’administration.

Seul point sur lequel il faut faire attention sur cet écran, l’identifiant ne doit pas être admin dans l’idéal. L’identifiant “admin” facilite les intrusions dans l’administration de type bruteforce par des robots ou des hackers.

Une fois ces informations saisies, veuillez cliquer sur “Installer WordPress”.

Vous pouvez désormais accéder à l’administration via: http://localhost:7888/wordpress/wp-admin et au front-office de votre site en utilisant l’url sur: http://localhost:7888/wordpress/

Cours #1 – Introduction

Avant tout, il s’agit de définir les différents objectifs qu’auront ce cours. Ce cours aura pour objectif de vous former à la gestion ainsi qu’à la personnalisation de votre projet, qui va courir sur toute l’année, qui est le Blog du Digital qui sera propulsé par WordPress.

Premièrement, avant de commencer à mettre les mains dans WordPress, il est important de se poser la question du CMS, à savoir, ce que c’est ? à quoi sert-il ? pourquoi l’utiliser ? quel CMS pour quel projet ?

Qu’est ce qu’un CMS ? A quoi ça sert ?

Les CMS ou Content Management System (Système de Gestion de Contenus en français) sont une famille de logiciels destinés à la conception et à la mise à jour dynamique de site web ou d’application multimédia. Ils partagent tous le même socle de fonctionnalités :

  • ils permettent à plusieurs personnes de mettre à jour les différents contenus du site via une administration, où les utilisateurs sont définis par des rôles, avec des actions possibles ou non sur des ressources qui peuvent être de différents types (texte/images/audio/video).

Ex : Un rôle « super admin » à tous les privilèges (création, édition, suppression) sur un article, un rôle « éditeur » ne peut pas créer mais seulement éditer un article, un simple utilisateur ne peut pas accéder à l’administration.

  • ils fournissent une chaîne de publication (workflow) offrant par exemple la possibilité de mettre en ligne le contenu des documents. On peut donc faire passer un article par plusieurs « états » : brouillon, non-publié puis publié.
  • ils permettent de séparer les différentes opérations de gestion de la forme et du contenu : Système de Template, interface d’administration déjà prête.
  • ils permettent de structurer le contenu. Selon le type de CMS, le contenu est donc déjà structuré comme un blog ou un forum par exemple.

Comment ? Quel CMS pour quel type de projet ?

La plupart du temps, pour déployer, mettre en place un CMS, c’est concrètement un ensemble de fichiers à télécharger et à mettre en place sur son FTP ou serveur local. La 1ère fois que l’on accède à l’index, on est en général invité à entrer les informations pour la connexion à la base de données, puis quelques informations générales comme le titre ou le login/mdp de l’admin principal.

L’avantage principal d’un CMS est donc la rapidité du déploiement pour un site dynamique. C’est une solution « clef en main », adaptée pour des projets à petits budgets souvent (Cela dépend du projet et du CMS bien sûr).

L’interface d’administration étant déjà faite (back office), il « ne reste plus » qu’à s’occuper du front office. Et encore, avec le système de templates, cette tache peut aussi être facilitée.

L’inconvénient est donc la personnalisation. Il existe des templates tout fait, des widgets ou des plugins pour avoir plus de fonctionnalités, ou encore du
« développement » spécifique à chaque CMS pour customiser son front office, mais on ne pourra jamais être aussi libre qu’un développement « à la main » ou avec des frameworks PHP du type Zend Framework (utilisé sur Magento), Symfony 2 (utilisé sur Drupal 8).

On utilise souvent WordPress pour des projets de petites et moyennes taille, souvent des blogs ou des sites vitrine, voire même des petits projets e-commerce (boutiques ne dépassant pas plus de 20 à 40 produits généralement).
Pour ce qui est des projets de plus grande envergures, tant en terme de fonctionnalités qu’en terme de typologie du projet (arborescence plus complexe, multilingue, …), on a tendance à se tourner vers des CMS qui permettent une meilleure gestion et une meilleure segmentation de l’information (tant en base de donnée qu’en terme d’organisation des fichiers) ou qui ont tout simplement plus de fonctionnalités intégrées nativement, du type Drupal pour des sites vitrines ou e-commerce (Drupal Commerce) voire Magento ou PrestaShop pour des sites 100% e-commerce, par exemple.

Il existe également de nombreux CMS, avec chacun ses spécificités, type, avantages et inconvénients, adaptés aux projets, aux clients et aux développeurs à différents niveaux de compétences. Par exemple :

  • Joomla
  • DotClear
  • SPIP (lol)
  • Kirby
  • Drupal
  • Magento
  • PrestaShop
  • Typo3

Maintenant qu’on a fait le tour de la question: Qu’est ce qu’un CMS, à quoi ça sert ? Intéressons nous à WordPress.

Et maintenant, WordPress

WordPress est un système de gestion de contenu libre écrit en PHP et reposant sur une base de données MySQL. WordPress est surtout utilisé comme moteur de blog ainsi que pour des sites vitrines, mais ses fonctionnalités lui permettent également de gérer n’importe quel site Web, et c’est là l’avantage !

Pourquoi utiliser WordPress ?

Le premier avantage de WordPress est de fournir un outil simple d‟utilisation tout en étant plus ou moins performant.

En effet, l‟interface d‟utilisation de WordPress s’apparente beaucoup à celle d’un éditeur de texte classique (un peu comme Word). On appelle ce type d’éditeur, un éditeur WYSIWYG (What You See Is What You Got). Du coup elle est très facile à prendre en main.

De plus, la communauté très forte autour de WordPress est un avantage déterminant pour lui, et pour un CMS en général : C’est elle qui fait sa renommée. C’est la communauté qui développe des plugins, des templates … Et donc enrichie WordPress tous les jours.

Pour résumer, pourquoi utiliser WordPress ? Car :

  • WordPress est un logiciel libre
  • WordPress est simple d‟utilisation
  • WordPress a une communauté forte : Plugins, thèmes, widgets, du gratuit au payant.
  • WordPress est optimisé pour les moteurs de recherches nativement mais peux l’être un peu plus encore grâce à différents plugins (Yoast SEO, …)