Ancien Editeur¶
Attention
Cette section est toujours valide, néanmoins depuis une mise à jour majeure de wordpress l'utilisation des "shortcodes" tend à devenir obsolète. Elle est toujours disponible et fonctionnelle mais si possible utilisez les nouveautés de l'éditeur gutenberg.
L’éditeur de contenu de Wordpress ressemble volontairement à un éditeur de texte comme “Word” ou “LibreOffice”. Mais attention, à part la ressemblance graphique des différents boutons, on ne peut les comparer en termes de fonctionnalité et d'usage.
Copier/Coller du texte dans l’éditeur visuel en provenance de Word n’est pas recommandé. MS Word génère un code HTML déplorable et la mise en forme devient difficile, sans parler des problèmes sur mobile ou pour les moteurs de recherches qui ne comprendront pas le contenu de la page.
Le résultat final risque de déranger l’harmonie du design de votre site.
Le site s’occupe lui-même de l’apparence graphique du contenu : taille de la police, couleur, bordure des images… il ne faut donc pas y penser ou forcer la mise en forme dans le contenu. Il suffit juste d’insérer le texte, les images, les listes et gérer la disposition. Vous pouvez ponctuellement utiliser les mises en formes comme le gras ou l’italique.
Vous avez deux possibilités afin de récupérer le texte depuis Word / LibreOffice La combinaison de touche : “Ctrl+Maj+v” permet de coller du texte brute, l’autre solution est d’activer cet outil sui nettoiera tous les copier/coller.
Cet outil permet d’afficher des options de mise en forme supplémentaire sur une seconde ligne.
Créer des titres¶
Cet outil-là permet de changer l’apparence du bloc ou se situe le pointeur du texte.
C’est là que vous pouvez créer des titres.
Affichage brut¶
Wordpress est livré avec un éditeur visuel agréable mais pour certains éléments il est parfois utile de voir la version “brute” il est possible de naviguer entre ces deux affichages simplement.
Ajouter un lien dans du texte¶
Quand vous êtes dans l’administration, une fois la page à modifier sélectionnée. 
L’outil est là.
Si vous sectionnez un texte comme dans l’exemple c’est lui qui deviendra cliquable.
Cet élément apparaît à l’endroit sélectionné dans le texte.
Vous pouvez utiliser cet élément à fin de faire une recherche dans les pages de votre site une fois la page trouvée cliquer dessus, son lien complétera automatiquement le champ.
Il ne vous restera plus qu’à valider (ou la touche Entrée du clavier).
En suivant la procédure ci-dessus au lieu de laisser Wordpress remplir le lien à votre place entrez vous-même le lien qui conduira ou vous le souhaitez.
Si vous le souhaitez, vous pouvez forcer l’ouverture d’un nouvel onglet au clic sur le lien, il suffit pour cela de cliquer sur le petit engrenage et de sélectionner l’option correspondante et de valider.
Retour à la ligne et Paragraphe¶
Notez la différence d’espace entre les lignes :
Paragraphe
Les deux premières sont séparées par un paragraphe les deux dernières par un retour à la ligne.
Retour à la ligne
Pour faire un paragraphe il suffit d’appuyer sur la touche Entrée du clavier, et pour le retour à la ligne la touche “Maj” et “Entrée” en même temps.
Mise en forme avancée ancien éditeur¶
Afin de faciliter la mise en page du site plusieurs “shortcode” sont disponibles.
Les shortcodes sont des balises qui permettent de générer du code HTML pour le site, généralement très courts et leur utilisation est intuitive.
Utiliser des shortcodes n’implique généralement pas beaucoup d’efforts, en revanche, cela apporte une multitude de fonctionnalités, plus utiles les unes que les autres.
Vous les avez sans doute déjà utilisés auparavant sans vraiment vous poser de questions !
Quand vous éditez une page dans l’administration du site les shortcodes non sont pas interprétés, ils sont utilisables sous cette forme :
Avec une balise d’ouverture et de fermeture ;
Ou isolé ; Vous pouvez les utiliser partout dans vos articles, vos pages, et parfois dans d’autres parties du site comme les widgets.Attention
Attentions à certains shortcode pouvant alourdir inutilement votre page ou pire la rendre illisible.
Exemple simple (Galerie) :¶
Code :
* gallery : est le nom du shortcode * ids : est l'un des attributs * 729,732,731,720 : est la valeur de l’attribut, pour le coup ici un liste d’identifiants uniques d’imageN’essayez pas d’inventer des attributs, referez-vous à la documentation de celui-ci afin de les connaître. Résultat : 
Exemples avancés¶
Les exemples qui suivent utilisent des shortcodes fourni par le plugin : Shortcode ultimate
Ces shorcodes sont fourni avec un editeur accécible à tous ici : 
Lignes et colonnes¶
Code : Pour le code l’indentation n’est pas obligatoire, elle n’est là que pour la lisibilité
[su_row]
[su_column size="1/2"]
TEXTE ICI Colonne 1
[/su_column]
[su_column size="1/2"]
TEXTE ICI Colonne 2
[/su_column]
[/su_row]
Onglets¶
Code :
[su_tabs]
[su_tab title="Titre 1"]Contenu 1[/su_tab]
[su_tab title="Titre 2"]Contenu 2[/su_tab]
[su_tab title="Titre 3"]Contenu 3[/su_tab]
[/su_tabs]
Boite de couleur¶
Code :
[su_box title="C'est la zone de titre" box_color="#099cf3" radius="0"]
Lorem ipsum dolor sit amet[...]Sed aliquam et felis sed congue.
[/su_box]
Citation¶
Code :
**Résultat :** 
Bouton de téléchargement¶
Exemple complet :
[su_button url="https://www.monsite.com/wp-content/uploads/2017/04/dossier-inscription.pdf" style="flat" background="#0f99dd" color="#f8f8f8" size="4" center="yes" icon="icon: download" ]Télécharger le dossier d'inscription[/su_button]
Shortcodes Imbriqués¶
Il est tout à fait possible d’imbriqué des shortcodes les uns dans les autres.
Code :
[su_tabs]
[su_tab title="Titre 1"]
Contenu 1
[/su_tab]
[su_tab title="Titre 2"]
[su_row]
[su_column size="1/2"]
[su_box title="C'est la zone de titre" box_color="#099cf3" radius="0"]
Lorem ipsum dolor sit amet
Sed aliquam et felis sed congue.
[/su_box]
[/su_column]
[su_column size="1/2"]
[su_quote]
Quisque ante nunc, pellentesque ac odio id, feugiat suscipit nulla.
[/su_quote]
[/su_column]
[/su_row]
[/su_tab]
[su_tab title="Titre 3"]
Contenu 3
[/su_tab]
[/su_tabs]
Bonus¶
Si vous deviez faire vous-même le code html pour la mise en forme du dessus, voila le code que vous auriez du taper :
<div class="su-tabs su-tabs-style-default" data-active="1">
<div class="su-tabs-nav">
<span class="" data-url="" data-target="blank">Titre 1</span>
<span class="su-tabs-current" data-url="" data-target="blank">Titre 2</span>
<span class="" data-url="" data-target="blank">Titre 3</span>
</div>
<div class="su-tabs-panes"><div class="su-tabs-pane su-clearfix" style="display: none;"></div>
<div class="su-tabs-pane su-clearfix" style="display: block;">
<div class="su-row">
<div class="su-column su-column-size-1-2">
<div class="su-column-inner su-clearfix">
<div class="su-box su-box-style-default" style="border-color:#077dc2;">
<div class="su-box-title" style="background-color:#099cf3;color:#FFFFFF;">C'est la zone de titre</div><div class="su-box-content su-clearfix">
Lorem ipsum dolor sit amet[…]Sed aliquam et felis sed congue.<br>
</div>
</div>
</div>
</div>
<div class="su-column su-column-size-1-2">
<div class="su-column-inner su-clearfix">
<div class="su-quote su-quote-style-default">
<div class="su-quote-inner su-clearfix">Quisque ante nunc, pellentesque ac odio id, feugiat suscipit nulla.
</div>
</div>
</div>
</div>
</div>
</div>
<div class="su-tabs-pane su-clearfix" style="display: none;">
Contenu 3<br>
</div>
</div>
</div>