Cet article est un tutoriel exemple. Ceci est le paragraphe introductif de l’article, il faut particulièrement le soigner car il s’affiche dans l’article et dans les pages qui listent les articles. Ce paragraphe doit faire 3 à 4 lignes maximum, sur un écran en full HD sans zoom excessif. Il ne doit contenir que texte, pas de titre ni d’image et on évitera de mettre des liens, du gras ou de italique dans ce paragraphe .

Structurer son article avec des titres

Les titres de niveau 2 en html sont encadré par une balise <h2> ouvrante et une balise </h2> fermante. WordPress génère automatiquement le code html requis, il suffit de modifier le type ou le style du bloc, et pour cela la barre d’outil de mise en forme des blocs de WordPress est d’une grande utilité.

La technique pour aligner à droite des images vous sera expliqué un petit peu plus bas, mais elle n’est pas sans poser des problèmes.

Une fois de texte transformé en titre, on peut ajuster le niveau de titre.
On notera d’ailleurs qui est possible de positionner des images à droite d’un paragraphe de texte, image qui ont pu être importé au moyen d’un simple copier / coller.

Sous titres d’un article

Les articles seront structurés uniquement avec des titres de niveau 2 et éventuellement des titres de niveau 3.
Il est exclu d’utiliser des éléments tels que la coloration du texte pour ne pas détruire la charte graphique du site.
On évitera d’abuser des styles tels que le gras ou l’italique.

On peut utiliser le bloc citation simple

La beauté est dans les yeux de celui qui regarde.

Oscar Wilde

ou le bloc citation en exergue

mais il ne faut abuser ni de l’un, ni de l’autre. Le style CSS de ces blocs est de la responsabilité du webmester, qui l’ajuste en écrivant du code CSS dans une feuille de style. Il ne faut donc utiliser aucune astuce manuelle pour forcer un rendu artificiel qui casserait la charte graphique.

Publier un code avec coloration syntaxique

Il me suffit de cliquer sur le signe +, et de chercher et choisir Code Mrror Block dans la liste des blocs proposés.
Le thème graphique ne doit pas être modifié, par contre il faut indiquer le langage sur lequel appliquer la coloration syntaxique.

Un exemple avec du code HTML

<! -- La coloration syntaxique  -->
Un site internet de référence poue débuter en HTML <a href="https://www.w3schools.com/">w3schools.com</a>

Sur la version publique de cette article, un clic sur le bouton lecture interprétera le code HTML.

Un exemple avec du code CSS

body{
	margin: 0;
	padding : 0;
	font: 18px "Lucida Sans Unicode", sans-serif;
	color: #424242;
}

Un exemple avec du code python

print("Hello, World!")

Pour l’instant, le code python ne peut être exécuté, mais des recherches sont menées pour y arriver à terme.

Du code en ligne, dans le texte

Le code python ci-dessus utilise la fonction print() native de python, celle ci permet d’afficher dans la console d’exécution un texte, en l’occurrence ici le traditionnel Hello, World!.

Ainsi, en utilisant la fonction en savoir plus de la barre d’outil de WordPress, on peut ajouter du code en ligne, comme dans l’exemple ci-dessus.

Respecter le droit d’auteur sur les images

Il est interdit de copier et d’insérer une image :

• trouvée sur google
• copiée sur un autre site
• dont on ne connait pas le copyright exact.

Il est souhaitable de :

• Lire ce tutoriel : Trouver des images libres de droit
• fabriquer soit même ces images, à partir d’éléments graphiques sans copyright
• prendre soi même ses photos

L’insertion des images dans un article peut-être un peu technique notamment si on essaye de le faire flotter à gauche ou à droite. A vous de tester.

Ajouter un fichier .py à un article

Si votre projet est un projet python, vous devrez d’un part insérer et commenter des petites portions de code en utilisant Code Mrror Block présenté précédemment, mais aussi déposer l’intégralité de votre projet, le fichier .py à la fin de votre article.

Pour des raisons de sécurité, il n’est pas possible de déposer tel que un fichier .py, il va falloir compresser ce fichier .py avec 7zip, logiciel gratuit et open source.

Sur Windows 10, un simple clic-droit permet de réaliser cette compression

Le fichier .7z peut alors être déposé dans l’article via un simple glisser déposer.

Vincent ROBERT

Enseignant de mathématiques et de spécialité NSI, Lycée Louis Pasteur d’Avignon.
Aime compter jusqu’à 666 mais s’arrête souvent à 42.
Auteur du livre Découvrir la calculatrice NumWorks.

nsi.xyz