Site et Blog avec Wordpress / Novembre 2016

© Claude Rouah 2016WAP

BLOG & SITE AVEC WORDPRESS

TOUT POUR BIEN COMMENCER

1

Actualisé le 22/11/2016


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

http://fr.wordpress.com


CRÉER SON COMPTE GRATUIT

3


UNE INTERFACE CONVIVIALE

12


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


L’INTERFACE ALTERNATIVE DE WORDPRESS.COM

14


CRÉER UN PREMIER ARTICLE

15


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


INSÉRER UNE IMAGE

19


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


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


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


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


INSÉRER UN INTERTITRE


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.


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


INSÉRER UN LIEN HYPERTEXTE


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…


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.


CHANGER LA PRÉSENTATION


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.


Ces icônes en bas de l’écran permettent de visualiser l’aspect de votre site sur :

écran d’ordinateur, tablette ou smartphone.


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é


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.


INSTALLER DES WIDGETS

DANS LA BARRE DE NAVIGATION LATÉRALE


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


INSÉRER D’AUTRES MÉDIAS

VIDÉO & SON (SIMPLE COMME UNE IMAGE)


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


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


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.


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.


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.

https://soundcloud.com/


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


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


CRÉER UNE PAGE


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.


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.


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.


GESTION DU CONTENU DANS WORDPRESS


CRÉER UN MENU


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

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


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 :

http://www.editions-eyrolles.com/Livre/9782212135633/le-guide-pratique-wordpress

http://multimedia.fnac.com/multimedia/editorial/pdf/9782212135633.pdf


6 MODULES GRATUITS

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

http://presselearning.syfadis.com/Directory/Login/Login.aspx?ReturnUrl=/default.aspx


CONTENU DES 6 MODULES


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

http://gimp.softonic.fr//mac

http://www.commentcamarche.net/download/telecharger-115-gimp

http://docs.gimp.org/fr/


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


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 !

http://www.01net.com/telecharger/windows/Multimedia/photo_numerique/fiches/33494.html

http://www.01net.com/telecharger/windows/Multimedia/photo_numerique/fiches/33494.html

http://imageoptim.pornel.net/


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

http://format-factory.softonic.fr/

http://www.dvdvideosoft.com/fr/products/dvd/Free-Avi-Video-Converter.htm#.VGPa0NaGmV4



http://kigo-video-converter.softonic.fr/mac


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

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

SITES UTILES

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

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


https://wpchannel.com

https://wpchannel.com


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

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

Site et Blog avec Wordpress / Novembre 2016

Internet

Transcript of Site et Blog avec Wordpress / Novembre 2016