Site et Blog avec Wordpress / Novembre 2016

358 vues

Publié le

Tutoriel pour bien débuter avec Wordpress. Aucune connaissance technique nécessaire. Gratuit et efficace. Nombreux liens utiles.

Publié dans : Internet
2 commentaires
2 j’aime
Statistiques
Remarques
  • Merci à Claude pour cet atelier Wordpress. Intéressant et beaucoup d'infos pratiques. Et merci aussi bien sûr, pour ce support qui va nous aider à débuter et ++ . A suivre
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Merci beaucoup Claude d'avoir réalisé ce magnifique support qui sera d'une grande utilité à tous pour ceux qui ont besoin d’acquérir les bases de Wordpress ou parfaire leur connaissance. Ton atelier a été très riche en explications, notamment lors des passages techniques et dans l'ensemble des astuces et informations que tu as su élargir avec autant de générosité et créativité
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
Aucun téléchargement
Vues
Nombre de vues
358
Sur SlideShare
0
Issues des intégrations
0
Intégrations
0
Actions
Partages
0
Téléchargements
35
Commentaires
2
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Site et Blog avec Wordpress / Novembre 2016

  1. 1. © Claude Rouah 2016WAP BLOG & SITE AVEC WORDPRESS TOUT POUR BIEN COMMENCER 1 Actualisé le 22/11/2016
  2. 2. © Claude Rouah 2016WAP LES ATOUTS DE WORDPRESS 2 •Une interface conviviale. •Lisible sur toutes les plateformes et tout format d’écran. •Gratuit et sécurisé. •Automatiquement référencé pour les moteurs de recherche. •Une communauté francophone active. •Mises à jours fréquentes. •26% du Web tourne avec Wordpress Etre connecté à Internet, posséder un navigateur récent sur son ordinateur, sont les seuls éléments indispensables pour commencer son site ou blog. Se connecter à : fr.wordpress.com
  3. 3. © Claude Rouah 2016WAP CRÉER SON COMPTE GRATUIT 3
  4. 4. © Claude Rouah 2016WAP 4
  5. 5. © Claude Rouah 2016WAP 5
  6. 6. © Claude Rouah 2016WAP 6
  7. 7. © Claude Rouah 2016WAP 7
  8. 8. © Claude Rouah 2016WAP 8
  9. 9. © Claude Rouah 2016WAP 9
  10. 10. © Claude Rouah 2016WAP 10
  11. 11. © Claude Rouah 2016WAP 11
  12. 12. © Claude Rouah 2016WAP UNE INTERFACE CONVIVIALE 12
  13. 13. © Claude Rouah 2016WAP Avec un menu rétractable, des possibilités d’options pour chaque écran, une aide en ligne contextuelle, l’interface d’administration de Wordpress ou Tableau de bord va vous permettre de progresser rapidement dans la réalisation de votre site ou blog. 13
  14. 14. © Claude Rouah 2016WAP L’INTERFACE ALTERNATIVE DE WORDPRESS.COM 14
  15. 15. © Claude Rouah 2016WAP CRÉER UN PREMIER ARTICLE 15
  16. 16. © Claude Rouah 2016WAP 16
  17. 17. © Claude Rouah 2016WAP Une fois votre article publié ou mis à jour, un bandeau au dessus du titre vous invite à Afficher l’article CÔTÉ SCÈNE 17
  18. 18. WAP © Claude Rouah 2016 Pour reprendre votre article que vous voyez en ligne, cliquer en bas sur Modifier CÔTÉ COULISSES 18
  19. 19. © Claude Rouah 2016WAP INSÉRER UNE IMAGE 19
  20. 20. © Claude Rouah 2016WAP Cliquez dans votre article pour activer le curseur à l’endroit où vous voulez intégrer votre image. Puis cliquez sur le bouton : Ajouter un média Une fenêtre s’ouvre en avant -plan, choisissez : Envoyer des fichiers Sélectionner des fichiers vous permet d’indiquer l’emplacement de votre image sur votre ordinateur, le fichier ainsi envoyé est installé dans la Bibliothèque de médias 20
  21. 21. © Claude Rouah 2016WAP Le fichier ainsi envoyé est maintenant dans la Bibliothèque de médias Si l’image correspond à votre choix, cliquez sur le bouton : Insérer dans l’article 21
  22. 22. © Claude Rouah 2016WAP L’image vue ici en grossi a été intégrée dans l’article. On peut la redimensionner en agissant sur les poignées qui apparaissent lorsque l’image est sélectionnée. Les icônes au dessus de l’image permettent de régler son positionnement par rapport au texte. Pour de plus amples réglages cliquer sur le crayon, une nouvelle fenêtre va s’ouvrir… 22
  23. 23. © Claude Rouah 2016WAP 23 Wordpress enregistre automatiquement une image en 3 tailles : Originale Moyenne Miniature Les options avancées permettent d’ajouter une bordure (largeur, couleur) et de définir les marges de l’image
  24. 24. © Claude Rouah 2016WAP 24
  25. 25. © Claude Rouah 2016WAP 25 INSÉRER UN INTERTITRE
  26. 26. © Claude Rouah 2016WAP 26 Pour insérer un intertitre, saisissez le à l’endroit où il doit figurer. Sélectionnez le et cliquez sur le menu déroulant : Paragraphe pour choisir sa mise en forme.
  27. 27. © Claude Rouah 2016WAP 27 Pour colorer un intertitre, sélectionnez le et cliquez sur le menu déroulant : A pour choisir la couleur.
  28. 28. © Claude Rouah 2016WAP 28 INSÉRER UN LIEN HYPERTEXTE
  29. 29. © Claude Rouah 2016WAP 29 Pour insérer un lien, sélectionnez un mot ou un groupe de mots dans votre article. Quand les mots sont en sur brillance, les icônes de liens sont actives. Cliquez sur l’ icône du lien, une fenêtre s’ouvre en avant plan…
  30. 30. © Claude Rouah 2016WAP 30 Copiez l’adresse de votre lien dans le champ réservé à cet effet, vous pouvez indiquer un titre à votre lien, et surtout indiquer qu’il doit s’ouvrir dans une nouvelle fenêtre pour permettre de revenir facilement sur votre site. Ensuite, cliquez sur Ajouter un lien.
  31. 31. © Claude Rouah 2016WAP 31 CHANGER LA PRÉSENTATION
  32. 32. © Claude Rouah 2016WAP 32 Un survol de souris permet d’afficher les Détails du thème ou de cliquer sur le bouton : Aperçu pour visualiser la nouvelle Apparence de votre site avant de décider de l’ Activer si cela correspond à votre choix.
  33. 33. © Claude Rouah 2016WAP 33 Ces icônes en bas de l’écran permettent de visualiser l’aspect de votre site sur : écran d’ordinateur, tablette ou smartphone.
  34. 34. © Claude Rouah 2016WAP 34 Une fois le nouveau thème activé on constate les différences d’affichage : le changement de typographie, l’apparence des liens et de la légende photo, l’intertitre est en capitales. L’aspect général semble trop clair. Aller dans Thèmes et cliquer sur le bouton Personnaliser du thème activé
  35. 35. © Claude Rouah 2016WAP 35
  36. 36. © Claude Rouah 2016WAP 36 Après quelques ajustements on obtient un aspect plus satisfaisant. Utiliser uniquement les options gratuites est suffisant pour personnaliser l’apparence de votre site. Il reste à construire la barre de navigation latérale.
  37. 37. © Claude Rouah 2016WAP 37 INSTALLER DES WIDGETS DANS LA BARRE DE NAVIGATION LATÉRALE
  38. 38. © Claude Rouah 2016WAP 38
  39. 39. © Claude Rouah 2016WAP 39 Les réglages des Widgets s’enregistrent un par un. Après avoir défini les paramètres, cliquer sur le bouton: Enregistrer le widget
  40. 40. © Claude Rouah 2016WAP 40
  41. 41. © Claude Rouah 2016WAP 41 INSÉRER D’AUTRES MÉDIAS VIDÉO & SON (SIMPLE COMME UNE IMAGE)
  42. 42. © Claude Rouah 2016WAP 42 Créer un nouvel article, et pour l’illustrer d’une vidéo, cliquer sur le bouton : Ajouter un média, ensuite choisir Intégration You Tube et rechercher sa vidéo. Sélectionner la vidéo choisie et cliquer sur le bouton : Insérer dans l’article en bas à droite de la fenêtre (non visible ici).
  43. 43. © Claude Rouah 2016WAP 43 Cliquer à nouveau sur le bouton : Ajouter un média, ensuite choisir Insérer à partir d’une adresse web. Copier l’adresse de la vidéo choisie dans le champ prévu à cet effet et cliquer sur le bouton : Insérer dans l’article en bas à droite de la fenêtre (non visible ici).
  44. 44. © Claude Rouah 2016WAP 44 Les 2 opérations précédentes ont généré 2 lignes de code aux endroits prévues pour insérer les vidéos dans l’article. Cliquer sur Publier et ensuite sur Afficher l’article pour aller voir le résultat.
  45. 45. © Claude Rouah 2016WAP 45 Les vidéos sont bien lisibles depuis le site. Il n’a jamais été aussi simple d’intégrer des vidéos. C’est le bonus des actualisations de Wordpress. Diffuser de courtes vidéos, évite d’attendre un long moment pour leur chargement.
  46. 46. © Claude Rouah 2016WAP 46 Comme pour les vidéos, les sons doivent être hébergé sur un site prévu à cet effet, dans cet exemple, il s’agit de SoundCloud qui s’intègre parfaitement à Wordpress. Choisir le son que l’on veut partager, cliquer sur le lien Share.
  47. 47. © Claude Rouah 2016WAP 47 CLIQUER sur Embed , puis choisir un style de présentation comme ci-contre. Vous pouvez sélectionner des options : Couleur du lecteur Lecture automatique Les choix étant faits, Il faut surtout cocher la case : Wordpress code et recopier l’intégralité du code ainsi généré dans le champ qui précède cette case. Format standard .mp3
  48. 48. © Claude Rouah 2016WAP 48 Recopier le code à l’endroit où l’on veut insérer le lecteur de son dans l’article, valider et ensuite, visualiser le résultat. En général, avant d’intégrer du code il est recommandé de cliquer sur l’onglet : Texte
  49. 49. © Claude Rouah 2016WAP 49
  50. 50. © Claude Rouah 2016WAP 50 CRÉER UNE PAGE
  51. 51. © Claude Rouah 2016WAP 51 Sélectionner Pages et Ajouter, on peut maintenant intégrer le contenu de la page même fonctionnement que dans Articles pour le texte et les médias. Certains thèmes proposent différents modèles de pages que vous pourrez choisir dans Attributs de la page.
  52. 52. © Claude Rouah 2016WAP 52 Le Thème précédemment choisi ne permettait pas d’éditer des pages en pleine largeur, il était nécessaire d’en changer. Les Pages seront présentées sans la barre de navigation latérale que l’on réservera aux Articles de la partie blog.
  53. 53. © Claude Rouah 2016WAP 53 EN RÉSUMÉ BLOG SITE Pour la section blog intégrer son contenu dans Articles. Pour la section site intégrer son contenu dans Pages.
  54. 54. © Claude Rouah 2016WAP 54 GESTION DU CONTENU DANS WORDPRESS
  55. 55. © Claude Rouah 2016WAP 55 CRÉER UN MENU
  56. 56. © Claude Rouah 2016WAP 56
  57. 57. © Claude Rouah 2016WAP 57
  58. 58. © Claude Rouah 2016WAP 58 ANNEXES POUR AGIR DANS LA LÉGALITÉ http://www.presse-citron.net/votre-blog-est-illegal-et-vous-ne-le-savez-pas-voici-pourquoi/ http://www.wipo.int/sme/fr/e_commerce/design_issues.htm
  59. 59. © Claude Rouah 2016WAP 59 http://www.editions-eyrolles.com/Livre/9782212135633/le-guide-pratique-wordpress http://multimedia.fnac.com/multimedia/editorial/pdf/9782212135633.pdf Un extrait de 30 pages gratuit :
  60. 60. © Claude Rouah 2016WAP 60 6 MODULES GRATUITS http://presselearning.syfadis.com/Directory/Login/Login.aspx?ReturnUrl=%2fdefault.aspx
  61. 61. © Claude Rouah 2016WAP 61 CONTENU DES 6 MODULES
  62. 62. © Claude Rouah 2016WAP 62 Télécharger GIMP pour Mac Télécharger GIMP pour PC Documentation gratuite "La référence ultime en manipulation d'images Open Source" UNE ALTERNATIVE GRATUITE À PHOTOSHOP
  63. 63. © Claude Rouah 2016WAP 63 GIF Le format gif convient pour les couleurs en aplat ou pour un logo par exemple. Il est souvent utilisé pour créer de petites animations qui ont fait les beaux jours du web au temps du bas débit. Ce format permet également d’utiliser une couleur en transparence. JPG jpg ou jpeg le format conseillé pour les photos ou les images qui comportent des dégradés attention de ne pas trop altérer l’image en général une compression de qualité 80 est acceptable. PNG png est un format plus récent qui est performant pour les couleurs en aplat ou pour les images en dégradé en plus il comprend une option de couleur transparente. LES FORMATS D’IMAGES POUR LE WEB
  64. 64. © Claude Rouah 2016WAP Les utilisateurs de Photoshop n’auront aucun problème pour enregistrer leurs images dans l’un des 3 formats: il suffit d’enregistrer pour le web dans le menu fichier. Sur Pc un logiciel : Jpeg Compression que vous pouvez télécharger ici : http://www.01net.com/telecharger/windows/Multimedia/ photo_numerique/fiches/33494.html . Pour Mac je vous recommande ImageOptim à télécharger ici : http://imageoptim.pornel.net/ . 64 OUTILS DE COMPRESSION Logiciels Gratuits !
  65. 65. © Claude Rouah 2016WAP 65 CONVERTISSEURS VIDÉO http://format-factory.softonic.fr/ http://www.dvdvideosoft.com/fr/products/dvd/Free-Avi-Video-Converter.htm#.VGPa0NaGmV4 http://www.clubic.com/telecharger-fiche42151-handbrake.html http://www.clubic.com/telecharger-fiche42147-handbrake.html http://kigo-video-converter.softonic.fr/mac Logiciels Gratuits ! Format standard .mp4
  66. 66. © Claude Rouah 2016WAP 66 https://wpfr.net/guide-demarrage-debutants/ https://codex.wordpress.org/fr:Accueil SITES UTILES
  67. 67. © Claude Rouah 2016WAP 67 https://wpchannel.com
  68. 68. © Claude Rouah 2016WAP 68 http://fr.tuto.com/wordpress/tuto-wordpress-gratuit.htm

×