formation wordpress médiathèque mauguio (mai 2017)

40
CREER SON BLOG avec WORDPRESS L ' @ t e l i e r m u l t i m é d i a

Upload: mediatheque-mauguio

Post on 24-Jan-2018

165 views

Category:

Education


5 download

TRANSCRIPT

Page 1: Formation WordPress médiathèque Mauguio (mai 2017)

CREER SON BLOG

avec

WORDPRESS

L'

@telier

multi

média

Page 2: Formation WordPress médiathèque Mauguio (mai 2017)

Blog ou site ?

Un blog est un site Internet organisé de manière à pouvoir publier des articles par ordre chronologique, le plus récent en haut.

Un blog peut aussi comporter des pages statiques.

● Blog de Béatrice Duka sur Medium● Dysmoi, le blog de Valérie Duband

Un site est essentiellement composé de pages statiques.

Page 3: Formation WordPress médiathèque Mauguio (mai 2017)

Wordpress est ce que l'on appelle un CMS (Content Management System (CMS) ou système de gestion de contenu (SGC) en français)

Ces logiciels partagent les fonctionnalités suivantes :

● travailler à plusieurs, en même temps, sur un même document ;

● fournir une chaîne de publication (workflow);

● séparer les opérations de gestion de la forme et du contenu ;

● un contenu structuré : gabarits de pages;

● gérer les utilisateurs : rôles, permissions (utilisateur anonyme, administrateur, contributeur, etc.) ;

● certains SGC incluent la gestion de versions.

Définition wikipédia

Wordpress

Page 4: Formation WordPress médiathèque Mauguio (mai 2017)

→ un CMS polyvalent pour créer tout aussi bien un blog qu'un site commercial ou tout autre site ;

→ un très grand nombre d'extensions;

→ une communauté importante et réactive pour vous aider à trouver des réponses à vos questions concernant son utilisation.

Il existe un grand nombre de CMS libres ou pas, offrant plus ou moins de fonctionnalités.

● Opensourcecms

● Framasoft

Wordpress

Page 5: Formation WordPress médiathèque Mauguio (mai 2017)

2 solutions pour travailler avec WP :

Créer un compte en ligne sur https://fr.wordpress.com/

ou héberger son site WP chez un prestataire extérieur 

Installation de Wordpress

Page 6: Formation WordPress médiathèque Mauguio (mai 2017)

Héberger son site WP chez un prestataire extérieur 

1) Installation d'un serveur web local Wamp (Windows) ou Mamp (IOS), ou Lamp (Linux)

2) Télécharger WP https://fr.wordpress.org/txt-download/

3) Enregistrer sous localhost (www)

4) Créer son site sur le serveur local Wamp, Mamp ou Lamp

5) Choisir et acheter un nom de domaine

6) Choisir un hébergeur : http://www.tomsguide.fr/

7) Transférer les données chez son hébergeur avec un logiciel FTP de transfert de fichiers FileZilla

Installation de Wordpress

Page 7: Formation WordPress médiathèque Mauguio (mai 2017)

C'est parti !

Saisir l'adresse URL : https://fr.wordpress.com/

Page 8: Formation WordPress médiathèque Mauguio (mai 2017)

C'est parti !

Choix d'un template

Un template (parfois appelé layout) est une page web sans contenu dont les éléments statiques sont déjà positionnés et mis en forme.

Page 9: Formation WordPress médiathèque Mauguio (mai 2017)

Créer son site

Choix d'un thème

(on pourra le changer plus tard)

Page 10: Formation WordPress médiathèque Mauguio (mai 2017)

Créer son site Saisir un nom de domaine et vérifier s'il est libre.

L’extension sera « wordpress.com »

Page 11: Formation WordPress médiathèque Mauguio (mai 2017)

Créer son site

Le nom de domaine est la partie significative de l'adresse internet de votre site.

http://www.eyrolles.com/Informatique/Livre/se-proteger-sur-internet-9782212127744

Http : protocolepour le web

Nom du domaine : www.eyrolles.com À droite de la barre oblique, le chemin d'accès à la page

sur le site.com L'extension du nom de domaine

Page 12: Formation WordPress médiathèque Mauguio (mai 2017)

Créer son site

L'extension du nom de domaine permet d'identifierle type de domaine.

Domaines nationaux

