Créer des articles. Écrire un premier article

Transcription

1 8 Créer des articles L intérêt principal d un site se concentre surtout autour de la possibilité de publier du contenu, le plus souvent sous la forme d articles (ou "billets"). Nous allons voir dans le détail comment rédiger un article et bien le paramétrer, mais aussi comment gérer les articles une fois qu ils sont publiés et en ligne. Écrire un premier article Figure 8.01 Page de rédaction d un article. Pour rédiger votre premier article, cliquez sur la section Articles dans le menu de navigation situé à gauche de la page web. Une nouvelle fenêtre s ouvre avec la liste des articles existants. Pour le moment, il n y a que l article par défaut de WordPress, intitulé "Bonjour tout le monde!". Dans la section Articles du menu de navigation, désormais ouverte, vous trouverez trois autres pages : Ajouter, Catégories et Mots-clés. Ouvrez la page Ajouter ; vous voilà sur l écran de rédaction d un article (voir Figure 8.01). Sur cette page, vous avez toute une série d informations que nous allons détailler au fur et à mesure de la rédaction de votre article.

2 144 Guide utilisateur WordPress Figure 8.02 Le titre de l article. Le titre Le titre d un article a beaucoup d importance, parce qu il conditionne la lecture de son contenu (voir Figure 8.02). C est le titre qui va retenir ou non l attention du lecteur. Par exemple, si celui-ci passe sur votre site pour un autre article et décide de prolonger sa visite, nul doute que s il voit un titre d article intéressant, il va essayer d en savoir plus en lisant le contenu. Le titre est également très important pour les moteurs de recherche. Il est probable que vous ayez au minimum quelques visites en provenance de ces moteurs, et quand un internaute cherche quelque chose, il veut rapidement le trouver. Plus votre titre sera explicite et donnera une bonne description du contenu et plus il aura d impact. Notez en outre que les moteurs de recherche eux-mêmes utilisent le titre et le permalien de l article, en leur donnant un poids plus fort dans leur recherche. Entre deux articles aux contenus comparables, celui qui a les bons mots-clés dans son titre et son permalien aura plus de chance d arriver en premier dans une recherche. Il faut donc lui apporter une attention toute particulière. Sans être nécessairement accrocheur, il doit déjà donner une idée du sujet dont vous allez parler par la suite. Vous le saisirez directement dans le cadre réservé à cet effet, sous l indication Ajouter un nouvel article. Notez que vous pouvez changer votre titre à n importe quel moment. Ainsi, il n est pas obligatoire de trouver le bon titre avant de rédiger l article. Vous pouvez en choisir un temporaire qui vous aidera à identifier l article, mais que vous changerez par la suite. Finalement, c est souvent le contenu même qui vous aidera à trouver le meilleur titre. Attention au permalien automatique! Une fois que vous avez saisi quelques mots dans le champ du titre, WordPress fera une sauvegarde automatique de votre article, invisible au public, car ayant l état de brouillon. Ce faisant, WordPress crée un permalien en fonction du titre actuel et de vos réglages de permalien. De fait, pour peu que ces réglages reprennent le titre de l article, le risque est grand de vous retrouver avec un permalien également brouillon, ou ne correspondant plus au contenu de l article, voire contenant des mots qui n ont rien à voir : "enquete-a-la-noix", "article-cyriele-a-relireavant-mardi-merci", "titre-bidon-en-attendant-mieux", etc. Il est donc très important, lorsque vous vous décidez sur le titre définitif, de prendre également une décision sur le permalien de l article. Ce permalien est clairement visible juste sous le titre et dispose d un bouton Modifier (mais vous pouvez également

3 Créer des articles 145 double-cliquer sur le permalien). Un champ d édition s ouvre alors, que vous pouvez soit totalement effacer si vous souhaitez que WordPress génère un nouveau permalien à partir du titre désormais en place, soit réécrire mot à mot, par exemple pour ajouter quelques mots-clés. Cliquez sur le bouton OK pour valider votre choix. Figure 8.03 Éditeur visuel. Le contenu de votre article Le contenu, c est le cœur de l article. C est par lui que vous allez faire passer vos messages. À vous de trouver les mots pour vous exprimer, les bonnes phrases qui ont du sens pour essayer de partager vos pensées. Le plus souvent, un style direct, clair et des articles ne dépassant pas les mots sont les plus appréciés en ces temps de zapping Évitez également les phrases et les paragraphes trop longs. Le style doit être fluide et lisible rapidement par l internaute. Cela étant, vous êtes en définitive seul maître à bord, et avez tout loisir d imposer votre style. Pour vous aider à rédiger vos articles dans les meilleures conditions, WordPress vous propose deux éditeurs de texte avec des fonctionnalités différentes, selon les habitudes et les besoins de chacun. Il s agit de l éditeur visuel et de l éditeur texte (ou HTML). Vous pouvez passer de l un à l autre à tout moment, WordPress se chargeant de maintenir le contenu à jour dans les deux cas. L éditeur visuel C est ce qu on appelle un éditeur WYSIWYG (What You See Is What You Get) : ce que vous allez voir dans l éditeur correspond globalement à ce qui s affichera sur votre site (voir Figure 8.03). Vous retrouvez ici le concept et l ergonomie classiques d un logiciel de traitement de texte, mais modifiés pour coller au plus près aux besoins de la rédaction d un article sur le Web. Hormis les boutons classiques de mise en page, vous avez donc quelques options qui vous permettront de personnaliser au mieux vos articles et en même temps votre site. Notez que par défaut, seule la première rangée de boutons est affichée. Pour voir la seconde rangée, cliquez sur le bouton le plus à droite de la rangée affichée. Le Tableau 8.1 fait un récapitulatif des différentes fonctions de l éditeur visuel. Tableau 8.1 : Contenu de l éditeur visuel Boutons Fonctions Met le texte en caractères gras.

