mon site web via WordPress

Transcription

1 mon site web via WordPress

2 Vocabulaire CMS : Content Management System WordPress fait partie de cette famille de logiciels destinés à la conception et à la mise à jour dynamique de sites Web ou d applications multimédia. Les CMS partagent les fonctionnalités suivantes : ils permettent à plusieurs individus de travailler sur un même document ; ils fournissent une chaîne de publication (workflow) offrant par ex la mise en ligne du contenu des documents ; ils permettent de séparer les opérations de gestion de la forme et du contenu ; ils permettent de structurer le contenu (utilisation de FAQ, de documents, de blogs, de forums de discussion, etc.) ils permettent de hiérarchiser les utilisateurs et de leur attribuer des rôles et des permissions (utilisateur anonyme, administrateur, contributeur, etc.) Pourquoi choisir WordPress? Parce qu il s agit du CMS le plus utilisé au monde, parce qu il est libre, respectueux des standards et ergonomique. Pour finir, je répondrais : parce qu il est particulièrement intuitif et que vous allez pouvoir rapidement continuer à faire évoluer votre site web. TABLE DES MATIERES * Connexion à votre espace WordPress - p 3 - * Le tableau de bord - p 4 - Général Les mises à jour Les extensions * Editer une page - p 6 - * Présentation de la barre d outils - p 7 - * Modifier une page - p 8 - Les liens, les codes couleur Publier la page, spécifier les attributs de la page (parent, css) Votre affichage écran dans une page Quelques notions fondamentales pour l encodage sur la partie DROITE * Ajouter des médias - p 13 - * Le FTP - p 14 - * Les rôles : aministrateur etc... - p 16 - NB : Etant donné que plusieurs personnes vont pouvoir se connecter simultanément sur l interface WordPress, afin d éviter que les feuilles de style disparaissent et que des plugins inadaptés soient mis en place, j ai pris la décision de bloquer 2 accès dans votre interface : l éditeur (code php et css) et l ajout de plugins. La gestion du cms WordPress p - 2 -

3 Connexion à votre espace WordPress 1) Tapez l adresse de votre site dans la barre de recherche 2) Rajoutez à votre adresse «wp-login.php» 3) Identifiez- vous en saisissant vos identifiants puis cliquez sur «se connecter» Après la saisie, l écran d accueil de WordPress apparait, il s agit de votre tableau de bord : Votre mission consistant à modifier le contenu du site, vous n allez travailler qu avec la partie gauche de votre écran. Vous allez essentiellement utiliser la rubrique des pages La gestion du cms WordPress p - 3 -

4 Tableau de bord: Contient des données générales : statistiques de fréquentation, liste des clics, liste de vos abonnés, etc... All in One SEO : Ceci est une extension (plugin); permet de décrire chaque page (pour moteurs de recherche). Médias: C est votre bibliothèque. C est là que se retrouvent tous les documents, images, vidéos, etc. que vous téléchargez sur votre site. Pages: Pour créer des pages web qui apparaissent dans les onglets (menu et sous-menu). Ce sont les PAGES que nous utiliserons pour faire évoluer le site. Utilisateurs: Permet d ajouter un ou plusieurs utilisateurs (contributeur, administrateur, éditeur, auteur). Permet aussi d accéder à votre profil et vos paramètres personnels. Réglages: Plusieurs outils pour configurer le site. Les 2 plus importants: Général (titre du site, slogan, etc.) / Vie privée (pour rendre public ou non). Contact Form to Ceci est une extension (plugin); a permis la mise en place du formulaire de contact. Pétitions : Ceci est une extension (plugin); permet de créer des pétitions et exporter les signatures vers un document csv au besoin Statistiques : Ceci est une extension (plugin); permet de connaître le nombre de visiteurs, origines, liens... La gestion du cms WordPress p - 4 -

