Note Interne Logo Objet :

Date : Mode demploi WordPress Mode demploi WordPress Cr le 26/01/2012 Dernire mise jour : 22/12/2012 Ce mode demploi est destin aux personnes pour qui jai ralis un site en WordPress, afin quelles puissent grer leurs contenus avec facilit. Il est nanmoins accessible toute autre personne intresse par le sujet. Infos pour ces dernires : o Ce mode demploi ne couvre ni linstallation de WordPress ni ladministration du site. o Il suppose par ailleurs que vous ou votre web designer avez ajout dans WordPress lextension (plugin) Ultimate TinyMCE (incontournable !) o et ventuellement les suivantes : Table of Contents Plus (table des matires), Ajax Event Calender (agenda/calendrier), DMSGuestbook (livre dor) Vocabulaire : Backend = le tableau de bord WordPress (l o on travaille sur le site) Frontend = le site lui-mme (tel quil est vu par les visiteurs) Widget = zones du site (sur le frontend) qui ne sont ni le menu horizontal du haut, ni le corps de page avec les contenus. Ils sont souvent situs sur les cts gauche ou droite et contiennent des petits menus, liens, etc Breadcrumb = la ligne sous le menu du haut et celles en bas de page, qui listent les niveaux hirarchiques jusqu la page en cours. Breadcrumb vient du conte Hansel et Gretel. Les 2 enfants sment des mies de leur pain dans la fort pour retrouver leur chemin. Malheureusement les oiseaux les mangrent, mais bon, lhistoire finit tout de mme bien. Encadrs de jaune dans le document : = les extraits que je vous demande de lire, ou au moins de survoler, absolument avant de travailler, mme si vous comptez avoir une approche plutt intuitive de linterface. Cest principalement pour bien prendre soin du site et aussi pour vous viter des soucis ainsi qu moi. Le reste du document, vous pouvez dcouvrir au fur et mesure, en fonction de vos besoins. SOMMAIRE A) LE TABLEAU DE BORD (ou backend) : GNRALITS o A.1. Connection/dconnexion au tableau de bord o A.2. Ouvrir le site (ou frontend) partir du tableau de bord o A.3. Menu gauche : les items utiles dans notre cas o A.4. Mises jour de WordPress

Document1

Page 1 sur 22

Comment Russir dans la Vente A.5. Aide WordPress B) ARTICLES & PAGES o B.1. Crer un article ou une page o B.2. Afficher, modifier, supprimer des articles et des pages o B.3. Page enfant dune page parent o B.4. Limiter laccs certaines pages o B.5. Lditeur de texte B.5.1. Intro
o

B.5.2. Prvisualiser B.5.3. Agrandir la fentre de lditeur de texte B.5.4. Mode Visuel / Mode HTML (1) (14) B.5.5. Afficher lditeur complet (2) B.5.6. Coller du texte (8) (14) B.5.7. Styles des entres (11) B.5.8. Ajouter des interlignes (15) B.5.9. Listes ( puces et ordonnes) (9)

B.5.10. Liens : insrer/diter/supprimer (4) (5) B.5.11. Ancres : insrer/lier/supprimer (16) (4)

B.5.12. Tableaux : insrer/diter/supprimer (12) B.5.13. Images : insrer/diter/supprimer (10)

B.5.13 Insrer une image clip art B.5.14. Mettre une image la une dun article/page B.5.15. Fichiers tlcharger (10) B.5.16. Table des matires dans un article ou page B.5.17. Fentres popup (3) (4) B.5.18. Rsoudre quelques soucis de styles (13) B.5.18.1. La notion de BOX (bote) et de Style CSS B.5.18.2. Augmenter un retrait gauche ou droite B.5.18.3. Forcer du texte SOUS une image aligne gauche ou droite B.5.18.4. Rendre du texte color sa couleur par dfaut C) Grer le WIDGET contenant une LISTE DE LIENS D) Grer votre AGENDA/CALENDRIER E) Grer votre LIVRE DOR F) MNAGE ET BONNES PRATIQUES (rappels) A) LE TABLEAU DE BORD (ou backend) : GNRALITS

Document1

Page 2 sur 22

Comment Russir dans la Vente A.1. Connection/dconnexion au tableau de bord Par email, je vous ai envoy lURL pour vous connecter au tableau de bord de votre site ainsi que votre identifiant et un mot de passe temporaire quil faut que vous changiez. - Pour modifier votre mot de passe : bouton Profil dans menu gauche - Aussi, dans Profil , dcocher la case Barre doutils afin que celle-ci napparaisse pas sur le frontend lorsque vous tes connect - Pour se dconnecter du tableau de bord : Bouton haut droite : Salutations Multisites : ( Ceci ne vous concerne que si je vous ai prpar un multisite en vue, par exemple, dun futur site multilingue) Votre installation contient dans ce cas 1 site principal + 1 ou plusieurs sites secondaires. Dans le tableau de bord, cliquer sur Mes sites (menu haut horizontal) Slectionner le site correspondant votre nom de domaine. Vous vous trouvez alors dans le tableau de bord du site principal. Y changer votre mot de passe, comme dcrit ci-dessus. Aprs a, vous naurez, en principe, jamais besoin de travailler dans ce site. Cliquer de nouveau sur Mes sites et slectionner un des autres sites. Leur nom commence, en principe, par la langue quils concernent : FR, EN, DE, etc. Cest dans chacun de ces tableaux de bord que vous travaillerez. Changer votre mot de passe dans chacun de ces sites galement, comme dcrit cidessus.
A.2. Ouvrir le site (ou frontend) partir du tableau de bord (notamment pour visualiser au fur et mesure les modifications quon a apportes) Soit vous ouvrez votre site votre manire habituelle, soit, vous cliquez dans le tableau de bord, sur le bouton affichant le nom de votre site (menu haut du tableau de bord, gauche). Cest pareil. Conseil : Ouvrir le site dans un nouvel onglet (ou fentre) du navigateur. Ainsi backend et frontend sont disponibles et on peut passer facilement de lun lautre au fil du travail. N.B. Aprs une modification dans le backend, rafrachir le frontend (Mozilla Firefox sur Windows : cliquer droit sur longlet puis Actualiser longlet Internet Explorer : bouton Actualiser)

