Article Wordpress

Un petit tuto pour créer rapidement un premier article sur le site de l'école. Il s'affichera sur la page d'accueil au-dessus des articles précédents. Seules les notions de base sont abordées ici...

S'authentifier

On commence par se rendre à l'adresse http:les-bosquets.fr : Menu ACCÈS RESTREINT > CONNEXION

Accès restreint

Sur la mire d'authentification, on renseigne ses identifiants puis Envoyer

Authentification

Le tableau de bord s'affiche. On indique qu'on veut créer un nouvel article par le bandeau de gauche ou par le menu supérieur :

• 
  Bandeau de gauche
• 
  Menu

On saisit un titre

• 
  Avant la saisie
• 
  Avec le titre

Après avoir saisi le titre, on passe à la suite...

Le paragraphe simple

Au survol du texte, des icônes apparaissent. Leur survol affiche des explications claires. En cliquant sur la zone de texte, on crée un bloc par défaut : le paragraphe simple. La barre d'outils est réduite au strict minimum avec des icônes classiques de mise en forme du texte, d'insertion de lien,... La flèche et les trois point ouvrent un menu déroulant pour plus d'options (image dans le paragraphe, outils de bloc tels que remonter/descendre, ajouter aux blocs réutilisables, supprimer le bloc,...) D'autres options sont accessibles dans le bandeau de droite. Sous l'onglet "Bloc", elles concernent le paragraphe en cours et permettent de modifier son aspect visuel (police, couleur d'arrière-plan, de texte, formatage...)

Paragraphe simple

La première icône indique le type de bloc (paragraphe simple ici). Un survol permet de le modifier.

Modifier le type de bloc

Le paragraphe classique

En choisissant paragraphe classique, on accède à une barre d'outils plus élaborée. Le menu et la barre d'outils se rapprochent de ce que l'on peut trouver dans un traitement de texte classique.

Paragraphe classique

Un survol de l'espace en-dessous du bloc fait apparaître des outils permettant d'ajouter un nouveau bloc.

Possibilité d'ajout

Le bloc image

Pour insérer une image entre deux paragraphes, on crée un nouveau bloc image à l'endroit souhaité. Un survol de la souris fait apparaître le signe +. On clique dessus et on choisit le type de bloc à insérer (image ici)  :

Insérer un bloc image

On suit les instructions pour indiquer l'origine du fichier (glisser-déposer, bibliothèque,...).

Choisir l'origine du fichier

Une fois le fichier sélectionné, il apparaît dans le nouveau bloc. On peut le compléter, le modifier, le supprimer...

Le bloc image

• Détails du menu de bloc (cliquer pour faire défiler):

• 
  Définir l'alignement
• 
  Remplacer l'image
• 
  Insérer un lien

Pour se faire une idée de l'aspect visuel de l'article, on clique sur Prévisualiser. Un nouvel onglet s'ouvre.

Bouton Prévisualiser

On voit que l'image est placée à l'endroit où on avait ajouté un bloc. Fermer l'onglet pour revenir à la rédaction.

Une fois le travail achevé, on clique sur le bouton Publier. L'article est désormais accessible pour les visiteurs (en fonction des réglages de visualisation).

Exemple

Voir également #Image mise en avant

Le bandeau de droite

L'onglet Document

On y trouve des outils qui concernent l'article en entier :

• État et visibilité : Permet de définir les accès à l'article en cours et de le supprimer
• Page Links To : Pour définir l'URL d'accès à l'article
• Catégories : Pour associer l'article à une catégorie d'articles (permet de regrouper les articles)
• Étiquettes : Pour définir une ou plusieurs étiquettes liées à l'article.
• Image mise en avant : Définir une image qui sera affichée sur la page d'accueil du site
• Extrait : Pour saisir un résumé ou un extrait qui sera affiché à minima sur la page d'accueil
• Commentaires : Pour définir la possibilité aux visiteurs, connectés ou non, de laisser un commentaire

• 
  État et visibilité
• 
  Page Links To
• 
  Permalien
• 
  Catégories
• 
  Étiquettes
• 
  Image mise en avant
• 
  Extrait
• 
  Commentaires

Image mise en avant

Image mise en avant

On a vu plus haut qu'on pouvait insérer un bloc image (on peut également insérer une image dans un paragraphe classique via le menu).

Ici, il s'agit d'une image générique pour l'article complet. Elle s'affiche sur le résumé visible sur la page d'accueil. On choisit donc une image qui illustre ou résume l'article complet.

La procédure est la même pour toutes les insertions d'images. Il est judicieux de les stocker sur l'ordinateur avant de commencer la rédaction de l'article ou de la page. Afin de ne pas charger inutilement le serveur et d'accélérer l'affichage de la page côté lecteur, il vaut mieux alléger les fichiers images avant de les téléverser en modifiant leur taille avec un logiciel de traitement d'images (Gimp, paint.net, XnView...). Si la préparation de l'image n'a pas été faite avant, voyons comment la bibliothèque de médias permet encore de le faire.
Commençons par cliquer sur Définir l'image mise en avant :

Choisir ou téléverser l'image mise en avant

On arrive sur la Bibliothèque des médias (accessible également à partir du tableau de bord, bandeau de gauche). Cliquons sur l'onglet Téléverser de fichiers. Un popup intégré (non déplaçable en-dehors du navigateur) s'ouvre.

Téléverser une image

On peut glisser/déposer le ou les fichiers à téléverser, ou les sélectionner en cliquant sur "Sélectionnez des fichiers" :

Boîte de dialogue de téléversement

On arrive sur un sélecteur de fichier qui permet de naviguer dans les répertoires de l'ordinateur. On sélectionne une ou plusieurs images et on valide :

L'image est ajoutée à la bibliothèque :

Modifier l'image

Dans le bandeau de droite, on trouve les informations concernant l'image sélectionnée.

Remarquer la taille : ici 1MB. Un peu gros... En cliquant sur "Modifier l'image", on ouvre un nouvel onglet dans lequel on va pouvoir agir sur sa taille, la recadrer,...

En saisissant une nouvelle valeur pour la largeur, la hauteur est recalculée automatiquement pour respecter les proportions. Baisser progressivement pour arriver à une taille acceptable en fonction de l'utilisation souhaitée (<500Ko). A chaque modification, on clique sur Redimensionner.

• 
  Réglage manuel
• 
  Redimensionner
• 
  Cible des modifications
• 
  On modifie un paramètre puis : Redimensionner
• 
  On vérifie, puis : Mettre à jour

Une fois le travail effectué, on clique sur Mettre à jour puis on ferme l'onglet pour revenir à l'onglet de départ. On vérifie que l'image est sélectionnée et on clique sur Sélectionner pour l'insérer dans le document.

L'image apparaît désormais dans le bandeau de droite sous la rubrique Image mise en avant.

Un clic sur le bouton Prévisualiser...

...ouvre un nouvel onglet dans lequel s'affiche un visuel de l'article en cours. Refermer l'onglet pour revenir à la rédaction.

Où est passé mon article ???

A force de clics et de navigations, il se peut que l'on ait perdu la page sur laquelle on travaillait. Pas de panique ! Un brouillon est enregistré automatiquement. En cliquant sur le menu du tableau de bord Articles -> Tous les articles on affiche l'ensemble des articles du site.

L'article en cours porte la mention Brouillon. On clique sur Modifier pour continuer le travail.