5 Lorsqu une mise à jour est disponible, un marqueur rouge-orange s affiche. Dans ce cas un numéro 1 signifie qu une seule mise à jour est actuellement disponible. En remarquant ce même marqueur au niveau des Extentsions : nous savons qu il s agit d une proposition de mise à jour d une extension. -> soyez prudent! Il est aussi possible qu une mise à jour de wordpress soie conseillée mais peut-être que les extensions ne seraient alors plus compatible. Avant de décider d effectuer une mise à jour, prenez toujours la peine de lire les avis. Votre site est sous wp N oubliez pas que certaines extentions ont été modifiées dans la feuille de style afin d offrir une apparence proche de la charte graphique; une mise à jour pourrait effacer ce travail. N oubliez pas non plus qu une mise à jour disponible depuis uniquement quelques jours ne permet pas beaucoup d avis d utilisateurs et qu il est possible que la mise à jour ne soie pas très compatible avec votre version de wordpress. Surtout, conservez à l esprit : Avant d effectuer une mise à jour: 2 choses : - effectuez un backup via le FTP (FileZilla, Transmit, Cyberduck...) - effectuez un backup de votre base de donnée via phpmyadmin phpmyadmin est une application Web développée en PHP sous licence libre, offrant une interface pour la gestion des bases de données MySQL. Il est ainsi possible, grâce à un simple navigateur Internet de procéder à des opérations permettant de modifier / supprimer des enregistrements, sauvegarder sa base * les extentions: Plugins Pour ce site, 5 extentions ont été ajoutées : 1) Pétition Ce plugin Speakup va permettre d éditer les pétitions et d y ajouter une date d expiration. Vous pouvez exporter la liste des signataires en format CSV que vous pourrez alors ouvrir dans un tableur. 2) Contact Form Ce plugin a été ajouté afin de lutter contre le spam. 3) Seo Ce plugin a été ajouté afin de renseigner les moteurs de recherche. 4) Social links share Ce plugin peut par défaut afficher de nombreux logos et compteurs des réseaux sociaux ; je ne trouve pas ça utile dans chaque page (voire meme doublons dans la pétition) En insérant ce code [really_simple_share] au sein de certaines pages, les logos de réseaux sociaux s affichent. Je les ai programmés pour un affichage en bas de page (ça peut etre au dessus mais c est à mon opinion assez vilain puisque l entête,la bannière, est déjà assez haute; Il existe un grand nombre d autres logos que je ne trouve pas nécessaire de mettre en ligne actuellement. 5) Statistics : permet l affichage des statistiques de votre site (nombre des utilisateurs par jour...) Sachez que l extention Askimet est conseillée par WordPress comme anti-spam. Etant donné qu il est immédiatement lié à la base de donnée et surtout qu il va agir sur les commentaires d un blog, j ai choisi de ne pas l activer. Nous sommes ici dans la réalisation d un siteweb et non pas d un blog. De surcroit le site a été construit avec un formulaire de contact utilisant le captcha (lettres à inscrire avant l envoi du message). La gestion du cms WordPress p - 5 -

6 Editer une page Pour voir l ensemble des pages que contient le site: il faut cliquer sur Toutes les pages Pour modifier une page : il faut cliquer sur modifier Pour créer une nouvelle page : il faut cliquer sur Ajouter La gestion du cms WordPress p - 6 -

7 Présentation de la barre d outils Avant de vous lancer directement dans les modifications de votre site Web, il est important que vous maitrisiez dès le début, l ensemble des outils mis à votre disposition. En effet, pour toutes les rubriques (ex : pages, articles, événements,...) l utilisation est quasi similaire. C est pour cela qu il est important de bien maîtriser chaque icône. Lors de vos modifications, vous travaillerez en version Visuel. Gras Italique Rayé Puces Numérotation citation / gauche / centre / droit / lien / lien brisé / more / option Le point 13 option va permettre d activer ou de désactiver les options suivantes : souligné / justifié / couleur / texte / word / nettoyer / caracteres / décaler / décaler / annuler / rétablir / aide Conseil : Afin d etre à la fois bien référencé et bien positionné (2choses très différentes), il faut toujours : - utiliser 1 seule fois le Titre 1 par Page!!!! - utiliser chaque fois un Titre 2 lorsque nécessaire (autant de fois qu on souhaite par page) -> Ne placez jamais qu un seul titre1 par page La gestion du cms WordPress p - 7

8 * les liens externes Je conseille plutot d activer leurs ouvertures en mode cible target blank. Pourquoi? Pour forcer l ouverture d une nouvelle page; de façon à ce que le visiteur ne quitte jamais le site qu il était en train de consulter. * les liens internes (références vers d autres pages du site) Pour ce cas, il est préférable de ne pas activer le mode cible; Les menus sont assez précis et permettront à l utilisateur de retrouver une page spécifique. * les Codes couleurs La charte graphique de votre site prend sa source dans la bannière (entête) réalisée par Titom. Si vous avez besoin de colorier du texte à un moment donné, mieux vaut connaître les valeurs: R217 G197 B172 Rose vieux pale #d9c5ac R133 G29 B18 Rouge grenat #851d12 R177 G99 B76 Rose Rouge grenat moyen #b1634c --> H2 (titre 2 dans la CSS) R173 G133 B108 Rose gris pale #ad856c R159 G160 B129 Vert pale #9fa081 R110 G117 B76 Vert moyen #6e754c La gestion du cms WordPress p - 8 -