A.3. Menu gauche : les items utiles dans notre cas Ici, je dcris simplement, en gros. Les manipulations seront expliques partir de la section B. Articles Gre la partie du site qui est de type blog : sur le frontend, les articles sont dats et saffichent la queue leu leu, le + rcent au-dessus. Exemple : les NEWS du site Ajwan Sur le backend, cest par l quon cre, supprime, modifie les catgories darticles et les articles eux-mmes. Souvent, dans les sites que je ralise : une seule catgorie : News. Chaque news est un article de cette catgorie. Mdias Gre les images, sons, vidos et autres ventuels fichiers attachs (PDF, EXEL) tlchargs sur le site. Cest l que se trouve la Bibliothque contenant tous ces mdias. Par l, on peut ajouter, supprimer des mdias et en modifier les attributs.

Document1

Page 3 sur 22

Comment Russir dans la Vente Liens Dans plusieurs sites que je ralise, je prvois un widget affichant les liens que vous voulez mettre en avant (sites amis, par exemple). Exemple : http://www.ebadidon.be/ Cet item du menu gauche gre ces liens (ajout, dition, suppression) Pages Gre la partie du site consistant en pages statiques (par opposition aux articles de type blog). Dans beaucoup des sites que je ralise, il sagit de tout le site sauf les News. Cest par l quon cre/modifie/supprime les pages du site. Commentaires Vous concerne seulement si nous avons intgr un Livre dOr dans votre site, via les commentaires WordPress. Cest par l quon les gre (dition, suppression, jection dans le dossier spam) Profil Gure utile sauf la 1re fois pour changer votre mot de passe. Calendrier Vous concerne seulement si nous avons intgr un agenda dans votre site. Cest par l que cet agenda se gre (ajout dvnements, dition, suppression). Galerie Vous concerne seulement si nous avons intgr une galerie NextGen dans votre site. DMSGuestbook Vous concerne seulement si nous avons intgr un Livre dOr DMSGuestbook dans votre site. Items pas du tout utiles dans notre cas (sauf pour moi, ladministratrice) : Outils / Rglages. A.4. Mises jour de WordPress Il arrivera que, ds la connexion au tableau de bord, un message vous invite faire une mise jour de WordPress ou de certaines de ses extensions. Ne JAMAIS les faire vous-mme car elles ncessitent des oprations pralables de scurit. Par contre, me prvenir pour que je les ralise. A.5. Aide WordPress Bouton Aide (haut du tableau de bord, droite). Ca droule une aide diffrente selon la page du tableau de bord sur laquelle on est. Demandez-moi si vous ne trouvez pas facilement ce que vous cherchez Pour les courageux : Documentation WordPress : http://codex.wordpress.org/fr:Accueil Forum WordPress : http://www.wordpress-fr.net/support/

B) ARTICLES & PAGES Nhsitez pas exprimenter les procdures dcrites dans ce document, mme avec des faux articles ou pages et des faux contenus. Il ny a aucun risque, vous pourrez toujours supprimer ce que vous avez fait. De plus, une page, mme publie, sera invisible et inaccessible partir du site si elle napparat pas dans les menus.

Document1

Page 4 sur 22

Comment Russir dans la Vente B.1. Crer un article ou une page Dans menu gauche : Articles (ou Pages) / Ajouter . Vous vous trouvez alors dans lditeur de texte. Entrer le titre (champs du haut) Pour linstant, laissons le contenu vide. Nous le crerons en abordant le point B.5. : Lditeur de texte . Articles uniquement : droite, sous Catgories , cocher la catgorie laquelle appartiendra larticle ( News dans bien des cas) Pour enregistrer comme brouillon : bouton Enregistrer brouillon dans colonne droite, bloc Publier . Pour Publier vraiment : bouton Publier dans ce mme bloc. Pour donner le statut de brouillon un article ou page dj publis : bouton Modifier la ligne Etat du bloc Publier . L, choisir Brouillon , puis OK , puis Mettre jour . N.B. 1 Les pages dont les titres apparaissent dans les menus et widgets sont dj cres, mme si certaines sont vides ou si leur contenu est bidon. Sinon, je ne pouvais pas crer les menus. A vous de les complter N.B. 2 Seulement moi (admin) peux grer les menus et widgets. Pour quune page que vous crez apparaisse dans un menu ou un widget, demandez-moi de le faire. Par contre, toute nouvelle News (article) que vous crez apparatra automatiquement dans le widget News du site. N.B. 3 Les articles prsents sont tous bidons. Vous pourrez tous les supprimer. B.2. Afficher, modifier, supprimer des articles et des pages Dans menu gauche : Articles (ou Pages) / Tous les articles (ou Toutes les pages) . L, les titres des articles saffichent par ordre chronologique, ceux des pages par ordre alphabtique. Mme les brouillons saffichent. Survoler les articles/pages. Des liens saffichent sous chaque lment survol, vous permettant diverses oprations : Modifier Modification rapide Mettre la corbeille Afficher . N.B. 1 Pour supprimer plusieur articles/pages la fois : Cocher les lments dsirs En haut de la liste : Actions groupes/Dplacer dans la corbeille/Appliquer N.B. 2 Si un article/page est mis la corbeille par erreur, il peut tre restaur : Bouton Corbeille , haut de la page, puis Restaurer sous larticle/page dsir.
B.3. Page enfant dune page parent Autant les articles sont organiss en catgories, autant les pages : non. Par contre, soit quand vous la crez, soit plus tard en lditant, vous pouve z faire en sorte quune page soit lenfant (niveau hirarchique infrieur) dune autre page. Exemple : Une page parent : Pays visits 3 pages enfants : Australie, Espagne, Norvge Cest utile divers gards : la hirarchie des menus (si on dcide de rendre celle-ci visible) une organisation visuellement plus prcise des pages dans Pages/Toutes les pages (les pages-enfants saffichent en retrait) la prcision du breadcrumb du frontend : cest la ligne sous le menu du haut et celle en bas de page, qui listent les niveaux hirarchiques jusqu la page en cours.

