<!-- Pense bête
## Plan de la présentation
* Introduction
* Définition WordPress
* Définition CMS
* Historique
* Utilisation
* wordpress.com vs wordpress.org
* Comment wordpress s'est imposé
* parler de dotclear (https://dotclear.org/)
* B2evolution / Movable Type
* blogger / tumblr
* Blog markdown (Ghost, Jekyll, Hugo)
* Ecosystème
* PHP
* Serveur web
* Plugin
* Thèmes
* Organisation
* Page
* Post
* Menu
* Categories
* Tag
* EPFL
* Spécificité de WordPress à l'EPFL
* Thème
* Plugin
* OpenShift
* Dévelopement
* LAMP
* Docker
* wordpress.com
-->
#
<div class="footer2"><small>2021-06 / EPFL-SI / <a href="nicolas.borboen@epfl.ch">nicolas.borboen@epfl.ch</a></small></div>
----
## À propos
Cette présentation est une introduction au logiciel WordPress et son écosystème.
----
## Plan
1. Introduction
1. Utilisation
1. Ecosystème
1. Organisation
1. Résumé
---
# Introduction
<!-- .slide: data-background="https://i.imgur.com/mOsqxQz.jpg" data-contrast="on" -->
<!-- credit photo: https://unsplash.com/photos/WYd_PkCa1BY -->
----
## Définition
> WordPress est un système de gestion de contenu (content management system (CMS) en anglais) **gratuit**, **libre** et **open-source**. Ce logiciel écrit en **PHP** repose sur une base de données **MySQL** et est distribué par la fondation WordPress.org.
<cite>https://fr.wikipedia.org/wiki/WordPress</cite>
----
## Blogs
> Un blog (ou blogue) est un type de site web — ou une partie d'un site web — utilisé pour la publication périodique et régulière d'articles personnels rendant compte d'une actualité autour d'une thématique particulière. À la manière d'un journal intime, ces articles — appelés billets — publiés, sont typiquement datés, signés et présentés dans un ordre rétrochronologique[...]
<cite>https://fr.wikipedia.org/wiki/Blog</cite>
----
## Blog → CMS
Initalement prévu uniquement comme un outils pour les blogger, WordPress est maintenant un CMS permettant, en plus d'une partie «blogging» de gérer un site web complet (version 1.5).
----
## Historique
<!-- https://www.wpblog.com/what-is-wordpress/ -->
----
## Versions 1/3
> Depuis la version 1.0 sortie en janvier 2004, chaque version majeure de WordPress porte le nom de grandes vedettes du jazz.
----
## Versions 2/3
* 2003 première version (0.7)
* 2004 version 1.0 ([Davis](https://en.wikipedia.org/wiki/Miles_Davis))
* 2005 version 1.5, ajout des templates et des pages ([Strayhorn](https://en.wikipedia.org/wiki/Billy_Strayhorn))
* 2007 version 2.1, téléchargée plus de 1,5 million de fois ([Ella](https://en.wikipedia.org/wiki/Ella_Fitzgerald))
* 2008 version 2.6, prévisualisation des thèmes, un système de révisions d'articles ([Tyner](https://en.wikipedia.org/wiki/McCoy_Tyner))
* 2008 version 2.7, AJAX ([Coltrane](https://en.wikipedia.org/wiki/John_Coltrane))
----
## Versions 3/3
* 2010 version 3.0, Multibog, thème «TwentyTen» ([Thelonious](https://en.wikipedia.org/wiki/Thelonious_Monk))
* 2012 version 3.5, thème «TwentyTwelve» ([Elvin](https://en.wikipedia.org/wiki/Elvin_Jones))
* 2014 version 4.0, personnaliseur de thème et découverte de plugin ([Benny](https://en.wikipedia.org/wiki/Benny_Goodman))
* 2018 version 5.0, Guntenberg éditeur ([Bebo](https://en.wikipedia.org/wiki/Bebo_Vald%C3%A9s))
* 2021 version 5.7, thème «Twenty Twenty-One» ([Esperanza](https://en.wikipedia.org/wiki/Esperanza_Spalding))
----
## Michel Valdrighi
Est à l’origine de b2/cafelog qui a servi de base à Matt Mullenweg pour créer WordPress.
→ https://paris.wordcamp.org/2011/michel-valdrighi-et-les-origines-de-wordpress/
→ https://miche.lv/
----
## Matthew Mullenweg
**Matthew Mullenweg** (1984), informaticien américain, co-auteur de WordPress (2004), l’un des logiciels de blogs les plus populaires, puis PDG fondateur de la société Automattic (2005).
→ https://fr.wikipedia.org/wiki/Matthew_Mullenweg
----
## Automattic
> Automattic est une entreprise américaine d’édition de logiciels fondée en 2005 par l'informaticien américain Matthew Mullenweg.
> Elle développe et distribue entre autres l'outil de publication de sites et blogs sur internet à très grand succès WordPress.
<cite>https://fr.wikipedia.org/wiki/Automattic</cite>
----
## Automattic
> We are the people behind WordPress.com, WooCommerce, Jetpack, Simplenote, Longreads, VaultPress, Akismet, Gravatar, Crowdsignal, Cloudup, Tumblr, and more. We believe in making the web a better place.
---
# Utilisation
<!-- .slide: data-background="https://i.imgur.com/6kiebe1.jpg" data-contrast="on" -->
<!-- credit photo: https://unsplash.com/photos/l7dP0O8Dj60 -->
----
## En chiffres
> WordPress is used by **41.5%** of all the websites, that is a content management system market share of 64.9%.
> <cite>https://w3techs.com/technologies/overview/content_management</cite>
----
## wordpress.com vs wordpress.org
* **wordpress.org**: site de l'application WordPress, téléchargement, liste de plugins et de thèmes, espace développeurs appelé «codex» (https://codex.wordpress.org/).
* **wordpress.com**: implémentation de WordPress «as a service» (ou «cloud») gérée par Automattic, permettant à des utilisateurs de créer leurs propres blogs.
----
## WordPress.com
https://wordpress.com/activity/
----
## Concurrents 1/3
* Avant WordPress, le logiciel français «dotclear» (https://dotclear.org/) était largement utilisé.
* Aujourd'hui, il est toujours maitnenu et utilisé.
* b2/cafelog s'est tranformé aujourd'hui en B2evolution (https://b2evolution.net/).
* Movable Type est également présent https://www.movabletype.org/
----
## Concurrents 2/3
WordPress.com a aussi des concurrents, par exemple [Blogger](https://www.blogger.com), [Tumblr](https://www.tumblr.com/), ou, dans les plus récents, [Medium](https://medium.com/) et [Ghost](https://ghost.org/).
----
## Concurrents 3/3
A noter qu'avec les plateformes d'hébergements de code proposant des CI/CD (github.com / gitlab.com), il y a aussi des blogs hébergés dessus (utilisant des outils comme [Jekyll](https://jekyllrb.com/), [Docsify](https://docsify.js.org/)).
---
# Ecosystème
<!-- .slide: data-background="https://i.imgur.com/0y2QVHd.jpg" data-contrast="on" -->
<!-- credit photo: https://unsplash.com/photos/H6eaxcGNQbU -->
----
## Serveur web
Un serveur web est un logiciel qui sert à traîter des requètes HTTP. Il va les recevoir, les interpréter et envoyer une réponse en conséquence. C'est un composant obligatoire dans la création de site web.
→ https://fr.wikipedia.org/wiki/Serveur_web
----
WordPress est un logiciel écrit en PHP. Il ne peut pas gérer de requêtes HTTP. Il aura donc besoin d'un serveur web pour pouvoir fonctionner correctement.
----
## PHP
PHP est un language de programmation qui s'exécute côté serveur (backend). Il est couramment utilisé dans la création de sites web dynamiques.
→ https://www.php.net/
----
## Base de données MySQL
MySQL est un système de gestion de bases de données (SGBD). C'est donc un logiciel qui sert à stocker, lire, modifier et supprimer des données stockées dans une base de données.
WordPress est conçu pour fonctionner conjointement avec MySQL pour y stocker les données relatives aux pages web qu'il gère.
→ https://www.mysql.com/
----
## Hébergement 1/4
Pour héberger un site WordPress il y a plusieurs possibilités...
----
## Hébergement 2/4
wordpress.com : simple pour commencer, mais peut d'avérer couteux pour «débloquer» certaines options.
----
## Hébergement 3/4
Un hébergeur tel que [KreativMedia](https://www.kreativmedia.ch) ou [Infomaniak](https://www.infomaniak.com) : ont tout deux des installateurs automatisés pour déployer des sites WordPress en 1 clique.
----
## Hébergement 4/4
Pour «on premises» : signifie qu'on est maître du serveur et qu'on doit gérer le déploiement nous-même, comme par exemple à l'EPFL.
---
## Dévelopement
Lorsqu'on veut développer WordPress, un thème, un plugin ou tester un site, il est généralement plus simple de pouvoir le faire en local, sur sa machine. Il existe plusieurs options pour cela, et toutes nécessites d'avoir un serveur web, une base de donnée MySQL (ou son équivalent open-source MariaDB) et PHP d'installé.
---
# Extensions
<!-- .slide: data-background="https://i.imgur.com/pz5LCpa.jpg" data-contrast="on" -->
<!-- credit photo: https://unsplash.com/photos/zAi2Is48-MA -->
----
## Plugins
WordPress peut être étandu en installant des plugins. Ils permettent d'ajouter des fonctionnalités qui ne sont pas disponibles de base. Bien que l'équipe WordPress gèrent certains plugins, la plupart sont gérés par des parties tierces.
----
## Thèmes
WordPress est livré avec une grande collection de thèmes différents qui serviront de templates pour le site web que l'on gère. Certains thèmes sont fournis de base (e.g. TwentyTwelve), d'autres sont maintenus par des parties tierces.
----
## Thèmes et plugins
Les thèmes et les plugins sont les moyens les plus accessibles pour personnaliser son site. Néanmoins, certains sont payants et il faut d'assurer qu'ils soient maintenus à jour pour des questions de sécurité.
---
# Organisation
<!-- .slide: data-background="https://i.imgur.com/naFkbZ7.jpg" data-contrast="on" -->
<!-- credit photo: https://unsplash.com/photos/Mwuod2cm8g4 -->
----
## Posts
Les posts (ou bulletin en français), sont la base de WordPress. Ils servent à alimenter le blog et peuvent être organisés en catégories et tags.
→ https://wordpress.org/support/article/posts-screen/
----
## Pages
Les pages permettent de contenir l'information du site. Tout comme les posts, les pages peuvent être organisées en catégories et tags.
→ https://wordpress.org/support/article/pages/
----
## Categories
Les catégories sont un moyen de classement hiérarchique.
→ https://codex.wordpress.org/Category_Templates
----
## Tags
Les tags sont un moyen de classement transversal.
→ https://codex.wordpress.org/Template_Tags
----
## Menu
Les différents éléments de WordPress (posts, pages, liens) peuvent être «accrochés» à un menu. En fonction du thème, WordPress peut géré différents menus et les placer à différents endroit de la page.
→ https://codex.wordpress.org/WordPress_Menu_User_Guide
----
## Frontend
Ce qu'on appelle communément le «frontend» est la partie visible par des utilisateurs non authentifié.
----
## Backend
Ce qu'on appelle communément le «backend» est l'interface de gestion du site, également parfois appelée «backoffice». Par défaut on y accède avec `/wp-admin`.
---
# Résumé
<!-- .slide: data-background="https://i.imgur.com/KF1qM5X.jpg" data-contrast="on" -->
<!-- credit photo: https://unsplash.com/photos/THBXd3VPdqI -->
----
## A retenir
* WordPress est un outil **gratuit**, **libre** et **open-source**.
* C'est le CMS le plus utilisé au monde.
* Un site WordPress est organisé en pages, posts, menus, catégories et tags.
* On peut modifier le comportement avec des plugins.
* On peut modifier l'apparence avec des thèmes.
---
# À propos
Présentation faite sur hackmd (https://hackmd.io/@ponsfrilus/WordPress) avec des images libres de droits provenant de [unsplash.com](https://unsplash.com/s/photos/newspaper).
---
## Chargement d'une page WP
[](https://www.wpbeginner.com/wp-tutorials/how-wordpress-actually-works-behind-the-scenes-infographic/?display=wide)
<!-- https://www.wpbeginner.com/wp-tutorials/how-wordpress-actually-works-behind-the-scenes-infographic/?display=wide -->
<!--
This style apply by default to all slides, unless .slide is used.
Note the use of the reveal class selector: this mean that only the presentation is affected by this style, and the makrdown preview or the book mode of hackmd.io is style intact.
If you want/need a resizable background image, add the background-size: cover; property and change background-position: 0px 0px;
-->
<style>
.reveal {
background-color: #e6e6e6;
background-image: url('https://epfl-idevelop.github.io/elements/svg/epfl-logo.svg');
background-repeat: no-repeat;
background-position: 5px 5px;
}
.reveal {
color: #111;
}
.reveal h1, .reveal h2, .reveal h3,
.reveal h4, .reveal h5, .reveal h6 {
color: #212121;
}
.reveal a {
color: #f009;
}
.reveal a:hover {
color: #f00;
}
.reveal .more {
color: #339;
}
.reveal code {
padding-top: 0.2em;
padding-bottom: 0.2em;
margin: 0;
font-size: 85%;
background-color: rgba(255, 255, 255, 0.46);
border-radius: 3px;
}
[data-contrast="on"] > div {
background-color: #ffffff50;
}
[data-contrast="on+"] > div {
background-color: #ffffff99;
}
/* https://stackoverflow.com/a/39614958/960623 */
img[alt$=">"] {
float: right;
}
img[alt$="<"] {
float: left;
}
img[alt$="><"] {
display: block;
max-width: 100%;
height: auto;
margin: auto;
float: none!important;
}
.reveal section img[alt$="logo"] { border: 0 }
.reveal h1 { font-size: 2em; }
.reveal h2 { font-size: 1.6em; }
.reveal h3 { font-size: 1.4em; }
.reveal h4 { font-size: 1.2em; }
.reveal h5 { font-size: 1.1em; }
.border { border: 1px solid #555; }
.reveal blockquote { width: 100% }
.reveal blockquote:before {
display: block;
padding-left: 10px;
content: "\201C";
font-size: 80px;
position: absolute;
left: -20px;
top: -20px;
color: #7a7a7a;
}
.reveal cite:before { content: "\2009 \2015 \2009"; }
.reveal cite { font-size: 80%; }
.reveal code {
color: #fff;
background-color: #101010;
border-radius: 3px;
font-family: courier, monospace;
padding: 0 3px;
font-size: 0.8em;
}
.reveal .footer1 {
position: absolute;
bottom: 1em;
left: 1em;
font-size: 0.5em;
}
.footer2 {}
position: absolute;
bottom: 0%;
left: 0%;
}
</style>
{"metaMigratedAt":"2023-06-16T01:39:45.628Z","metaMigratedFrom":"YAML","title":"Introduction à WordPress","breaks":true,"description":"Une petite introduction à WordPress","slideOptions":"{\"transition\":\"slide\",\"theme\":\"simple\",\"spotlight\":{\"enabled\":false},\"progress\":true}","contributors":"[{\"id\":\"98cf1d10-5049-49ca-9160-3f2e67fc1067\",\"add\":16324,\"del\":3514},{\"id\":\"15e97034-fba0-4fd9-a32d-9c5eb1dd654d\",\"add\":2379,\"del\":633}]"}