4 146 Guide utilisateur WordPress Boutons Fonctions Met le texte en italique. Barre le texte. Crée une liste à puces non ordonnée. Crée une liste numérotée. Permet de mettre en relief une citation (le thème doit avoir pris en compte la balise blockquote). Aligne le texte à gauche. Aligne le texte à droite. Centre le texte. Crée un hyperlien dans votre article. Permet de modifier ou supprimer l hyperlien existant. Ne fait apparaître que la première partie de l article (avant que l on appuie sur le bouton) sur la première page du site, avec un lien Lire la suite Correcteur d orthographe. En cliquant sur la flèche, vous pouvez choisir la langue que vous voulez. Permet de rédiger un article en mode Plein écran. En cliquant sur ce bouton, vous accédez à une deuxième ligne de fonctionnalités de l éditeur visuel. Définit le style pour chaque élément de votre article, que ce soit les paragraphes, les titres de parties ou encore le code. Souligne le texte. Justifie le texte à gauche et à droite. Permet de définir une couleur pour votre texte. Quarante couleurs sont proposées par défaut, mais vous pouvez en choisir une autre en cliquant sur le bouton Plus de couleurs, qui ouvre un sélecteur de couleur très complet, avec trois onglets pour chaque type de recherche de couleur (voir Figure 8.04).

5 Créer des articles 147 Boutons Fonctions Colle du texte simple, issu de n importe quel éditeur de texte. Colle du texte en provenance de Microsoft Word. Efface la mise en forme de tout ou partie du texte. Permet d insérer des caractères particuliers dans un article. Désindente un texte indenté. Indente un texte vers la droite. Annule une modification. Rétablit une modification. Affiche l aide de l éditeur visuel. Figure 8.04 Le sélecteur de couleur.

6 148 Guide utilisateur WordPress Figure 8.05 Éditeur texte. L éditeur texte Figure 8.06 Texte dans l éditeur HTML. Si l éditeur visuel pour WordPress est très complet, il en est autrement pour l éditeur HTML, beaucoup plus basique et sans fioritures (voir Figure 8.05). Cependant, celui-ci ne s adresse pas au même public. Ici, si vous n avez aucune notion en HTML, passez votre chemin. En revanche, si vous avez la fibre "développeur" sans pour autant l être et que vous voulez mieux contrôler le balisage de vos articles, voire ajouter du code HTML complet (par exemple, réaliser un tableau HTML), vous utiliserez rapidement l éditeur HTML. Ici, vous allez avoir le texte tel qu il est compris et assimilé par le navigateur web, alors que via l éditeur visuel, le texte est tel qu il va apparaître dans le navigateur web. Le fond est le même, c est la forme qui est différente. Prenons un exemple simple pour illustrer nos propos. Tapez un mot dans l éditeur HTML. Surlignez-le avec le curseur de votre souris et cliquez sur le bouton b qui est le symbole HTML correspondant à "gras" (pour Bold). Vous pouvez voir que maintenant le texte est entouré par une balise HTML strong, permettant de mettre des portions de texte en exergue, ce que le navigateur interprète en les mettant en gras (voir Figure 8.06). Figure 8.07 Même texte dans l éditeur visuel. Si maintenant vous passez du côté de l éditeur visuel en cliquant sur l onglet Visuel en haut à droite, vous découvrez le même texte mais ici directement en gras, tel que vous le verrez sur le site. Vous pouvez également faire le test en sens inverse ; vous voyez que le résultat est différent alors que le texte est le même (voir Figure 8.07). Dans l éditeur HTML, les options sont moins nombreuses, mais largement suffisantes pour rédiger facilement et rapidement un article (voir Tableau 8.2).