Document1

Page 5 sur 22

Comment Russir dans la Vente Pour ce faire, dans lditeur de texte, colonne droite, bloc Attributs de la page : drouler la liste sous Parent et slectionner la page que vous voulez tre le parent de celle que vous tes en train de crer ou dditer.
B.4. Limiter laccs certaines pages Une page publie mais non reprise dans les menus ne sera pas accessible aux visiteurs. Nanmoins, si ceux-ci utilisent la fonction Search de votre site ou visitent votre Flux RSS, cette page pourrait apparatre. Voici comment viter cela. B.4.1. Etat Brouillon dune page Du coup, cette page ne sera accessible qu moi (administratrice) et vous (diteur), quand nous sommes connects. Dans colonne droite, bloc Publier , ligne Etat , cliquer Modifier Cocher Brouillon , puis cliquer OK , puis Mettre jour B.4.2. Visibilit Prive dune page Tout comme pour une page brouillon, il faut tre connect pour voir cette page. La diffrence est que la page est nanmoins publie, donc quelque part plus solidement ancre dans le site, donc plus scurise. Dans colonne droite, bloc Publier , ligne Visibilit , cliquer Modifier Cocher Priv , puis OK , puis Mettre jour B.4.3. Protger une page par mot de passe But : ne permettre laccs cette page quaux visiteurs ayant reu le mot de passe de cette page (par e-mail par exemple). Pour ce faire, dans la page dditeur de texte, Dans colonne droite, bloc Publier , ligne Visibilit , cliquer Modifier Cocher Protg par mot de passe Entrer le mot de passe de votre choix puis OK , puis Mettre jour A SAVOIR : on ne peut tester la page en question ( Voir la page dans menu haut) quune seule fois. Aprs a, la page saffichera sans vous demander le mot de passe nouveau car WordPress aura retenu ladresse IP de votre ordi (ou quelque chose du genre). Vous ne pourrez retester la demande de mot de passe quaprs avoir vid le cache de votre navigateur, voir teint puis redmarr votre ordinateur (et encore, pas sr je nai pas test). Mais bon un seul test devrait suffire

B.5. Lditeur de texte B.5.1. Intro Cest la fentre affiche quand vous crez ou modifiez un artilcle ou page. Beaucoup dicnes de lditeur sont videntes et se comportent comme dans Word. De plus, bulles dinfo au survol souris. Je nexpliquerai ici que les boutons et icnes entranant des oprations particulires. Plugin employ pour enrichir lditeur par dfaut : Ultimate TinyMCE
B.5.2. Prvisualiser Bouton Aperu ou Prvisualiser , dans le bloc Publier de la colonne droite. A tout moment vous pouvez prvisualiser votre travail avant de le publier ou mme de lenregistrer comme brouillon. Ce bouton ouvre automatiquement un nouvel onglet (ou nouvelle fentre si pas donglets) dans votre navigateur. N.B. Pour voir larticle ou page, une fois enregistr comme brouillon ou publi : bouton Voir larticle ou Voir la page , menu haut du tableau de bord.

Document1

Page 6 sur 22

Comment Russir dans la Vente

B.5.3. Agrandir la fentre de lditeur de texte Par dfaut, sa hauteur est trs rduite. Pas pratique. Pour laugmenter, placer la souris sur le coin infrieur droit de lditeur lui-mme (au niveau de la ligne grise qui dit Compteur de mots ), maintenir le bouton gauche enfonc et tirer vers le bas. (Limage ci-dessous concerne la suite)

B.5.4. Mode Visuel / Mode HTML (1) (14) Longlet Visuel doit tre slectionn. Si vous voyez les icnes de lditeur telles que sur limage ci-dessus, cest que vous y tes. Si vous vous vous y connaissez en HTML et dsirez entrer/diter du code, prfrez l icne (14) (bien plus pratique) l icne (1)

B.5.5. Afficher lditeur complet (2) Icne (2) . Vous aurez ainsi un maximum de possibilits.
B.5.6. Coller du texte (8) (14) Vous pouvez bien sr entrer du texte directement au clavier mais il vous arrivera sans doute de coller du texte copi. Tout collage de texte ne peut se faire quavec les touches ctrl+V (ou Commande+V si Mac). Pour raisons de scurit technique, WordPress empche le clic droit/coller. 1) Copier/coller en interne Cest dire coller du texte copi partir du mme article/page ou dun autre article/page de votre site. Par exemple, copier un extrait dune page A vers une page B. Dans ce cas, copier partir de lEDITEUR de la page A (pas du frontend). Ensuite coller normalement dans lditeur de la page B ( Ctrl+V ) Pour coller un article ou page entier dans un/e autre, le moyen le plus sr pour ne rien perdre de la mise en page et des fonctions spciales est de copier/coller la page sous sa forme HTML Dans la page dorigine : icne (14) puis slectionner et copier (CTRL+C) lensemble du code Dans la page de destination : icne (14) puis coller (CTRL+V) et Mettre jour

2) Coller du texte copi ailleurs (Word, page web,) Dans ce cas, ne JAMAIS coller du texte directement dans lditeur. Cela poserait des problmes de format de texte (pas forcment visibles de suite). Il faut employer l Icone (8) o Dans la petite fentre, insrer le texte avec ctrl+V puis cliquer Insrer

