Plan pour deux jours WordPress

Introduction aux CMS

Présentation des différents CMS et framework

Installation de WP et présentation du CMS

Pour installer WP il faut :

– un serveur Web Apache
– PHP et MySQL

WordPress
On télécharge WP télécharger.

Pour la documentation général sur le CMS on s'appuiera sur le codex.

Pour le développement on peut utiliser NeatBeans qui est un bon IDE. (sinon si on débute
avec le code on utilisera plutôt notepad++) .

Étapes d'installation :
– On crée d'abord une base de données (UTF-8) à l'aide de Phpmyadmin
– On dézippe WordPress et on récupère l'ensemble des fichiers et dossiers que
l'on place dans un dossier « blog » dans le dossier www/ de WAMP ( serveur
Web ), htdocs pour MAMP
– On lance l'installation en allant sur le site : http://localhost/blog (pour MAM
http://localhost:8888/blog ou quelque chose comme ça )
– On suit les étapes d'installation.
– Tout d'abord WP indique qu'il ne trouve pas le fichier wp-config.php (fichier
de configuration du site).
– Pages d'installation importantes :
– connexion à la base de données. WP vérifie si on peut se connecter à la
base de données. Il faut fournir les informations suivantes :
– nom de la base de données précédemment créée.
– login et mot de passe pour se connecter à la base, en localhost : « root »
et « » rien ou admin pour MAMP, mais sur un serveur de production ses
informations sont fournies par l'hébergeur.
– Il faut également changer le préfixe des tables de WP ( point de sécurité )
– La dernière page sert à donner un titre au site et de définir un mot de passe
pour l'admin du CMS, attention il faut changer le login « admin » par défaut
(point de sécurité).
– Pour se loguer à l'admin on tape dans l'URL : http://localhost/blog/wp-admin,
puis on tape son login et mdp

Remarque tous les fichiers et les tables de la base de données sont en UTF-8
Exercice d'application
On installe WordPress

Présentation de l'admin de WP

Deux zones spécifiques à droite une sidebar (colonne latérale) pour adminstrer les
contenus et la configuration du site, au centre les formulaires pour modifier les contenus.

Les contenus dans WP

Les articles
Les contenus du site, ils sont soit dans une catégorie, soit non catégorisés, mais il est
préférable de les organiser dans des catégories.

Les catégories
Elles permettent de structurer le site dans une classification. Les posts peuvent se trouver
dans plusieurs catégories et celles-ci ne sont pas limitées dans leur hiérarchie.

Les pages
Ce sont des contenus statiques, dans le sens qu'ils ne sont pas rangés dans une
classification (arborescences de catégories ou de taxonomies). Ils servent à écrire les
pages du type : qui-sommes-nous ?, présentation, contact etc.
Les custom post type
C'est des contenus spécifiques. On les utilise pour différencier les articles d'autres
contenus plus spécifiques, par exemple pour des cours ou des portfolios.
Ils ne sont présent par défaut dans WP, il faut bien évidement les définir à l'aide de l'API
des CTP de WP dans le code, ou alors utiliser des plugins qui gèrent leur création.

Les taxonomie
Elle permet la classification des contenus (articles ou custom post type).

Les archives
Ils se constituent au fil des mois des années etc. Dans WP il existe un widget qui permet
de les afficher par mois. Le mieux étant de faire une page spécifique pour les voir.
Attention cependant aux doublons.