7 Créer des articles 149 Tableau 8.2 : Contenu de l éditeur texte Balises b i link b-quote del (barré) ins img ul ol li code more dictionnaire close tags plein écran Fonctions Met le texte en caractères gras. Met le texte en italique. Ajoute des balises de lien autour du texte sélectionné. Permet de mettre en relief une citation (le thème doit avoir pris en compte la balise blockquote). Barre le texte. Permet de mettre en relief du texte qui aurait été ajouté après publication de l article. Permet d insérer simplement une image dans votre article. Il vous suffit de saisir l URL de l image et de lui donner une description. Ouvre et ferme une liste à puces non ordonnée. Ouvre et ferme une liste numérotée. Ajouter une ligne à une liste (ordonnée ou non). Permet d identifier des exemples de code cités dans votre article et de les séparer du code de la page web. Fonction "more" permettant, lors de l affichage d une suite d articles (comme sur la page d accueil), de couper l article à l endroit indiqué en insérant un lien "Lire la suite...". Permet d obtenir une définition pour un mot précis (utilise le site answers.com). Permet de fermer les balises que vous auriez laissées ouvertes. Ouvre le mode "sans distraction" de WordPress en plein écran. Bien entendu, les balises proposées ici sont celles qui sont le plus souvent utilisées, mais vous pouvez très bien vous servir de toute autre balise HTML qui répondrait plus spécifiquement à votre besoin. HTML filtré. Le code HTML que vous saisissez en mode Texte a cependant ses limites. En effet, par défaut, seuls les administrateurs de WordPress peuvent publier du code tel quel, car ils sont forcément des utilisateurs de confiance. Tous les autres rôles de WordPress sont considérés comme "moins de confiance", et donc, s ils ont bien le droit d utiliser des balises HTML, WordPress se chargera de nettoyer ce code pour en enlever tous les éléments possiblement perturbateurs : JavaScript, balises mal fermées ou attributs inconnus Ceux qui ne sont pas au courant risquent d être surpris du résultat! Si vous souhaitez que certains autres rôles puissent également utiliser des balises HTML non filtrées, il faudra modifier ces rôles, par exemple à l aide de l extension Advanced Access Manager ( Le mode "sans distraction" (plein écran) L un des objectifs de WordPress est de vous laisser vous exprimer sur le Web en vous enlevant tous les obstacles possibles. Le mode plein écran, accessible depuis

8 150 Guide utilisateur WordPress Figure 8.08 L interface sans distraction avant quelle ne s efface. un bouton dans les deux éditeurs, est la culmination de cet objectif : l interface s efface totalement pour ne laisser que le texte, sans aucune distraction. Cliquez sur le bouton Plein écran. La page devient tout blanche, pour n afficher que le champ titre et le champ texte, surplombés d une barre d outils très basiques qui s efface à son tour au bout de deux secondes. S effacent également les cadres des deux champs, ainsi que le compteur de mots et le texte "Il ne reste plus qu à écrire" (voir Figure 8.08). Vous pouvez ainsi littéralement remplir votre page blanche. Si vous avez besoin de la barre d outils, faites glisser le curseur de votre souris en haut de la page, et elle surgira aussitôt. Vous pouvez passer ici aussi librement de l éditeur visuel à l éditeur texte, chacun offre quelques outils, mais juste l essentiel. Le bouton Enregistrer de la barre d outils fera une sauvegarde de votre brouillon, que vous pourrez publier une fois de retour au mode normal. Et justement, pour revenir au mode normal, faites apparaître la barre d outils et cliquez sur le lien Sortir du plein écran à gauche. Ajouter un média Le processus d ajout de fichiers média et de création de galerie a été complètement remanié pour la version 3.5 de WordPress. Nous y consacrons donc le Chapitre 10, Gérer ses images, vidéos et sons. Paramètres de publication La page de rédaction d un article comprend une colonne latérale à droite, qui vous permet de définir différentes informations concernant l état de l article, mais aussi de définir des mots-clés et une ou plusieurs catégories pour votre article. Le premier bloc, Publier, vous permet de gérer tout ce qui touche à la publication même d un article (voir Figure 8.09).