Document1

Page 7 sur 22

Comment Russir dans la Vente Dans lditeur, formatter votre texte votre guise (voir points suivants) N.B. L Icone (7) sert en principe insrer du texte Word en conservant son formatage mais je vous la dconseille ; a marche mal et entrane des soucis.
o

B.5.7. Styles des entres (11) Paragraphe Par dfaut le style du texte que vous entrez (tapez ou collez) est Paragraphe. Il est bon que, autant que possible, tous vos blocs de texte (mmes les lignes isoles) soient de ce style. Par dfaut, tout saut de ligne la fin dun paragraphe cre un interligne. Pour lviter : Shift+Enter (au lieu de juste Enter) Titres Pour les titres et sous-titres, prfrer les styles Titre (Titre 1, 2, 3, etc) un formatage manuel (gras, taille de police). Cest + rapide, + propre et a permet une hirarchisation automatique utile pour lventuelle table des matires. Format Pour info, quand le curseur est sur un texte au format particulier (par exemple, une liste), le champs des styles affiche automatiquement Format. Laisser comme a.
B.5.8. Ajouter des interlignes (15) Souvent, taper Enter plus dune fois ne suffit pas ce que des interlignes soient ajouts sur le Front end. Pour plusieurs interlignes, il vaut mieux : Icne (15) , puis choisir le shortcode appel break autant de fois que dsir N.B. Depuis peu, le look de licne (15) a t modifi. Elle consiste maintenant en une espce de grosse barre rouge.

B.5.9. Listes ( puces et ordonnes) (9) o Entrer les lignes qui composeront votre liste avec un simple Enter comme saut de ligne (pas Shift+Enter). o Slectionner lensemble des lignes et cliquer sur l icne (9) Par dfaut, il ny aura pas dinterligne entre les items dune liste. Si vous dsirez un interligne (sans que sajoute une puce ou un numro devant la ligne vide), faites ce qui suit aprs que votre liste est cre : cliquer Enter en fin de ligne (une puce indsire saffiche) cliquer Enter une seconde fois (la puce disparat mais il y a un interligne en trop) Touche Retour arrire du clavier pour supprimer cet interligne en trop. Pour crer une sous-liste sous un item de liste, procder de la mme manire (liste normale), puis slectionner cette sous-liste et lui appliquer un retrait droite (cest une des icnes de lditeur de texte, comme dans Word)

Document1

Page 8 sur 22

Comment Russir dans la Vente

B.5.10. Liens : insrer/diter/supprimer (4) (5) Pour insrer un lien :Taper votre mot ou texte dans lditeur et ensuite, le slectionner o Cliquer sur l icne (5) o Si lURL est une de vos pages/articles, cliquer sur Ou alors faite un lien vers et slectionner la page ou article Conseil : dcocher dans ce cas la case Ouvrir le lien dans une nouvelle fentre/un nouvel onglet Bouton Ajouter un lien o Sil sagit dune URL externe votre site, entrer l URL dsire (1er champ) Conseil : cocher dans ce cas la case Ouvrir le lien dans une nouvelle fentre/un nouvel onglet Bouton Ajouter un lien Pour diter un lien (modifier lURL), simplement placer le curseur nimporte o sur le texte li et cliquer sur l icne (5) Pour supprimer un lien : idem mais cliquer l icne (4) (L icne (3) sert des fonctions plus avances que nous naborderons pas ici)

B.5.11. Ancres : insrer/lier/supprimer (16) (4) Une ancre permet un lien interne un article/page, pour une navigation plus aise lintrieur de cette page. Par exemple : une ligne Retour haut de page qui, quand elle est clique, affiche le haut de la page (lancre), comme ici > http://www.aljabal.be/spectacles_dedanspasdehors.html Insrer une ancre o Placer le curseur lendroit dsir (par ex., pour un retour haut de page, devant le tout premier mot de la page, mme si cest un titre) o Icne (16) o Dans cette fentre, donner un nom lancre. Ex. : hautpage. Puis Insre r Dans lditeur saffiche une petite ancre lendroit dinsertion. Lier un lment une ancre o Slectionner llment (par ex. la ligne Retour haut de page ) et cliquer l icne dinsertion avance de lien (4) o Au lieu dentrer une URL, drouler la liste Anchors et slectionner lancre dsire. o Insrer Supprimer une ancre Cliquer sur lancre, puis Ctrl+X (pour couper)

Document1

Page 9 sur 22

Comment Russir dans la Vente N.B. Mon exemple Retour haut de page est peu pertinent car, dans les sites que je ralise, je configure un bouton automatique apparaissant au bas de toute longue page. Mais bon, le principe reste valable.
B.5.12. Tableaux : insrer/diter/supprimer (12) Insrer un tableau : icne (12) / Insrer une nouvelle table Editer : Editer les attributs du tableau global : curseur nimporte o sur le tableau, puis icne (12) / Insrer une nouvelle table (bizarre mais cest ainsi) Editer une cellule (cells) dune ligne (row) ou toute une ligne : icne (12) / Proprits de la N.B. Dans la fentre ddition, aprs votre modification, penser slectionner Update current cell/row ou Update all cells/rows in table , avant de cliquer sur Mettre jour . Les autres items du menu droulant servent aussi formater le tableau (comme dans Word)

Supprimer : curseur dans le tableau, puis icne (12) / Supprimer le tableau Le comportement des tableaux dans WordPress nest pas forcment simple. Si vous avez des soucis pour configurer un tableau, je pourrai soit vous guider, soit le configurer pour vous. ! Important savoir : Pour l alignement du texte et des images dans les cellules dun tableau, EVITER dutiliser les icnes dalignement de lditeur de texte (centr, justifi, etc) car a dconne. o Pour du texte, modifier les alignements (horiz. et vertic.) via l icne (12) / Proprits de la cellule o Pour lalignement horizontal des images, cest via les proprits de limage, en linsrant ou en lditant aprs coup (voir point suivant : Mdias)

