Académique Documents
Professionnel Documents
Culture Documents
2e ÉDITION
NUMÉRIQUES
Toutes les marques citées dans cet ouvrage sonr. des
marques déposées par leurs propriétaires respecr.ifs.
Avant-propos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . XTff
Remerciements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Wfî
0
:::J
Exemples de sites créés sous WordPress ................................ . 5
s:t
,-i
0
Témoignages . ......................................................... . TI
N
@
...., Chapitre 2 - Installer et apprivoiser WordPress . .................. .
.c
Ol
·;::
>- 2.1 Kit de lancement ................................................... .
c.
0
u Prérequis .............................................................. .
Mise en place et utilisation d'un FTP ................................... .
Mise en place d'un serveur local avec WAMP..................... ....... 22
Choix d'un navigateur Internet.......................................... 23
Choix d'un éditeur de texte............................................. 24
IV Sites Web avec WordPress
-0
Utiliser plusieurs boucles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . TiS
0
C:
0
:::J 6.3 Wordpress : fonctionnement avancé ................................. Tî6
s:t
,-i Tî6
Objets, méthodes et paramètres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
0
N
La boucle et l'objet $post ............................................... Tî7
@
....,
.c Personnaliser une boucle avec un objet de WP_ Query() . . . . . . . . . . . . . . . . . . Tî8
Ol
·;::
>-
c.
Interagir avec fa base de données WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . . TI9
0
u
6.4 Wordpress: l'envers du décor ....................................... 120
WordPress et les URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
WordPress et sa base de données. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12T
Trucs et astuces pour réussir son template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12T
Table des matières VII
-0
8.4 « HTML to WordPress ».............................................. Tn
0
C:
:::J
Préparation des fichiers du template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
0
s:t
,-i
Insertion du code statique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 73
0
N Insertion des fonctions WordPress (template tags) . . . . . . . . . . . . . . . . . . . . . . . 174
@
...., Dispatcher le fichier« index.php » . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
.c
Ol
·;::
>- Gérer les catégories . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 5
c.
0
u Gérer un article . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 5
8.5 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
X Sites Web avec WordPress
Depuis sa version 3.0, WordPress est devenu une des références en système
de gestion de contenu (CMS : Content Managing System en anglais) .. Il
permet de concevoir et de gérer facilement un site Internet. WordPress vous
permettra notamment de créer des pages web, d'y inclure du texte, des
images et d'autres médias, de créer des rubriques, d'éditer des articles.
WordPress permet également de gérer un site multi-utilisateurs. Enfin, la
gestion de l'apparence du site se fera aisément.
Philosophie de l'ouvrage
« 100 % pratique ! », cet ouvrage se veut clair et concis. Usant d'un langage
facile et accessible, il vous accompagnera lors de votre découverte, prise
en main et perfectionnement de WordPress. Pour en tirer le meilleur,
accompagnez votre lecture d'une manipulation en direct de votre WordPress.
-0
0
C:
:::J
0
s:t
,-i
0
N
@
....,
.c
Ol
·;::
>-
c.
0
u
Copyright© 2014 Dunod.
Remerciements
SIMON
KERN & Creative
Designer
11r11,,n t.iion
-0 www.simon-k.com
0
C:
:::J
0
s:t
,-i
0
N
@
....,
.c
Ol
·;::
>-
c.
0
u
Les fichiers
téléchargeables
Découvrir, installer et
• •
appr1vo1ser
WordPress
Cette partie va vous permettre d'insta ller WordPress. Avant de passer aux
choses sérieuses, nous allons préparer le terrain pour réussir son installation.
-0 Dans le cas contraire, nous risquerions de rencontrer des prob lèmes qui
0
C:
:::J nous feraient perdre du temps .. .
0
s:t
,-i
0
N
@
....,
.c
Ol
·;::
>-
c.
0
u
Copyright© 2014 Dunod.
Découvrir WordPress
1.1 INTRODUCTION
Rapide présentation
WordPress a été créé par la société Automattic. Bien que WordPress soit libre
et gratuit, Automattic s'occupe de son évolution. Automattic développe aussi
de célèbres services comme : Akismet (lutte contre le Spam) ou encore le
service Gravatar (gestion de votre identité sur le Net).
WordPress.com et WordPress.org sont tous deux des sites gérés par
Automattic. On peut très facilement les confondre! Une petite mise au point
,.
s impose:
• WordPress.com permet de s'inscrire en ligne et de créer rapidement et
facilement son blog. L'adresse de celu i-ci prendra a lors cette forme :
votre nom. wordpress.com.
-0
0
C: • WordPress.org est le site de référence. li recense tous les éléments
:::J
0 en relation avec WordPress : la dernière version téléchargeable, les
s:t
,-i plugins, la documentation officielle (codex). C'est donc exclusivement
0
N à ce site que nous ferons référence dans ce livre.
@
....,
.c
Ol
·;::
>-
c.
0
u Nouveautés
La version 3.0 de WordPress a apporté des fonctionnalités fondamentales qui
ont transformé WordPress en un véritable CMS (Content Managing System :
gestionnaire de contenu) . La version 3 . 9 a éga lement apporté sa pierre à
l'édifice avec :
4 Chapitre t. Découvrir WordPress
Espace
d'administration
Choix te
oo•·~~ 7' ""-
~
~odiflcotlon
ucontenu
( )
MisG en forme
Template Base de
1 données
1
;
Î
Page html (public)
-0
0
C:
0
:::J
1.2 EXEMPLES DE SITES WEB AVEC WORDPRESS ET
s:t
,,.
,-i
0 TEMOIGNAGES
N
@
...., Exemples de sites créés sous WordPress
.c
Ol
·;::
>-
c. WordPress s'adapte à des utilisations diverses et variées que nous vous
0
u présentons ci-après (figures 1.2 à 1.13), des exemples valant mieux que des
mots.
6 Chapitre t. Découvrir WordPress
Blogs/ Magazine
lt,S/0[ Ot'VtLOl'CRS
-0
0
C:
:::J v;,,,., Stay Connected
0
a fa
-
i\'I
s:t
,-i A New Chapter for
0 BlackBerry Events
N
@
....,
.c
Ol
·;::
>-
c.
0 OJ.23.l.fl~""a,e.,
u
" • J • 1
--
1/, • • , •• • -C• ,, 1 • •! 1, jft•, t•,• , "'
ll_......,,,,..,1
"-·~
or
'"'°'
UblUflino'°
tn
m .....
FWU1g.1n ...
--
.....~W'llfLa•
................
-0
0
C:
0
:::J
\~tTE~i
s:t
,-i ·.:::=.. 8 res ateliers follow t,
1 lt•r
0
N Jouons MC CSS3
18h00 • 18h30 :
@ Aa:mibilitf des documenu POf
...., PrtsenllllÎOII~~
.c lSl\30 . 19h00 :
Ol Découpe HTMUCSS pertinente
·;::
>-
c. lnûsr>tion tfune IWWll!tt«
19h00 • 191130 :
0
u Comment smr IE6
Au 'Rafiot' ::."'.::::::
Galeries/Portfolios
REHIX« a lil
':,,,..
• •
SPA CE
'
a=,
r.: ~ . ~~<.:.
r.~~+I~
~
R•sponsiv.
HTMLS/CSS3 ~ .
. \\'"'"''"'°""'"'~.. ~ FREE
P•o ; M f Nl" ~ h,~ - :
Pwv f OSA.'11 ~
· 1
U!•'.ll•r.,r
____
,.._
..~.,..... ..,.,...,.,.,_,_
_ -
•r,,~ ,~ ,·u,.,, !l.:r..1..
--
• •
~11,1,, li'~ d1
--
r ,, >(.•',
..... I',,: -
• /~
~ ·1tt16 (ft'111t!
web dnlg ln•plratlon
...Q;nder
lhlOtOS..ot
.........
~. - ' ~
fil ltN'M kt
-0
0
C:
:::J
0
s:t
,-i
0
N
@
....,
.c
Ol
--
&0-!1.1.1.!. ~ .w!J!.!J'I
·;::
>-
--
c.
0
u
·-
•
-0
0
C:
:::J
0
s:t
,-i
0
N 1/ô>S Tr1~s.Mc•• fit 1lfil:>ltu,re11 dtwttYc~,..,ot
-•1Vo.$"'..JJl!,:ptffl(up$--""11Nl1'1....,.._..... ~, ,...
~111,n:.-~.,..,~-..,oul'$ ..._...,t,"o-,,;e•1to.,.,, ,.,...,,.,,,, 11 t: c!,
@
....,
.c fl',f.lF1tl-1~l-,#(!~ll'W91'1~ftl~ti;t"c;t<T$t4)$f>f
~---lhtlJfS nl,.l,O(s::E S!lttcfS&Cl!fOOU l'c,r
Ol ~,c.'llt!'ec;t'let~•Mt't_.Clltf«lt'llu.cà.FefflOl"t
·;:: .,..,,...,..-~wlo..,111HlfQlff p1o_,.,.,111$11"11Q;
>-
c.
lll~l'()f,$
0
u
Sites magazines
..
Categ:orie-;i Freebies Oeals IIECla::1 l::Jmf1'23
-- ·-~·=... ~
~
i:~ ~!t
~--
What's really wrong with
Squarespaca Logo
IA~ Wff\ Squ11tl'!'!>l)IIGf: 1-aunrhc-d Sql.lll~p,11:e
l.:igo., ncw addition IO-tht!r sCMu: d(s!gntd to
Our favorite tweets of the
waak: January 20, 2014 •
January 26, 2014
Cvery~tk·~ t\\fft a lot or W:l!f'~ing w.iff
Newsletter
JI
"
t~ t • T" H<d~ w ,r',O, ~,,, , ... ~ . ,1
pro\/lcft ln:;iM<IUillS .:intfiffl,ll b.1\!l'l('SSCS W!ll'Hh('
muns to crtftt, prt'tss.:o~ 1cgo. Wcthln hOursof
hllghll&hl1t1g gteo1t tontomt lh4 w, find on the web ~'""' ·:l~:t ~.,.,. :J • :i, gr ~, r -;..,,-
mac c-an be of lntttts.t to web des.:gnen. The beS1.-
lhe~~ l.;ll,l'IChil'l@. SO(i;)I m('(ll,t~ ,lfl.,-ne,
•
CONYERT YGUR PSD TD
·pt library to add voice comma
HTML5&CSS3
sites, apps or games.
I" -~ .... ...... '\.
Chop<:hop.org .
1 .........-,
-:-
-- , .
Comics of the wNk #219
.
so freebles that you have
totrv
• .
e .g Respon$.1Ve~gn
•
0 • 2Cornmtr1ts
s:t
,-i
0 Wh.-it is "User Experierice Design" exa('t1y? Should you not sta.r t it
N unless you are fully dedicated, or should you embrace it in the process F, -Il,; yf V
>-
c.
0
u
• ; SmashingNewsletter
Sites associatifs
- .:
aleaulaterre eu
• hlh.....
• hl1nU11~
• hoff l~r,tOfl'II.. t\
IÎi Pbc,111t.
-~·..
1,....d,tllfno,w'tf~S,lnl~-·
Sc,~91
.) f.111,'Jl;.(-n,a l•... bwnC1MW11,1ndt~•tic•l.mtre
U...91.-da«Oilil~-OWIIIIN
COMI.CVÛdit Ill""' dOll Mtt<Nf*t Ili~ .l,l'°"O'I""'
hlM~ n.-o ...olr P!'POM(<IO.•
• °""'
.._..
Ôf b'IM . . . •5t.appanlf '51.#tfUf . , , 9lrlibâ
-
•~u (l'!tMtK<WIMltf~dtlwtUnot
Q .......
Sites d'e-commerce
TINKERING
WOOO $ 1GNAGE l lVE FêEO BLOG
e MONKEY
FlttOTOS ABOVT CONTACT
-0
0
C:
:::J
0
s:t
,-i
0
N
@
....,
.c
Ol
·;::
>-
c.
0
u
Témoignages
Geoffrey Crofte, Développeur Web
., ,_. .
j~IYJ: 111infiritrslidesl"CW m
que!queslignesdej~IYJ
Des styles l)Efscmilisél IX)Ur vos
chechbaxes mfull m
tl
(ffWfWl'S~)I'
~d'~<'tsl ,.$W4"'p,NNl tmP'I
....,.....~
JOl',<'.st• I I ~
__..
INll,(d~
...........
M"'~~
OHN!TltflU.ot
_..,.
~tl/owfw.itl
~·tl't-RPHICll,lflM'S,OSSN
dt~'~Ot(O'ltl'Olt1ot
~~OtlflilSOM
. . . . . _,
Coostruireun site depetiles amlfll:es
avec11100
t:l
l.~Pl'Ol""t lltn
HîKSPtfffl«~ wi rt<htnntotC"'5
~t.-i.ctf'l'IIN
d\t"'ltl\7tt~fMUL'II ~~ .....
,ptOMSesoanstts
...... 1$,..,.,~
O,le tn OIMS trttàMJl
-
p,,ttS1vWi«r,,11<t\t, N\Mt1tonehtfcN
~(l'ICn,lde~t.,,fl:I.C.w.rt"
l"tr"~(Ç.ttM:~ttclf>tftmtl")f
f\Qsacréatures
qu, cons1~le 3 a;:,porte1de~ sol utioM simplH $C 91 jga ntH à VO$ utilil4WU'5 finaux. Je suis spéc1ol,sêe en èes1gn web et mobilité. Je crée des
s.ftPs Weber OP~ apf)Jications mObOPs natiVT"s i nl ultîve!i. e-1f!(gcnoml qu~ 1 ·1111H~l\tetJr e;;t placé au cœu, cru prcces~us pour lu! fournir 11'
meilleur expénence p~s1ble . Keep it simple- !
-0
0
C:
Pourquoi a-t-elle choisi WordPress ?
:::J
0 J'ai choisi WordPress pour sa flexibilité et sa simplicité. J'avais commencé à
s:t
,-i
0
l'utiliser pour mon premier blog il y a des années et me suis très vite aperçue
N
qu'on peut al ler beaucoup plus loin que ça avec un ce CMS. Il me permet
@
...., d'avoir à la fois une partie portfolio, et une partie blog gérées séparément,
.c
Ol
·;::
d'avoir du multilingue et de pouvoir publier très rapidement mes travaux et
>-
c. articles en quelques clics.
0
u
0 ~""'..;.:...
~.......--
··' ___ ..0
....
- . ..-:. __..._....
- - ...
......-
__..
--
"'-:.. .-. , : -:,~.:=:::::.::.--::.:..:::
: : : - , .. u,..--~•--
- - · • - c.. ....... .n ...............
-0
0
C:
:::J
0
s:t
,-i
0
N
@
....,
.c
Ol
·;::
>-
c.
0
u
Les ill\Si&nifiantes aventwes
~e Johan t Plllne
WWW lOROYOY CON
~m~~-..• ._,.,,.,-_~-•••~c1ct'\oi:irk-ia-~•-
--1n-.p,o"pi!f!lll.t1ua.m111a•-'--aru1•~-c1t1~CJ11•........,.•_...._.
- ~ , - ~ ~ n l '• a'•IOOll&•bilcWtlfl
Dfdt11JOUlelfll!IVltdielmlleljllUJtn•-. ....flllr.c._...•c1GK1enltffflc.MWwi.-l
\'l!ld-9utntlo9.-Jt..._.,...4tdl!IIYOlld-..llllr.dfji~ld./,a8nal•---·........ ,,.... .tlna •
....,_••Mllldl,ur._,..,_• ..,..,~,,.r...,,-11...irt•,C•~
-0
0
C:
:::J
0
s:t
,-i
0
N
@
...., Figure 1.19 - www.torondel.net
.c
Ol
·;::
>-
c.
0
u Graphiste/I llustrateur depuis presque 20 ans (9 ans en salarié, 11 ans
en indépendant), j'interviens principalement dans la création de chartes gra-
phiques de sites Internet, d'animations et de jeux en Flash, et d'illustrations.
Mon site : http://www.torondel. net (figures 1.19 et 1.20).
Mon blog : http://blog.torondel.net.
1.2 Exemples de sites Web avec WordPress et témoignages 17
Pour un graphiste comme moi, qui n'a que très peu de connaissances
en intégration et en développement, cet outil permet de mettre en place un
site comp let, dynamique, personnalisable, administrab le, avec un moteur
-0
de recherche et optim isé pour le référencement. Il me permet également
0
C: de m'appuyer sur une communauté francophone très active .. . Et tout ça
:::J
0 gratuitement!
s:t
,-i
0 Je me tourne de plus en plus vers les thèmes « premium », qui restent en
N
@ général très abordables, et proposent souvent des fonctionna lités intéres-
...., santes, avec parfois les fichiers sources du thème, ce qui est très appréciable
.c
Ol
·;:: quand on souhaite le personnaliser.
>-
c.
0
u Un seu l bémol néanmoins : le succès de WordPress fa it qu'on assiste à
une uniformisation des templates. Les thèmes vraiment originaux sont rares;
et, si on cède à la facilité, je crains que tout cela nous conduise à une baisse
de créativité.
Pour qu'il reste un bon outil, nous devons utiliser WordPress à bon escient,
sans se brider, tout en faisant de lui un tremplin vers plus de créativité.
18 Chapitre t. Découvrir WordPress
-0
0
C:
:::J
0
s:t
,-i
0
N
@
....,
.c
Ol
·;::
>-
c.
0
u
figures l .21 et l .22), il aime la simp licité et la soup lesse d'util isation que
procure WordPress . Mettre à jour ses derniers travaux n'est pour lui qu'une
histoire de quelques clics .
Techn iquement, il uti lise notamment quelques p lugins comme Lightbox
pour l'agrandissement esthétique des images en JavaScript, Simpleviewer
pour sa galerie 2D/3D et Ali in one SEO pour le référencement.
-0
0
C:
Nicolas Juen (développeur front-end et back-end)
:::J
0
s:t
Mon utilisation de WordPress n'est pas du tout celui d'un moteur de blog mois
,-i
0 d'un CMS. Dans l'agence dans laquelle je travaille, les sites que nous faisons
N
@
sont totalement faits sur mesure. Chaque fonctionnalité supplémentaire fait
...., l'objet d'un développement d'un plugin particulier.
.c
Ol
·;::
>-
c.
0
u
Copyright© 2014 Dunod.
Installer et apprivoiser
WordPress
Prérequis
Pour pouvoir fonctionner, WordPress requ iert un serveur pouvant supporter
PHP 5.2.4 et MySQL 5 (ou leurs versions ultérieures).
Le serveur conseillé (et le plus robuste) pour WordPress est Apache
{gratu it). Néanmoins, si vous possédez déjà un autre type de serveur,
inutile de vous ruer sur Apache : WordPress devrait pouvoir fonctionner
-0
0
C: normalement. N'oubliez pas de vérifier ces éléments lors d'une souscription
:::J
0 à une offre d'hébergement !
s:t
,-i
0
N
@
...., Mise en place et utilisation d'un FTP
.c
Ol
·;::
>- Le protocole FTP (File Transfer Protocol) permet de transférer des fichiers de
c.
0 votre disque dur sur votre serveur.
u
Le logiciel FileZilla est le cl ient FTP gratuit que nous allons utiliser. Vous
pouvez le télécharger sur son site officiel : http://filezilla-project.org.
Après l'avoir instal lé et démarré, renseignez les champs de la barre
de connexion (figure 2.1) : Hôte (fourni par votre hébergeur, il prend
habituellement la forme ftp.nomdedomaine.com) puis Identifiant et Mot
22 Chapitre 2. Installer et apprivoiser WordPress
1 Hôte: ftp.monsite.com Identifiant : ubid.ile Mot de passe : ....... ul Port: - - , Comemn rai;de JE)
Une fois cette étape terminée, cliquez sur« Connexion rapide». Vous êtes
désormais connecté à votre serveur distant!
Notons que FileZilla propose une interface qui, par un jeu de doubles
fenêtres, permet une visualisation simultanée de votre disque dur (Site local,
à gauche) et du serveur distant (Site distant, à droite) (figure 2.2).
Pour transférer un fichier, un simple glisser/déposer d'une fenêtre à l'autre
suffit. La progression du té léchargement (nombre de fichiers, de dossiers,
taille totale) s'affiche en bas de la fenêtre de droite.
Nom de fichie, I Taille de fi ... Type de fichier Dernière modificat... Nom de fichier I Taille d, _:,
.'jA: Lecteur de dis... ..
&c, Disque local jj flash
'90: Lecteur CD js
logs
medias
-
php
style
_j voeux
-0 ~cv.pdf 253 ~
0 ~ index.html 2.
C:
0
:::J
~ "' -1
' ~ "' J '
6dossiers 3 fichiers et 7 dossiers. Taille totale: 256 387 octets
s:t
,-i
0
N
@
...., Figure 2.2 - Fenêtre principale de FileZilla
.c
Ol
·;::
>-
c.
0
u
Mise en place d'un serveur local avec WAMP
Avoir un serveur en ligne c'est bien, mais avoir un serveur local (c'est-à-dire
sur son propre ordinateur) c'est p lus pratique pour concevoir un site. Cela
permet d'éviter d'avoir à transférer des fichiers par FTP pour la moindre
modification.
2. t Kit de lancement 23
Nous a llons donc installer notre propre serveur web grâce au logiciel
WAMP (MAMP pour Macintosh) que vous trouverez sur son site officie l, ·e n
vous rendant à l'adresse suivante : www.wampserver.com .
Après l'avoir installé (bien définir le navigateur par défaut lorsque ce
sera demandé), lancez l'application WAMP. La petite icône dans la barre des
tâches doit être de couleur verte (dans le cas contraire, relancez l'application)
(figure 2.3).
Il
Personnaliser...
• + +' • . +
~ localhost
~ ~ phpMyAdmin
le:)
www directory
lê Apache
C) PHP
C MySQL
Personnaliser...
t
·;::
2.2 INSTALLATION DE WORDPRESS
>-
a.
8 Obtention de la dernière version de WordPress
Pour installer la dernière version de WordPress, rendez-vous sur http://fr.
wordpress.org/ pour la version frança ise ou sur http://wordpress.org/
download/ pour la version angla ise, puis cl iquez sur le lien de téléchar-
gement (figure 2.5).
2.2 Installation de WordPress 25
WORDPRESS.<mc; FrancP
Acc11P1I A propo., R1Pr1Vf'lllJP fonlrHI ln<,f,1ll.--lt1on TPIPc h..-ir.1::P111Pr1t VPr<,1011<,
Téléchargement 1êlecharger
WordPress 3.8.1
La dernière version francisée de wordPress sera toujours accessible depuis cette page. Il vous suffit
z.1p - 6S M0
de cliquer s ur le bouton se trouvant ici à droite pour la télécharger.
Télécharger au for,..t .tar.gz - 6.0
S 'd vous venait 1 'envie ou le besoin de télécharger 1 'une des versions précédentes de WordPress en Mo
français, elles restent disponibles et accessibles ici· même.
La version francisée est in tégralement réalisée par 1 'équipe de 1 'association WordPress• Autres options de
Frnncophone. Outre un blog proposant les dernières nouvelles importantes du monde de WordPress1 téléchargement
son site donne accès à un forum d'entraide en français, où vous pourrez poser des questions et
apprendre a résoudre vos problèmes grâce aux membres do la communauté WordPrcss. • Autres formats de fichiers
Versions précédentes
Notez que WordPress-Francophone n 'assure pas le support du service commercial WordPress.com ... • Versions 8é:ta et Candidates
www
"
-0
mon-site
0
C:
:::J " r, wp-admin
0
s:t
,-i t> wp-cont ent
0
N !> wp-include.s
@
....,
.c
Ol
·;:: Figure 2.6 - Arborescence du serveur local <WAMP)
>-
c.
0
u
• Sur un serveur distant (FTP)
Il suffit de transférer les fichiers du dossier« WordPress » à la racine de
votre site. On utilise pour cela le logiciel FileZilla.
Après avoir renseigné les champs de la barre de connexion (voir
figure 2.1 ), un simple glisser/déposer des fichiers suffit.
26 Chapitre 2. Installer et apprivoiser WordPress
~ Connexion Q 1----------..
Utilisateur :
1root
Mot de passe:
r Exécute r ~
-0
0
C:
~ + ~ localhost/phpmyadmin/ ind~.php?token:8f0727c5d8333b53,
:::J
0 0 Désactiver· ,1. Cookies· / CSS· Q Formulaires· [Q Images· 0 Ir
s:t
,-i
0
php yAd in
N
@
1am :.~ Q:J ~
...., [ (Tables récentes) ... B]
.c Paramètres gén
Ol
·;::
>- information_schema • Modifier le mot de ~
D
c. mysql
0
u performance_schema § lnterclassement pou
test
Bases de données
Il ne semble pas y avoir de fichier wp -config .php. j'en ai besoin pour lancer le processus.
Vous pouvez créer un fichier wp-conf i g .php par le biais de cette interface. mais cela ne marche pour
toutes les configurations de serveur. La manière la plus sore reste de créer le fichier à la main.
Bienvenue dans WordPress. Avant de nous lancer. nous avons besoin de certaines informations sur votre
base de données. Il va vous falloir réunir les informations suivantes pour continuer.
Si. pour quelque raison que ce soit. la création automatique du fichier ne fonctionne pas. pas de
panique. Tout ce qu'elle fait. c'est de compléter le fichier de configuration avec les informations de
connexion à la base de données. Vous pouvez tout aussi bien ouvr ir le fichier wp- config- sample. php
dans un éditeur de texte, y saisir les informations en question. et enregistrer le fichier sous le nom
wp- config , php.
Vous devriez normalement avoir reçu ces informations de la part de votre hébergeur. Si vous ne les avez
pas. il vous faudra contacter votre hébergeur afin de continuer. Si vous êtes prêt..
C"est parti !
Vous devez saisi r ci-dessous les détails de connexion à votre base de données. Si vous ne les connaissez
pas. contactez votre hébergeur.
Envoyer
Cest parfait! Vous avez passé la première partie de l'installat ion. WordPress peut désormais communiquer
avec votre base de données. Si vous êtes prêt(et il est maintenant temps de ...
-a
Lancer nnstallation l
0
C
:J
0
'tj"
,-i
0
N
@ Figure 2. 1 3 - WordPress communique avec la base de données
.....
.!:
Ol
·;::
>-
a.
0 6. Sixième étape : C'est terminé ! WordPress confi rme que l'installa-
u
tion s'est bien déroulée. Il est désormais prêt à l'emploi (figure 2. 15).
) À savoir - Par défaut, WordPress va installer du contenu fictif dans votre site.
J,
~ '
30 Chapitre 2 . Installer et apprivoiser WordPress
Bienvenue
Bienvenue dans le célèbre processus d'installation en 5 ninutes de wordPress I Vous pouvez parcourir le
fichier ReadMe à loisir. Autrement remplissez simplement les chamP5 cl-dessous, et 1/0US serez prêt à
installer la plate-forme de publication personnelle la plus puissante et la plus extensible au monde.
Informations nécessaires
Veuillez renseigner les informations suivantes. Ne vous inquiétez pas, vous pourrez les modifier plus tard.
Identifiant Simon
Les identiNnCJi doivent contenir uniquement des caractères alphanumériques. espaces, tiret bu.
tiret. po.m:s ec .. symbole O.
Installer WordPress
Quel succès !
WordPress est installé. Vous attendiez-vous à d'autres ét apes? Désolé de vous décevoir;-)
1....Se connecter . . JJ
C:, Version
C:, Se rvice
• Apache modules •
1::1 Alias directories
(B httpd.conf
0 Apache error log
Sta rt Ali Services
0 Apache access log
Stop Ali Services
Restart Al i Se rvices
-0
0
C:
:::J
0 Personnaliser...
s:t
,-i
0
N
@
....,
.c Figure 2.16 - Apache Modules
Ol
·;::
>-
c.
0
u
Concernant WAMP vo ici la m a rche à suivre:
1. Cliquez sur l'icône « WampServer » dans la barre des tâches, puis
sélectionnez « Apache > Apaches modules » (figu re 2.16).
2. Cliquez alors sur « rewrite_module ».
32 Chapitre 2. Installer et apprivoiser WordPress
Remarque - Cette étape n'est pas obligatoire et doit être faite avant l'installa~
tion de WordPress.
En travaillant en local avec WAMP, vous aurez dans votre navigateur une
URL du type http://loca lhost/monpro jet/bidule.html
Cette URL n'est pas très élégante mais est entièrement fonctionnelle. Par
contre, il vous faudra la modifier dans la base de données de WordPress
avant de le migrer vers son hébergement définitif (voir section 10.3 « Démé-
nager WordPress »).
Si vous voulez travailler directement en local avec l'URL définitive sous la
forme www.mon projet.com/b idule.html et éviter ainsi l'étape de mise à jour,
c'est possible ! Pour ce faire, nous allons procéder en deux temps:
1. modifier le fichier« hosts » de Windows (ou de Mac ou de Linux) ;
2. ajouter un « V irtual Host » à notre serveur Apache (WAMP).
if Vi rt ua l hosts
Inclu de conf/extra/httpd-vhosts .conf <-- lign e 467
Une fois que nous avons ouvert ce fichier dans NotePad + +, nous
pouvons ajouter ces lignes de code tout à la fin, à la suite du document
donc:
"'O
0
C
:i
0
<j" Figure 2 . 1 7 - Front office de WordPress
r-l
0
N
©
.µ
..c
Ol
ï:::: Espace d'administration (back office)
>-
a.
0
u
Le back office est la partie privée réservée à l'administration du site. Seuls
les utilisateurs enregistrés peuvent l'atteindre.
Pour y accéder : www.votre-nom-de-domaine.com/wp-admin/.
Une foi s la page atteinte, un formulaire de login/ mot de passe est à
remplir (figu re 2 . 18).
2 .3 Prise en main de WordPress 35
Identifiant
Simon
Mot de passe
1·····1
D Se souvenir de moi
iiiH:i:ii,iii
Tableau de bord
(UifN$WrtMIIQ
• f(J"
+
•
'V,,'
1,/1,,:
.... ,.,...,_.lfklt
. - . . . . 1,ptCIOS•
..,..uir
l ....
-·~
•<i*ff-...-,w--.,,
. ,_,.,.l...~ I H ~
,.,u.____"°"' .......
.--
-"1 ___ ,_...,_
•• J
"'O
0
C
:i
n --·-----·-.
__............
. . . . . . . . (A(> . . . . . - , . , _ . _ ....
"""_.._
_ _ _.... . _ .. ~ i i , . - . .
0
<j"
r-l
0
N
©
.µ
..c
Ol Figure 2.19 - Tableau de bord de WordPress
ï::::
>-
a.
0
u
Une fois le processus d'identification terminé, le Dashboard (Tableau
de bord) de WordPress s'ouvre (figure 2 . 19). Il permet de visualiser d'un
simple coup d' œil le contenu de votre site (nombre de pages, d' articles,
de comm entaires .. . ) et de prendre conna issan ce d es « new s» relatives au
log iciel lui-mêm e (a lertes de sécurité, d ernière version disponibl e ... ).
36 Chapitre 2. Installer et apprivoiser WordPress
Mon Ti t re
@ Tableau de bord
Accueil
Art icles
Med1as
Pages
- Commentaires
Apparence
Extensions
Utilisateurs
Out ils
Réglages
©
.µ
..c Figure 2.21 - Les options d'écran permettent de personnaliser l'affichage
Ol
ï::::
>-
a.
0
u R emarque - Il existe 8 thèmes de couleurs pour l'interface d'administration.
Rendez~vous dans Utilisateurs> Votre profil (figure 2.22 ).
2.3 Prise en main de WordPress 37
Alde.
Profil
Options personnelles
Raccourcis clavier D Activer tes raccourcis clavfer pour la modération de commentaires. Plus d'informaboos <en>
"'O
0
C
:J
0
s:t
,-t
0
N
@
.µ
..c
CJl
·c
>
a.
0
u
Copyright© 2014 Dunod.
...
DEUXIEME PARTIE
WordPress
côté webmastering
"'O
0
C
:J
0
s:t
,-t
0
N
@
.µ
..c
CJl
·c
>
a.
0
u
Copyright© 2014 Dunod.
Gestion fondamentale
Tableau de bord
ti.,pa,UN".-nc:,n
~ fo wr.<• P,,9'111' «Wit
O\lnmupdd
r
'
''
''
'
"'O
0
0
C
:i
,M......,,,,.,,..Nl._...,... ____ I_
_.,_
Wfiil'FSIM ''
L--------------•••••••••••~
''
<j"
r-l
0
N
n . . , . , , ~ 1 9 " l o f l ~ . . . , .....-
--~~-~.....,...,~'C1·
(l!'t.~,,..,,-,.ei:.,lf,
....
©
.µ
..c
Ol
ï::::
>-
a.
0
u Tableau de bord de WordPress
Les articles
Un article (dit « bill et » ou « post ») est la partie vivante de votre site. Sans
article, un blog est vide. On considère les articles comme la partie dyna-
mique, changeante, du site (comme une rubrique« actualités» par exemple).
42 Chapitre 3. Gestion fondamentale
Les catégories
Une catégorie regroupe un ou plusieurs articles (pas de page) . Elles
permettent de trier les articles suivant des thèmes spéciaux.
Les pages
Dans la forme, une page ressemble beaucoup à un article : titre, auteur,
commentaire ... Mais seulement dans la forme ! WordPress considère en
effet les pages comme un contenu à part, hors du flux des articles, et qui
n'évoluera pas énormément dans le temps : c'est un contenu permanent (il
peut s'agir par exemple d'une page de contact ou de présentation d'une
entreprise).
Pour y accéder, il suffit d'un simple clic sur le bouton« Pages» de la barre
latérale. Les mêmes filtres apparaissent pour trier toutes vos pages.
Les options d'écran sont pratiquement les mêmes que celle des articles,
avec toutefois moins de choix. On peut donc choisir l'auteur, le nombre de
commentaires et la date. Le nombre d'éléments affichés dans la liste est
également modifiable.
Pour créer une page, il suffit de cliquer sur le bouton «Ajouter».
0
C
:i Page statique vs page dynamique
<j"
r-l Comme vous le savez peut-être, WordPress est composé d'articles et de
0
N pages dites statiques. Or dans un environnement technique, «statique»
© signifie que le code HTML est en «dur» : il n'y a pas de gestion dynamique
.µ
..c
Ol du contenu (comme avec PHP et une base de données par exemple).
ï::::
>-
a.
0 Une page WordPress est bien entendu dynamique puisqu'on peut changer
u
son contenu. Alors pourquoi désigne-t-on ces pages comme «statiques» ? Il
faut chercher dans le passé. En effet, à l'origine, WordPress était uniquement
destiné à la création d'un blog ; et afficher des articles était donc son
principal usage. Les pages statiques étaient donc destinées à l'affichage
d'informations durables dans le temps, comme par exemple la présentation
de l'auteur.
44 Chapitre 3. Gestion fondamentale
Ill Pages
'9 Diapositives
r Services
~. Témoignages
SI Portfolio
• Commentaires
"'O
0
0
C
:J 3.2 PUBLICATION D'UN ARTICLE OU D'UNE PAGE
s:t
,-t
0
N
Présentation de l'interface
@
.µ
..c Pour publier un article ou une page, l'interface de publication est sensi-
CJl
·c blement la même. L'article ayant des caractéristiques que la page n'a pas,
>
a.
0
l'inverse étant également vrai.
u
Commençons donc par les éléments communs : le champ titre, le contenu
principal, les champs personnalisés (nous en parlons dans la partie Template
avancé) et le panneau de publication.
Voici la marche à suivre :
1. Donn er un titre,
3.2 Publication d'un anicle ou d'une page 45
Publier
OK Annuler
"'O
0
C
:i Déplacer dans la Corbeille
0
<j"
r-l
Mettre à jour
0
N
©
.µ
..c
Ol
ï:::: Figure 3.2 - Modification de la visibilité et de la date de publication
>-
a.
0
u
L'imag e à la une
Il est possible d'ajouter une « Image à la une» (figure 3.3) pour associer une
miniature (ou plutôt une image dédiée) à un article . Cette fonction peut être
disponible pour les articles et les pages, mais égalem ent pour les Custom
Post Type (articles personnalisés).
46 Chapitre 3. Gestion fondamentale
Image à la Une
Identifiant
Par défaut, c'est le titre qui est sous forme normalisée (sans espace, sans
caractères spéciaux... ). C'est lui qui sera utilisé lorsque vous aurez activé les
permaliens. Ainsi vous aurez une URL propre.
Identifiant
1 bonjour-tout-le-m, 1
Figure 3.4 - L'identifiant est présent dans l'URL si les permaliens sont activés
Commentaires et Auteur
Comme leurs noms l'indiquent, il est possible de gérer les commentaires et
de modifier l'auteur d'une page ou d'un article.
0
:i Les champs personnalisés peuvent être utilisés afin d'ajouter des données
<j"
r-l
supplémentaires à vos articles et à vos pages (figure 3.5). Attention, ils ont
0
N un lien direct avec le template. On en parle au chapitre 7.
©
.µ
..c
Ol
ï::::
>-
La partie propre aux articles
a.
0
u Les catégories
On peut directement choisir à quelle(s) catégorie(s) l'article va appartenir
(figure 3.6) . On peut ajouter des tags (mots-clés) à nos articles. Il ne faut
pas les négliger car ils peuvent être très utiles pour le moteur de recherche
ou votre thème (pour afficher des articles similaires par exemple).
3.2 Publication d'un anicle ou d'une page 47
Champs p er sonnalisés
Nom Valeur
Les champs personnalisés peuvent être utilisés afin d'ajouter des données supplémentaires à vos articles. Vous
pouvez les utiliser dans votre thème {enl.
Catégories
~ Non classé
©
.µ
..c
R emarque - S uivant le template activé, il est possible que les formats
Ol
ï:::: d 'articles n e so ient pas pris en compte.
>-
a.
0
u
L'extrait
Les « extraits » sont des résumés facultatifs de vos articles, écrits à la main
(figure 3.8) . Il se peut que votre thème activé s'en serve (à affich er grâce aux
o ptions d'écran) .
48 Chapitre 3 . Gestion fondamentale
Format
@ ; Par défaut
0 En passant
0 Image
0 Vidéo
0 Son
0 Citation
0 Lien
0 Galerie
Extrait
Les extraits sont des résumés facultatifs de vos articles, écrits à la main. li se peut que votre thème s'en serve. En
savoir plus (enJ.
0
:i Les mots clés ou « Tag » {figure 3. 9) sont des étiquettes permettant de retrou-
<j"
r-l
ver facilement un article notamment en utilisant le moteur de recherche .
0
N
© Les révisions
.µ
..c
Ol
ï:::: WordPress garde une version de chaque sauvegarde de votre article
>-
a. {figure 3.10). Il est ainsi possible de revenir aisément à une version anté-
0
u rieure.
Mots-clés
Ajouter
Révisions
On peut par exemple créer une page d'accueil qui a un modèle de page
(nous en parlons dans la troisième partie de cet ouvrage) spécifique par
rapport aux autres pages du site.
C'est à cet endroit que l'on peut gérer l'ordre des pages (par défaut,
l'ordre est alphabétique).
"'O
0
C
0
:i
Mise en forme du contenu
<j"
r-l
0
N Une barre d'outils ressemblant à celle des logiciels de traitement de texte
© est présente pour nous aider à embellir nos articles ou nos pages. Mais
.µ
..c attention, cette ressemblance n'est qu' esthétique (pour ne pas déstabiliser
Ol
ï:::: les standards) ...
>-
a.
0
u Un CMS permet de mettre du contenu en ligne. Tout le côté esthétique
est géré par les feuilles de style CSS. Rappelez-vous : séparation de la forme
et du contenu !
Exemple : Si vous choisissez le format « Titre 1 » dans la barre d'outils,
votre texte va bien entendu voir sa taill e augm enter, ce qui prouve unique -
ment que le formatage a bien été pris en compte (fig ure 3 .12). En revan che,
50 Chapitre 3 . Gestion fondamentale
Attributs de la page
Modèle
dans la partie publique, le résultat est totalement différent, car les feuilles de
style font leur travail (figure 3.13).
En choisissant le format « Titre 1 », WordPress a généré le code HTML
adéquat (< hl > ). Ainsi, cette balise va être stylée comme les CSS l'indiquent
et non comme l'éditeur l'indique. Cette notion fondamentale bien comprise,
nous pouvons passer à la suite.
Cliquer sur le signet« Texte» vous permettra de comprendre et de voir le
code HTML généré par WordPress. Si vous avez des aptitudes à comprendre
ce langage, un petit coup d' œil s'impose : la confiance n'exclut pas le
contrôle.
Dans la barre d'outils, tous les standards de mise en forme sont présents :
"'O
alignement, tabulation, couleur, listes, citations, correcteur d'orthographe,
0
C historique des actions, soulignement ...
:i
0
<j" Pour notre part, nous allons nous intéresser plus particulièrement aux
r-l
0 outils propres au Web : créer un lien hypertexte, insérer un lien « Lire la suite »
N
BI - E l= "§:~:§ -x ~
ntre1 l.!§A • ftkVJ()Q ~~ G
Titre 1
Chemin · h1
"'O
0
C
:i
0
Accur1l À prOJ>OS M,, f>!\J~
<j"
r-l
0 Ma page
N
©
.µ
..c
Ol
ï::::
Titre 1
>-
a.
0
u
Figure 3.1 3 - Résultat dans la partie front office : présence de soulignement, police
différente et taille différente
52 Chapitre 3 . Gestion fondamentale
B I ME == i= '' = -
Paragraphe • ~ 1. • ÊI kîj () Insérer/ modifier un lien (Alt+ Shift + A)
MN@
Titre
Ajouter un lien
"'O
0 • Pour créer un lien « Lire la suite», placez le curseur à l'endroit où vous
C
0
:i souhaitez insérer ce lien (figure 3 .16) . WordPress insérera alors une
<j"
r-l
balise« More». Cette option peut s'avérer très utile : si l'un de vos
0
N articles est très long et qu'il est affiché sur la page d'accueil, il est alors
© possible de le segmenter pour que seule l'une de ses parties s'affiche.
.µ
..c • Pour gérer un copier/ coller depuis Word, rien de plus simple : un
Ol
ï::::
>- bouton spécial vous permet de contourner l'aventure périlleuse du
a.
0
u copier/ coller depuis des logiciels de traitement de texte (les styles pré
formatés qui leur sont propres risquent en effet de créer de nombreux
problèmes d'affichage) . Dans la fenêtre modale qui apparaît, il suffit
simplement de copier votre texte Word puis de cliquer sur Coller du
texte Word (figure 3 .17). Votre texte est désormais nettoyé de ses styl es
et exploitable.
3.2 Publication d'un anicle ou d'une page 53
q, Ajouter un média
B I ME: ·-
·-•-
...
,_
·- .a-. . 6- -
2-
'' - >~ E3
§ .
Paragraphe !J - ri () n ~~ ~
1 Coll er du t exte Word 1
- A
-
T
6
- -
œ () n
-- X
~J
EEl
§ .
•
Voici un exemple de page. Elle est différente d'un article de blog, en
la taille est limitée : il faudra passer par le FTP pour des fichiers plus
lourds.
• Bibliothèque de médias : permet de récupérer un média déjà
présent dans la bibliothèque des médias.
)(
Insérer un média Insérer un média
Créer une galerie Envoyer des fichiers Bibliothèque de médias
Mettre une image à la
Une
"'O
0
0
C
:i
<j"
r-l
Figure 3. 19 - Fenêtre modale des médias
-
0
N
©
.µ
..c
Ol
ï::::
>-
a. Remarque: le monde du Web a ses propres règles, notamment concernant
0
u la gestion des accents et des caractères spéciaux. Les fichiers que vous allez
télécharger (uploader) dans WordPress doivent respecter cette règle. Dans le
cas contraire, il y a un risque de dysfon ctionnement (fichiers inaccessibles). Il
faut donc bien veiller à ce q ue les fichiers q ue vous allez télécharger soient
correctement nommés (pas d 'espace, pas de majuscule, pas de caractères
spéciaux ... ).
3 .2 Publication d'un anicle ou d'une page 55
Imoges
Si vous avez choisi de télécharger une image dans WordPress une dernière
étape est nécessaire avant de pouvoir l'insérer dans l'article.
Il s'agit de définir les paramètres de l'image : son titre, son texte alternatif,
sa description, son lien hypertexte, son alignement et sa taille (figure. 3 .20) .
Vous avez également la possibilité de l' éditer, de la retoucher, de la
recadrer ou de la redimensionner (figure 3.21 ). C'est tout de même bien
pratique, même si rien ne vaut la préparation (en local et avec les logiciels
appropriés) de vos images, avant la mise en ligne.
)(
Insérer un média
Envoyer des fichiers Bibliothèque de médias
1.jpg
28 ja nvier 2014
11QQX9Q1
Modifier rimage
Supprimer déflniavement
Titre 1
Légende
Texte altemaof
Descripoon
"'O
0 RÉGLAGES DE L'AFFICHAGE DU FICHIER
C ATIACHÉ
:i
0
<j"
AHgnement Aucun E]
r-l
li6 à ~IR-,ch-i
e-r
m-éd- ia - -~EJ=I
0
N
http://localhost/mon·site/
©
.µ
..c Taille Moye nn e - 300 x 245 EJ .,.
Ol
ï::::
>-
a.
1 sélection(s)
Insérer dans la page
0 Effacer
u
Une fois cette étape termin ée, vous po uvez cliquer sur le bouton Insérer
d a ns l'a rticle. L'im age est d ésormais visua lisabl e di rectement à l'intérieur.
56 Chapitre 3 . Gestion fondamentale
Redimensionnement de l'image
Proportion de taille :
Sélection:
Miniature actuelle
Bien entendu elle reste modifiable. Au survol de la souris sur l'image, deux
icônes apparaissent : une permettant de supprimer l'image de l'article
(et non de la bibliothèque) et une autre renvoyant à la fenêtre modale
précédente (figure 3.22).
"'O
0
C
:i
0
<j"
r-l
0
N
©
.µ
..c , /SIMON
Ol
ï:::: KERN
>-
a.
0
u
I
Figure 3.22 - Les accès rapides Suppression ou M odification de l'image
3.3 Gestion des médias 57
Vidéos
Pour l'insertion de vidéos, vous pouvez très bien passer par la solution
précédente. Mais dans ce cas, un simple lien sera inséré vers cette vidéo
(comme si l'on uploadait un document PDF). Par ailleurs, sachez qu'un
hébergement standard n'est pas du tout adapté aux vidéos, contrairement
à un serveur streaming comme Youtube, Dailymotion ou encore vimeo ... :
le visiteur devra attendre le téléchargement complet de la vidéo avant de
pouvoir la regarder et votre bande passante en prendra un sacré coup.
Il est plus intéressant d'insérer une vidéo de Youtube, Dailymotion ou
Vimeo directement sur votre site. Il vous faudra pour cela mettre les mains
dans le code HTML (rien de compliqué, rassurez-vous) .
Mais dans un premier temps, rendez-vous sur le site où se trouve la
vidéo convoitée (par exemple vimeo.com). Il y a généralement un bouton
« Embed » ou « Partager» près de la vidéo . Il suffit de cliquer dessus pour
pouvoir accéder au code HTML et le copier (figure 3.23).
Vous pourrez ensuite le coller dans l'article grâce à l'éditeur HTML de
WordPress (figure 3 .24) .
Un simple clic sur le bouton « Publier l'article (ou la page)» et la vidéo se
trouve maintenant sur votre site !
..
3.3 GESTION DES MEDIAS
"'O
0
C
Remarque importan te - Durant la rédaction d'un article, ch aque élément
:i
0 up loadé est d irectement intégré d ans la b ibliothèque des médias.
<j"
r-l
0
N
Pour y accéder, il suffit de cliquer sur l'onglet « Médias» qui se trouve
©
.µ dans la barre latérale. Une liste recensant tous nos médias apparaît alors .
..c
Ol
ï:::: Fort heureusement des filtres sont là pour vous aider. Vous pouvez trier les
>-
a. médias par date ou par type. Un moteur de recherche interne est même
0
u présent.
Tous ces médias sont stockés dans le répertoire « wp-content/uploads »
de WordPress. Il est possible de changer ce ch emin dans les réglag es.
58 Chapitre 3 . Gestion fondamentale
Link Social
Add E-mail
~ Enter e-moîl
"'O
0 Aiouter/Supprimer des médias
C
:i
0
<j" Il est possible d'ajouter un fichier directement dans la bibliothèque, sans
r-l
0 passer par la rédaction d'un articl e ou d'une page.
N
b i link b-quote Gel ins img ul ol li code more fenner les balises plein écran
Voici un exemple de page . Elle est différente d'un article de blog, en cela qu ' elle
restera à la même place, et s'affichera dans le menu de navigation de vot r e site (en
fonction de votre thème ) . La plupart des gen s cor1111encent par écrir e une page « À Propos
» qui les présente aux visiteurs potentiels du site. Vous pourriez y écr i r e quelque
chose de ce tenant :
Figure 3.24 - Code HTML de la vidéo collé dans l'éditeur HTML de WordPress
Le compte Administrateur
Le compte Administrateur, c'est le compte qui a tous les droits. Une
expression simple à retenir: si vous êtes administrateur vous êtes Dieu . Il peut
donc tout faire ! Faites donc bien attention lorsque vous donnez ce statut à
une tierce personne.
Rappelez-vous : dès l'installation, WordPress crée automatiquement un
compte. C'est celui de l'administrateur (sûrement vous-même).
"'O
0
C
0
:J Les différents niveaux d'utilisateurs
s:t
,-t
0 Fort heureusement, WordPress possède une gestion des droits avec plusieurs
N
@ niveaux pour chaque utilisateur. On y trouve ainsi plusieurs rôles :
.µ
..c
CJl • Administrateur
·c
>
a. • Éditeur
0
u • Auteur
• Contributeur
• Abonné
Chaqu e rô le possèd e ses propres droits (tabl eau 3.1 ). C elui ayant le
moins d e droit est l' abonné : il ne peut guère laisser autre chose que des
60 Chapitre 3 . Gestion fondamentale
commentaires (si toutefois vous avez activé cette option dans les réglages de
WordPress).
"'O
0
C
Créer un nouveau compte
:i
0
<j" Dans le sous-menu de la partie Utilisateurs, cliquez sur Ajouter. Il ne vous
r-l
0
N
reste plus alors qu'à remplir les champs et surtout à indiquer le rôle de ce
© nouvel utilisateur.
.µ
..c
Ol
ï::::
>-
a. Conseil : ne créez pas un compte ayant comme identifiant « admin ».
0
u Dans les versions antérieures de WordPress, « admin » était l'identifiant
généré par défaut. Cela posait des soucis de sécurité ...
3 .5 Gestion des menus personnalisés 61
"'
3.5 GESTION DES MENUS PERSONNALISES
Présentation de l'interface
Pour accéder à la gestion des menus il suffit de cliquer sur la sous-partie
«Menus» du signet« Apparence» (figure 3.25).
Liens
Catégories
Créer le menu
"'O
0
C
:i
Pages Nom du menu Mon Menu
Fi:ié·h'iii::é:i11
0 Liens
Structure du menu
<j"
r-l Ajouter des éléments de menu depuis la colonne de gauche.
0
N Adresse web http: f /
Supprimer le menu
Fiiih·H@ii:é,ill
Figure 3.27 - Le menu a été assigné dans l'emplacement « Haut Principal» de ce thème
3 .5 Gestion des menus personnalisés 63
Vue d'ensemble
Une fois le menu créé et placé, nous allons pouvoir le remplir! À gauche
de l'écran se trouvent 3 rubriques: « Pages», «Liens» et «Catégories»
(figure 3 .28).
Pages •
D Ma page d'accueil
D Ma Page d'exemple
Liens
Catégories
Figure 3.28 - Le menu a été assigné dans l'emplacement « Haut Principal » de ce thème
Liens
Ajouter au menu
Supprimer le menu
1··1/éh@ii,:H,111
Pages
Catégories
Catégories
D Ma catégorie
D Ma seconde catégorie
"'O
0
C
:i
0 Modifier les menus Gérer les emplacements
<j"
r-l Votre thème peut utiliser 2 menus. Sélectionnez le menu que vous voudriez utiliser pour chaque emplacement
0
N
Emplacement du thème Menu assigné
©
.µ
Menu haut principal
..c ._[M
_o_
n_M_e_nu_ _ _ -=EJ=[ Utiliser le nouveau menu
Ol
ï:::: Menu secondaire dans la barre EJ
>-
a. latérale de gauche
- Ch oisir un menu - Utiliser le nouveau menu
0
u
Enregistrer les modifications
Figure 3.33 - Le menu a été assigné dans l'emplacement« Haut Principal» de ce thème
66 Chapitre 3 . Gestion fondamentale
Structure du menu
Glissez chaque élément pour les placer dans l'ordre que vous préférez.
Supprimer I Annuler
Adresse web
http ://simon-k.com
Supprimer I Annuler
Ma catégorie Catégorie
©
.µ
..c
Ol
ï::::
>-
a. Figure 3.34 - Édition des élém ents (page, catégorie, lien)
0
u
Structure du menu
Glissez chaque élément pour les placer dans l'ordre que vous préférez. Cliquez sur la flèche à droite de l'élém
Ma catégorie Catégorie •
Structure du menu
Glissez chaque élément pour les placer dans l'ordre que vous préférez. Cliquez sur la flèche à d roite de
l'élément pour afficher d'autres options de configuration.
"'O
Figure 3.36 - Élaboration de l'arborescence du menu personnalisé
0
C
:i
0
<j"
r-l
Un webmaster est responsable du contenu d'un site Internet. Il est
0
N donc primordial de pouvoir gérer les commentaires que peuvent laisser
© les internautes. Si les commentaires sont ouverts, c'est à cet endroit qu'il est
.µ
..c
Ol
possible de les modérer.
ï::::
>-
a. Dans les filtres vous remarquerez l'existence d'un type de commentaire
0
u particulier : les « pings ». Les pings sont des rétroliens .
Selon Wikipédia, « Un rétrolien (en anglais trackback) est un système
de liens inter-blogs semi-automatisé. Il permet aux auteurs de relier des
billets de blogs différents et parlant du même sujet, ou se faisant référence.
Concrètement, l'auteur d'un blog A peut établir un rétrolien vers un billet
d'un blog B en faisant, dans un de ses propres billets sur son blog A, un
3.6 Gestion des commentaires 69
Comn1entai res 1
lien vers l'URL du billet du blog B. Si le blog B gère les rétroliens, il est
automatiquement indiqué dans le billet sur le blog B que le blog A y fait
référence ».
Discussion
Options de discussion
Réglages par défaut ~ Tenter de notifier les sites liés depuis le contenu des articles
des articles
~ Autoriser les liens de notifications depuis les autres sites (notifications par pings et rétroliens)
~ Autoriser les visiteurs à publier des commentaires sur les derniers articles
© D Fermer automatiquement les commentaires pour les articles vieux de plus de 14 jours
.µ
..c
Ol
0 Activer les commentaires imbriqués jusqu'à 5 EJ niveaux
ï::::
>-
a.
D DMser les commentaires en pages. avec 50 commentaires de premier niveau par page et la
0
u dernière EJ page affichée par défaut
Les commentaires doivent être affichés avec le plus ancien EJ en premier
Modération de Garder un commentaire dans la file d'attente s'il contient plus de 2 lien(s) (une des caractéristiques
commentaires
typiques d'un commentaire indésirable (spam) est son nombre important de liens)
Lorsqu'un commentaire contient run de ces mots dans son contenu. son nom. son adresse web, son adresse
"'O de messagerie, ou son IP. celui-ci est retenu dans la file de modération. Un seul mot ou une seule IP par ligne.
0 Cette fonction reconnait 11ntérieur des mots, donc « press• suffira pour reconnaitre« WordPress •.
C
:i
0
<j"
r-l
0
N
©
.µ
..c
Ol
ï::::
>-
a.
0
u
Liste noire pou r les Lorsqu'un commentaire contient t un de ces mots dans son contenu, nom, adresse web, adresse de
commentaires messagerie, ou IP. le marquer comme indésirable. Un seul mot ou IP par ligne. Il reconnait l'intérieur des mots,
donc « press • suffira pour reconnaître « WordPress •.
(figure 3.45). Comme précédemment, une liste noire est à remplir avec
des URL, des noms, des adresses e-mails . ..
• Les avatars. Un «avatar», (mais vous le savez sans doute déjà},
c'est une petite image (vignette) qui s'affiche lorsque vous postez un
commentaire. Un avatar permet de vous faire une identité propre sur le
net. Pour les heureux possesseurs d'un compte Gravatar (www. gravatar.
corn), la fonctionnalité est directement intégrée dans les options de
discussion (figure 3.46). Cela peut sembler évident, car Automattic, la
société propriétaire de WordPress, a racheté Gravatar . ..
Avatar par défaut Les utilisateurs n'ayant pas d'avatar peuvent se voir attribuer un logo générique. ou un avatar généré à partir
de leur adresse de messagerie.
"'O
0 ® Homme mystère
C
:i
0 0 Vide
<j"
r-l
0 0 ~ Logo Gravatar
N
© 0 ldenticon (généré)
.µ
..c
Ol 0 •.;! Wavatar (généré)
ï::::
>-
a. 0 • MonsterlD (généré)
0
u
0 t3 Rétro (généré)
11 Simon says:
.4pnl 27 2010 at 10 45 pm (Edit)
Bidule says:
April 27 201 o at 10·45 pm (Edit)
"'O
0
C
:i
0
<j"
r-l
0
N
©
.µ
..c
Ol
ï::::
>-
a.
0
u
Copyright© 2014 Dunod.
Gestion
des fonctionnalités
•
- - -
Act,vê : T \e'ît 1 TNe -1e Personnahser Twenty Fourteen
Changer l'arrière-plan
Si le thème activé le permet, vous pouvez aisément changer l'arrière-plan:
rendez-vous dans son interface de gestion dans la sous rubrique « Arrière
Plan » (figure 4.3) . Il est alors possible de changer la couleur ou d'ajouter
une image d'arrière-plan au site.
Une fenêtre d'aperçu permet de visualiser l'arrière-plan actuel (vide ou
"'O
0 non). Pour ajouter une couleur de fond, cliquez sur le bouton « Couleur
C
0
:i d'arrière-plan ». Une palette des couleurs fait alors son apparition et il ne
<j"
r-l
vous reste plus qu'à choisir parmi celles proposées. Cliquez ensuite sur
0 « Enregistrer les modifications ».
N
Arrière-plan personnalisé -·
1
;
'•
"' ..-il,
-- '"" ~ ~ "'
•. '~ •. -:.
--: " . ~
-
1
lktwerrtrnap- ~""'-'~tl~tttllrt
ctd~t,,~.,.,.,,.,,J:i.1• ;1~..oJSwr•H1J)Oi<JtlltOf1ff..t'•vos
~.,-..i'),IOOJ$
·~ O••
De quoi s'agit-il ?
Les extensions, que nous appellerons « plugins », permettent de modifier ou
d'a jo uter des fonctionnalités à W o rdPress.
4.2 Gestion des extensions (p/ugins) 79
Alde "'
Personnalisation de l'en-tête
Image d'en-tête
Aperçu
Sélectionnez Vous polNeZ choisir une Image d'en-tête personnalisée en la mettant en ligne depuis votre ordinateur ou en la choisis
une Image vous pourrez la recadrer.
Les images devraient faire au moins 1260 pixels de large. La largeur suggérée est de 1260 pixels. La hauteur suggérée
ChCKS1s.se:: une image sur votre CM"d1nateur:
Images mises en ligne Vous powez choisir un en-tête parmi ceux que vous avez déjà mis en ligne. ou en afficher un
aléatoirement
®
Retirer l'image Ceci retirera nmage d'en-tête. Il ne vous sera pas possible de rétablir vos personnalisations.
Retirer nmage d'en-tite
©
.µ
..c
Ol
ï::::
>-
a. Installation/Suppression
0
u
Avant d ' installer un plugin, n'oubliez pas de vérifier qu'il est compatible avec
votre version de WordPress.
Pour installer et supprimer des plugins, deux méthodes sont possibles : la
m éthode automatiqu e et la m éthod e manuelle.
80 Chapitre 4. Gestion des fonctionnalités
La méthode manuelle
Comme pour l'installation d'un thème, il faut tout d'abord décompresser
l'archive. Le dossier (ou le fichier) résultant de la décompression doit être
placé (par FTP ou localement) à cet endroit : « wp-content/plugins ». Une
fois l'opération réalisée, il ne reste plus qu'à activer le plugin.
Vous l'aurez compris, pour supprimer un plugin, il faut le supprimer de
ce fichier. Une désactivation est conseillée au préalable.
La méthode automatique
Pour vous faciliter la tâche, WordPress pense à tout ! Rendez-vous dans la
rubrique« Extensions» puis cliquez sur« Ajouter» (figure 4.5).
Mots-clés populaires
Vous pouvez également naviguer en fonction des mots-clés les plus populo,
"'O
0 Figure 4 .5 - Ajouter un nouveau plugin
C
:i
0
<j" Un champ de recherche vous y attend . Tapez un ou plusieurs mots-clés
r-l
0 (de préférence en anglais) puis cliquez sur le bouton « Chercher parmi les
N
© extensions ».
.µ
..c Si des résultats sont disponibles, vous obtiendrez alors une liste de
Ol
ï:::: plusieurs plugins. Tous sont pourvus d'une note, d'une description et
>-
a.
0
u d'informations sur leur version (figure 4 .6) .
Pour installer celui qui vous intéresse, cliquez sur« Installer maintenant».
Une alerte vous demande alors de confirmer cette action.
Après confirmation, WordPress télécharge et place automatiquement le
plugin dans le fichier « wp -content/plugins ». Il ne reste plus qu'à l'activer et
le tour est joué !
4 .2 Gestion des extensions (p/ugins) 81
Gallery
Détails I Installer
4.1.3 ****tI This plugin ma
into your webs.
maintenant gallery, show tl
can upload HQ
efficient functic
appealing look
There is also...
Gallery Bank
Détails I Installer
2.0.25 ****~ Wishingyouall
Gallery Bank is
n-illnrinr 1•1ith -.
Adivation/Désadivation
Dans l'espace d'administration de WordPress, vous trouverez un signet
« Extensions» et sa sous-section « Extensions Installées». En cliquant sur
cel le-ci, vous pourrez voir tous les plugins installés et leur statut (activé ou
non) (figure 4.7).
Après avoir placé le plugin dans le fichier « wp-content/plugins », il
"'O
0 apparaîtra dans la liste avec sa description (souvent en anglais). Il suffit
C
:i alors de l'activer en cliquant sur le lien« Activer».
0
<j"
r-l Pour le désactiver : cliquez sur le bouton « Désactiver».
0
N
Lorsqu'une nouvelle version du plugin est disponible, vous en serez
©
.µ
..c directement informé par une info-bulle qui apparaîtra dans le signet
Ol
ï:::: « Extensions» (figure 4.8).
>-
a.
0
u
Extensions Ajouter
Tout es (2) 1 Oésaa lvées (21 Chercher parmi les extensions installées
D Extension Description
D Aklsmet Utllisé par des millions de sites, Aklsmet est très probablement la meilleure manière de protéger
Activer Modifier Su pprimer votre site des commentaires et trackbacks indésirables {spam). Il vous prot ège même pendant
votre sommeil. Pour mettre sa protection en place: 1) Cliquez sur le lien• Activer •. à gauche de la
description, 2) Abtenez une clé d'API Akismet. et 3) Allez sur votre page de configuration d'Akismet et
enregistrez-y votre clé d"API,
D Hello Dolly Ce n'est pas qu'une extenston. Elle symbolise l'espoir et l'enthousiasme de toute une génération.
Acttver Modifier supprimer résumé en deux mots, qu'a notamment chanté Louis Armstrong : Hello, Dolly. Une fols aa.lvé, elle
affichera une ligne aléatoirement des paroles de la chanson Hello, Do lty, en haut à droite de toutes
les pages de l'administration.
Version 1.6 1 Par Matt Mullenweg I Aller sur le site de rextenslon
0 Extension Description
Extensions 1
Les plugins les plus aboutis ajoutent même de nouveaux signets à la suite
de la barre latérale.
Quoi qu'il en soit, dans l'interface de gestion des plugins (signet« Exten-
sions») un lien « Réglages» apparaît au niveau du plugin concerné dans la
liste (figure 4. 9).
"O
0
C
:i
4.3 GESTION DES WIDGETS
0
<j"
r-l
0
N
De quoi s'agit-il ?
©
.µ Un widget est un plugin. Pour obtenir un nouveau widget, il faut donc installer
..c
Ol
ï:::: un plugin. Un widget peut être placé très facilement dans votre thème, s1 ce
>-
a. dernier dispose des emplacements nécessaires.
0
u
Par exemple, un widget permet d'insérer n'importe quel texte ou code
HTML à l'endroit où vous le placez.
R emarque - Un widget n'est utilisable que dans un thème qui accepte les
widgets. Pas d'inquiétude, la plupart des thèmse acceptent les widgets. Dans la
troisième partie, n ous apprendrons à rendre un thème « Widget~ready ».
4.3 Gestion des widgets 83
D Akismet
Désactiver Modifier Réglages
ou
Figure 4.9 - Le lien Réglages apparaît en fonction du plugin installé, soit directement dans
la liste des plugins, soit une rubrique s'est ajoutée dans la sidebar.
Installation/Suppression
Un widget étant un plugin, la manipulation est donc la même que pour
celui-ci : après décompression de l'archive, il suffit de la placer dans le
dossier « wp-content/plugins ». De même, un widget se supprime comme
un plugin.
-0
0
C:
:::J
Activation/Désadivation
0
s:t
,-i
0
Pour activer ou désactiver un widget, il suffit de se rendre dans l'interface de
N
gestion des Plugins en cliquant sur le signet « Extensions » puis d'activer le
@
...., plugin. Pour le désactiver, cliquez sur« Désactiver» .
.c
Ol
·;::
>-
c.
0
u Utilisation des widgets
L'utilisation des widgets est cette fois-ci différente de celle des plugins.
Rendez-vous dans la sous-rubrique « Widgets » du signet« Apparence».
Dans l'interface de gestion des widgets, vous pouvez repérer deux grandes
sections (figure 4.10) :
84 Chapitre 4. Gestion des fonctionnalités
Archives
Zone de widgets en pied de page
Une on:hive mcnsvcne des ortklcs de votre srtc.
Articles rêcents
Ca lend rier
Catégories
Pour faire apparaître un widget sur la partie publique, il suffit d'un simple
glisser/déposer. Choisissez votre widget dans la partie de gauche et déplacez-
le à l'endroit souhaité dans la partie de droite.
Lorsque le widget est placé dans la barre de droite, il est désormais
possible de l'utiliser et de le paramétrer.
Remarque - Un même widget peut être utilisé à plusieurs endroits dans le site
(si le thème le permet) avec des paramètres différents.
-a
0
C
Exemple : on peut placer le widget « texte >> dans la « sidebar » et dans le
:J
0 « footer » avec un texte différent pour chaque partie.
'tj"
,-i
0
N Pour faire disparaître un widget de la partie publique, deux possibilités
@ s'offrent à vous :
.....
.!:
Ol
·;:: • le supprimer définitivement en cliquant sur« Supprimer» dans la zone
>-
a. où il est actif ;
0
u • le rendre inactif tout en gardant ses paramètres. li suffit pour cela
de le glisser vers la partie inférieure appelée « Widgets désactivés»
(figure 4. 11 ). Vous pourrez le réactiver à tout moment en le faisant
glisser à nouveau dans la zone de votre choix.
4.3 Gestion des widgets 85
Widgets désactivés
Glissez ici les widgets que vous voulez retirer de la colonne latérale. tout en conservant
leurs réglages actuels.
Articles récents
-0
0
C:
:::J
0
s:t
,-i
0
N
@
....,
.c
Ol
·;::
>-
c.
0
u
Copyright© 2014 Dunod.
Paramétrage
de WordPress
-
5.1 LES REGLAGES
Réglages généraux
Vous pouvez paramétrer ici les options générales de votre site (figure 5.1) :
son titre, sa description, son adresse web, l'adresse e-mail du webmaster
(importante en cas de notification), le fuseau horaire, le format de la date et
-a de l'heure et définir à quel jour la semaine commence.
0
C
:J
0 Si votre site a pour vocation d'être un site communautaire, activez l'option
'tj"
,-i « Tout le monde peut s'enregistrer» puis définissez le statut de chaque nouvel
0
N utilisateur.
@
.....
.!:
Ol Attention - Modifier les lignes des adresses URL, tout en haut de l'interface
·;::
>-
a.
de gestion (figure 5.2) aurait pour conséquence de rendre votre site totalement
0
u inaccessible : la base de données ayant enregistré cette nouvelle URL, Ward,
Press a donc rebâti tous ses liens. Il est déconseillé de toucher à ces lignes.
88 Chapitre S. Paramétrag e de WordPress
Réglages générau~
- Un111,......_.«ordl'rr11
1no11"""'8....,*rrtK1ta,. -~•ut,Jlr
l'ltt•flhul"'O,tl!IIOO'l•Ut'f
S•'IOlllfOIIII tfadfr 1t,,.,#IX.t11t*a~11rw 1"ar,,;c•!tPr!ffllrt'1iJK'4Ml.....,*"dl'ft'1.set.1ffllltntut"1
t,~t<om
anr.._ ru, ,,,tt~,..~froflu11dlill* ,,.Uf"'VI,~ ,.,....*nnicr,pl1Cl'l,_-'"111™*"
® 29,-.2014
0 20'4111129
0 01/WJ0'4
0 .1'M11/JOl4
0 ~. jÇ'( ?t,-. . .,
o,u,
0 ~ ; G,111 16r.2S.-
Réglages généraux
Ti t re du site Mon
-0
0
C:
:::J Slogan lJn SS
0
s:t En quelques mots, décrivez fa raison d'être de ce site.
,-i
0
N
@
...., Adre sse web de WordPress
.c http://www.mon- site.com
Ol (URL)
·;::
>-
c.
0
u Adre sse web du site (URL) http://www.mon-site.com
~
-a
0
C
:J
Conseil : N'hésitez pas à créer un dossier « languages ».
0 '
J
-tj" ~~
,-i
0
N Si vous rencontrez des difficultés lors de l'installation de la langue, ouvrez
@ le fichier « wp-config.php » qui se trouve à la racine de votre site, puis
.....
.!:
Ol
remplacez ce code :
·;::
>-
a.
0 1 def in e (' WPLANG' , ") ;
u
par celui-ci :
Options d'écriture
Ces options concernent la mise en forme, le paramétrage et la publication
des articles à distance (figure 5.4). WordPress peut par exemple convertir
des caractères en émoticônes (il suffit pour cela de lui indiquer de le faire ...).
Options d'écriture
Utilisez-le pour récupérer du texte, des rmages et d.es vidéos depuis n'importe quelle page Web. P\Jls modifiez l'artide et ajOutez vos propres
textes d irectement dans le bookmark!et, avant d'enregistrer le tout ou de le publier dans un article sur votre srte.
Ghssez te hen suivant dans votre barre de favons. O\J faites un ct,c-drort et aJovtez·le avos favoris pour obtenir un raccoure1 de publication.
Identifiant login@example.com
Vous avez ici la possibilité de choisir la catégorie par défaut des articles
(cette catégorie choisie ne pourra pas être supprimée). Lors de la suppression
5. t l es réglages 91
Options de lecture
Ces options permettent de définir les réglages de la page d'accueil, de la
page qui affiche les articles, de la pagination (nombre d'articles à afficher
sur une page), de l'affichage (extrait ou texte complet) des articles et de leur
encodage, ainsi que du paramétrage des flux RSS (figure 5.5).
Options de lecture
Exemple : créer une page « Blog " qui va afficher tous les articles
WordPress permet de choisir dans quelle(s) page(s) les articles vont s'afficher.
Par défaut, c'est sur la homepage de votre site, mais vous pouvez également
créer une page« Blog» dans l'espace d'administration. Il suffit ensuite de
choisir cette page pour publier tous les articles de vot re site.
Options de discussion
Nous avons déjà détai llé ces réglages dans la section « Paramétrer les
commentaires» du chapitre 3. Pour mémoire, ils permettent de gérer« en
profondeur» les commentaires des internautes.
5. t l es réglages 93
Envoi de fichiers
-a Remarque - Ces réglages ne sont pas rétroactifs. Pensez à eux avant d'intégrer
0
C tout le contenu de votre site.
:J
0
'tj"
,-i
0 Ces paramètres prédéfinis seront automatiquement accessibles lors de
N
l' insertion d'une image dans un article ou une page.
@
.....
.!:
Ol
Vous pouvez également limiter la taille des affichages distants (vidéos de
·;::
>- Youtu be ou de Dailymotion, par exemple). Si la largeur est laissée vide, les
a.
0 affichages utiliseront par défaut la largeur maximale de votre thème.
u
Enfin, il est possible de définir l'emplacement où tous les médias
seront téléchargés (téléchargés). Par défaut, ils seront dans le fichier :
« wp -content/u p loa ds » et triés par année/ date.
94 Chapitre S. Paramétrage de WordPress
Moteur de recherche
En bas de l'écran des options de lecture, vous pouvez paramétrer ici la
visibilité de votre site dans les moteurs de recherche (figure 5.8). C'est la
première étape pour un bon référencement.
Visibilité pour les moteurs de D Demander aux moteurs de recherche de ne pas indexer ce site
recherche
Certains moteurs de recherche peuvent décider de /'indexer malgré tout
Fa.mita.tif
Leur fonction
Les outils sont une aide pour les webmasters d'un site WordPress
(figure 5.10). Attention, les outils ajoutent des fonctionnalités uniquement
sur votre ordinateur et non à votre site WordPress. Cela signifie que, si
vous installez un outil sur un ordinateur A, il ne sera pas installé sur un
ordinateur B. À ne surtout pas confondre avec les plugins ou les widgets.
-0
0
C:
:::J
0
s:t
,-i
0
N
@
...., Figure 5.10 - Le signet Outils
.c
Ol
·;::
>-
c.
0
u
Principaux usages
Exporter le contenu de votre site
En cliquant sur« Exporter», vous pouvez exporter uniquement vos articles,
pages, commentaires, champs personnalisés, catégories et mots-clés.
5.3 Préparer WordPress : quelques recommandations 91
Une fois que le fichier XML téléchargé a été enregistré, vous pouvez utiliser
la fonction« Importer» d'un autre blog WordPress pour pouvoir importer ce
fichier dans cet autre site.
-
C:
:::J
0
s:t
,-i
5.3 PREPARER WORDPRESS: QUELQUES
0
N RECOMMANDATIONS
@
....,
.c
Ol
·;::
Vous maîtrisez maintenant l'installation de WordPress ainsi que son adminis-
>-
c. tration. Mais avant de vous lancer à corps perdu dans le développement de
0
u votre site, quelques recommandations s'imposent :
• Activer le plugin Akismet
Akismet permet d'éviter le spam qui risque de contaminer très rapide-
ment vos commentaires. C'est un plugin déjà installé par défaut, et il ne
reste plus qu'à l'activer. Lors de l'activation, un message apparaît vous
demandant une clef API. Suivez alors le lien proposé pour l'obtenir. De
98 Chapitre S. Paramétrage de WordPress
WordPress
côté webdesign
-0
0
C:
:::J
0
s:t
,-i
0
N
@
....,
.c
Ol
·;::
>-
c.
0
u
Copyright© 2014 Dunod.
Comment fonctionne
un thème?
...
6.1 LES THEMES: LEUR ANATOMIE
PHPdebase
Contrairement aux langages HTML et CSS, une connaissance avancée
en PHP n'est pas demandée avec WordPress. En revanche, une base
d'algorithmique vous facilitera la chose.
6. t l es thèmes : leur anatomie 103
En résumé:
Ces fichiers PHP, qui peuvent s'imbriquer les uns dans les autres, sont
composés de langage HTML et de fonctions PHP. Le tout est mis en forme
-0
0 grâce à une (ou plusieurs) feuilles de style CSS pou r le côté graphique et
C:
:::J animé avec du JavaScript (voir du Flash).
0
s:t
,-i Il est alors possible de créer des sites très graphiques avec WordPress
0
N comme CMS ! Il nous laisse une liberté totale sur la façon de coder not re
@
...., site. Il nous suffira de mettre du code PHP WordPress au bon endroit pour
.c
Ol
·;::
rendre le contenu statique, vivant. On respecte intrinsèquement la loi de la
>-
c. séparation entre le contenu et la forme décrite plus haut.
0
u
Tous ces fichiers sont placés dans un même et unique répertoire
(figure 6.1 ).
104 Chapitre 6. Comment fonctionne un thème ?
js ~ page.php
languages
1 media.s
'fi s.creenshot.png
~ se.arch.php
style -:i1 searchform.php
~ 404.php ~ sidebar.php
Autres »
~ accueil.php ~singlt.php
Dossitrs " ~ archilft.php '1)styluss
• AlsaWP A ~ author.php
~ js ~cattgory.php
~ commtnts.php
languages
~ foottr.php
m edias
~ fu nctions.php
style ŒJ ] header.php
l.ll.:! index.php
LJ license.txt
-0
• Les indispensables : ce sont ceux qui font partie du noyau. Sans
0 eux, on ne peut pas créer de thèmes :
C:
:::J
0
s:t
index.php : C'est, par défaut, le fichier qui sera appelé en dernier
,-i
0 par WordPress (vous comprendrez avec la hiérarchie de fichier).
N
@ - style.css: C'est le fichier qui va contenir la description de votre
....,
.c thème. Même si vous ne l'utilisez pas pour votre code CSS (ce qui
Ol
·;:: est une bonne chose), il doit être présent.
>-
c.
0 - screenshot.png: C'est l'image d'aperçu de votre thème dans la
u
partie d'administration.
• Les standards: Ils ne sont pas obligatoires, mais on s'en passe
rarement:
single.php: Ce fichier est appelé par WordPress lorsque l'utilisa-
teur veut afficher un article.
6. t les thèmes : leur anatomie 105
foo~er ~hç l-ic h1~ 1 a indure .J la fin dt' ch aque hch1er ltern1t:"uro::'." du bodv e-tc )
lunctions.php Fichier qui permet d'ajooter des fonctionnalnés à un thème (menu, widget etc...)
header ptip l 1ch1e r .:i 1ncl,.1re d.Jns ch aque debut de fichie r 1coctype title l1enc:. css )
image.php Gabarit chargé lorsque l'on choisit «Page du fK:hier attaché-» poor agrandir une image
1rr1i )( rhr - f'"~t If' f1c:h1t•r '111 f'",f appf'lr t'n 11 rn1, r tri rt·gl, qt r1 ri I' ( f":.t ,l paqf' d lrfLJfil rlf' ,cnt thfrrH
screensho t pnq lmaqe 1IJs tr.1t1ve de .otre theme d ..1ns la zone d adm1r1str.1t1on
,1y lt:. cs Fu ll1t r nt (tss tirt' pour 1-1 d t ~c11p! 1on dt volr t:. tht.lllt' N1.I obliJ i '1c1 fl d y 1 1st 11 r .inlrt i odt:.> es~
Une fusion de plusieurs fichiers PHP permet le résultat d'un seul et même
fichier. Cette fusion est possible grâce à l'utilisation d'une fonction.
Prenons un exemple précis : celui d'un index.php
1~ Î
heoder.php looter.php
lndex.php
I
1 1
-0 sldebor.php
0
:t
C:
:::J
0
s:t
,-i
0
N
@
Î
....,
.c Page html
Ol
·;::
>-
c.
0
u Figure 6.3 - Inclusion de plusieurs fichiers
Ces appels sont possibles grâce à des fonctions WordPress qui sont
réservées à l'inclusion du contenu des différents fichiers :
<!DOCTYP E html>
<head> <tit l e>Titre</title> <meta http-equiv="Content-Type"
content="text/htm l ; charset=UTF -8" !>
<link rel="stylesheet" type="text/css" href="style.css" media="screen"
/)
<lhead><body>
,.,c,..
,..,..
-a
0 N•i;:~ i--llllllCl::m-Wi L i 155iiiM:M
C
:J
0
'tj"
,-i
..
$1~ 1, Pote
0
N ....
S-.,wl•
@
.....
.!:
Ol
·;::
>-
a.
0
u
Comment WordPress sait quel fich ier appeler? Il n'y a aucune magie, il
va simplement se baser sur l'URL :
• si l'URL est du type : www.exem p le.com/titre -article, WordPress va
chercher le fichier« single.php ». Si aucun fichier single.php se trouve
dans le thème, ce sera le fichier« index.php » ;
• si l'URL est du type : www.exem p le.com/titre-page, WordPress va
chercher le fichier page.php. Le cas échéant, ce sera toujours not re
« index.php » que WordPress affichera.
..
6.2 LES THEMES : BOUCLES ET FONCTIONS
COMMUNES
Les marqueurs de modèle (template tags)
Les marqueurs de modèle, que l'on va appeler template tags, sont des
fonctions PHP spéciales Wo rdPress. Ces fonctions adressent des résultats
lorsqu'elles sont exécutées par WordPress. Elles vont chercher le contenu
-0 dans la base de données du site.
0
C:
:::J Concrètement, elles permettent d'afficher du contenu ou de le choisir, de
0
s:t
créer des zones« widgetisables » ou encore d'afficher un menu.
,-i
0
N Exemple d'un template tag :
@
...., 1 <?ph p blogin fo ( l; ?>
.c
Ol
·;::
>-
c. Cette fonction WordPress va afficher par défaut le titre de votre site.
0
u Comme toutes fonctions PH P, un template tag peut prendre un ou
plusieurs paramètres. Ceux-ci permettent de choisir, de manière détaillée,
l'action d'une fonction.
Cette fonction WordPress va par exemple afficher l'URL de votre site Web :
PHP *
*• templat e tags -
Figure 6.5 - Template tags : fonctions PHP WordPress pour piocher des infos
dans la base de données
Explication : le code situé entre les accolades { .. } va être répété n fois (ici
cinq fois).
• Voici un autre type de boucle, la boucle « while » :
$compteur= l;
whi le ( $compteur<= 5 l {
$compteur+= l ;
1 }
Une bou cle WordPress pou rra it se résumer a insi : tant qu'il y a du contenu,
la boucle l'affiche suivant nos goûts. Une boucle, c'est un mix de code HTML
et de fonctions PHP WordPress.
Peu importe le thème et les nombreuses variantes d'une boucle. Une
boucle est un moyen d ' interroger la base de données de WordPress, puis
d'afficher le résultat de cette requête.
Pour comprendre la notion de boucle : si la boucle doit afficher trois
a rticles, le contenu de cette boucle sera affiché trois fois. La boucle n'affiche
donc que ce qu'elle t rouve dans la base de données.
Remarque - Il est possible d' insérer plusieurs boucles dans un même fichier.
Nous en parlons plus lo in.
-0
0
C
:J
Vous connaissez maintenant les principaux rouages de WordPress pour
0 afficher le contenu de votre site.
'tj"
,-i
0
N
@
..... Fonctions communes dans une boucle
.!:
Ol
·;::
>-
Certaines fonctions ne sont utilisables qu'à l'intérieur d'une boucle. Ces
a.
0 fonctions vont donc agir autant de fois que la boucle se répète.
u
Voici une sélection des fonctions les plus utilisées :
• the_t it l e () . Récupère et affiche le titre de chaque article (ou de la
page) courant.
• th e_co nt ent (). Récupère et affiche le contenu principal de chaque
article courant.
6.2 les thèmes : boucles et fonctions communes 113
'
wp_rese~ -c:iver~O
À savoir - Par défaut, une boucle standard affiche les articles dans un ordre
chronologiquement inverse (l'article le plus récent en premier).
Voici deux exemples :
-a
0
C
que ry_posts(array(
:J
0
' cat => 5,
'tj" 'posts_per_page'=> 4
,-i
0
));
N <!-- insé rez la boucle ici -->
@
.....
.!:
Ol Description : la boucle va afficher quatre articles de la catégorie ayant comme
·;::
>- identifiant 5.
a.
0
u que ry_posts(array(
1 cat 1 => 22 ,
1
mont hnum' => $c urrent_month ,
'order1 => 1ASC1 ,
));
<! -- ins érez la boucle ici -- >
6.2 l es thèmes : boucles et fonctions communes 115
Note - Les plus méticuleux d'entre vous peuven t utiliser plusieurs syntaxes
pour cumuler des arguments à une fonction. Voici deux syntaxes différen rtes
pour le même résultat :
Syntaxe 1 : tout dans une même ligne
$accroc he ->query( 1 posts_per_page=l&category_name=blog 1 ) ;
Syntaxe 2 : utilisation d'un tableau
$accroc he ->query(array(
1
posts_per_page 1 =>l, // nombre d articles
'category_name =>' blog'. //choix de la catégor ie
));
header.php
foo~er.php
Figure 6.7 - lndex.php faisant appel à trois autres fichiers PHP externes
0
:::J ,
s:t
,-i
6.3 WORDPRESS : FONCTIONNEMENT AVANCE
0
N
@
...., Obiets, méthodes et paramètres
.c
Ol
·;::
>- Avant d'aborder l'utilisation des objets PHP, voici un bref rappel de leur
c.
0 fonctionnement dans WordPress.
u
Pour créer un objet, nous avons besoin d'un constructeur. À cet objet, il
est possible d'attribuer une méthode. Cette méthode accepte des paramètres
(figure 6.8).
Lorsque nous sommes en possession d'un objet, il est possible de créer
une boucle à partir de cet objet. Concrètement, cela ressemble à ceci :
6 .3 Wordpress : fonctionnement avancé 117
boucle
<?php
$objet= new nom -fonction() ; // on construit l'ob jet
$objet->methode( 1parametre 1 ); / / on attribue une méthode à l 'objet
1~hile($objet->have_posts()) : $ objet ->the_post();
<! -- contenu de la bouc l e -- >
<?php endwhi l e ; ?>
?>
Nous allons examiner les objets à travers deux exemples: l'objet $post et
-a
0 l'objet de WP _Ouery() .
C
:J
0 Vous n'avez pas d'inquiétude à avoir si cela vous paraît flou ou compliqué.
'tj"
,-i
0
Rappelez-vous que tous les codes sources fonctionnent tels quels. Un simple
N
copier/coller permet de les faire fonctionner.
@
.....
.!:
Ol
·;::
>-
a.
0
La boucle et I'obiet $post
u
L'objet $post est disponible dès que la fonction the_post() est exécutée
(toujours au moment du lancement de la boucle). $post est donc uniquement
disponible à l'intérieur d'une boucle.
L'objet $post permet de récupérer des informations très utiles concernant
l'article courant. Voici quelques-uns de ses paramètres:
118 Chapitre 6. Comment fonctionne un thème ?
Attention, $pos t n'affiche rien. Si vous voulez afficher l'une de ses valeurs,
il vous faudra utiliser la fonction php éc ho () , comme dans l'exemple
suivant :
' WP _G.ver~O
contrôle
..
6.4 WORDPRESS : L'ENVERS DU DECOR
phpMyAdmln
~1ll-'{l (i°' 4t ~ Structure Q SQl "' Rechercher ] Requête g Exporter "' plus
L 0Toutc.ocher I Pourladlection : @1
e Version ,mpnmable A O,chonnaue de donnêes
( ' e. U U • ll 1
... ..
7 .1 BOITE A OUTILS
Pour créer un thème WordPress, vous aurez besoin des mêmes outils que
pour la création d'un site Internet. Le minimum requis se résumant à un
navigateur Internet et à un éditeur de texte.
Pour gagner en confort, en rapidité et en qualité, voici la boîte à outils
-a du « parfait petit webdesigner ».
0
C
:J
0
'tj" Remarque importante : tous les codes sont disponibles sur la page dédiée au
,-i
0 livre sur www.dunod.com pour faciliter le copier/ coller.
N
@
..... 1. Le navigateur Internet Firefox + d es modules
.!:
Ol
·;:: Mozilla Firefox possède de nombreux modules complémentaires,
>-
a.
0 comme« Firebug »et« Web Developer », qui permettent de simplifier
u
la vie des webdesigners.
• Firebug permet d'inspecter scrupuleusement le code source d'une
page HTML, directement dans le navigateur, en survolant les différents
éléments. Grâce à lui, les styles CSS qui sont associés à un élément
sont visibles du premier coup d'œil. Mais surtout, le code sou rce peut
être édité« en direct» ! Vous pourrez le télécharger en suivant ce lien :
124 Chapitre 7. Comment créer son propre thème ?
0
:::J
,,. ..
s:t
,-i 7.2 METHODE A SUIVRE
0
N
@
....,
.c
Précisions
Ol
·;::
>-
c. Cette rubrique propose une feuille de route pour mener à bien la création
0
u d'un site Internet sous WordPress, de A à Z. Même si vous n'allez vous
occuper que d'une partie précise, il est important d'avoir une vue d'ensemble
d'un projet: cela revient à savoir d'où l'on vient pour savoir où l'on va ...
Dans la section « Tutoriel : réaliser le Template AlsaWP », qui se situe à
la fin de cette troisième partie, au chapitre 8, vous trouverez une mise en
œuvre détaillée de cette méthode.
7.2 Méthode à suivre 125
Création du design
Nous pourrions écrire un livre entier dédié à ce thème aussi vaste que
passionnant. Nous n'en avons pas le temps, mais rien ne nous empêche,
pendant quelques instants, de nous mettre à la place d'un infographiste.
La charte graphique d'un site Internet doit répondre à un cahier des
charges spécifique. Celui-ci va bien entendu changer en fonction des
besoins du client : e-commerce, site institutionnel, site vitrine, magazine,
blog ... Néanmoins, ces sites ont ceci de commun qu'ils suivent quelques
«tendances» actuelles, que nous présentons ci-après.
-a
0
C
:J Le minimalisme
0
'tj"
,-i Une autre tendance est le recours au minimalisme, mais celui-ci devient
0
N désormais «chaud» et va contenir des couleurs fraîches et beaucoup
@ d'espace (figure 7.2). On l'appel plus communément le «fiat design» .
.....
.!:
Ol
·;::
>-
a.
0 Des headers qui en mettent plein la vue
u
Laisser vos en-têtes respirer, s'exprimer! N'hésitez pas pour cela à prendre
toute la largeur et la hauteur de la page.
La première impression étant la plus importante, optimisez vos en-têtes :
faites de la place pour au moins une illustration (photo, composition ou
dessin) digne de ce nom, un gros logo et le menu principal.
126 Chapitre 7. Comment créer son propre thème ?
___
We are Sofa
_.,..._._
.
N
@
.....
.!:
Ol
·;::
>-
a.
0
u
cafbon·offsets
La typographie
N'hésitez plus à utiliser la typographie comme élément principal du design
de votre site. Respectez l'alignement, testez de nouvelles polices, amusez-
vous avec : c'est le moment de les «tordre» dans tous les sens !
Grâce à la propriété CSS FontFace est un jeu d'enfant! (figure 7.6).
-a
0
C
:J
0
'tj"
,-i
0
N
@
.....
.!:
Ol Figure 7 .6 - Les choix typographiques
·;::
>-
a.
0
u
La disposition « magazine »
Les magazines sont de plus en plus présents sur le Web et les blogs ont
tendance à leur ressembler de plus en plus, s'affranchissant ainsi d'un
design et d'une disposition simplistes qui, fort heureusement, ont tendance
à disparaître (figure 7 .8).
r:r:1 CREATIVE
L.!lAJ REVIEW
,,._
,.......
-...,,,.._
i.. . . . . .
kout 3.0
· r 1v .d 1 ..."' cures. easv as e~
-0
0
C:
:::J
0
s:t accueil.html pa g e-i ntem e. htm 1 images style
,-i
0
N
@
....,
.c Figure 7.12 - Exemple final d'une intégration statique (style contenant une ou plusieurs CSS)
Ol
·;::
>-
c.
0
u
- ~
7.3 UN BON DEPART POUR UN BON THEME
Partir d'un thème existant?
-0
0
C:
N'imaginez pas faire votre thème sur mesure et créer votre propre thème de
0
:::J
A à Z. Pour gagner du temps, on peut copier/ coller certains bouts de code,
s:t
,-i
notamment pour le fichier functions.php et le fichier style.css.
0
N
@
...., Quatre fichiers de départ
.c
Ol
·;::
>-
c. Les thèmes se trouvent dans le dossier« wp-content/thèmes » de WordPress.
0
u
À l'intérieur de celui-ci, il faut au minimum créer ces fichie rs :
• index.php
• functions.php
• style.CSS
• screenshot.png
132 Chapitre 7. Comment créer son propre thème ?
/*
Theme Na me: Als aWP
Th eme URI : http://www .al sac re ati ons.com
Desc ri pt ion : Template crée pou r le l ivre "W
ordPress 3.0 : 100% prati que "
Aut ho r: Als ac réati ons - Si mon KERN
-a Version : 1
0
C */
:J
0
'tj"
,-i
Détails des différents champs :
0
N
• Theme Nome : nom de votre thème.
@
..... • Theme URI : lien vers l'auteur du thème .
.!:
Ol
·;:: • Description : description de votre template.
>-
a.
0 • Author : auteur du template.
u
• Version : version de votre Template.
J,
~ I Remarque - WordPress interdit la même description pour deux thèmes. Si le
cas se présentait, il y aurait des problèmes lors des choix du thème dans l'espace
7.3 Un bon départ pour un bon thème 133
d'admin istration. A ussi, si vous partez d'un thème existant (ce qui est le cas ici ),
n'oubliez pas de modifier cette partie.
- ...
Figure 7.13 - Exemple d'une vignette (screenshot.png) donnant un aperçu du template
AlsaWP dans le back office
-0
0
C:
:::J
Tester et activer notre ébauche de thème
0
s:t
,-i Il faut maintenant vérifier que le thème est correctement reconnu par Word-
0
N Press. Pour cela, rendez-vous tout d'abord dans la partie d'administration
@
...., de WordPress pour l'activer. Si votre vignette et la description du thème sont
.c
Ol visibles, tout est en ordre (figure 7.14). Activez alors le thème et un message
·;::
>-
c. de confirmation apparaîtra.
0
u La partie publique affiche simplement le contenu de notre fichier
« index.php », à savoir:« Mon thème fonctionne» (figure 7.15).
AlsaWP Ve,s,on . 1
• C ~ LJ http://www.mon-site.com/
15
C:
Figure 7 .1 5 - La partie publique affiche bien le fichier « index.php »
:::J
0
,;j"
,-i
<? ph p get_t emp l at e_pa r t (1 foote r1 ) ; ?> <!- - i nt èg re l e cont enu de foot er . php
-- >
<?p hp get_temp l ate_pa r t (1 header') ; ?> <! -- intèg re l e contenu de heade r . php
1 -->
header.php
1
-a
0
C
:J
0
'tj"
,-i
0
N
@
.....
.!:
Ol
foo~er.php
·;::
>-
a.
0
u
<?php get_hea der(); ?> <!-- intègre le contenu de header .php -->
<?php get_footer(); ?> <! -- intègre le contenu de foote r.php -- >
<?php get_sidebar(l; ?> <! -- i ntègre le contenu de sidebar . php -- >
1 <?ph p comments_template(); ?> <!-- intègr e le contenu de comments.php -->
<!DOCTYP E html>
<head> <title><?php wp_title(l; ?><ltitle> <meta
ht tp -equiv="Content -Type " cont en t="tex t/htm l ; charset=UTF-8" I>
-0 <link re l="shortcut icon" href= "<?php bl og info( temp l ate_directory' l ;
0
C:
:::J
?>/ fav icon . i co" I>
0 <l ink rel="s ty l esheet " type=" text/css " hre f="<?php
s:t
,-i
blog info( ' t emp late_url ' ) ; ?>/style .css" media="screen " I>
0
N
<l ink rel="pingback " href="<?ph p bloginfo(' pingback_ur l' l ; ?> " !>
@
<?php 1~p_head( ) ; ?>
...., <l head>
.c <body>
Ol
·;::
>-
c.
0
u
Il n'est donc pas très étonnant que certains thèmes contiennent un fichier
PHP appelé communément« loop.php » qui ne contient qu'une seule boucle.
Ce fichier est intégré dans les autres fichiers du thème.
1 ~dd_f i l te r( 1
the_content_more_ l i nk' . 1 remov e_more_ l i nk_s cro l l 1 ) ;
7.4 Template WordPress: les bases 139
1 the_excerpt(l ;
<?php wp_list_categories(array(
1
orderby1 => 1 name1 , Il Manière d'ordonner la l iste
1
order 1 => 1ASC1 • Il Ordre cro i ssant ou déc roissant ?
1show_count 1 => 0, Il Affiche ou non l e nombre d'a rtic le
contenus
1
tit le_li 1 =>_<'Catégories1 ) , Il Titre de l a l iste
1 1
exc lude => " 18 , 12 ". Il ID de l a ou des catégories à exclure
1 1
depth => O Il Niveau de pro f ondeur de l 'arborescence
) ) ; ?>
-a
0
C
:J
0
• Explications : affiche une liste des catégories de votre site.
'tj"
,-i
wp_ li st_ca tegor i es () accepte plusieurs paramètres qui permettent de
0
N
contrôler son affichage.
@ • Cette fonction se p lace à l'extérieur des boucles.
.....
.!:
Ol
·;::
>- ) Note - Si vous voulez connaître l'identifiant d'une catégorie (d'un article ou
a.
~
0
u d'une page), il faut appliquer la valeur par défaut des permaliens. Il suffît de
J, •
regarder l'URL lorsque vous visitez une catégorie ou un article : vous pourrez y
voir une variable du type « cat= 1 » ou « p= 2 >> .
• Explications: affiche une liste des pages de votre site. wp_l i st_pages ()
accepte plusieurs paramètres qui permettent de contrôler son affi-
chage.
• Cette fonction se place à l'extérieur des boucles.
• Une autre fonction, plus récente, permet de faire la même action :
wp_page_menu() .
-0
<?ph p
0
C:
Il Débu t de l a bo ucle
0
:::J wh i le ( have_posts( l ) : the_post ( ) ;
s:t
Il Si les comme nta i res sont auto ri sés
,-i
0
i f ( comment s_open( l 11 get_comment s_number () ) 1
N comme nt s_templa t e( l ;
@ }
....,
.c endwhile;
Ol
·;:: ?>
>-
c.
0
u
7.5 Template WordPress: des fonctionnalités utiles 141
<?php echo get_the_date(); ?> <! -- "fonct ion de référence " disponible
-0
0
1 depuis la Version 3 de WordPress -- >
C:
:::J
0
s:t
,-i
Afficher l'auteur d'un article
0
N
@ <p> Ecrit par <?php the_author_posts_link(l; ?> <lp> Il affiche le nom de
....,
.c l'auteur avec un 1i en
Ol
·;:: <p> Ecrit par <?php the_author(); ?> <lp> Il af fiche le nom de l' auteur
>-
c. sans 1ien
0
u 1
• Explications : récupère et affiche le nom de l'auteur d'un article.
Ce code est à insérer à l'intérieur d'une boucle. La fonction
t he_author _posts_l i nk() permet donc d'afficher le nom de l'auteur
pointant vers la page de description de cet auteur. Nous reviendrons
ultérieurement sur ce point.
142 Chapitre 7. Comment créer son propre thème ?
Documentation sur le format des dates (en anglais). Cliquez sur" Enregistrez les
modifications » pour mettre à jour l'exemple affiché.
<!·· Af f ich age de l ima ge a la une 1a mettre dans une boucle ) -- >
-a
0
C
1 <?php the_post_thumbnail('thumbnai l') ?>
:J
0 Pour plus d'informations sur les paramètres : http://codex.wordpress.org/
'tj-
,--1
0 Function_Reference/the_post_thumbnail
N
@
.....
-§i
ï:::
Afficher des news
>-
~ Pour afficher des news, voici les étapes à suivre :
u
• créer une catégorie « news» (avec des articles) dans le back-office ;
• créer une boucle personnalisée dans le fichier« sidebar.php » (ou dans
un autre fichier) avec query_posts() ou WP_q uery() ;
• paramétrer cette boucle de telle sorte qu'elle prenne en compte X
articles de la catégorie ayant comme nom « news».
7.5 Template WordPress : des fonctionnalités utiles 143
-a
0
C
:J
0
'tj"
Bovde ~
,-i
0
N
@
.....
.!:
Ol
·;::
>-
a.
0
u
<div id="content">
<div id="accroche ">
<!-- bouc le secondaire -->
<!div> <!-- accroche -- >
<div id="a rti cles">
<!-- bouc le principale -- >
<!div> <!--articles -->
<!div>
La boucle secondaire
Avant d'aller plus loin, commençons par schématiser la structure HTML de
notre accroche (figure 7.19).
La boucle principale
C'est une boucle standard qui affiche plusieurs articles. Il n'est donc
pas nécessaire d'utiliser query_posts ( ) ou WP _Query( ) . Un petit détail reste
néanmoins à régler: si la boucle de l'accroche et la boucle principale puisent
les articles dans la même catégorie, nous risquons de nous retrouver avec
un doublon.
-0
L'accroche affiche le premier article. La liste d'articles (générée par la
0
C: boucle principale) va commencer avec ce même premier article. Il faut donc
:::J
0 demander à la boucle principale de ne pas l'afficher.
s:t
,-i
0 Une simple condition i f et une variable $accroche_ID feront alors I' af-
N
@ faire:
....,
.c
Ol <div i d="a r tic l es ">
·;::
>-
c. <! -- bouc le princi pa le -- >
0
u <?php if ( have_posts() ) : ?>
<? php whi l e ( have_posts () ) : t he_po st() ; ?>
<?php i f ( $post-> ID != $accroche_lD ) { ?>
<! -- si les i dentif i ants sont di ffér ents . on
aff i che le code int ern e à l a boucle -- >
<?php 1 ?>
<? php endwhi l e; el se : ?>
<p>Aucun résulta t : (< lp>
146 Chapitre 7. Comment créer son propre thème ?
<?ph p en di f; ?>
<!-- Fin bouc l e artic le -- >
1 <!div > <!-- art icl es -- >
• Explications: si l'article courant ne possède pas le même identifiant
que l'article() de l'accroche, alors le code qui génère la liste est affiché.
• Cette condition se place donc à l'intérieur de la boucle principale.
<form class=" bidu l e" name=" search form" met hod="ge t " action="<? php echo
home_ur l ( ) ; ?> ">
<f ieldset>
<legend> Reche rche< /l egend>
<1 abel>
<in put type=" text " na me=" s" value=" #" id="r echerc he"
!>
</ 1abe l>
<input type=· submi t " id="vo t re -id " value="Che rcher · !>
<lf ie ld se t >
<lfo rm>
Rappel - Pour choisir le nombre d'articles qui s'affichen t sur une page, il faut
se rendre dans les options de lecture du back;office.
<div id="post -4564" class="post post -4564 category -48 category -dancing
1 logged -in ma-classe ">
Pour de plus amples informations, voir aussi la fonction :
https://codex.wordpress.org/Function_Reference/post_class
https://codex.wordpress.org/Function_ Reference/body_ class
-0
0
C:
0
:::J
Changer l'arrière-plan du site depuis le back office
s:t
,-i
0
N
Cette fonction s'insère dans le fichier functions.php de votre thème pour
@ activer cette fonctionnalité dans le backoffice. Il faut noter que l'image
....,
.c choisie dans le back office sera intégrée en CSS directement sur la balise
Ol
·;::
>-
HTML <body>. Pensez-y lors de votre intégration HTML/CSS !
c.
0
u 1 add_custom_bac kg round( ) ;
Pour que cela fonctionne dans notre thème, il faut ajouter la fonction
body_class() dans notre balise HTMI «body ».
Figure 7.20 - Résultat de la fonction : ajout d'une option dans le signet Apparence
Cette fonction body_ class() ajoute des classes CSS spécifiques à Word-
Press, ce qui permet de changer le fond de notre thème depuis l'espace
d'administration de WordPress.
Bien entendu, si vous ne voulez pas que le fond de votre thème soit
personnalisable, via l'espace d'administration, il suffit de supprimer cette
fonction du fichier« functions.php » .
..
7 .6 DES PLUGINS TRES PRATIQUES
L'effet lightbox
L'effet lightbox permet notamment d'agrandir une image à l'intérieur d'une
boîte modale en utilisant une transition esthétique (figure 7 .21 ). Le langage
utilisé est JavaScript.
-0
Pour réaliser cet effet, il suffit d'utiliser le p lugin « jQuery Colorbox ». Voici
0
C: la marche à suivre :
:::J
0
s:t 1. Téléchargez le plugin à cette adresse:
,-i
0 http://word press.erg/pl ugi ns/jq uery-colorbox/
N
@ 2. Installez le plugin et activez-le.
....,
.c
Ol
·;::
3. Insérez une image dans un article ou une page.
>-
c.
0 4. Vérifiez que le lien de l'image réduite pointe bien vers l'image elle-
u
même (figure 7.22).
5. C'est terminé. Votre Effet Lightbox est en place et désormais parfaite-
ment fonctionnel.
Ainsi, dès que vous cliquerez sur une image, un voile assombrira le site
et affichera le lien (une image plus grande) dans une fenêtre modale.
7.6 Des plugins très pratiques 151
-a Pagination numérotée
0
C
:J
0 Comme nous l'avons vu précédemment, WordPress propose des fonction-
'tj"
,-i nalités qui permettent de naviguer à l'intérieur des pages. Néanmoins, ces
0
N fonctionnalités se résument à de simples liens « Suivant» ou « Précédent »,
@
..... ce qui se révèle peu pratique lorsque l'on est amené à naviguer dans des
.!:
Ol dizaines de pages ...
·;::
>-
a.
0
Nous allons utiliser ici le plugin « WP-PageNavi » qui permettra d' optimi-
u ser cette navigation interne grâce à la pagination.
Voici comment procéder :
1. Télécha rgez le plugin à cette adresse :
http://wordpress.org/extend/plugins/wp-pagenavi/.
2. Installez le plugin et activez-le.
152 Chapitre 7. Comment créer son propre thème ?
<? ph p next_posts_li nk(l ?> <! -- affiche un l ien pour les articles
su i vants -->
<?php prev ious_posts_l ink(l ?> <! -- aff iche un lien pour l es
1 artic l es précédents -->
Rappel - Pour choisir le nombre d'articles qui s'affichent sur une page, il faut
se rendre dans les options de lecture du back~office.
?>
1 <!div>
Yoast Breadcrumbs
• Première étape, téléchargez Yoast Breadcrumbs à l'adresse suivante:
http://wordpress.org/extend/plugins/breadcrumbs/.
• Comme précédemment, après installation et activation, insérez le
morceau de code suivant dans le fichier« header.php » :
,,.
1.1 CREATION D'UNE OU DE PLUSIEURS ZONES DE
MENUS
Introduction
Il est possible d'afficher (et de gérer par l'intermédiaire du back-office)
plusieurs menus très facilement. Le nombre de menus disponibles dans un
thème est spécifié dans le fichier « functions.php ».
Il y a donc deux étapes :
• Création de la (ou des) zone dans le fichier functions.php;
• Mise en place de la zone à l'endroit souhaité dans notre th ème.
Le fichier functions.php
Nous allons créer une zone de menu que nous allons appelée « Zone
principale ».
Par défaut, cette fonction affiche une div qui contient une liste ul et li. Mais
il est tout à fait possible de formater la façon dont on veut que WordPress
7.8 Création d'une zone de Widget 1 SS
code notre menu. La liste des paramètres est disponible ici : http ://codex.
word p ress.org/Functio n _ Reference/wp _nov_ menu
-
7 .8 CREATION D'UNE ZONE DE WIDGET
Introduction
-0
0
C:
:::J Il est possible d'afficher (et de gérer par l'intermédiaire du back-office)
0
s:t
plusieurs zones de Widget. Voici comment en créer une:
,-i
0
N Il y a donc deux étapes :
@
...., • C réation de la (ou des) zone(s) dans le fichier functions.php
.c
Ol
·;:: • Mise en place de la zone à l'endroit souhaité dans notre thème.
>-
c.
0
u
Le fichier functions.php
Nous allons créer une zone de Widget que nous allons appeler « Zone
principale».
156 Chapitre 7. Comment créer son propre thème ?
register_sidebar( array(
'name' =>_( 'Zone Sidebar'l,
' i d' => ' zonel' ,
'description' => _ ('Zone de Widget dans si debar') ,
1 ) );
Par défaut, cette fonction affiche une div qui contient une liste ul et li. Mais
.i!_est tout à fait possible de formater la fa_çon dont on veut que WordPress
code notre menu. La liste des paramètres est disponible ici : http://codex.
wordpress.org/Fu nction _ Reference/wp_nov_ menu
Pour plus de détails sur les widgets, voir:
http://codex. word press.org/Widgetizi ng_Themes.
-
7.9 CREATION D'UN MODELE DE PAGE
~
-0
0
Introduction
C:
:::J
0 Un modèle de page permet de personnaliser l'affichage d'une (ou plusieurs)
s:t
,-i
0
page(s) précises. C'est un template spécifique qui va s'appliquer à cette ou
N
ces page(s).
@
....,
.c
Ol
·;::
>-
c.
Création du fichier php
0
u
Pour créer un modèle de page, c'est très simple: créez d'abord un nouveau
fichier PHP dans votre thème (sans prendre un nom réservé par WordPress)
puis, donnez-lui un nom. Enfin, insérez tout au début de ce fichier le code
suivant (sans espace libre) :
<?php
globa l $more;
$more= O;
?>
1 <?php the_content(' Lire la suite'); ?>
7 .10 -
CREATION D'ARTICLES PERSONNALISES -
<CUSTOM POST TYPE>
lntrodudion
-0
0
C:
:::J WordPress dispose par défaut d'un flux d'articles et d'un flux de page. Les
0
s:t articles personnalisés (custom post type) sont un flux supplémentai re et
,-i
0
N
totalement indépendant des autres flux.
@
...., Il y a donc deux étapes :
.c
Ol
·;:: • Création du flux dans functions.php,
>-
c.
0 • Affichage de ce flux dans notre thème .
u
Le fichier fundions.php
Nous allons créer un Flux « Livres » dans notre fichier functions.php :
7. t O Création d'articles personnalisés (Custom Post Type) 159
Flux Spécial
Custom Post type
Personnalise
reg i ster_taxonomy ( ' catego ri e_projet' , ' livres' , ar ray( ' hi erarch i cal ' =>
1 t rue. ' l abel ' => ' Ca t égori e' . ' query_var' => true. ' rewri t e => true l l;
'menu_i con' => ge t _bl ogin fo ( 1 templ ate_direc t ory1 l . 1 / i mage s/mo n- image.png 1 •
Catégorie
Identifiant
Actions groupées EJ Appliquer
-0
0
Des plugins
C:
:::J
0 Des plugins existent pour créer à la volée des custom post types, ce qui nous
s:t
,-i
0
évite de tout faire à la main. Voici les plus connus : Custom Post Type UI et
N
Types.
@
....,
.c
Ol
·;::
>-
,,.
0
c. 7.11 CHAMPS PERSONNALISES <CUSTOM FIELDS>
u
Présentation
Les champs personnalisés permettent d'ajouter, à travers l'interface d'admi-
nistration, une ou plusieurs données que vous allez pouvoir utiliser dans les
thèmes.
162 Chapitre 7. Comment créer son propre thème ?
Champs personnaUsM
Nom Valeur
Vlg(lelle http://www.mon.site.com/wp.contenVuploadsl\lignette.jpg.
a
Les champs personnahsês peovem etre ut1hsês ahn cra,outer des donnêes supplêmentaires vos articles. vous pouvez les utbser dans votre theme (enL
R emarque - Cette fonction est utilisée à l' intérieur d'une boucle. Libre à
1A
J, '
1 vous de créer une variable qui stockerait l'information pour l'afficher ailleurs.
Options de fê<ran •
Modifier le groupe de champs Ai••'"'
Document PDF Publier
Position du champ Titre du champ Nom du champ rype de champ T ltat: Publié Mod fier
Mettre a Jour
quellesp,ogC>$
d'klitiOl'I ce groupe do! ou
chomp"' ~,., ur,11~;.
Ajouter une règte
Options
Numêro d'ordre
1t"\.'"fntUW-\r1('
Document PDF
Document PDF
Téléchargez votre document
/*
Theme Name : Le t heme enfant
Theme UR I : htt p: //mon -s i te .com
Desc ri pt ion : Theme en fant dun autre t heme
Au t ho r: Brin de we b
Autho r UR I : htt p: //www .brindeweb .com
Templ ate : Nom-doss ier- du-t heme- parent
Vers ion : 1.0
*/
@import ur l ( " .. / Nom-doss ier-d u-t heme -parent/style .css "J;
-
8.3 INTEGRATION STATIQUE:« PSD TO HTML »
_Y!J
1 • .. .
Helloyou !
- . - ..
.;,
, . t
A la une
---...,___________
Titre de l"arocl~
____ ....
_____ .. _..._. .. ___ _
_,.. __ .. ,,,_,_ _ OMt_, .. _...,
-·---
··-·---- ---.--
....·-·-......·-·- ..-·
.. --.-- Module:\
T 1re de fartJcl~
.......,..,_..........,,.... -...-.
··-·----..·-·-·~---
1 1 -.... -
.........,..
~ - - ·- ~ · -. . ---
.. - - . .... - - · · · - - · - - ... Module7
___ ____.....,._
T, ,tre de I',_ ...
il•\Jcle .....
-... ...................
·--·-·"·--·-·--
··-·- ~
----··-··-·-
-·-..----·-·-""... ._..,_.,... ...."""""·
_
------ .... _-
_____.....--·--
-----· Il
--
...,... ,._
--·----
-0
0 Figure 8.1 - Maquette graphique
C:
:::J
0
s:t
,-i
0
N • Ce template utilise une Google font pour gérer une police exotique.
@ Nous aurions pu également utiliser la propriété CSS« Font-face». Voilà
....,
.c
Ol
pour les grandes lignes. Si vous avez du mal à visualiser ces étapes
·;::
>- en code HTML et CSS, nous vous conseillons d'analyser les fichiers
c.
0 sources disponibles sur le site www.dunod.com. Notre feuille de style
u
CSS se trouve dans un répertoire nommé« style».
....
-0
0
C:
:::J
0
s:t
,-i
Figure 8.2 - Schéma d'intégration
0
N
@
t
·;::
8.4 « HTML TO WORDPRESS »
>-
c.
8 Pour transformer notre intégration statique en template WordPress, il faut
remplacer le contenu statique par des template tags WordPress. Nous allons
simplement commencer de haut en bas.
8.4 « HTML to WordPress » 173
js medias style
-0
0
C:
:::J
0
s:t
.. __
,-i
0
N
@
...., scre,enshot.png
.c
Ol
·;::
>-
c.
0
u Figure 8.3 - Fichiers statiques de départ du template AlsaWP
trois pages, deux menus personnalisés ... ). Bien entendu, tout est encore
statique ! Mais plus pour très longtemps ...
Le header
• Rendre les liens « durs» (images, feuilles CSS, fichier JavaScript)
dynamiques grâce à la fonction b l ogi nfo() .
• Insertion desfonctions wp_t i t l e() et bl oginfo() dans la balise <title> .
• Ajout de la fonction wp_head () dans la ba lise <head>.
• Pour la partie « intro » nous laissons le slogan en dur. Libre à nous de
la remplacer par une zone de widget ou par le slogan du site avec
« bloginfo() ».
Le menu de navigation
• Création du menu dans la partie back-office.
• Dans le div« #navigation», nous insérons le code PH P pour afficher
les rubriques du menu personnalisé. Voir la section« Création d'une
ou plusieurs zones de Menus» du chapitre 7.
La partie principale
-0
0
C:
• Dans le div« #main», nous insérons une boucle WordPress standard.
0
:::J Cette boucle va afficher plusieurs extraits d'articles en générant des
s:t
,-i
div avec la classe« .billet».
0
N • A jouter le bout de code PHP au début de cette boucle permet d'afficher
@ les vignettes .
....,
.c
Ol
·;::
• Après cette boucle, il est d'usage d'insérer deux liens de navigation.
>-
c.
0
u
La sidebar
• Le formulaire de recherche est appelé avec
get_temp l ate_pa rt ( 'sea rch fo rm') .
• Création d'une zone de widget Voir la sectio n « Rend re "widg etisabl e"
une zo ne» du chapit re 7.
8.4 « HTML to WordPress » 175
Le footer
1. Nous laissons le formulaire de contact tel quel. Comme vous avez
pu le constater, il n'est pas fonctionnel. Il faudrait lui ajouter un script
PHP pour qu'il puisse envoyer un e-mail.
• Nous créons deux zones widgetisables.
• La fonction wp_footer() est insérée.
8.5 CONCLUSION
Le template est maintenant terminé. Mais il n'est pas finalisé.
N'oublions pas que ce thème n'a pas vocation à être utilisé par le monde
entier contrairement au thème payant ou gratuit qui se trouvent sur le Web.
C'est plutôt un exemple de ce que pourrait être un thème développé pour
un client et uniquement ce client : il y aura certainement des manques au
besoin de chacun. Mais il n'attend que vous pour s'adapter à vous!
La suite est plutôt destinée à la finalisation des styles CSS et à l'arbores-
cence de chacun (pagination, plugin, custom post type, etc.).
Le plus important dans un site web est la conception avec la construction
d'une base solide (du storyboard jusqu'à l'intégration html-wordpress). Dès
que celle-ci est fiable et mise en place, le reste se résume à l'imbrication de
code PHP mélangé à de l'HTML/CSS/JS.
Libre à vous maintenant de le personnaliser et de l'améliorer : vous
pouvez par exemple ajouter des modèles de pages ou styler en CSS la
totalité des éléments. En effet, au moment de l'intégration statique nous
avons stylé quelques-uns d'entre eux (h 1, h2, Hh3,p, ul, li ... ), mais il en reste
encore d'autres.
-0
0
C:
:::J
0
s:t
,-i
0
N
@
....,
.c
Ol
·;::
>-
c.
0
u
-Etude de cas ••
acheter et modifier un
Template HTML/CSS ou
un Template WordPress
9.1 INTRODUCTION
-0
0
C:
0
:::J
Internet regorge de thèmes Wo rdPress p rêts à l'emploi. On peut en trouver
s:t
,-i
énormément de très bonne qualité pour environ 50 $ (voir le site themefo-
0
N rest.net par exemple). Alors faut-il céder à la tentation ?
@
...., On peut résumer un projet avec un curseur: plus le curseur va vers le
.c
Ol
·;:: côté qualitatif plus cela va demander de temps (et d'argent). Dans le sens
>-
c. inverse: plus c'est rapide, plus la qualité sera moindre.
0
u
Mettons-nous en conditions avec un client qui souhaite un site Internet.
Ce dernier doit : être de bonne qualité, respecter les standards, êt re
responsive (visible sur mobile et tablette), avoir un design sexy, avoir une
deadline est très proche et (bien entendu) un budget plutôt limité. Bref, cela
ressemble au mouton à cinq pattes.
178 Chapitre 9. Étude de cas: acheter et modifier un Template HTMUCSS...
Bootstrap exemples
3 colonnes égales
Get three equaJ.widlh coluroos stilrting .it desktops ilnd sc.iling to large desktops. On mobile devites. tablets and befow. the columns will
au1oma1~any slack.
Bootstrap exemples
3 colonnes égales
.col-rn<J-4
.COl-rn<J-4
-0
0 col--md-4
C:
:::J
0 3 colonnes non égales
s:t
,-i
0 .COl-rn<J-3
N
@ col~
....,
.c
Ol .COl-rn<J-3
·;::
>-
c.
0
u
Figure 9.2 - Colonnes Bootrstrap sur mobile
..
9.4 «METHODOLOGIE: MODIFIER UN TEMPLATE
HTML/CSS »
Vous venez de trouver un template HTML/CSS/JS qui vous plaît énormément
et vous voulez en créer un thème WordPress ? Nous allons en voir comment !
Chaque projet est différent, il n'y a pas de marche à suivre ultime.
Néanmoins, le processus est souvent le même dans les grandes lignes avec
des variantes propres à chacun.
...
Figure 9.3 - Le thème HTML « Prologue »
site « One Page » signifiant que tout le site se trouve sur une seule et même
page défilant grâce au menu. C'est une structure un peu spéciale car il n'y
a aucune arborescence. Tout se trouve sur la page d'accueil !
-0
0
C:
:::J Création du dossier et des fichiers de thème
0
s:t
,-i
• Dans le dossier« wp-content/thèmes » de WordPress, créez un dossier
0
N portant le nom du nouveau thème.
@ • À l'intérieur de celui-ci, importez directement les trois dossiers et le
....,
.c fichier index.html du template « Prologue» .
Ol
·;::
>-
c. • Utilisez un fichier « style.css » d'un autre template en modifiant les
0
u informations commentées dans le haut du fichier et en supprimant tout
le reste.
• Créez l'image« screenshot.png » au format adéquat pour faciliter votre
choix dans l'interface d'administration.
• Renommez « index.html » en « index.php ». Activez le thème dans le
back-office. Tous les liens relatifs à l'intégration statique sont rompus
182 Chapitre 9. Étude de cas: acheter et modifier un Template HTMUCSS...
(lien des feuilles de styles, script, image etc.). Il est possible de les
rendre dynamiques grâce à la fonction « bloginfo() » de WordPress.
• Dans l'en-tête, nous rajoutons la fonction wp_head() et dans le bas de
page, la fonction wp_footer() afin de permettre aux plugins d'insérer
leur propre code.
index.php
Page ». Mais livrer un site dont le contenu est modifiable, aussi petit soit-il,
c'est toujours mieux !
WordPress est un gestionnaire de contenu : il ne s'occupe pas de générer
du code HTML de mise en page, du code CSS ou encore du code JS comme
un éditeur WYSIWYG (What you see is what you get).
La sidebar
« Jane Doe » étant le titre du site, nous pourrons le rendre dynamique grâce
-0
0
C:
à la fonction bloginfo(), de même pour le slogan du site « H yperspace
0
:::J Engineer ». Nous aurions également pu créer deux zones de widgets pour
s:t
,-i
utiliser de simple widget texte.
0
N
Les icones des réseaux sociaux resteront en dur dans le template. Ces
@ informations ne changeront pas dans le temps, inutile de réinventer la rou e,
....,
.c au risque d'ajouter un temps de chargement à la page (si on utilise un plugin
Ol
·;::
>- ou des fonctions php ... )
c.
0 Pour la création d'un menu, se reporter à ce qui suit.
u
Le menu
Nous créons une zone de menu en l'ajoutant d'abord dans le fichier
functions.php de notre thème puis ouvrons index.php pour p lacer cette zone.
184 Chapitre 9. Étude de cas: acheter et modifier un Template HTMUCSS...
0
:::J vers une section précise (remplie par cette page).
s:t
,-i
0
Il faut alors faire des liens personnalisés qui pointent directement vers les
N
ancres de chaque partie.
@
....,
.c Autre point critique: il faut adapter le code de la fonction wp_nav_menu() .
Ol
·;:: Le code HTML du menu du template diffère de celui qui est créé par la
>-
c.
0 fonction WordPress.
u
9.4 "Méthodologie: Modifier un Template HTMUCSS" 185
Structure du menu
Glissez chaque élément pour les placer dans l'ordre que vous préférez.
Portfolio Lien •
Adresse web
#portfolio
Déplacer
Supprimer I Annuler
Figure 9.7 - Des liens pointant vers des ancres en guise de navigation
<u l>
<l i)
<a cl ass=" ske l -pane l s -igno reHre f active " href="#top">
<span cl ass="fa fa-h ome">Intro</span>
<la>
<Il i>
<!u l>
maclasse
Déplacer
Conclusion
Voilà pour les grandes lignes : le thème« Prologue» HTML/CSS est mainte-
nant devenu un thème WordPress !
-
9.5 «METHODOLOGIE: MODIFIER UN TEMPLATE
WORDPRESS EXISTANT»
Vous venez de trouver un template WordPress complet qui vous plaît? Vous
voulez avoir une feuille de route pour procéder à des modifications ? Voici
-0 quelques conseils.
0
C:
0
:::J Chaque projet est différent et il n'y a pas de marche à suivre ultime.
s:t
,-i
Néanmoins, le processus est souvent le même dans les grandes lignes avec
0
N des variantes propres à chacun.
@
....,
.c
Ol
·;::
>-
Conseils
c.
0
u • Choisissez bien votre template en n'hésitant pas à regarder le code
source sur le site de démonstration du template.
• Vérifiez la présence d'un framework CSS ou non suivant votre goût.
• Lisez la notice d'utilisation.
• Il est conseillé d'installer le thème avec le contenu de démo pour
faciliter sa prise en main.
9.5 "Méthodologie: Modifier un Template WordPress existant» 187
Conclusion
Modifier un template existant nécessite autant de connaissance que pour la
création d'un template entier, voire plus si on veut le revoir en profondeur.
li faut s'adapter aux technologies utilisées (framework ... ) et rapidement
comprendre le principe global pour pouvoir agir au bon endroit.
Gardez toujours à l'esprit (comme pour la création d'un thème) que
chaque modification doit aller dans le sens de l'utilisateur profane. Par
exemple : Le design de ce titre h3 dans les actualités ne vous convient pas?
Agissez sur les balises H3 en ciblant ses parents et non en lui assignant une
classe directement. Si ce n'est pas le cas, l'utilisateur devra lui-même ajouter
cette classe à la main dans l'éditeur html de WordPress. Chose impensable.
-0
0 Mieux vaut prévoir une règle CSS stipulant que tous les titres H3 se trouvant
C:
:::J dans les div actualités vont s'afficher de telle manière.
0
s:t
,-i
0
N
@
....,
.c
Ol
·;::
>-
c.
0
u
Copyright© 2014 Dunod.
...
QUATRIEME PARTIE
WordPress
côté coulisses
-0
0
C:
:::J
0
s:t
,-i
0
N
@
....,
.c
Ol
·;::
>-
c.
0
u
Copyright© 2014 Dunod.
10
WordPress
et le multisites
-
10.1 PRESENTATION
2. Création du sous-réseau
Après avoir cliqué sur la sous-partie « Création du Réseau» et
renseigné les différents champs relatifs à votre réseau, une page
s'ouvre nous invitant à su ivre 2 étapes (figure 10.2).
-a Copiez col ler les deux codes fournis aux deux endroits indiqués.
0
C
:J 3. Reconnexion et Fin !
0
'tj" Il est nécessaire de se reconnecter à l'espace d'administration. U n
,-i
0 nouveau signet, nommé « Mes Sites» a fait son apparition dans le
N
@ coin supérieur gauche (figure 10.3), ainsi qu'une nouvelle rubrique
..... dans la barre latérale. Vous êtes maintenant un Super Administrateur!
.!:
Ol
·;::
>-
a.
0 Remarque Importante - On peut vite se perdre. Il y a maintenant deux types
u
de tableaux de bords : celui du site père et celui du réseau.
,.
10.3 L'INTERFACE D'ADMINISTRATION DU RESEAU
1 Attention : nous vous recommandons de faire une copie de salNegarde de vos fichiers wp-config . php et . htaccess actuels.
1. AJoutez lesllgn.essurvantesâvotrefichler wp-confic; .php .dans C:\wa11p\www\llon·si u/ . au·dessusdelaltgne r c>est t out , nt>
touchez pas à ce qui suit I Bon blogging 1 •/ :
dofine('HULTISITE". true);
define( ' SUBOOMA.I N_INSTALL ', false);
de-f ine( 'OOMAIN_CURRENT_sne · , ' localhost · );
define(' PATH_CURRENT_SITE •• '/mon-site/.);
define ('SITE_ I O_CURRHJT_ SITE' , 1);
dofine(' BLOG_ ID_CURREfff_ SITE • , 1);
2. Ajoutez les lignes suivantes â votre fKhier .ht.tccess , dans C: /wMp/-/rJtOn- sit@/ . en remplacement des autres règles liées â
WordPress:
RewriteEngine On
Rewriteease /mon ~slte/
Re-writeRule "'index\ . php$ - (l)
une fOts les étapes effecruées. votre r~au sera actlVê et configuré. vous devez maintenant vous reconnecte<.~
Admin du réseau
\
Bienvenue dans V
Créer un nouveau site I Cré, Voici quelques liens po1
Vous avez 2 sites et 2 utilisate
Lancez-vous !
;1- 1 arucles
• 3 commentaires
Figure 10.3 - Les deux Tableaux de bord. On peut vite s'y perdre !
-0
0
C:
:::J
0
s:t
,-i
0
N
@
....,
.c
Ol
·;::
>-
c.
0
u
Tableau de bord
Aujou rd'hui
Chercher un utilisateur
Chercher un site
Sites Ajouter
Chercher un site
-0
0
C:
:::J
Figure 10.6 - Listing des sites
0
s:t
,-i
0
N
• La rubrique Thèmes
@
...., C'est à cet endroit qu'il est possible d'activer (ou non) les différents
.c
Ol
·;:: thèmes disponibles pour ce réseau de sous-sites. C'est à l'utilisateur
>-
c. final que reviendra le choix de ses thèmes activés dans son espace
0
u d'administration propre.
Les thèmes utilisés sont les mêmes que ceux du site principal. Aucune
modification de leur code source n'est nécessaire.
• La rubrique Extensions
Cette rubrique permet de gérer les différentes extensions que les sous-
sites pourront utiliser.
196 Chapitre 1O. WordPress et le multisites
Sites Ajouter
/mon-site/ Jamais
D /mon-site/site-enfanu 2014/01/30
Modifier Tableau de bord Désactiver
Archiver Indésirable Supprimer Visiter
• La rubrique Réglages
Elle permet de régler les paramètres du réseau.
• La rubrique Mises à iour
De cet écran, il est facilement possible de mettre à jour tout ce qui
concerne le réseau (extensions, thèmes, etc.)
~
10.4 MARCHE A SUIVRE POUR CREER UN SOUS-SITE
-
Dans l'interface d'administration du réseau :
• On crée un sous-site que l'on peut par exemple appeler « Mon Site
-0 Enfant» en se rendant dans la sous-section Ajouter de l'onglet Sites.
0
C:
:::J • L'administrateur du nouveau site va recevoir ses codes d'accès et il
0
s:t pourra s'y connecter.
,-i
0
N
@
....,
.c
Ol
·;:: 10.5 CHOIX DE LA FACON
, D'INSTALLER LES
>-
0
u
C.
SOUS-SITES
li est possible de choisir la façon dont on atteint les sous-sites par rapport
au site père. Soit en sous-domaine «mon-sous-site.mon-site.corn» ou en
sous-dossier« mon-site.corn/mon-sous-site».
10.5 Choix de la façon d'installer les sous-sites 197
Adresse de contact de
radmlnistrateur
un nouvel utilisateu r sera créé si l'adresse de contact n'existe pas dans la base de données.
L'identifiant et le mot de passe seront envoyés sur l'adresse de contact Indiquée.
ifuéhèii
WordPress
-0
0
C:
:::J
0
s:t
,-i
0
N
@
....,
.c
Ol
·;::
>-
c.
0
u Fichiers WordPress Base de
données
Comment faire ?
Il suffit simplement de sauvegarder (transfé rer sur votre o rdinateur) tous les
fichiers (ou le dossier) qui concernent WordPress. Ces fich iers sont les mêmes
que ceux qui ont été « uploadés » par FTP.
Comment faire ?
Rendez-vous dans l'interface de phpMyAdmin qui permet de gérer la base
de données de votre hébergement. Il n'y a pas d'inquiétude à avoir, aucune
connaissance en SQL n'est requise.
Si vous possédez plusieurs bases de données, choisissez celle dans
laquelle Wo rdPress est installé, dans le menu de gauche. Lorsque vous
-a vous trouverez à l'intérieur de celle-ci, vous pou rrez apercevoir son contenu
0
C
:J (figure 11 .2).
0
'tj"
Note - Un WordPress fraîchement installé, dispose de 11 tables de don nées.
'\t
,-i
0
N
Cependan t, plus vous installez de plugins, plus vous aurez de chance de retrouver
@
..... J, l'{{ . un nombre plus élevés de tables de données .
.!:
Ol
·;::
>- Cliquez ensuite sur l'onglet « Exporter» (figure 11 .3). Puis, en bas de
a.
0
u page, cho isissez votre format et cliquez sur« Exécuter».
Une fenêtre apparaît alors vous demandant d'enregistrer cette archive
(figure 11.4). Conservez-la précieusement: c'est toute votre base de don-
nées!
C'est terminé. Votre base de données et vos fichiers sont maintenant
sauvegardés.
11.1 Sauvegarder WordPress 2·01
r 'Il • H (1 • 1 1 l
Méthod e d'exportation :
-0 Format :
0
C:
:::J 1 SOL
0
s:t
,-i
0
N
@
....,
.c
Ol
·;::
>-
c.
0 Figure 11 .3 - L'onglet Exporter
u
202 Chapitre t t. Maintenance
phpMyAdmin
~ILi@é-'1C:
-·
~ Structure I:J SQL il 4 Rechercher I L. Requête ~ Exporter 1 ,,. plus
-
1 (Tables récentes) ... Bi
Exportation d:- ~ '· ' - i...
3
- ..... _ ..... _ _
· - •-
f:!:n.,,, wordpress Ouverture de wordp,ess.sql
«wordpress» Vous avez choisi d'owrir:
D ,-c1press.sq1
Méthode d'exportation : qui est un fichier de type : sql File
à partir d•: http://localhost
@ Rapide • n"affich,
Que doit faire Firefox avec ce fichier ?
0 Personnalisée •
O Quvrir avec [ earcouri,...
Format: 0 FlashGot pyl oad
( Exécuter )
OK 1 [°Annuler
l!===============================:!.lû
Figure 11 .4 - Exportation de la base de données
-0
0
C:
:::J
0
s:t
,-i
0
N
@
....,
.c
Ol
·;::
>-
c.
0
u
J:l Common
Import/Export
~ Logo and Favtcon
Settings elk>v, to monage site importing.,e,i:portirg
CD Sideba~
t:i:il Footer
Import site
Browse Import site
Allows to import the site from the
~ Contact Form
exporte<! füe
(? Custom JS/CSS
C Import/Export
Import DEMO site Import OEMO site
Allows to import the site DEMO provided
A Fonts
by develope~
IMM:iW
-0
0 Figure 11.6 - Interface de gestion de l'export et de l'import des options du thème
C:
:::J
0
s:t
,-i
0 Il en résultera un fichier xml que vous pourrez importer (ou sauvegarder)
N
dans la nouvelle adresse du site.
@
....,
.c
Ol
·;::
>-
c.
...
0
u 11.2 METTRE A JOUR WORDPRESS
Avertissement
Avant chaque mise à jour, pensez à faire une sauvegarde de votre base de
données et des fichiers WordPress.
204 Chapitre t t. Maintenance
Personne n'est à l'abri d'une mise à jour qui se passe mal. Si le cas devait
se présenter, les sauvegardes que vous aurez effectuées vous permettront de
revenir à la version précédente.
Vérifiez que votre hébergement possède bien toutes les caractéristiques
requises pour pouvoir accueillir la nouvelle version de WordPress (PHP,
MySQL).
Enfin, désactivez tous vos plugins.
~ WORDPRESS
Mise à jour de la base de données requise.
wordPress a été m,s à j our I Avant de vous laisser continuer, nous devons mettre à 1our la base de données.
Le processus de mise à jour p eut p rendre un certain temps, merci d onc pour votre patience.
~ WORDP'RESS
Mise à jour terminée
La base de données WordPress a été mise â jour avec succès !
Continuer
Il. Merci de f aire de WardPr ess votre outil de création. Version 3.8.1
Si vous souhaitez réinstaller la version 3.8.1- en_US, vou,s pouvez le faire ici. ou télécharger rarchWe pour la eèinstaller vous-même:
a
Mettre jour automatiquement Télécharger la version 3..8.1- en_us
Extensio ns
vos extensions sont toutes â jour.
Thèmes
Traductions
Vos traductions sont toutes à jour.
.. ..
11.3 DEMENAGER WORDPRESS
WordPress et son URL
WordPress se construit entièrement (base de données, liens, images) à partir
-0
0
C:
de l'URL qui lui a été indiquée dans les options générales de l'espace
:::J
0 d'administration (figure 11 .11 ). Elle est donc très importante.
s:t
,-i
0
Cette URL est stockée dans la base de données. Il faudra donc la modifier
N
en cas de changement de nom de domaine.
@
....,
.c
Ol
·;::
>-
c. WordPress et son fichier« wp-config.php »
0
u
Le fichier« wp-config.php » est créé par WordPress uniquement lors de son
installation. Il contient des informations mySQL relatives à la connexion de
la base de données.
Ces informations sont :
• le nom de la base de données;
11.3 Déménager WordPress 2 ·0 7
Réglages généraux
Si vous souhottei que fodresse de la page d'accueil de votre site soit diffêrenre du rêD(rta,re oil
vous avtz inscallt wordPress. saisissez cerre adresse ici.
• le préfixe de la table;
• l'utilisateur de la base de données;
• le mot de passe de la base de données ;
• l'adresse de la base de données.
Remplacer ii
Rechercher I R!ffll)laœr I Rechercher dans les fid'iers d'un dossier.l
Recherche: www.vîeux-site.com
y
1 SUivant
1
Remll.4acer par : www.nouveau-site.fr y] 1 R~acer 1
D Dans sBl!Clion 1 Remplacer tout 1
~.i (i-e(D C } [ Structure Q SQL -4 Rechercher .Jl Requête ~ Exporter ~ lmponer • plus
Fichier à imponer :
~ Permettre rmterrupt1on de !importation si la hmrte de temps configurée dans PHP est sur le point d'être
atteinte. (Ceci pourra,/ aider à imporler des fichiers volumineux, au détronenl du respect des lransac/Jcns.)
Format :
1 SOL BI
-0 oi:,tions spéeifiques au format :
0
0
C:
:::J Mode de compatibilité SOL : § E =a
@ Ne pas ut1hser AUTO_INGnŒNT pour la valeur zêro
s:t
,-i
0
N ( Exécute< )
@
....,
.c
Ol
·;::
>-
c.
Figure 11. 1 3 - L'onglet Importer
0
u
Cliquez sur« Pa rcourir» et allez chercher le fichier SQL créé aupara-
vant. Puis, cliquez sur le bouton « Exécuter» situé en bas à droite. Un
message confirmera alors la bonne exécution de l'importation .
Vous remarquerez que toutes vos tables sont présentes dans la
colonne de gauche.
210 Chapitre t t. Maintenance
Remarque - Par défaut, l'export SQL de la base de données recrée une base de
données. N'hésitez pas à supprimer cette ligne dans l'export SQL si vous n'avez
pas les droits (un message d'erreur vous préviendra).
7. C'est terminé !
En vous rendant su r le nouveau site, vous verrez que votre site
WordPress est désormais en p lace : la procédure de déménagement
s'est donc parfaitement déroulée ! (N'oubliez pas l'étape concernant
les options de thème décrite plus haut si vous utilisez un template
pré-fait).
..
11.4 GARDER WORDPRESS EN BONNE SANTE
Conseils et plugins
WordPress possède des qualités indéniables pour le référencement naturel
vu qu'il respecte et n'interfère pas avec la qualité de votre intégration
HTML/CSS, mais rien ne vous empêche de l'améliorer en suivant ces
quelques règles :
212 Chapitre t t. Maintenance
Acc::ueil
Bienvenue dans les
Tous les messages
outils pour les ,_, ~n ,-,r ~ 1 < 0
webmasters
Autres ressources
Bénéficiez de données, d'ouUls et de
diagnostics pour un site sans erreurs et
facilement explorable par Google. Voici
quelques conseils:
• Vértflez l'état de santé de votre Site pour tratter les
~ntuek pro~mes détKtk par Googte.
• Identifiez Ses te-ndances en termes de trafic ISSU de
la recherche sur vocre stte et dkouwez comment
les Internautes trouvent celui<!.
• 0pom1sez votr e Site pou r q..tll son m1eux analyse et
représente dans les resultats de recherche Goog!e.
vMwtxarnplt. com
Eh· l..f..li/FMM
Rewrite Engine On
Rewr iteC ond %{HTTP_HOST} !Awww\ .simon-k\ .com [NCJ
1 Rewrite Ru le ( . *) http : //www .s imon -k.com/$1 [OSA,R=301,L]
Google Analytics
Google Analytics est un outil poussé qui permet de visualiser en détail les
statistiques de fréquentation d'un ou plusieurs sites Internet (figure 11.15).
Cet outil gratuit est proposé par Google. Pour pouvoir l'utiliser, il faut
posséder un compte Google. Si ce n'est pas le cas, vous pouvez le créer
gratuitement et rapidement sur google.com.
--- -
,--
e-
a •
..----
·-----
-- --
·-·--
--....... -'*' .........
--- . . ••tu.,... .......
--__ -·-
-0
0 - &I..Jt 'li,\. .... ......
C:
0
:::J
s:t
,-i
--
_,
---
0 .. ... ... ,IM,l1, ......
N
- -
@
....,
.c
·--
·::-:~
Ol
·;::
>- ----
c.
·-~-
-=----=
0
u
-- --
Figure 11 .15 - Interface de Google Analytics
214 Chapitre t t. M aintenance
'O
0
C
:J
0 Nom1' Rapports État
'tj'
,-i
0
N
@
.....
.!:
Ol Afficher le rapport ~
·;::
>-
a.
0
u
Afficher le rapport ~
Tilbleau de t>ord
..._... [J- •
l mifKIIII
.__..,.""__
-
....
-..
.;.- _ , ,
. . . -....u,
, ,_
--»- t 030000 v,.1- ~ 84,17 '9 T-,4•Mbo-
..._ ,...... __).Jv,.. 1 24000 P,l9\'t YUh .,JcJ...,-. 00;4.S;OO T..,.,..cif*l'l ....•MNt-.-.,
.!'-..-•'-'
il- ·°"'"'*' - 1SP:aiee•P"'viW - 91,94 %,,.,_...., VttdNC- '1,1
u ooooo-
-a
-
0
...
_
C
:J •li_,._
-' ....
0
·--"..
.A(:. ....
t1•H•• V°'
'tj"
«IHl'fn"-'
,-i
0
N .........~ ,
@
..... •:ID,l(;MGI• c,,:,;,.oll••- 1C..-,,,.,1o111..- l lli,il,l•IIIC61Nolill,ollf. C..W1o1..n- a,.._ :;.,,•io,4,ü,;S•oill ...._,.
.!:
Ol
·;::
>-
a.
0 Figure 11.17 - Vue des fréquentations d'un site Internet dans Google Analytics
u
Copyright© 2014 Dunod.
12
WordPress
côté nomade
-0
0
C:
:::J Applications Wordpress : Apple, Android, Windows Phone et
0
s:t
,-i
BlackBerry
0
N
@ Pour mettre à jour votre site à partir de votre mobile, il est bien entendu
....,
.c possible de passer par le navigateur Internet de votre smartphone pour vous
Ol
·;::
>- connecter à votre back-office. Nous allons en parler dans la partie suivante.
c.
0
u Automattic, la société créatrice de WordPress, développe des applications
spécifiques pour pouvoir gérer votre site à partir de vos smartphones.
Les applications permettent un accès rapide et simplifié à votre espace
d'administration.
Des modes d'emploi (vidéos et textes) pour chaque application vous
attendent pour débuter facilement. Rien de bien compliqué néanmoins :
218 Chapitre t 2. WordPress côté nomade
WoRDPRESS
tor iOS
Étape 1 : installation
Rendez-vous dans I' App Store puis télécha rgez et installez gratuitement
l'application WordPress.
O. wordpress 59 résultats 0
m Opé<eteu1 9
WordPress
Automattic
**** -1:t (7)
18 02
Blogs I Follow
!+GRATUIT 1
.....
#
~ WordPrtss.com Ne,ws
· ~ (/ Il~ IVI'
How To Be a WordPress.com
Detective
Las, year. we looked ac the art and science
of getting good WordPress support. 10
~
--
Sélection Classements A proximité Recherche M,ses à jour
~ simon
ai ...................... ~
-0
0
C:
:::J
0
s:t
,-i
0
N
@
....,
.c
Ol
·;::
>-
c.
0
u
••••• Free 9 21 06 o 77 % • ,
Ajouter un Site
-0
Étape 4 : Publication d'un article ou d'une page
0
C:
:::J Vous arriverez sur une interface simplifiée avec le renseignement d'un
0
s:t titre et du contenu. Chose intéressante, il est possible de publier une photo
,-i
0 directement après l'avoir prise (bouton en bas à gauche), option qui n'est
N
@ pas disponible sur la version en ligne.
....,
.c
Ol
·;::
>-
c.
0
u Zoom sur le back-office mobile
Nous venons de voir les applications téléchargeables dans les différents
stores.
>
...'
Commentaires
Statistiques >
Leçt~,r
( Recour Options
Catégories >
Mots-clés 1 1
PUBLIER
Saisissez un titre
Options
Étape 1 : connexion
Rendez-vous dans la partie d'administration (exemple: monsite.com/wp-
admin) - Figure 12. l O.
simon-k.com C
~ WORDPRESS
Mol de passe_ _ _ _ _ _ __
< > rn
Figure 1 2. 10 - Interface de connexion
Tableau de bord
Activité
-0
0
C:
:::J
0 Brouillon rapid e
s:t
,-i
0 Titre
N
@ Qu'avez-vous en tête 7
....,
.c
Ol
·;::
>-
c.
0 Enregistrer brouillon
u
Brouillons
simon-k.com C
Optio ns persor
Couleu rs de l'lnte1
Raccourcis clavier
Mais attention, adapter son site pour qu'il s'affiche bien sur toutes les
plateformes n'est pas une mince affaire: des ouvrages entiers sont consacrés
au responsive web design !
Dans cette partie, nous n'aborderons donc que les grandes lignes.
0
:::J
s:t
,-i
1 <link rel= "stylesheet " type= "text/css " hre f="sty le/sty le-mobile.css "
media="handheld " !>
0
N
@ Voilà pour le principe de base ! Par exemple, si le site s'affiche sur
....,
.c smartphone, nous supprimerons l'image de fond, ainsi que la sidebar, nous
Ol
·;::
>-
modifierons la tail le du logo, la disposition du menu, la tai lle maximale des
c.
0 images, etc.
u
li faudrait également ajouter d'autres points de ruptures pour les tablettes
au format horizontal, puis au format vertical.
Mais il y a plusieurs façons de procéder et le responsive web design est
une discipline à part qui est maintenant incontournable : il faut s'y intéresser.
À vous de sublimer vos feui lles CSS de votre thème WordPress !
12.2 WordPress et le responsive web 227
-0
0
C:
:::J
0
s:t
,-i
0
N
@
....,
.c
Ol
·;::
>-
c.
0
u
Copyright© 2014 Dunod.
Bibliographie
0
:::J des widgets).
s:t
,-i • http://www.wordpress-fr.net : La communauté francophone autour du
0
N CMS WordPress et son écosystème.
@
....,
.c Les sites magazines généralistes
Ol
·;::
>-
0
c. Ces sites procurent des articles de qualité sur de nombreux sujets : webde-
u sign, infographie, HTML, CSS, PHP, jQuery, WordPress, etc. N'hésitez pas à
vous y rendre très souvent !
• http://www.smashingmagazine.com
• http://sixrevisions.com
• http://www.noupe.com
• http://buildinternet.com
• http://www.instantshift.com
232 Sites Web avec WordPress
• http://designrfix.com
• http ://www.creativejuiz.fr/blog/
• http://wpchannel.com
• http://www.webdesignerdepot.com
• http://net.tutsplus.com
• http://www.alsacreations.com
• http://webdesignledger.com
• http://www.wpbeginner.com
• http ://www. wptavern .corn
• http://wpengineer.com
• www.catswhocode.com
• http://themeforest.net/
• http://www.rockettheme.com/
-0
0
C:
:::J
0
s:t
,-i
0
N
@
....,
.c
Ol
·;::
>-
c.
0
u
Glossaire
Le vocabulaire du Web
Le Web dispose de son vocabulaire propre. Si vous n'y êtes pas
encore habitué, ce petit mémo pourra vous aider.
Back office - Espace d'administration d'un site Internet, sa partie privée.
Background - Fond/1' arrière-plan d'un site Internet.
Billet ou « Post» - Un billet (ou « post » en anglais) est un synonyme
du mot « article». Mais attention, les ressources anglaises de
WordPress utilisent le mot Post pour désigner du contenu (et pas
forcément un « article» comme un article de blog).
Codex - Documentation officielle de WordPress.
http://codex.wordpress.org
Download - Téléchargement d'un document du Web vers votre disque dur.
Footer - Bas de page d'un site Internet.
-0
0
C: Front office - Partie publique d'un site Internet visible par l'ensemble des
:::J
0 internautes.
s:t
,-i
0
N
Hack - Ensemble d'instruction (code HTML + PHP + Template tag Word-
@ Press) pour aboutir à un résultat.
....,
.c Header - Terme anglais désignant l'entête d'un site Internet .
Ol
·;::
>-
c. Homepage - Page d'accueil d'un site Internet; c'est la première page qui
0
u s'affiche lorsqu'un internaute arrive sur un site Internet.
lnfographiste - Personne qui créer le design d'un site Internet, d'une
affiche, d'un logo ...
Loop - Boucle.
Plugin - Extension.
234 Sites Web avec WordPress
Racine - La racine d'un site Internet, c'est le dossier qui contient l'ensemble
de votre site. C'est le dossier qui est le plus éloigné dans une
arborescence.
Screenshot - Copie d'écran.
Sidebar - Barre latérale d'un site internet.
Slug - Identifiant. C'est la version normalisée(« URL-friendly » du nom d'une
catégorie. Il ne contient généralement que des lettres minuscules
non accentuées, des chiffres et des traits d'unions.
Template - Thème d'un site Internet (son apparence).
Template tag - Marqueur de modèles.
Upload - Téléchargement d'un document du disque dur de votre ordinateur
vers le Web.
Webdesigner - Terme (un peu trop) généraliste ... Certains affirment
qu'un webdesigner est la personne qui transforme une maquette
graphique en langage Web : HTML/CSS. En effet, «design» en
anglais signifie« concevoir». Peu de rapport avec le côté graphique
du «designer». D'autres personnes pensent qu'un webdesigner
créer le design d'un site Internet, qu'il serait un infographiste
spécialisé dans le Web. Bien entendu, personne n'empêche de
cumuler ces compétences ...
Webmaster - Personne qui gère et qui faire vivre un site Web.
-0
0
C:
:::J
0
s:t
,-i
0
N
@
....,
.c
Ol
·;::
>-
c.
0
u
Index
A compte
administrateur 59, 98
accroche 143
créer un nouveau 60
Admin Log 210
Super Admin 192
Alphatk 24
utilisateur 59
arrière-plan 77, 149
article 4T conditional tags 167
auteur d'un article TIT contenus personnalisés 44
avatar TI custom post types 44
B D
back office 34 date et heure TIT
bibliothèque des médias 57
bl og i nfo() 136
E
-0 blogs 128
0
C: boucle 137 effet lightbox 150
:::J
0
personnalisée 157 en-têtes 125
s:t
,-i
0 principale 145 extensions 78
N
@
secondaire 144
...., WordPress TiT
.c
Ol
F
·;::
>-
C. Face book 14 7
0
u C fichier hosts 32
catégorie 42, 46 fil d'Ariane T52
champs personnalisés "î6T FileZilla 2T
child theme 166 Firebug 123
CMS 49 Firefox 123
commentaires 66 footer 127, 175
236 Sites Web avec WordPress
R Twitter 147
référencement "21T typographie 127
réglages des médias <Jl"
réseaux sociaux 146 V
vidéo ""57
s Vimeo "'57
Virtuel Hosti l
screenshot.png 13T, 133
section Réseau 192
Sec ure Word Press 2ÎO w
serveur WAM.P 23, 25
Apache 2T Web Developer 124
distant 25 Webmaster Google tools 2îT
local 22, 25 widget 82
sidebar 174 WordPress 87
smartphones ~ base de données ~
Smultron 24 création de la base de don nées
style.css 1"04: TIT 26
espace d'administration (back
office) "34
T maintenance ï1JV
TAC (Theme Authenticity Checker) 2îT mise à jour~
template 75 paramétrage W
AlsaWP 169 partie publique (front office) ""34
WordPress 1 30 tableau de bord 35
tem plate tags 109 wp-config.php 206
TextPad 24 wp-config.php 206
texture 126 WP-DBManager 211
the_author_posts_link() 141 , 142 wp_list_categories() ~
the_content() 'î':JB" wp_list_pages() 140
th e_da te ( ) 14T WP _Que ry() Ti8, "'i45
the_excerpt() ~
thème 75, l""OT, !TI y
enfant 166
the_time() 141 Youtube 57