Création numérique
Atelier Conception et publication Web

Séance 7 - Wordpress

Il existe plusieurs manières de créer un site internet. La première méthode consiste à coder son site « en dur » c’est-à-dire à partir de fichiers .html, .CSS, .java, .php (etc.) qui seront assemblés pour afficher ce que vous voyez à l’écran. Cette méthode a pour avantage de vous laisser optimiser votre site sans limite mais elle nécessite des notions en programmation si vous ne voulez pas vous retrouver limité au niveau des fonctionnalités et du rendu visuel.

L’autre méthode consiste à utiliser un système de gestion de contenu (CMS) qui va vous fournir une interface de travail beaucoup plus intuitive et abordable que les fichiers de programmation. Nous allons donc utiliser dans ce cours un des principaux CMS ; WordPress, qui est la plateforme la plus utilisée à l’heure actuelle pour tous ceux qui veulent gérer leur site eux-mêmes.

Présentation de Wordpress

Gestionnaire de contenu le plus utilisé
Simple, léger, personnalisable (themes) et évolutif (plugins & extentions)
Open Source
CMS = Système de Gestion de Contenu = Administrable depuis un back-office

Le « core WordPress » (l’application de base) est développé :

en HTML5 / CSS3 / Javascript (pour les interfaces graphiques de la partie administration)
en PHP (langage de programmation pour le Web)
utilise officiellement la base de données MySQL (mais vous pouvez utiliser d’autres bases aussi)

Lexique rapide

Pour un lexique complet, vous pouvez vous reporter à celui ci. Voici pour le moment quelques termes clés pour avancer dans la compréhension de l’outil :

Thème : c’est un ensemble de modèles de mises en page qui constituent la partie visuelle et graphique de votre site ; c’est disons la partie émergée de l’iceberg. Un thème peut être développé sur mesure mais vous pouvez aussi en trouver à tous les prix, gratuits et payants. Ils sont d’inégales qualité et le choix d’un thème est fondamental pour l’avenir d’un site. Vous pouvez en trouver sur la place de marché themeforest ; et à bien d’autres endroits !
Plugins : ce sont des extensions qui vous permettent d’ajouter des fonctionnalités à WordPress ; elles peuvent être gratuites ou payantes et sont développées par des personnes du monde entier. Le dépôt officiel est ici mais vous pouvez en trouver ailleurs bien entendu (comme sur la place de marché codecanyon). Mais attention à ce que vous ajoutez sur votre site !
Pages / Articles / Medias / Menus : ce sont les éléments de base d’un site WordPress

Wordpress est le plus utilisé pour

Site vitrine
Blog
Site communautaire
Galerie photo

Avantages

Plusieurs milliers d'extentions = évolution sans limite (ou presque)
Déjà adapté à utilisation mobile
Possibilité e-commerce
Respecte les standars du web
Gratuit
Optimisé pour référncement naturel

Pratique

Installation de Wordpress

Pré-requis

PHP en version supérieure ou égale à 4.3 ;
MySQL en version supérieure ou égale à 4.1.2 ;
Apache avec le module mod_rewrite.

Mettre en ligne

Télécharger Wordpress (Version 4.6.1 en français)

Déposez via FTP (Filezilla) les fichiers WordPress à l'emplacement désiré sur le serveur:

Si vous souhaitez placer WordPress à la racine de votre domaine (par exemple http://icomweb.univ-lyon2.fr/identifiant/), déplacez tout le contenu du répertoire WordPress décompressé (en excluant le répertoire lui-même) dans le dossier public_html à la racine de votre serveur
Si vous souhaitez placer votre installation de WordPress dans un sous-répertoire de votre site Web (par exemple : http://icomweb.univ-lyon2.fr/identifiant/blog/), renommez le répertoire WordPress avec le nom que vous avez choisi pour le sous-répertoire et déplacez vers votre serveur dans le dossier public_html

Installation

L’installation commence par la création du fichier de configuration (wp_config.php). Il est essentiel car il contient les différentes informations qui permettront aux scripts PHP de se connecter à la base de données pour enregistrer et récupérer les contenus du blog (articles, pages, commentaires, etc.).
Un avertissement préalable indique la marche à suivre en cas de problématique liée aux permissions. C’est précisément pour éviter ce genre de situation fâcheuse qu’il convient d’être vigilant dans ce domaine. En effet, il arrive parfois que les droits ne soient pas bons. Il faut donc passer par le FTP et modifier les droits en 775 ou 777 le temps de l'installation, puis repasser en 644.
Toutes les informations relatives à la base de données sont celles fournies par l’hébergeur. Le préfixe de table proposé wp_ est généralement conservé, il est conseillé de le changer (selon votre convenance) pour des raisons de sécurité.
Une fois ces informations validées, WordPress confirme qu’il a pu créer le fichier de configuration et que l’installation va pouvoir débuter.

Depuis votre navigateur Web, lancer le script d ’installation de WordPress:

Si vous avez installé WordPress sur la racine : /icomweb.univ-lyon2.fr/identifiant/wp-admin/install.php
dans le cas d'un sous-répertoire appelé blog : /icomweb.univ-lyon2.fr/identifiant/blog/wp-admin/install.php

Création de contenu

Page VS Article

Article

Rédiger des articles permet de constituer un blog ou un fil d’actualité. Ils possèdent :

une date de publication afin d’être affichés du plus récent au plus ancien (ou le contraire).
un auteur
une ou plusieurs catégories et éventuellement des mots clés. Ces deux moyens servent à organiser le contenu d’un site.
un format : certains thèmes proposent des articles au format vidéo, citation, lien, galerie, etc.
un fil de commentaires pour inciter les lecteurs à la discussion.
éventuellement des boutons de partage sur les réseaux sociaux (même si les pages peuvent en avoir, elles ont moins vocation à être partagées).

Page

En s’intéressant aux pages, on se rend compte que leur date de publication n’est pas mise en avant. Leur contenu est plus « statique ».

C’est le cas par exemple des pages de contact, des pages à propos, des pages de mentions légales, des conditions générales de vente et parfois des pages d’accueil.

Vous retrouverez généralement les différentes pages d’un site dans le menu principal et secondaire.

Aucune raison d’être daté, n’a pas besoin de commentaires, encore moins d’appartenir à une catégorie, ni d’être identifié par des mots-clés et l’auteur importe peu.

Contrairement aux articles, les pages ne peuvent pas être classées par catégories, ni identifiées par des mots-clés. Les commentaires n’y sont (généralement) pas activés par défaut.

Par contre, elles peuvent posséder une hiérarchie. C’est à dire que certaines pages peuvent dépendre d’autres. On peut imaginer que sur un site vitrine, les pages « Qui sommes-nous » et « Équipe » peuvent dépendre d’une page « À propos ».

Vous pourrez paramétrer cela dans l’encart « Attribut de la page » :

Hiérarchie des pages dans Wordpress

La dernière différence entre les pages et les articles est qu’il est possible d’attribuer un modèle de page aux pages. Grâce à cela, vous pourrez leur conférer un agencement particulier. Enfin cela dépend du nombre de modèles de page proposé par votre thème.

Modèle de page dans Wordpress

Là encore, si le modèle par défaut vous convient, pas besoin d’en changer. Si vous avez quelques connaissances en HTML, CSS et PHP vous pourrez créer votre propre modèle de page en suivant ce tutoriel.

Récapitulatif

Récapitulatif page ou article dans Wordpress

Note : Ce qui est décrit dans cette infographie correspond aux comportements par défaut de WordPress. Il est possible de les modifier grâce à quelques morceaux de code PHP mais ce n’est pas l’objet de ce cours.

Conclusion

Ces deux types de contenus peuvent cohabiter au sein d’un site. Vous n’êtes pas obligé de choisir entre l’un et l’autre, les articles et les pages sont complémentaires.

Un blog utilisera les articles pour diffuser des articles et des pages pour communiquer des informations relatives au site.

Un site vitrine pourra néanmoins choisir de ne pas utiliser les articles s’il n’a rien à publier périodiquement (articles de blogs ou actualités). Dans ce cas, les pages se chargeront de présenter les informations nécessaires aux visiteurs.

Déterminez donc bien quel type de contenu à utiliser lors de la mise en place de votre site.

Éditeur WYSIWYG

Un WYSIWYG est une interface utilisateur qui permet de composer visuellement le résultat voulu, typiquement pour un logiciel de mise en page, un traitement de texte ou d’image. C'est une interface « intuitive » : l’utilisateur voit directement à l’écran à quoi ressemblera le résultat final.

Sur Wordpress l'éditeur utilisé est TinyMCE en mode avancé

Media

Ressources utilsées :

Création numérique Atelier Conception et publication Web