B.5.13. Images : insrer/diter/supprimer (10) B.5.13.1. Insrer une image a) Rduire la taille et le poids des images avant de les tlcharger CE POINT EST IMPORTANT pour conomiser lespace utilis sur votre serveur et donc pour amliorer les performances de votre site. Voir le mode demploi Rduire taille et poids des images b) Placer le curseur lendroit dsir

Document1

Page 10 sur 22

Comment Russir dans la Vente c) Icne (10) . Une fentre dinsertion souvre d) Ici, 3 cas de figure : 1. Si limage existe dj dans la Bibliothque des mdias, cliquer en haut sur Bibliothque , ce qui affiche les miniatures des images 2. Sil sagit dune nouvelle image, cliquer sur Envoyer des fichiers , puis slectionne limage depuis votre disque dur. Elle se tlchargera. 3. Si limage est dans une galerie associe au site (jAlbum par exemple), elle existe sur le serveur, donc inutile de la tlcharger nouveau (sauf si elle est trs lourde ; mieux vaut alors tlcharger sur WordPress une version rduite) : Cliquer sur Insrer partir dune adresse web et coller lURL de limage dans le champs Adresse web de limage, lui attribuer un titre ventuellement, puis cliquer Insrer dans la page Pour obtenir cette URL, aller dans la galerie via le site (frontend), dployer limage concerne, puis clic droit/Copier ladresse de limage e) A partir de l, dans les 3 cas, cliquer sur limage dsire pour la sctionner, puis soccuper des champs affichs dans la fentre de droite Seuls les champs ci-dessous ont de lintrt (les autres, laissez-les vides). Titre : par dfaut, cest le nom du fichier. Ne le laisser (tel quel ou modifi) que si vous voulez quune bulle apparaisse au survol souris. Cette bulle affichera le titre de limage. Pour viter cette bulle, laisser ce champs vide. Lgende : Seulement si vous en voulez une sous limage Texte alternatif : Utile pour les visiteurs mal voyants ne pouvant voir limage. Alignement : au choix ( voir + bas pour dtails ) Lier : Cliquer Aucun (car si vous voulez lier limage une page web, il vaut mieux le faire aprs, par lditeur de texte) Taille : au choix N.B. Si les tailles proposes ne vous conviennent pas, choisissez Taille originale . Plus tard, vous pourrez diter limage et avoir plus de libert de choix (point B.5.13.2.) f) Cliquer sur Insrer dans page/article N.B. On peut aussi ajouter un mdia dans la bibliothque sans ou avant de linsrer dans un article/page. Dans colonne gauche : Mdias/Ajouter Lalignement des images Aucun Centr Gauche Droite

N.B. 1 : Dans lditeur de texte, le texte saffiche coll limage. Pas de souci. Sur le frontend, limage sera bien entoure dune marge. N.B. 2 : !!! Pour aligner une image droite, on la place quand mme juste devant le texte (donc, paradoxalement, sa gauche) et on choisit alignement droite. Elle se mettra automatiquement la droite du texte.

Document1

Page 11 sur 22

Comment Russir dans la Vente N.B. 3 : On peut mettre plusieurs images sur une ligne. Exemple :

Limage A est aligne gauche (sinon, limage B se mettrait dessous) ; limage B est insre aprs limage A et est aussi aligne gauche (sinon le texte se mettrait dessous) N.B. 4 : Pour aligner une image droite et que le texte se place dessous (plutt qu sa gauche), il suffit de presser Enter juste devant le texte, autant de fois quil est ncessaire. Si souci pour imposer des interlignes, voir point B.5.18 N.B. 5 : Pour obtenir ceci : (cest tout simple)

Cest dire texte et image en ligne mais les portions de texte se placent au niveau du bas de limage (et pas au niveau du haut comme ce serait le cas si limage tait aligne gauche ou droite). Il faut savoir quen ralit avec lalignement AUCUN, le texte se place qd mme a c t de limage mais au niveau du bas. Il faut presser Enter une fois devant le texte (ce qui cre un nouveau paragraphe) pour que, avec alignement AUCUN, le texte soit rellement sous limage. Donc, pour obtenir ce quon voit sur limage ci-dessus : Ecrire le texte : Logo Ebadidon : Soya Bandita Insrer limage entre Logo Ebadidon et : Zoya Bandita en choisissant l alignement Aucun Eventuellement ajouter des espaces autour de limage. B.5.13.2. Editer une image Pour modifier les attributs dune image (taille, alignement, etc) : cliquer sur limage puis sur l icne ddition qui apparat. Pour lier limage une page web, cest comme pour du texte : icne (5) (voir point B.5.10. : Liens )

Pour ajouter / supprimer une bordure: Cliquer sur limage puis sur son icne ddition , puis longlet Options avances L : Options avances de limage / Proprits de limage / Bordure , taper le chiffre 0 (pas de bordure) ou 1 ou 2, etc (paisseur dune bordure) Mettre jour , puis dans colonne droite, encore Mettre jour

B.5.13.3. Supprimer une image Cliquer sur limage puis sur l icne de suppression qui apparat. Si vous ne voulez plus du tout de cette image sur le site, pensez la supprimer de la Bibliothque galement. Menu gauche : Mdias/Bibliothque

Document1

Page 12 sur 22

Comment Russir dans la Vente

B.5.13 Insrer une image clip art Il sagit dune icne napparaissant pas sur le schma montr ici. Cest un C blanc sur fond vert et rouge. Elle permet de rechercher des images de type clip art et de les insrer dans la page. La recherche se fait par mots cls en anglais.