9 * Publier C est via le bouton : Mettre à jour que votre page sera enregistrée et donc publiée en ligne. * le Parent Les menus affichés par défaut sont des parents. Donc un sous-menus est enfant d un parent. * le Modèle Chaque page doit être réalisée via un modèle. Le modèle est une feuille de style CSS. Les pages parent sont sous le modèle two columns, no sidebar. C est le cas de Présentation, Revendication, Actions, Soutenir, Biblio, Contact Les pages enfant sont sous le modèle une colonne, pas de colonne latérale C est le cas de Notre réseau, Constats, Perspectives Mais attention... La page pétition est particulière, elle a sa propre feuille de style : pétition, no sidebar. La gestion du cms WordPress p - 9 -

10 Les options d écran peuvent être activées ou désactivées * Exemple d insertion d un document PDF en mode cible; exemple d une partie de la page Biblio <a target= _blank href= Lettre_ pdf >01_Lettre_ </a> -> par défaut vous aurez créé le lien <a href... il vous suffira d ajouter target= _blank sans oublier l espace avant le href La gestion du cms WordPress p

11 2 plugins à insérer via des balises [really_simple_share] -> permet l affichage programmé des logos facebook twitter... -> A placer en bas de page [ petition id= 1 ] -> permet l affichage d une pétition le id renvoyant à la pétition spécifique -> A placer dans la page La gestion du cms WordPress p

12 Quelques notions fondamentales pour l encodage sur la partie DROITE * Exemple de la page Présentation -> spécificité : l image à droite est cliquable <a href= ><img src= tousensemble.be/wp-content/uploads/pictright/affiche_marchassechomeurw.jpg alt= class= alignright /></a> * Exemple de la page Action -> spécificité : 2 images à droite, séparées d un espace <img src= alt= class= alignright /> </br></br> <img src= jpg alt= class= alignright /> La gestion du cms WordPress p

13 La gestion du cms WordPress p

14 La gestion du cms WordPress p

15 Les Médias Les médias que vous uploadez depuis votre interface de connexion WordPress arrivent dans un dossier créé par WordPress. Puisque un système de gestion de contenu va apprécier une certaine hiérarchie, il sera assez facile de retrouver vos médias importées, quelles soient immédiatement utilisées ou non. Actuellement, via l interface wp, des médias de type image et pdf ont été placées. Dans le dossier wp-content, WP a donc créé un dossier de l année : 2014 au sein duquel il a créé un dossier du mois, en l occurence ici : février donc 02 Via un logiciel FTP, nous pourrons donc voir précisément l endroit des importations. C est ce que nous observons en image sur la page précédente. Le FTP File Transfer Protocol (protocole de transfert de fichiers), ou FTP, est un protocole de communication destiné à l échange informatique de fichiers sur un réseau TCP/IP. Il permet, depuis un ordinateur, de copier des fichiers vers un autre ordinateur du réseau, ou encore de supprimer ou de modifier des fichiers sur cet ordinateur. Ce mécanisme de copie est souvent utilisé pour alimenter un site web hébergé chez un tiers. Un FTP pratique et libre de droit : FileZilla C est dans le dossier download, situé à la racine www que j ai choisi d uploader des zip destinés à être distribués aux visiteurs le souhaitant. Le zip est rapide! Bien plus rapide qu une demande d affichage d un pdf d un poids important. Pour zipper sur mac : CTRL + CLic -> compresser le dossier. La gestion du cms WordPress p

16 Les rôles Administrateur Accède à toutes les fonctionnalités d administration dans un site unique. Éditeur Peut publier et gérer articles et pages, les siens ainsi que ceux des autres utilisateurs. Auteur Peut publier et gérer ses propres articles. Contributeur Peut écrire et gérer ses articles, mais ne peut les publier. Abonné Ne peut gérer que son profil. Le rôle par défaut attribué aux nouveaux utilisateurs ( Abonné ) peut être redéfini depuis les Réglages généraux Puisque a été construit comme un site web, nous trouverons 2 types d utilisateurs dans l interface wordpress : Administrateur Editeur La gestion du cms WordPress p

17 C est dans votre profil que vous pourrez notamment modifier votre mot de passe. La gestion du cms WordPress p

18