Création de sites web avec Wordpress

Objectifs

• Savoir installer et configurer Wordpress
• Savoir rédiger des contenus et les enrichir
• Savoir installer et configurer des thèmes et extensions

Création de sites web avec Wordpress

Evaluation

• Un site web sous Wordpress
• Seul·e ou en groupe
• Choix du sujet entre plusieurs propositions

Différence site statique / site dynamique

Au premier semestre, on a fait des sites statiques

Un fichier HTML par page qui contenait la structure HTML et le contenu de la page

Les fonctionnalités sont limitées

Différence site statique / site dynamique

Ce semestre, on va faire des sites dynamiques

On décorelle le visuel du contenu

On offre des possibilités dites "2.0"

Différence site statique / site dynamique

Un site dynamique, comment ça marche ?

Image honteusement pompée sur cette page

Différence site statique / site dynamique

Une base de données ?

C'est là où sont stockées toutes les données de votre site (pas l'apparrence, juste les données)

Une base de données prend la forme de plusieurs tableaux (appelés tables) avec des lignes et des colonnes.

Chaque colonne désigne un type de données

Différence site statique / site dynamique

Nécessité d'un langage serveur

HTML ne sert qu'à rendre la page dans un navigateur.

Dans une logique de site dynamique, il est nécessaire d'utiliser un langage serveur pour générer la page.

Un langage serveur sert à exécuter des scripts

Différence site statique / site dynamique

Des scripts ?

Avec HTML, vous ne pourrez jamais faire une opération simple (1+1)

Pour ça, il faut un langage serveur.

Ce langage permettra par exemple à vos internautes d'envoyer des commentaires, ou des emails.

Il permet aussi l'utilisation de systèmes de gestion de contenus comme Wordpress.

Définition

Pas besoin de coder (ou presque) !

Un logiciel web qui permet, grâce à une interface d'administration (backoffice), de créer et gérer l'ensemble des contenus d'un site web sans avoir à modifier le code du site.

Le contenu du site est séparé du contenant (la partie graphique).

Les principaux CMS

CMS généraux

Wordpress, Joomla!, Drupal, Typo 3, etc.

CMS spécialisés dans le e-commerce

Magento, Prestashop, etc.

Avantages et inconvénients

Avantages

• Facilité et rapidité de mise en place
• Permet à un commanditaire de gérer son site en autonomie
• Donne accès à des fonctionnalités qu'il n'y a pas besoin de développer
• Constamment mis à jour par la communauté (open source)
• Normalement bien adapté pour un bon référencement

Avantages et inconvénients

Inconvénients

• Performance : les pages sont plus lentes à charger
• Sécurité : les pirates raffolent des CMS, il faut donc les protéger
• Flexibilité : l'apparrence graphique peut parfois être compliquée à modifier

Wordpress ?

Bref historique

• A vu le jour en 2003
• En 2007, la version 2.1 est téléchargée plus de 1,5 million de fois
• Au départ, il était spécialisé dans l'édition de blogs
• Il a ensuite évolué pour permettre la création de sites web vitrine
• Aujourd'hui, on peut même faire du e-commerce avec des extensions

Wordpress ?

Part de marché

Image pompée sur cette page

Wordpress ?

Pourquoi Wordpress ?

• Parce que c'est simple d'utilisation
• Parce qu'il y a une communauté de développeurs énorme autour
• Du coup il y a beaucoup de fonctionnalités
• Et Wordpress est plutôt apprécié par les moteurs de recherche

Téléchargeons Wordpress

Rendez-vous à l'adresse ci-dessous

https://wordpress.org/

Configuration base de données

• Host : romainmewp.mysql.db
• Nom base de données et utilisateur : romainmewp
• Mot de passe : ............ !

Les thèmes Wordpress

Au sommaire

1. A propos des thèmes gratuits
2. Mon thème est-il sûr ?
3. Installer des thèmes
4. A propos des thèmes premium (payants)
5. Anatomie d'un thème Wordpress
6. Personnaliser mon thème Wordpress

Les thèmes Wordpress

Wordpress est livré avec des thèmes de base

