Article Wordpress
Premier article sur le site de l'école
Un petit tuto pour créer rapidement un premier article sur le site de l'école. Seules les notions de base sont abordées ici... On commence par se rendre à l'adresse http://les-bosquets.fr : Menu ACCÈS RESTREINT > CONNEXION
Sur la mire d'authentification, on renseigne ses identifiants puis Envoyer
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
C'est parti !
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...)
La première icône indique le type de bloc (paragraphe simple ici). Un survol permet de le modifier.
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 textes classique.
Un survol de l'espace en-dessous du bloc fait apparaître des outils permettant d'ajouter un nouveau bloc.
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
J'ai indiqué plus haut, sans détailler la procédure, qu'on pouvait insérer une image dans le paragraphe (on peut également créer un bloc image qui va s'insérer entre les paragraphes).
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,...). Si la préparation de l'image n'a pas été faite avant, la bibliothèque de médias permet encore de le faire. Commençons par cliquer sur Définir 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électionner des fichiers//" :
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 :
img16.png?300 L'image se rajoute à la bibliothèque :
- Modifier l'image
Dans le bandeau de droite, on trouve les informations de l'image sélectionnée.
img18.png?300 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,...
Fichier:Img19.png?700 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**//.
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.
img22.png?400 L'image apparaît désormais dans le bandeau de droite sous la rubrique //Image mise en avant//.
img23.png?400 Un clic sur le bouton //**Prévisualiser**//...
img28.png?400 ...ouvre un nouvel onglet dans lequel s'affiche un visuel de l'article en cours. Refermer l'onglet pour revenir à la rédaction.
Bloc image
Pour insérer l'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) :
img25.png?400 On suit les instructions pour indiquer l'origine du fichier (glisser-déposer, bibliothèque,...).
img26.png?400 Une fois le fichier sélectionné, il apparaît dans le nouveau bloc. On peut le compléter, le modifier, le supprimer...
img27.png?400 Pour se faire une idée de l'aspect visuel de l'article, on clique sur //**Prévisualiser**//. Un nouvel onglet s'ouvre.
img28.png?400 On voit que l'image est placée à l'endroit où on avait ajouté un bloc.
Fermer l'onglet pour revenir à la rédation.
img29.png?400 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).
Où est passé mon article ???
A force de clics et de navigations, il se peut qu'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.
img20.png?300 L'article en cours porte la mention //Brouillon//. On clique sur //Modifier// pour continuer le travail.