Admin de WordPress
Administration des articles dans WP
– Format, il permet de donner à un article un type particulier : vidéo, citation. Le terme
exacte dans WordPress est post-format
– Catégories
– Mots-clefs
– taxonomie (dans l'exemple « genre ») qui sont soit en fait des mots-clefs soit des
« catégories » supplémentaires
– Image à la une, utiliser essentiellement pour montrer une petite vignette de l'article
en page d'accueil par exemple, elle souvent cliquable et même vers l'article
complet.
– Champs personnalisés ou metabox qui sont utilisés pour afficher des informations
complémentaires à l'article
– Les commentaires

(voir la figure plus bas )

Utilisateurs du site
Il existe 6 rôles dans WP, il y a le super administrateur qui aura les codes d'accès FTP du site et
pourra modifier le fichier wp-config.php pour activer l'option multi-site (network sur le codex).
L'administrateur, l'éditeur (gestion des contenus du site, pas de la configuration), l'auteur pour
rédiger des contenus lui appartenant uniquement, contributeur pour écrire des contenus sans la
possibilité de les publiés lui-même et des abonnés qui pourront accéder à leur profil et à des
contenus privés sur le front.
Pour plus de précision sur les rôles de ces utilisateurs du blog, c'est ici

– super administrateur ( accès ftp)

– administrateur
– éditeur
– auteur
– contributeur
– abonné

Exercice d'application
On crée les utilisateurs suivants :
Vous
Antoine administrateur
Cécile éditrice
Jérôme auteur
Paul contributeur
Jacques visiteur
Réglages
La première chose à faire dans l'admin de WP est de donner les bons paramètres au site :
il faut donc aller dans les réglages. Dans un premier temps on mettra le bon fuseau
horaire (exercice d'application ).

Exercice d'application :
construire les catégories et articles suivants :
Catégories : « Carnet », « Matériel » et publier des articles dans ces des catégories. On
créera également la page « contact »

Administration des menus

Présentation de cette partie

WordPress donne ici la possibilité de gérer les items des menus, tout est lié au thème que
l'on à installer qui propose des places spécifiques pour afficher les menus. Ceci changera
donc d'un thème à l'autre.

Exercice d'application :
On créera à l'aide des menus de WP dans l'admin des liens vers les catégories
« Carnet », « Matériels » et vers la page « contact ».

On placera également les widgets « calendrier » dans la sidebar de droite sur le site.

Pour l'instant on utilise le thème par défaut de WP, il en existe deux par défaut. On
téléchargera un thème dans apparence puis on le testera.

Discussion
Présentation de cette partie

WordPress dispose d'un système de commentaires assez complet, avec des filtres et des
paramètres pour limiter la publication des commentaires.
Il faut prendre garde aux options que l'on décide de mettre, par exemple demander qu'un
internaute soit inscrit et connecter sur le site pour poster un commentaire est très
contraignant, si cette option est cochée on risque de n'avoir que peu de commentaire
posté.
Par ailleurs, WP dispose de deux zones de filtres très pratiques pour vérifier et éliminer
des commentaires tendancieux.

Exercice d'application :
On modèrera les discussions, deux filtres existent en attente de modération ou
indésirable. On testera les deux filtres et on vérifiera que les commentaires se placent bien
dans les bonnes pages de l'admin.

Exercice d'application
On installe le thème fournit dans le zip puis on reproduira la home à partir du thème (voir
l'image ex1.jpg dans le dossier ).
Ou l'exemple en ligne : www.velo.arbre-helices.com
Exercice
On crée le diaporama. Il faut créer une page et assigner le modèle de page
« photography », puis utiliser les CPT « diaporama » pour ajouter des images dans le
diaporama.
Attention, il faut mettre le nom « Diaporama » à la page et faire un lien dans un menu vers
cette page.

Exercice
On publie un article dans « Carnet » cet article aura le terme « visite de musées »
également. On crée un item dans un menu vers « les visites de musées ». Ce lien
affichera tous les articles qui auront le terme « visite de musée ».

Développer un thème WP
Au minimum on placera les fichiers suivant dans un dossier « montheme » dans le dossier
themes de WP :

– wp-content/themes/montheme
– style.css ( le fichier : css du thème et installation du thème dans WP )
– index.php ( template )
– screenshot.png ( petite image qui décrit le thème dans admin de WP )

Exercice
Réércire les structures PHP suivantes en style template PHP; dans un fichier
« exercice.php » on testera ce fichier sur le serveur ( on crée un dossier « test » dans
www ou htdocs on dépose le fichier et on tape l'url : http://localhost/test/exercice.php )
<?php
for($i=0; $i <10; $i++){
echo '<p>Bonjour</p>';
}
?>

<?php

$array = array('Antoine' => 1, 'Cécile' => 2, 'Paul' => 3 ) ;

foreach( $array as $k => $v ){

echo 'clef : ' . $k . ' et valeur : ' . $v;

}
?>
Exercice
On affichera 10 fois la phrase « hello world ! » avec un compteur qui s'affiche à l'écran :

hello world ! 1
hello world ! 2 etc
Exercice
wp-content/themes/montheme
on crée les fichiers suivants : style.css et index.php

On construira son propre thème, on récupère les CSS dans le cours en ligne, on mettra ce
code dans le fichier style.css. On pensera à adapter l'exemple donné dans le cours à
l'exercice.
Mettre « hello world! » dans l'index.php du thème. Il faut maintenant activer le thème dans
l'admin de WP.

Rmq : tous les fichiers sont en UTF-8

Exercice
Afficher les images à la une dans la boucle WP, pour ça on utilisera le marqueur suivant
<?php the_post_thumbnail('thumbnail'); ?>
Pour trouver un exemple de code on ira sur le codex de WP :
http://codex.wordpress.org/Function_Reference/

Exercice
1) Dans l'index.php on utilise maintenant une page HTML, puis on crée un div#content
où l'on placera la boucle de WP.
2) On créera également un div#header, div#sidebar et div#footer
3) On reliera la feuille de style CSS à l'index.php on utilisera le code suivant :
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url');
?>" type="text/css" media="screen" />

Exercice
On crée le template category.php (on mettra le code de l'index.php dans ce fichier )
Pour identifier chaque template on mettra dans le header des pages le titre du template
( home, single et category )
WordPress est très personnalisable, il utilise un système de templates, voici, par exemple
un schéma simplifié de la hiérarchie des templaes

On trouve sur le codex la hiérarchie complète