B.5.14. Mettre une image la une dun article/page Leffet, cest comme la photo ici : http://www.ebadidon.be/atelier-theatre-ados/ ou le petit cahier ici : http://www.ebadidon.be/livre-d-or/ Les dimensions seront automatiquement rduites (ni la larg. ni la haut. ne dpasseront 150 pixels). Tout en bas de la colonne droite, cliquer sur Mettre une image la une Aprs, mme processus que pour insrer une image, sauf que o On ne soccupe pas des champs Alignement et Taille o En fin de processus, dans la fentre dinsertion, il faut clique r sur Insrer en tant quimage la une plutt que sur Insrer dans larticle . N.B. 1 : L image la une ne se voit pas dans lditeur mais seulement en prvisualisant ou directement sur le frontend aprs publication ou mise jour. N.B. 2 : Pour supprimer une image la une : bouton dans la colonne droite. N.B. 3 : Sur le frontend, une image la une affiche obligatoirement une bulle au survol de la souris, contenant le Titre de limage. Par dfaut, cest le nom de fichier. Pas de bulle, cest impossible mais on peut modifier ce titre. Un seul moyen : Mdias , puis Modifier limage concerne pour en changer le Titre . B.5.15. Fichiers tlcharger (10) N.B. Tout comme les images, les fichiers attachs sont stocks dans Mdias/Bibliothque . La procdure est trs proche de celle concernant les images. B.5.15.1. Permettre au visiteur douvrir un fichier attach (PDF, Word, etc) Exemple : http://www.aljabal.be/palestine_recitsdevoyages.html a) Placer le curseur lendroit dsir dans larticle/page b) Icne (10) . Une fentre dinsertion souvre c) 1. Si le fichier existe dj dans la Bibliothque des mdias, cliquer en haut sur Bibliothque , puis, la ligne du fichier dsir, sur Afficher 2. Sil sagit dun nouveau fichier, cliquer sur Depuis votre ordinateur , puis slectionnez-la depuis votre disque dur. Il se tlchargera.

Document1

Page 13 sur 22

Comment Russir dans la Vente d) A partir de l, dans les 2 cas, les mmes champs apparaissent dans la fentre dinsertion de fichier. Seuls les champs ci-dessous ont de lintrt (les autres, laissez-les vides). Titre : crire le titre du fichier, tel que vous voulez quil apparasse lcran (si vous vous trompez, vous pourrez facilement corriger par la suite, directement dans lditeur de texte) Cible du lien : slectionner Adresse web du fichier e) Cliquer sur Insrer dans larticle , puis fermer la fentre dinsertion quand termin. f) Placer le curseur nimporte o sur ce titre ou texte, puis icne (5) . L, cocher la case Ouvrir le lien dans une nouvelle fentre/un nouvel onglet (cest plus propre ainsi tant donn quil sagit dun fichier attach et non dune page de votre site) N.B. On peut aussi ajouter un fichier dans la bibliothque sans ou avant de l insrer dans un article/page. Dans colonne gauche : Mdias/Ajouter B.5.15.2. Permettre au visiteur de tlcharger un fichier compress (.zip par exemple) Exemple : http://www.ajwan.net/creagraph_galerie/emoticones.html Suivre exactement la mme procdure que ci-dessus (B.5.15.1.) sauf quil ny a pas besoin de faire ouvrir le lien dans une nouvelle fentre (point f). Pour le visiteur : en cliquant sur le lien, il obtiendra automatiquement une petite fentre popup de tlchargement. N.B. On peut aussi ajouter un fichier dans la bibliothque sans ou avant de linsrer dans un article/page. Dans colonne gauche : Mdias/Ajouter B.5.16. Table des matires dans un article ou page Plugin employ : Table of Contents Plus Elle sinsrera automatiquement (visible seulement sur le frontend) ds que larticle/page contient au moins 2 titres. Elle se placera juste avant le premier des titres. Pour dsactiver la table des matires dans un article ou page, placer le curseur nimporte o dans larticle/page, puis icne (15) et slectionner le shortcode no-toc . Le + pratique est dinsrer ce shortcode no toc juste devant le premier mot de la page. Bien sr cest un code et il ne saffichera pas sur le frontend. A savoir : (13) Par dfaut, le dbut du texte arrivant aprs la table des mat se place sa droite. Si vous voulez quil se place dessous, il faut passer par le style CSS ( icne (13) ) : Slectionner le premier bloc de texte concern (en principe, le 1er titre) Ensuite, icne (13)/Box Dans le champs Clear , slectionner Left puis cliquer sur Mettre jour Et si vous voulez plus de hauteur entre le bas de la table des m. et le dbut du texte, utilisez l icne (15) / break

Document1

Page 14 sur 22

Comment Russir dans la Vente

Lidal ( mon sens) lorsquon veut que le texte commence sous la table des matires, sans y tre trop coll, donc pour obtenir ceci sur le frontend

cest de commencer par un shortcode Break (icne (15) ) en format paragraphe, puis dajouter un shortcode Break juste devant le 1er titre (donc en format h1 ou h2, etc). Comme ceci Et, bien sr, dappliquer Clear left au 1er titre par l icne (13)
B.5.17. Fentres popup (3) (4) Ceci ne vous concerne que si nous avons prvu que votre site afficherait quelques fentres popup. 1. Crer une page qui sera une fentre popup o Crer une page comme lhabitude sauf que dans la colonne droite, bloc Attributs , champs Modle , il faut slectionner Popupwindow . Cest ce qui vitera cette page de contenir la bannire, les menus et les widgets. Aussi, pour une bonne organisation des pages, veiller ce que cette page popup soit l enfant dune page-parent (la page o sera le lien qui appelera la popup) Exception : pas de page parent si cest une popup gnrale qui sera appele par plusieurs pages du site.

2. Lien vers une fentre popup : crer, diter, supprimer o Pour crer le lien Slectionner le texte ou limage qui sera un lien Cliquer l icne (3) puis l onglet Popup Cocher Javascript popup Entrer l URL de la page popup que vous avez cre

Document1

Page 15 sur 22

