Formation Construction d'un site web avec WordPress sur mesure pour savoir plus www.ithelp4u.fr

1. WordPress
Fondamentaux
Antonio Soto
www.ithelp4u.ca/fr jsoto2000@gmail.com
SOFTWARE ENGINEER, MCT, MCP, MCDBA, MCAD

2. PLAN
2
Pourquoi WordPress
Créer un blogue sur wordpress.com
Définir les réglages
Publier et gérer les pages / articles
Insérer des images
Les Widgets
Les Menus
Gérer les utilisateurs
Qu'est-ce que le RSS

3. Pourquoi WordPress
WordPress permet
la gestion d’un site
en toute simplicité
sans avoir à
connaitre les
langages de
programmations
d’un site web ou
d’un blog.

4. WordPress
• CMS(Gestionnaire de Contenu)
WordPress, un outil libre, gratuit… et
intuitif ! A partir d'une page HTML/CSS
statique, entrez dans le monde des sites
dynamiques.
• Objectif: Savoir créer et déployer un
site WP.
4

5. Pour quoi WordPress
• Il suffit d’un navigateur Web
• Multitude de thèmes
• Plug in pour ajouter des fonctions
• Intégration des galeries photo directe ou
externe
• Facilité d’utilisation
• Gratuit
• Communauté forum d’aide
5

6. 6
Système de Gestion de Contenu

7. Les Gestionnaires de contenus
• CMS (content management system)
– Permettent de créer des sites Web rapidement
– Séparation forme et contenu
– Mise a jour dynamique de sites
– Gestion des utilisateurs et des droits
– Bureau interface Homme Machine (front Office)
– Gestion des contenus (Back Office)
• Logiciels de type CMS
– Mise en forme teste , liens ..;
– Possibilités de réagir par des commentaires
– Liaisons possible avec canaux (ou fils ou flux) RSS
7

8. 8

9. cPanel
9

10. Donc n’oubliez pas :
• Choisir un bon nom de domaine pour votre
site (meilleur référencement)
• Utilisez préférentiellement un hébergeur
payant !
• Customisez votre site avec le thème que vous
voulez et les plugins que vous voulez !!!
10

11. Etape de planification
Répondez aux questions suivantes :
• Que vais-je faire de mon site ?
• Qui va lire mon site ?
• Quel type d'informations vais-je y mettre ?
• Pourquoi fais-je cela ?
• Pour qui fais-je cela ?
• Que sera la périodicité de mes mises à jour ?
11

12. Plan du site (exemple)
Pages
Accueil (1 video)
Presentation (2 images)
Contact (plugin)
Categories
Actualités
Évènements
À lire
- Mettons trois des vos articles
(post) de test dans des catégories
pour voir comment ça marche.
- Préparation d'images: (PS)
12
Mot clé: 5
(SEO Référencement)
Nos lien préférés chercher sociaux
d'affaires
RSS: Sélectionner information
d'autres sites Web, (des nouvelles
de l'extérieur)
Thèmes: Sélectionner un modèle de
trois colonnes
Banner
Gallerie de photos (plugin)

13. Créer un blogue
sur
wordpress.com

14. Créer un compte
Pour créer un compte et démarrer son blogue, voici les étapes :
‣ Rendez-vous à l’adresse suivante : http://WordPress.com/
‣ Choisissez la version française du système (si désiré)
‣ Cliquez sur le gros bouton « Inscrivez-vous » (Sign-up now !) – di"cile
à manquer…
14

15. Définir
les
Réglages

16. 16

17. l’interface d’administration.
17

18. Publier et Gérer les
Pages / Articles
Les panneaux Articles,
Médias et Pages vous
permettent d’alimenter
votre site.

19. Quelle différence y a-t-il entre une page et un article ?
• Les pages et les articles sont 2 moyens de publications
différents.
• Les pages sont des données statiques dans votre site.
Contrairement aux articles, il sont indépendants du temps
et de la chronologie de création. Une page peut contenir
des informations statiques telles que votre CV, une page de
contact, votre portfolio, ou tout simplement une
présentation de votre blog et de vous.
• Les articles, objectif même du blog, vous permettent de
publier des actualités, celles-ci sont affichées par date de
publication.
19

20. Ecrire une nouvelle page
20

21. LES ARTICLES
21

22. L’Editeur de Texte
22

23. Créer un lien
23

24. 24

25. 25

26. Extrait - Articles
26

27. Modifier les articles
27

28. Settings Articles

29. Différence entre un tag et une catégorie.
• Les tags sont importants pour le référencement
surtout.
• Il faut utiliser les catégories afin de "classer" le
contenu et gérer l' affichage des articles en
ajoutant des tags à chaque articles afin de
faciliter la recherche et leur réferencement.
29

31. Insérer des Images
et
des Vidéos

32. AJOUTER ET GERER DES IMAGES
32

33. 33

34. Options avancées de l’image
34

35. La bibliothèque de médias
35

36. Les Menus
36

37. Comment gérer les menus
37

38. Comment gérer les menus
38

39. Les Widgets

40. Les widgets
Les widgets sont des outils que vous pouvez ajouter, déplacer ou retirer
des colonnes (gauche, droite, entête ou pied-de-page) de votre site.
40