Domaines génériques (type d'activité)

Organismes publics par pays : services publics, collectivités, musées, etc.

Exemples : .fr, .ca, .es, .us

Organisations commerciales (.com), Organisations à but non lucratif (.org)

Organisations de de télécommunications (.net)

Page 13: Formation WordPress médiathèque Mauguio (mai 2017)

Créer son site

Page 14: Formation WordPress médiathèque Mauguio (mai 2017)

Créer son compte

Page 15: Formation WordPress médiathèque Mauguio (mai 2017)

Accéder au tableau de bord

Dans la barre d’adresse, après le nom de domaine, rajoutez :wp-admin/

Page 16: Formation WordPress médiathèque Mauguio (mai 2017)

Gestion des articles et des pages

Articles Ils sont généralement utilisés pour publier des informations d'actualité sur un sujet précis. Les articles constituent le contenu essentiel d'un blog. Ils sont classés par catégorie, et on peut leur affecter des tags. Ils sont souvent affichés par ordre antéchronologique.

Pages Elles sont utilisées pour afficher des informations pérennes sans réelle limite dans le temps. Elles ne sont pas triées par date.

Page 17: Formation WordPress médiathèque Mauguio (mai 2017)

Gestion des articles et des pages

Au survol de la souris sur une page 4 options sont proposées :

- Modifier : permet de modifier le contenu de la page ;

- Modification rapide : permet de modifier le titre, la date de publication, ainsi que les options de publication. Pour une page, sa place dans le menu, pour un article, ses catégories...

- Corbeille : permet de supprimer une page

- Afficher : affiche la page telle qu'elle apparaîtra sur le blog.

Page 18: Formation WordPress médiathèque Mauguio (mai 2017)

Tableau de bord

Accès aux fonctionnalitésles plus importantes

Gestion des contenus

Thème, menus, widgets

Gestion des utilisateurs

Page 19: Formation WordPress médiathèque Mauguio (mai 2017)

Ajouter une page ou un article

AjouterVous permet de créer une nouvelle page OU un article

Entrez dans cette zone le titre de votre nouvelle page

Utilisez les boutons de la barre d'outils pour mettre en forme votre texte

Passez en mode plein écran pour plus de confort

Editez directement le code HTML

Ajouter des médias en cliquant sur ce bouton

Page 20: Formation WordPress médiathèque Mauguio (mai 2017)

Ajouter un article

Publier : enregistrer un brouillon, modifier, publier

Format : définit un style CSS

On peut classer un article dans une catégorie et lui attribuer des tags

Page 21: Formation WordPress médiathèque Mauguio (mai 2017)

Articles : Catégories

Les catégories permettent de classer les articles par sujet.

Un article peut appartenir à plusieurs catégories.

Les catégories peuvent être hiérarchisées.

Page 22: Formation WordPress médiathèque Mauguio (mai 2017)

Articles : Étiquettes

On peut décrire un article au moyen de mots-clés, plus précis que les catégories.

Page 23: Formation WordPress médiathèque Mauguio (mai 2017)

Ajouter une page

Publier : enregistrer un brouillon, modifier et publier

Les attributs de la page permettent de définir une hiérarchie dans les pages et l'ordre d' affichage des pages au sein d'un menu.

Page 24: Formation WordPress médiathèque Mauguio (mai 2017)

Gestion des médias

La rubrique « Médias » du tableau de bordvous permet de gérer l'ensemble des médias déjà présents sur votre site : - images- sons- Vidéos- PDF- etc...

Effectuer un clic sur le menu Médias de la barre latérale gauche donne accès à deux options :

- Bibliothèque- Ajouter

Vous pouvez ajouter tout type de média simplement en déposant par un glisser-déposer ou en cliquant sur le bouton « Sélectionner des fichiers »

Page 25: Formation WordPress médiathèque Mauguio (mai 2017)

Ajouter un média à une page ou un article

Récupérer un fichier sur son ordinateur

Page 26: Formation WordPress médiathèque Mauguio (mai 2017)

Décrire le média

On peut choisir l'emplacement de l'image, gauche, centre, droit, et sa taille, taille originale, grande, moyenne, miniature.

Très important d'indiquer un titre alternatif clair (normes d'accessibilité pour les personnes malvoyantes équipées de lecteurs d’écran.)