Comment Russir dans la Vente Champs Size : 780 (largeur). La hauteur, vous la choisissez mais le maximum = 600 (sinon la popup dpassera lcran et cest inconfortable . De toute faon, si la hauteur du contenu fait + que 600, il y aurra un barre de dfilement droite) Champs Position : 0/0 pour coin sup. gauche OU c/0 pour centr haut N.B. Ne jamais laisser ce champs Position vide car alors certains navigateurs (I.E. ou autres) se comporteront bizarrement. Sous Options , cocher Show scrollbars et Insert return false . Laisser les autres options non coches. Cliquer Insrer o Pour diter le lien (pour modifier lURL ou les attributs de la popup) Cliquer nimporte o sur le lien (texte ou image). La popup souvrira, ce dont on na pas besoin, donc on la ferme. Icne (3)/Onglet Popup puis modifier ce quon veut. o Pour supprimer le lien Cliquer nimporte o sur le lien (texte ou image) puis icne (4) B.5.18. Rsoudre quelques soucis de styles (13) Que ce soit en dessous (ou au-dessus) dun paragraphe, un titre, une image, une liste, etc, il est parfois difficile dobtenir plus dun interligne : on clique Entrer plusieurs fois mais aprs la mise jour de larticle/page, WordPress na parfois pas pris en compte cette modification. Le mme genre de souci peut aussi se passer (plus rarement) avec des retraits de texte ou de listes vers la gauche. Voici comment pallier ces soucis et quelques autres. B.5.18.1. La notion de BOX (bote) et de Style CSS Cette notion nest pas absolument ncessaire pour appliquer les solutions. Si vous prfrez, vous pouvez directement passer au point B.5.18.2. Pour + dexplications sur le rapport entre HTML et CSS, voir ICI Tout lment de votre contenu est inclus dans une Box (bote). Derrire tous vos contenus se cache du codage HTML et CSS (entre autres). Le HTML dtermine la nature des Box (ex. un paragraphe), leur succession et leur imbrication. Le CSS dtermine le style des Boxes : couleurs, polices, tailles, marges, etc. Le CSS est comparable une feuille de style en Word. Limage ci-dessous reprsente une portion de page :

Sur les 2 images ci-dessous : la succession et limbrication des diffrentes Boxes.

Document1

Page 16 sur 22

Comment Russir dans la Vente

- Par dfaut, tout lment fait partie dune box. Par ex. un mot fait partie de la Box de son paragraphe. - Ds que vous assignez un style particulier un extrait grce aux icnes de lditeur (ex. gras, soulign, lien, etc.), cet extrait devient une box imbrique dans la box du niveau qui la prcde. Ici, Box Extrait gras est une Box imbrique dans Box Paragr. 1 . - Ce que jai appel ici les Boxes suprieures sont multiples et dfinies par WordPress. Leur succession et imbrications ainsi que leurs styles (CSS) sont dfinis par le thme que jai cr pour votre site. Ces styles sont les styles par dfaut de vos contenus.

Document1

Page 17 sur 22

Comment Russir dans la Vente Par ex. dans le thme de ce site, jai dfini que, par dfaut, la taille du texte est de 13 pixels, que les titres de niveau 1 sont gras et de 20 pixels, que les liens sont bleus, etc. - Vous navez pas accs aux Boxes suprieures mais vous avez accs aux autres Boxes . Vous pouvez en changer le style grce plusieurs des icnes de lditeur (ex. gras, soulign, liste, lien, etc.) mais les possibilits sont limites (car ces modifications sont codes en HTML et non en CSS) grce l icne (13) pour des possibilits + nombreuses (car elles sont codes en CSS) - Pour changer le style CSS dune Box par l icne (13) , pas besoin de pralablement slectionner toute cette Box. Il suffit de cliquer nimporte o dans la Box. La modification affectera lensemble de la Box. - Quand vous changez le style dune Box, automatiquement les Boxes imbriques dans cette Box subiront le changement aussi. - Un des onglets de l icne (13) est nomm Box. Nanmoins, lensemble des onglets de cette icne concernent les Boxes. B.5.18.2. Augmenter un retrait gauche ou droite Notamment quand il sagit dune liste, licne habituelle permettant un retrait ne donne pas satisfaction. Pour pallier au problme, nous allons attribuer une marge gauche la Box Cliquer nimporte o dans le bloc concern ou slectionner dans le cas dun extrait comprenant plusieurs blocs Icne (13)/Box Dans le bloc Margin : dcocher Same for all, puis la ligne Left slectionner Pixels et attribuer une valeur (pour la valeur, procdez par essais et erreurs) Cliquer Apply pour voir la modif. directement dans lditeur de texte, puis cliquer Mettre jour Cliquer Mettre jour dans colonne droite
B.5.18.3. Forcer du texte SOUS une image aligne gauche ou droite Ci-dessous, limage est aligne gauche et, tout comme le 1er paragraphe, le dbut du 2me paragraphe ( Nam ultricies ) est positionn la droite de limage.

Imaginons que vous vouliez que ce 2me paragraphe commence sous limage (comme cidessous) :

Document1

Page 18 sur 22

Comment Russir dans la Vente

Cliquer nimporte o dans le 2me paragraphe Icne (13)/Box/Clear/Left ( Clear/Right si limage tait aligne droite) Cliquer Mettre jour , puis encore Mettre jour dans la colonne droite B.5.18.4. Rendre du texte color sa couleur par dfaut