• Twenty Seventeen (thème activé par défaut)
• Twenty Sixteen
• Twenty Fifteen
• qui succèdent Twenty Fourteen, Thirteen et Twelve...

Les thèmes Wordpress

Trouver des thèmes gratuits

Une tâche qui demande du temps !

• Un thème ne se limite pas à son design : tous ne fonctionnent pas de la même manière et ne sont pas aussi personnalisables.
• A vous de les essayer et de voir s'ils correspondent à votre besoin.
• Pensez d'abord au contenu de votre site !

Les thèmes Wordpress

Trouver des thèmes gratuits

Pour trouver des thèmes gratuits :

• Dans l'interface d'administration de Wordpress : Apparence > Thèmes > Ajouter
• Sur le site : https://wordpress.org/themes/
• Il y a d'autres endroits, mais c'est le seul qui vous garantit d'avoir un thème sûr

Les thèmes Wordpress

Mon thème est-il sûr ?

• N'importe quel développeur peut potentiellement mettre un thème à disposition. Y compris certaines personnes mal-intentionnées.
• Un thème peut contenir du code malveillant, qui permet à des hackers de se servir de votre site (pour envoyer du spam, vous demander de l'argent, etc.).
• Pour vérifier la sécurité de votre thème : https://sitecheck.sucuri.net/
• Et son extension Wordpress : Sucuri Scanner

Les thèmes Wordpress

Installer un thème

• Par l'interface d'administration
• Par FTP

Les thèmes Wordpress

A propos des thèmes premium

Un thème premium se définit par :

• Le fait qu'il soit payant
• Une conception graphique de qualité supérieure
• Une documentation complète
• Un support technique (en règle générale)
• Des fonctionnalités et possibilités de personnalisation plus avancées

C'est de la théorie : il existe de très bons thèmes gratuits et de très mauvais thèmes payants !

Les thèmes Wordpress

A propos des thèmes premium

Problème : on ne peut pas vraiment essayer avant d'acheter

Quelques conseils avant de passer à l'acte

• Ne pas hésiter à contacter le concepteur pour plus d'infos
• Vérifiez les forums qui traitent du thème (pour voir les éventuelles lacunes)
• Recherchez le sur Google, vous trouverez peut-être des tests ou avis

Les thèmes Wordpress

A propos des thèmes premium

Pour trouver des thèmes premium

• https://themeforest.net
• https://www.elegantthemes.com
• https://themefuse.com
• http://my.studiopress.com/themes/

Vous n'en utiliserez pas pour votre évaluation

Les thèmes Wordpress

A propos des starter themes

Ce sont des thèmes réservés à des développeurs.

De base, ils ne font pas grand chose, mais par leur minimalisme ils sont hautement personnalisables.

• http://underscores.me/
• http://html5blank.com/

Vous n'en utiliserez pas (non plus, a priori) pour votre évaluation

Anatomie d'un thème Wordpress

Un site web est généralement composé de 4 parties principales :

• Une en-tête (header)
• Une zone de contenu (body)
• Une colonne latérale (sidebar)
• Un pied de page (footer)

De plus en plus, on se passe d'une colonne latérale

Anatomie d'un thème Wordpress

Un thème est composé de plusieurs fichiers qui vont correspondre à ces parties principales :

• L'en-tête (header.php)
• La colonne latérale (sidebar.php)
• Le pied de page (footer.php)

Anatomie d'un thème Wordpress

En plus de ces fichiers, on trouve des modèles pour la partie "contenu" de la page :

• Le fichier pour la page d'accueil (index.php)
• Le fichier pour afficher une page classique (page.php)
• Le fichier pour afficher un article (single.php)
• Le fichier pour afficher les archives d'articles (archive.php)

Ces fichiers de contenus appellent les fichiers d'en-tête, de sidebar et de pied de page.

Anatomie d'un thème Wordpress

Dans le cas d'un site web, on aura parfois besoin de plusieurs modèles de page

Un thème Wordpress peut contenir d'autres modèles, notamment des modèles de page

Par défaut, une page utilisera le fichier "page.php"

C'est le modèle de base, le plus simple.

Anatomie d'un thème Wordpress

Dans certains cas, on voudra modifier la structure de la page, l'afficher différemment.

On pourra alors utiliser un modèle de page.

Un modèle de page vous permet de personnaliser la manière dont une page s'affiche :

• En personnalisant le HTML pour modifier la disposition du contenu
• En développant des fonctionnalités spécifiques à une page
• En choisissant d'afficher des widgets à tel endroit...

Anatomie d'un thème Wordpress

Certains thèmes que vous installerez vous proposeront des modèles de page.

Par exemple...

Anatomie d'un thème Wordpress

Nous n'apprendrons pas à créer des modèles de pages

Cela demande des connaissances approfondies en Wordpress et en langage PHP

Mais nous verrons plus tard une manière différente de modifier les structures de pages.

Anatomie d'un thème Wordpress

Un thème a aussi toujours sa propre feuille de styles

Cette feuille de styles est nommée "style.css"

Anatomie d'un thème Wordpress

Ce qu'il faut retenir

• Un thème est composé de fichiers récurrents du site (header, sidebar, footer, etc)
• Il est aussi composé de modèles spécifiques à certains contenus (articles, pages, archives)
• Ces modèles font appel aux fichiers récurrents (pages.php appelle header.php, footer.php, etc pour les afficher)
• Wordpress permet de créer des modèles de page personnalisés

Personnaliser mon thème Wordpress

La plupart des thèmes proposent des options de personnalisation

• Pour accéder à ces options, rendez-vous dans "Apparence > Personnaliser"
• Les thèmes ont des options de personnalisation plus ou moins poussées
• Il convient généralement d'être un minimum à l'aise en anglais

Personnaliser mon thème Wordpress

Il vous arrivera souvent de vous sentir "bridé" par votre thème Wordpress

• Nous verrons comment ajouter des fonctionnalités avec les extensions.
• Mais d'abord nous allons voir comment modifier l'apparence du thème grâce à CSS.

Personnaliser mon thème Wordpress

Thème parent / Thème enfant

Modifier son thème Wordpress = modifier la source.

• On ne modifie jamais directement la source : en cas de mise à jour du thème, vos modifications seraient écrasées.
• On préfèrera créer un thème enfant.

Personnaliser mon thème Wordpress

Un thème enfant ?

Le thème enfant est lié à son parent par la feuille de styles.

Les fichiers du thème enfant remplaceront ceux du thème parent.

Le thème parent pourra ainsi être mis à jour, tout en conservant les modifications grâce au thème enfant.

Personnaliser mon thème Wordpress

Créer un thème enfant

Nous allons faire un thème enfant du thème Twenty Sixteen.

1. Dans le répertoire "themes" de Wordpress, créer un nouveau répertoire "twentysixteen-child"
2. On crée ensuite un fichier "styles.css", dans lequel on ajoutera les lignes suivantes :

   /*
   Theme Name: Twenty Sixteen Child
   Description: Thème enfant du thème Twenty Sixteen
   Author: Batman
   Version: 1.0
   Template: twentysixteen 
   */

3. Cette dernière ligne est la plus importante : elle indique que notre thème est l'enfant du thème (template) twentysixteen (nom du répertoire du thème parent)

Personnaliser mon thème Wordpress

Créer un thème enfant

Il faut maintenant activer le thème enfant dans l'admin de Wordpress.

Personnaliser mon thème Wordpress

Importer le style du thème parent

Sous l'entête de la feuille de styles de votre thème enfant, ajouter la ligne suivante :

/*
Theme Name: Twenty Sixteen Child
Description: Thème enfant du thème Twenty Sixteen
Author: Batman
Version: 1.0
Template: twentysixteen 
*/
@import url('../twentysixteen/style.css');

Personnaliser mon thème Wordpress

On peut maintenant personnaliser le CSS de notre thème

Par exemple, on peut décider que nos titres s'affichent en lettres capitales :

/*
Theme Name: Twenty Sixteen Child
Description: Thème enfant du thème Twenty Sixteen
Author: Batman
Version: 1.0
Template: twentysixteen 
*/
@import url('../twentysixteen/style.css');
h1, h2, h3 {
	text-transform:uppercase;
}

Personnaliser mon thème Wordpress

Créer un thème enfant ne permet pas uniquement de modifier le CSS

Tous les fichiers d'un thème sont modifiables, y compris les différents modèles.

Mais cela nécessite des connaissances plus poussées, notamment en PHP.

Nous nous contenterons donc de modifier, si besoin, le CSS !

Personnaliser mon thème Wordpress

Pensez à l'inspecteur d'éléments de votre navigateur !

Il peut être difficile de s'y retrouver dans le HTML et le CSS de votre thème.

L'inspecteur d'éléments sera un outil très efficace pour vous repérer.

Activez-le grâce à la touche F12.

A vous de jouer

Exercice 1

1. Installez le thème "Engrave (lite)" et activez-le
2. Allez dans les options de personnalisation
3. Trouvez comment ajouter des slides au diaporama de page d'accueil, et comment changer sa taille
4. Trouvez comment ajouter un texte d'introduction sous le diaporama de page d'accueil
5. Modifiez les sections de page d'accueil
6. Activez les liens de réseaux sociaux dans le haut de page
7. Insérez des widgets dans le pied de page
8. Créez plusieurs pages, ajoutez du contenu (peu importe quoi), essayez de faire de belles mises en page et ajoutez les au menu principal

A vous de jouer

Exercice 2

1. Installez le thème "Evolve"
2. Allez dans les options de personnalisation
3. Trouvez comment passer le site en pleine largeur (100% de l'écran)
4. Trouvez comment activer le diaporama parallaxe et désactiver le diaporama Bootstrap
5. Ajoutez des diapos au diaporama parallaxe
6. Continuez à parcourir les options (attention, certaines sont réservées à la version payante)

A vous de jouer

Exercice 3

1. Installez le thème "Customizr"
2. Allez dans les options de personnalisation
3. Changez la police de caractères
4. Créez un nouveau diaporama pour remplacer celui de démonstration en page d'accueil
5. Modifiez les entrées de la page d'accueil
6. Créez un thème enfant, et entraînez-vous à modifier le CSS (par exemple la couleur des textes et titres, ou encore la forme des boutons)

A vous de jouer

Exercice 4

1. Utilisez le moteur de recherche de thèmes de Wordpress pour trouver d'autres thèmes
2. Essayez-en autant que possible pour vous imprégner des différentes manières de fonctionner.

Les extensions

Votre thème ne fait pas tout

Vous aurez aussi besoin de fonctionnalités

• Formulaire de contact, boutons de partage, diaporamas, galeries photos...

Et autre utilitaires

• Optimisation du site, du référencement, de la sécurité...

Les extensions

Où trouver des extensions ?

• Sur le site Wordpress.org
• Dans l'admin Wordpress, "Extensions > Ajouter"

Les extensions

Comment choisir une extension

Six questions à se poser :

1. Répond-elle à votre besoin (et en ai-je vraiment besoin) ?
2. Est-elle compatible avec ma version de Wordpress ?
3. De quand date sa dernière mise à jour ?
4. Quelle est sa popularité ? (nombre d'installations, note)
5. Est-elle sécurisée ?
6. Est-elle entièrement gratuite ?

Les extensions

Installer une extension

• Cherchez votre extension puis cliquez sur "Installer"
• Ensuite, cliquez sur "Activer"

Les extensions

Les formulaires de contact

• Contact Form 7
  Un générateur de formulaires simple mais efficace.
• Ninja Forms
  Beaucoup plus complet + fonctionnalités supplémentaires payantes.

Les extensions

Les diaporamas (ou sliders)

Certains thèmes en intègrent de base, mais ils sont cantonnés à des emplacements prédéfinis

Il en existe beaucoup, mais bizarrement peu sont de bonne qualité.

• Meta Slider
  Plutôt complet, même en version gratuite

Les extensions

Les galeries photos

Beaucoup d'extensions aussi, mais il faut faire le tri

• Foo Gallery
  Ma préférée :)
• NextGen Gallery
  La plus populaire

Les extensions

Les cartes

Dans les (presque) gratuites

• MapPress Easy Google Maps
  
• WP Google Maps

Attention : la génération de Google Maps nécessite maintenant une clé API

Les extensions

Les polices de caractère

• Easy Google Fonts
  

Les extensions

Les fils d'ariane

• Breadcrumb NavXT
  

Les extensions

Les boutons de partage

• Juiz Social Post Sharer
  Bien fait, complet et Made in France ! :)
• Simple Share Buttons Adder
  Pas mal non plus
• WP Social Sharing
  Plus simpliste

Les extensions

Améliorer l'éditeur de texte

Des boites à outils magique pour vous dépanner

• Shortcodes Ultimate
• A accompagner de ses widgets :
• TinyMCE Advanced

Les extensions

Les page builders

Ils permettent de faire des mises en page avancées. La plupart sont payants, mais il en existe un bon gratuit

• Page Builder par SiteOrigin
• A accompagner de ses widgets :
• SiteOrigin Widgets Bundle

Les extensions

Les page builders

• Beaver Builder

Les extensions

Les "accélérateurs de sites"

Ils gèrent la mise en cache de contenus pour accélerer le chargement des pages

• WP Super Cache
• Autoptimize

Les extensions

Les aides au référencement

Ils fournissent des outils pour que vos pages soient bien référencées dans les moteurs de recherche

• Yoast SEO
• All In One SEO Pack

Les extensions

Les aides à la sécurité

Ils fournissent des outils pour que vos pages soient bien référencées dans les moteurs de recherche

• Wordfence Security
• Secupress
• Sucuri Security

Les extensions

D'autres incontournables

• Advanced Custom Fields
• Gravity Forms
• Woocommerce

A vous de jouer

Exercice

1. Rendez-vous sur ce site : http://webetu.net/exercice/
2. Reproduisez le site le plus fidèlement possible : apparence, fonctionnalités... (télécharger les images)
3. Thème utilisé : Naturelle
4. Attention : on ne peut pas créer de thème enfant à partir de ce thème. Utilisez l'éditeur CSS intégré à Wordpress pour la personnalisation.
5. Amusez-vous à améliorer le site avec d'autres extensions pour les prendre en main

Evaluation

Objectif

• Création d'un site web sous Wordpress
• Date de rendu : 27 mai au plus tard

Evaluation

Sujets

• L'office de Tourisme (de la ville de votre choix) souhaite créer un site web pour mettre en valeur son patrimoine.
• Un office de Tourisme souhaite communiquer sur un lieu touristique en particulier.
• Le centre des monuments nationaux souhaite communiquer sur un monument.
• Un musée (fictif ou réel) souhaite communiquer sur une exposition temporaire (fictive ou réelle).
• Un musée réalise une rétrospective d'un personnage historique (de votre choix) et a besoin d'un site web.

• Envie de travailler sur un autre sujet ? Dites-moi et je vous dirai si c'est OK.

Evaluation

Consignes (1/3)

• Vous pouvez travailler seul·e à deux ou à trois (maximum)
• Envoyez-moi par mail à l'adresse romain.menard@univ-poitiers.fr la composition de votre groupe en indiquant les adresses mail de chacun·e
• Je vous attribuerai ensuite un numéro de groupe et vous enverrai les informations de connexion au serveur

Evaluation

Consignes (2/3)

• Le site sera hébergé sur le serveur webetu.net à l'adresse :
  http://webetu.net/creaweb/promos/2017-2018/evaluation/n/ (n = votre numéro de groupe)
• IMPORTANT A L'INSTALLATION : préfixe de table, indiquez : evalwp_n (n = votre numéro de groupe)

Evaluation

Consignes (3/3)

• Vous me créerez un compte utilisateur pour que je puisse accéder à l'administration de votre site
  • Identifiant : romain
  • Mot de passe : M2P********* (vous le connaissez)
• Pas de site dans le cadre d'un stage
• Minimum 10 pages
• Vous serez évalués sur votre capacité à personnaliser un thème, installer des extensions, et structurer correctement un site avec Wordpress (arborescence, hiérarchisation dans les pages, etc.)
• Faites-vous plaisir :)

Evaluation

Livrables attendus

• Une note d'intention avec arborescence du site + un zoning (à m'envoyer par mail avant de commencer votre site)
• Un site web sous Wordpress