L’éditeur classique de WordPress est TinyMCE
Tiny Moxiecode Content Editor. Avec la version 5, WordPress est passé à Gutenberg l’éditeur par blocs. On peut néanmoins vouloir continuer à utiliser l’ancien éditeur, dit l’éditeur classique avec le plugin Classic Editor.
Le bouton Insérer un lien
Lorsque l’on insère des liens, l’éditeur classique de WordPress possède un plugin évolué wplink.js
, qui ouvre une zone de saisie pour entrer le lien et une fenêtre modale qui permet de régler certains paramètres.
Lien et attributs
Si l’on ne définit rien, c’est-à-dire si l’on ne coche pas la case Ouvrir dans un nouvel onglet
, le lien inséré, à savoir la balise <a>
ne possède que l’attribut href
:
1 |
<a href="https://murviel-info.com">bombes</a> |
Si la case Ouvrir dans un nouvel onglet
est coché, les attributs target="_blank"
et rel="noopener"
sont ajoutés.
1 |
<a href="https://murviel-info.com" target="_blank" rel="noopener">bombes</a> |
Pour le SEO
Search Engine Optimization, l’attribut rel
est très important. On peut donc vouloir contrôler un peu plus ce qui est ajouté automatiquement.
Javascript
Aucun filtre n’existe pour agir sur ces paramètres. On peut cependant ajouter des boîtes à cocher en javascript en écoutant l’événement wplink-open
qui est déclenché lorsque la fenêtre modale est ouverte. On surcharge également les fonctions getAttrs()
et buildHtml()
de l’objet wpLink
, définies dans le plugin wplink.js
.
Le code suivant, en javascript, permet d’ajouter des choix supplémentaires tels que noopener
, noreferer
, sponsored
, nofollow
ou external
.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
/** * Fonctionality to alter wplink plugin, * Xavier Birnie-Scott * 2020-12-05 */ ($ => { const rels = ['noopener', 'noreferer', 'sponsored', 'nofollow', 'external']; const mark_as = translate.mark_as_string; const shift = 140; const modal_height = 600; $(document).on('wplink-open', wrap => { // Sets the height of the modal $('#wp-link-wrap').height(modal_height); // Adds 4 checkboxes if (! $('[name="noopener"]').length) { // Appends checkboxes const $linkOptions = $('#link-options'); rels.forEach(el => { const label = mark_as.replace(/%s/, el); $linkOptions.append('\ <div><label><span></span>\ <input type="checkbox" name="' + el + '"/> ' + label + '\ </label></div>'); }); // Position of #most-recent-results div const $mostRecentResults = $('#most-recent-results'); $mostRecentResults.css('top', parseInt($mostRecentResults.css('top')) + shift + 'px'); } }); // Overrides wpLink.getAttrs function from wplink.js window.wpLink.getAttrs = () => { wpLink.correctURL(); var relation = ''; rels.forEach(rel => { relation += $('[name="' + rel + '"]').prop('checked') ? `${rel} ` : ''; }); relation = relation.trim(); return { href: $.trim($('#wp-link-url').val()), target: $('#wp-link-target').prop('checked') ? '_blank' : null, rel: relation.length ? relation : null }; }; })(jQuery); |
https://gist.github.com/xavier-bs/ebec023da0b827d3e74df39056af6589
Ce fichier javascript doit être ajouté avec la fonction wp_enqueue_script()
et le plugin wplink
en dépendance. La chaîne de caractère translate.mark_as_string
est la traduction de Mark as <code>%s</code>
.
1 2 3 4 |
wp_enqueue_script( 'post-wplink', "{$url}/post-wplink.js", ['jquery', 'wplink'], VERSION, true ); wp_localize_script( 'post-wplink', 'translate', [ 'mark_as_string' => __( 'Mark as <code>%s</code>', TEXTDOMAIN ), ] ); |
Le paramètre shift
déplace la section des articles internes au blog de 140px
vers le bas, le paramètre modal_height
règle la hauteur de la fenêtre à 600px
. Les valeurs de l’attribut rel
sont définis dans le tableau rels
, on peut enlever ou ajouter des valeurs. Par souci d’esthétisme, les paramètres shift
et modal_height
seront à ajuster.
Les cases à cocher
La fenêtre modale des paramètres du lien est enrichies de cases à cocher :
Le lien obtenu, lorsque les cases Ouvrir dans un nouvel onglet
, Mark as noopener
et Mark as noreferer
sont cochées, est de la forme :
1 |
<a href="https://murviel-info.com" target="_blank" rel="noopener noreferer">bombes</a> |
Sauvegarde du post
Depuis 4.7.4, WordPress ajoute noopener noreferrer
sur les liens qui ont un attribut target
. Lorsque le post est enregistré, les valeurs manquantes sont ajoutées à l’attribut rel
si l’attribut target
existe. Ceci est fait dans wp-includes/formatting.php
. Pour modifier ce comportement, utilisez le filtre wp_targeted_link_rel
pour modifier la chaîne noopener noreferrer
.
La publication sera sauvegardée en base de données avec ces valeurs dans l’attribut rel
. Si l’on ne veut rien rajouter automatiquement :
1 2 3 4 5 6 7 8 |
add_filter( 'wp_targeted_link_rel', [$this, 'wp_targeted_link_rel'] ); /* .. */ public function wp_targeted_link_rel( $rel ) { // Original value: noopener noreferrer return false; } |
ou bien
1 |
add_filter( 'wp_targeted_link_rel', '__return_false' ); |
Et hop, on peut permettre à un auteur de créer des liens optimisés pour le SEO
dans l’éditeur classique.