Renseigner le titre pour qu'une info-bulle apparaisse au survol de l'image par la souris.

Les attributs de l'image

Page 27: Formation WordPress médiathèque Mauguio (mai 2017)

Insertion d'une vidéo

Première étape :

Sur le site où est publiée la vidéo, cliquez sur Partager,

puis sur Intégrer (ou embed),

copier le code.

Page 28: Formation WordPress médiathèque Mauguio (mai 2017)

Deuxième étape :

Passez en mode Texte (code html)

Positionnez le curseur de la souris là où vous voulez voir apparaître la vidéo

Collez le code

Insertion d'une vidéo

Pour visualiser la vidéo, mettre à jour l'article et Afficher.

Page 29: Formation WordPress médiathèque Mauguio (mai 2017)

Gestion des commentaires

Cliquez sur le menu commentaires pour atteindre la gestion des commentaires

Vous permet de filtrer les commentaires affichés

Case à cocher de sélection de commentaire

Options de traitement d'un commentaire

- désapprouver : informe l'auteur du commentaire qu'il est en attente de validation et le fait disparaître de la page.- Répondre : permet de répondre au commentaire, apparaît sur la page à la suite du commentaire.- Modification rapide : permet de modifier le commentaire.- Indésirable : supprimer le commentaire de la page et le place dans la corbeille (il est encore possible de le récupérer).- Corbeille : permet de supprimer le commentaire.

Page 30: Formation WordPress médiathèque Mauguio (mai 2017)

Gestion des commentaires

Les commentaires se paramètrent dans Réglages Discussion

Page 31: Formation WordPress médiathèque Mauguio (mai 2017)

Structure d'une page webHeader : Il est situé tout en haut de la page. Souvent, il intègre un logo ou en-tête graphique qui comprend le nom du site Web.

Menu : C'est une section horizontale de la page dans laquelle vous pouvez insérer un menu de navigation.

Left Panel : Il est situé sous le header, et à gauche du corps principal de la page Web. Ici vous trouverez souvent des liens vers tous les importantes pages du site web, ainsi que d'autres éléments.

Right Panel : Peut être utilisé à la place du Left Panel ou en complément pour ajouter des informations, des liens, des publicités.

Main Panel : C'est là où le corps du texte de votre site apparaît. Il s'agit bien sûr l'élément le plus important de vos pages.

Footer : C'est la section qui apparaît tout en bas de la page. Souvent, elle comprendra un message d'auteur et peut contenir : Politique de confidentialité, règlement & conditions, copyright, liens de contact, mentions obligatoires...

Entête (Header)

Menu

Panneau Gauche

(Left panel)

PanneauDroit

(Right panel)

Panneau principal(Main panel)

Pied de page (Footer)

Exemple d'une structure de page

Plus d'infos sur la structure d'une page

Page 32: Formation WordPress médiathèque Mauguio (mai 2017)

Wordpress – gestion de l'apparence

L'apparence c'est la manière dont les informations contenues vont apparaître à l'utilisateur qui viendra consulter le site ou le blog.C'est ici que l'on va gérer le thème global, les widgets, les menus et l’entête du site.

Le thème global

Le thème global modifie l'agencement des composants du site : la position des articles, des menus, des widgets, mais également le contenu de l'entête, du pied de page etc. Par défaut 3 ou 4 thèmes vous sont proposés mais vous pouvez facilement en ajouter d'autres.

Thèmes disponibles

Bouton d'ajout de thèmes

Page 33: Formation WordPress médiathèque Mauguio (mai 2017)

Wordpress – gestion de l'apparence

Les widgetsUn Widget est un composant logiciel, son nom provient du mot gadget.

En informatique, le mot widget recouvre deux notions distinctes, chacune en relation avec les interfaces graphiques. Il peut alors être considéré comme étant la contraction des termes window (fenêtre) et gadget. Il peut désigner :

un composant d'interface graphique, un élément visuel d'une interface graphique (bouton, ascenseur, liste déroulante, etc.) ; un widget interactif, un petit outil qui permet d'obtenir des informations (météo, actualité, dictionnaire, carte routière, pense-bête – en anglais post-it –, traducteur, etc.).Définition wikipédia

Remarque : En fonction du thème choisi et des extensions installées, les widgets ainsi que les emplacements disponibles peuvent changer.