Placer le curseur nimporte o sur lextrait color ou le slectionner Icne (17) N.B. Ceci marche galement pour supprimer plusieurs types de styles (gras, italique, taille de police)
o o C) Grer le WIDGET contenant une LISTE DE LIENS (ne vous concerne que si votre site contient ce genre de widget) Ajouter un lien Dans colonne gauche : Liens/Ajouter Complter le champ Nom (ex. Ziboulette), le champs Adresse web (son URL complte), ventuellement le champs Description (ex. Epicerie fine). Cette description apparatra dans une bulle au survol de la souris. Cocher la catgorie dsire Dans le bloc Cible : cocher _blank nouvelle fentre ou onglet si dsir. En gnral ce sera le cas car il sagit souvent de liens externes. Il est prfrable quils souvrent dans une nouvelle fentre ou onglet pour que le visiteur ne perde pas votre site. Pour une ouverture dans mme fentre ou onglet, cocher None Colonne droite : Ajouter un lien

Document1

Page 19 sur 22

Comment Russir dans la Vente Le lien ajout sajoutera automatiquement dans le widget concern. Editer/Supprimer un lien Dans colonne gauche : Liens/Tous les liens Au survol souris, les options Modifier et Supprimer saffichent sous chaque lien.

D) Grer votre AGENDA/CALENDRIER (ne vous concerne que si votre site contient cette fonction) Plugin employ : Ajax Event Calendar D.1. Catgories dvnements Pour ajouter, diter, supprimer des catgories : dans colonne gauche : Calendrier/Catgories D.2. Evnements : ajouter, diter, supprimer Dans colonne gauche : Calendrier/Calendrier Ajouter un vnement Choisir l anne et le mois (haut gauche), puir la vue mois ou semaine (haut droite) Cliquer sur la case du jour dsir ( heure si vue semaine) Dans la fentre ddition, complter les champs puis cliquer sur Ajouter A savoir : On peut laisser des champs vides. Rcurrence : complter ce champs si un vnement se rpte rgulirement. Une fois le chiffre Tous les choisi dans la liste, un autre choix sera propos (jours, semaines, mois, annes) Lien du site : ne complter ce champs que sil sagit dun site externe car le lien ouvrira celui-ci dans une nouvelle fentre/onglet. Pour un lien interne (page de votre site), mieux vaut intgrer lURL dans le champs Description . Voici le code pour intgrer un lien dans Description : (Copier partir de <a. Seules les parties en majuscules sont remplacer. Les guillemets font partie du code)
<a href="URL DE LA PAGE" tar

<a href="URL DE LA PAGE" target="_self"> TEXTE DU LIEN </a>

Editer ou supprimer un vnement Cliquer sur lvnement, puis dans la fentre ddition : modifier les champs ou Supprimer (bouton bas droite)

Document1

Page 20 sur 22

Comment Russir dans la Vente Voir votre agenda mme sil nest pas encore publi - Aller dans Pages/Toutes les pages - L, une des pages (nomme Agenda ?) contient les codes permettant dafficher votre agenda - Survoler le titre de cette page et dessous, cliquer sur Afficher E) Grer votre LIVRE DOR Si votre site contient un livre dor, je lai mis en place selon lun des 2 systme s suivants Dans les 2 cas, vous recevrez un email chaque fois quun message sera laiss dans le livre dor.

E.1. Les commentaires de WordPress Pour grer les commentaires, se connecter WordPress, ouvrir la page Livre dOr. Sous le nom de chaque auteur, vous verrez des liens vous permettant dditer et de supprimer des messages ou mme de les envoyer dans le dossier spam. Pour vrifier les messages indsirables (spams) : Page daccueil du tableau de bord/bloc Ajourdhui/Colonne Discussion . Cliquer sur Indsirable si le chiffre est suprieur 0. L, vous pourrez alors soit restaurer ce message, soit le supprimer dfinitivement. Conseil : Faites cette vrification rgulirement car lorsque le systme de scurit de WordPress dtecte un spam, vous ne recevez pas demail pour ce message. Or WordPress est svre, il se peut quil ait considr comme spam un message bienveillant. E.2. Le plugin (extension) DMSGuestBook Dans colonne gauche : Guestbook/Entries , vous pouvez diter et supprimer des messages ou mme les mettre dans le dossier Spam sil sagissait dun auteur indsirable. Pour vrifier les messages indsirables (spams) : dans colonne gauche, DMSGuestbook/Spam . L, vous pourrez alors soit restaurer ce message, soit le supprimer dfinitivement. Conseil : Faites cette vrification rgulirement car lorsque le systme de scurit de WordPress dtecte un spam, vous ne recevez pas demail pour ce message. Or WordPress est svre, il se peut quil ait considr comme spam un message bienveillant.

F) MNAGE ET BONNES PRATIQUES (rappels) Me prvenir lorsquun message annonce une mise jour disponible de WordPress. Toute image insre dans un article ou page partir de votre ordinateur se mettra automatiquement dans la Bibliothque des mdias (colonne gauche). o Donc, si vous la rutilisez ailleurs dans un autre article/page, allez la chercher dans la bibliothque plutt que de la tlcharger une 2me fois (voir point B.5.13.1.) Idem si limage est dans la galerie jAlbum et donc sur le serveur. Entrer son URL au lieu de la tlcharger (voir point B.5.13) Vrifiez de temps en temps la bibliothque et videz-la dventuelles images qui ne servent plus (mais laissez-y celles que jy ai places en construisant le site, bien sr

Document1

Page 21 sur 22

Comment Russir dans la Vente : admin apparat dans la colonne Auteur) o Truc : Les images non utilises affichent (Non attach) dans la colonne Attach (mais de nouveau, laissez les images non attaches places l par admin). Idem avec la liste des articles et pages. Veillez quil ny reste pas des articles/pages ou brouillons obsoltes. Nettoyer de temps en temps la corbeille des articles et pages : o Articles (ou pages)/Tous les articles (ou Toutes les pages)/Corbeille o Cocher Titre pour tout slectionner o Actions groupes/Supprimer dfinitivement/Appliquer Si votre site contient un livre dor, vrifier rgulirement si des spams ont t dtects et ventuellement restaurer ces messages ou les supprimer dfinitivement.

Document1

Page 22 sur 22