© Claude Rouah 2016WAP

BLOG & SITE AVEC WORDPRESS

TOUT POUR BIEN COMMENCER

1

Actualisé le 22/11/2016

© Claude Rouah 2016WAP

LES ATOUTS DE WORDPRESS

2

•Uneinterfaceconviviale.

•Lisiblesurtouteslesplateformesettoutformat

d’écran.

•Gratuitetsécurisé.

•Automatiquementréférencépourlesmoteursde

recherche.

•Unecommunautéfrancophoneactive.

•Misesàjoursfréquentes.

•26%duWebtourneavecWordpress

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

© Claude Rouah 2016WAP

CRÉER SON COMPTE GRATUIT

3

© Claude Rouah 2016WAP 4

© Claude Rouah 2016WAP 5

© Claude Rouah 2016WAP 6

© Claude Rouah 2016WAP 7

© Claude Rouah 2016WAP 8

© Claude Rouah 2016WAP 9

© Claude Rouah 2016WAP 10

© Claude Rouah 2016WAP 11

© Claude Rouah 2016WAP

UNE INTERFACE CONVIVIALE

12

© 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

© Claude Rouah 2016WAP

L’INTERFACE ALTERNATIVE DE WORDPRESS.COM

14

© Claude Rouah 2016WAP

CRÉER UN PREMIER ARTICLE

15

© Claude Rouah 2016WAP 16

© 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

WAP © Claude Rouah 2016

Pour reprendre votre article que vous voyez en ligne, cliquer en bas sur Modifier

CÔTÉ COULISSES

18

© Claude Rouah 2016WAP

INSÉRER UNE IMAGE

19

© 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

© 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

© 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

© 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

© Claude Rouah 2016WAP 24

© Claude Rouah 2016WAP 25

INSÉRER UN INTERTITRE

© 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.

© Claude Rouah 2016WAP 27

Pour colorer un intertitre, sélectionnez le et cliquez sur le menu déroulant : A pour choisir la couleur.

© Claude Rouah 2016WAP 28

INSÉRER UN LIEN HYPERTEXTE

© 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…

© 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.

© Claude Rouah 2016WAP 31

CHANGER LA PRÉSENTATION

© 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.

© 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.

© 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é

© Claude Rouah 2016WAP 35

© 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.

© Claude Rouah 2016WAP 37

INSTALLER DES WIDGETS

DANS LA BARRE DE NAVIGATION LATÉRALE

© Claude Rouah 2016WAP 38

© 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

© Claude Rouah 2016WAP 40

© Claude Rouah 2016WAP 41

INSÉRER D’AUTRES MÉDIAS

VIDÉO & SON (SIMPLE COMME UNE IMAGE)

© 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).

© 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).

© 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.

© 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.

© 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.

© 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

© 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

© Claude Rouah 2016WAP 49

© Claude Rouah 2016WAP 50

CRÉER UNE PAGE

© 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.

© 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.

© 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.

© Claude Rouah 2016WAP 54

GESTION DU CONTENU DANS WORDPRESS

© Claude Rouah 2016WAP 55

CRÉER UN MENU

© Claude Rouah 2016WAP 56

© Claude Rouah 2016WAP 57

© Claude Rouah 2016WAP 58

ANNEXES

POURAGIRDANSLALÉ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

© 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 :

© Claude Rouah 2016WAP 60

6 MODULES GRATUITS

http://presselearning.syfadis.com/Directory/Login/Login.aspx?ReturnUrl=%2fdefault.aspx

© Claude Rouah 2016WAP 61

CONTENU DES 6 MODULES

© 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"

U N E A LT E R N AT I V E G R AT U I T E

À P H O T O S H O P

© 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

© 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 !

© 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

© Claude Rouah 2016WAP 66

https://wpfr.net/guide-demarrage-debutants/

https://codex.wordpress.org/fr:Accueil

SITES UTILES

© Claude Rouah 2016WAP 67

https://wpchannel.com

© Claude Rouah 2016WAP 68

http://fr.tuto.com/wordpress/tuto-wordpress-gratuit.htm