« Article Wordpress » : différence entre les versions
Aucun résumé des modifications |
|||
| Ligne 39 : | Ligne 39 : | ||
=== L'onglet '''''Document''''' === | === L'onglet '''''Document''''' === | ||
On y trouve des outils qui concernent l'article en entier : | On y trouve des outils qui concernent l'article en entier : | ||
[[Fichier:img12a.png|gauche|200px|middle]] | <div><div style="float: left">[[Fichier:img12a.png|gauche|200px|middle]]<div> | ||
* '''État et visibilité''' : Permet de définir les accès à l'article en cours et de le supprimer | * '''É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 | * '''Page Links To''' : Pour définir l'URL d'accès à l'article | ||
| Ligne 47 : | Ligne 47 : | ||
* '''Extrait''' : Pour saisir un résumé ou un extrait qui sera affiché à minima sur la page d'accueil | * '''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 | * '''Commentaires''' : Pour définir la possibilité aux visiteurs, connectés ou non, de laisser un commentaire | ||
</div></div></div> | |||
<br clear=all> | <br clear=all> | ||
<gallery widths=150px heights=200px> | <gallery widths=150px heights=200px> | ||
| Ligne 65 : | Ligne 66 : | ||
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. | 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. | 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.<br>Commençons par cliquer sur '''''Définir l'image mise en avant''''' : | ||
Commençons par cliquer sur ''Définir l'image mise en avant'' : | |||
[[Fichier:Img14.png|vignette|centré|''Choisir ou téléverser l'image mise en avant'']] | [[Fichier:Img14.png|vignette|centré|''Choisir ou téléverser l'image mise en avant'']] | ||
Version du 5 avril 2022 à 14:39
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...
S'authentifier
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
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 :
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.
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.
L'onglet Bloc
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.