Pour utiliser un widget, effectuer un clic gauche sur le widget, puis sans relâcher le clic, le déplacer sur la zone de positionnement désirée.

Widgets disponibles Zones de disposition des widgets

Page 34: Formation WordPress médiathèque Mauguio (mai 2017)

Wordpress – Gestion de l'apparence

Les menus

En informatique, un menu est destiné à simplifier l'exploration des pages d'un site via un système ergonomique de liens séparés en catégories aisément compréhensibles.Définition wikipédia

Sélection du menu

Pages, catégories et liens existants pouvant-être ajouté au menu

Agencement du menu Bouton d'enregistrement du menu

Onglet « Modifier les menus »

Page 35: Formation WordPress médiathèque Mauguio (mai 2017)

Gestion des menus

Après avoir créé vos menus, il faut les positionner :Cliquez sur l'onglet Gérer les emplacements, et sélectionnez pour chaque emplacement le menu que vous souhaitez y voir apparaître.

Remarque :En fonction du thème choisi, vous aurez la possibilité de positionner un ou plusieurs menus sur votre site à des emplacements différents.

Thème : Minamaze

Thème : Twenty Thirteen

Page 36: Formation WordPress médiathèque Mauguio (mai 2017)

Wordpress – gestion des extensions

Les extensions ou plugins : il s'agit de fonctionnalités supplémentaires que l'on peut rajouter à WP.

Dans WP en ligne, certaines extensions sont intégrées par défaut à certains thèmes (formulaire de contact, partage sur les réseaux sociaux, etc,,,), mais il est impossible d'en ajouter d'autres.

En revanche, si vous avez téléchargé WP, on peut installer toutes sortes d'extensions :

- téléchargez les pluggins à cette adresse : https://wordpress.org/plugins/- installez le programme dans le menu Extensions

Page 37: Formation WordPress médiathèque Mauguio (mai 2017)

Wordpress – gestion des utilisateurs

Le système de Rôles a été mis en place pour donner au propriétaire du blog la possibilité de contrôler et de déterminer ce que chaque utilisateur peut ou ne peut pas voir sur le blog. Un propriétaire de blog doit gérer et autoriser les accès à plusieurs fonctions comme la rédaction et l'édition de billets, la création de pages, la gestion des liens, la création des catégories, la modération des commentaires, la gestion des plugins, la gestion des thèmes, et la gestion des autres utilisateurs

5 Rôles existent sous Wordpress :- Abonné  : Personne qui peut lire et envoyer des commentaires mais qui peut également recevoir les

lettres d'informations- Contributeur  : Personne qui peut rédiger et gérer ses propres billets mais qui ne peut pas les publier.- Auteur  : Personne qui peut rédiger et publier ses propres billets- Éditeur  : Personne qui peut rédiger et publier des billets mais aussi gérer les billets d'autres personnes- Administrateur  : Personne qui a accès à toutes les foncions d'administration

Les rôles

Gérer les utilisateurs

Utilisateurs existantsListe déroulante de sélection de rôle

Page 38: Formation WordPress médiathèque Mauguio (mai 2017)

Wordpress – gestion des utilisateurs

Ajout d'utilisateur

Vous pouvez ajouter des utilisateurs directement depuis votre console d'administration. Cliquez sur les menu « Ajouter » puis renseignez les différents champs puis valider.

Remarque : Sur WP en ligne, il n'est pas possible de créer les comptes utilisateurs mais seulement d'envoyer une invitation par email.

Gestion de votre profil

Vous pouvez également gérer les informations de votre profil tel que nom, prénom, adresse email, mot de passe, …Cliquez sur le menu « Votre profil » et modifiez les informations puis enregistrez les modifications.

Page 39: Formation WordPress médiathèque Mauguio (mai 2017)

Wordpress – réglagesLes réglages de votre site.

Les options de lecture permettent, entre autres choses, de définir l'architecture du site :- option blog : la page d'accueil affiche les derniers articles- option site : on définit une page d'accueil fixe.

Page 40: Formation WordPress médiathèque Mauguio (mai 2017)

Ressources

TutorielsWordpress

Comment créer un site internet avec Wordpress

Ateliers multimédia Brest

Openclassroom

Référencement (Search Engine Optimization)

Qu'est-ce que le référencement ? (SEO)

L'@telier multimédia - Médiathèque Gaston Baissette – mai 2017