41. Voici quelques-uns des principaux widgets
‣ Archives : La liste des archives mensuelles de votre blogue (sous forme de
liste déroulante ou non)
‣ Calendrier : La liste des archives sous forme de calendrier (le calendrier ne
permet pas d’a"cher des événements à venir)
‣ Catégories : La liste des catégories d’articles de votre blogue
‣ Image : Permet d’a"cher une image dans la colomne
‣ Liens : Liste des liens ajoutés à la section « Liens »
‣ Pages : Liste des pages de notre site
‣ Articles récents : Le titre des derniers articles publiés sur votre blogue
‣ Commentaires récents : Le titre des derniers commentaires publiés sur
votre blogue
‣ Recherche : ajoute un champ «Recherche» à votre blogue
‣ Texte : permet d’ajouter un extrait texte et même d’y insérer du code HTML
(tableau, image etc.)
‣ Liens RSS : Les liens RSS de vos articles et/ou commentaires
‣ RSS : permet d’a"cher du contenu en provenance de flux RSS externes
41

42. 42

43. Create a text widget using writing this text:
<ul>
<li><a href="http://www.ithelp4u.ca" title="Formateur
Multimedia">Antonio Soto 24/7</a></li>
<li><a href="http://www.topwpthemes.com/ " title="Great Free
Themes">Wordpress Themes</a></li>
</ul>

44. ADDING IMAGES TO THE TEXT WIDGET
 Upload the image first to the WordPress Media Library.
 Click the File URL button to put the image file location in the
form above it (see screenshot below).
 Copy the link that appears in the form for Link URL.
 Click Save Changes.
 Exit the Media Library.
 Go to Appearance > Widgets.
 Add or edit the Text Widget in which you wish the image to
appear.
 Enter the following, pasting in the image location or URL and
editing the HTML accordingly, and save.
 <img src="[Image Link URL]" alt="[description - what is this]“>

45. C'est quoi une Bannière?
Une bannière publicitaire est une image
associée à l'adresse url du site sur lequel
l'internaute est dirigé lorsqu'il clique sur la
bannière. C'est l'équivalent électronique d'un
encart (oncart) publicitaire d'un support papier.
Votre message doit être clair, simple et attrayant
(atrreyao). Un titre (accroche) et une à deux
lignes suffisent et doivent être capables de
détourner l'attention de l'internaute.
Une bannière peut être :
Fixe : une seule image aux formats
JPEG, GIF, PNG
Animée : succession d'images avec
différents textes au format GIF
En Flash : animations bien plus
spectaculaires qu’une simple bannière
animée
45

46. Exemple Bannière
46

47. Bannière Animée
• Préparer deux images (taille et couleur)
• Ouvrez le site Web de WP et charger les deux
images (option Media)
• Générer le code HTML (Dreamweaver
Insérez/Image Objets/Rollover Image)
• Copiez le code HTML
• Sélectionnez Options Apparence / Widgets /
Texte
• Collez le code HTML
• Enregistrer le Widget
47

48. Twitter
48

49. 49
Iframe Widget

50. Gérer
les
Utilisateurs
Utilisateur: Permet
d’ajouter un ou
plusieurs utilisateurs du
site web ou blog
(contributeur,
administrateur, éditeur,
auteur). Permet aussi
d’accéder à votre profil
et vos paramètres
personnels.

51. Gestion des utilisateurs
Abonné:
peut laisser des commentaires
Contributeur:
peut en plus soumettre un article à la publication
Auteur:
peut en plus publier ses articles et les gérer. Peut aussi s’occuper de la gestion
des commentaires déposés sur ses propres articles
Editeur:
peut en plus gérer tous les articles et tous les commentaires du site ainsi que
la blogoliste (liens vers vos amis)
Administrateur:
peut tout faire: gérer la base de données, les thèmes, les plugins, …
51

52. Gestion des utilisateurs
52

53. Rôles des utilisateurs
53

54. Qu'est-ce que
le RSS

55. Qu'est-ce que le RSS ?
RSS (Really Simple Syndication) désigne une famille de formats XML utilisés pour la syndication
de contenu Web. (source : wikipedia)
La « Syndication » consiste à vendre le droit de reproduire un contenu ou de diffuser un
programme à plusieurs diffuseurs.
55

56. Comment faire une sauvegarde complète d’un blog WordPress
Pré-réquis :
Filezilla (logiciel gratuit disponible sur Windows ou sur Mac)
FireFTP (extension Firefox)
étapes
Installez l’un des deux logiciels à l’aide des liens ci-dessus
Créez un dossier sur votre bureau intitulé le nom de votre blog
Connectez-vous à votre FTP à l’aide de vos identifiants
Sélectionnez le dossier portant le nom de votre blog sur la fenêtre de gauche
Puis faîtes-y glisser tous les fichiers de la fenêtre de droite
En attendant que tout finisse, sauvegardez votre base de données
Installez simplement l’extension “WP-DB-Backup”
Mettez en place une sauvegarde régulière dans les options “Scheduled Backup” (minimum une
fois par semaine)
Indiquez votre adresse mail dans “Backup Options”
Cliquez sur “Backup Now” pour lancer la sauvegarde
56

57. Quand la mise à niveau vers une nouvelle version de WordPress, vous
devriez vérifier avec votre hébergeur les versions minimales requises
suivantes :
Toutes ces réponses
WinZip et MySQL
PHP et SSH
PHP et FTP
PHP et MySQL
57

58. Qui soutient, maintient et mise à jour le code WordPress
disponible sur WordPress.org?
La Communauté WordPress
Aide sur les forums, soumettre un rapport de bug, modifier le Codex (documentation), assister à Camp WordPress
58

59. Merci !!!