© 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 68
http://fr.tuto.com/wordpress/tuto-wordpress-gratuit.htm