Ajouter l'attribut rel aux liens dans Wordpress TinyMCE

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.

Copie d'écran de création d'un lien dans l'éditeur classique, les logos WordPress et TinyMCE sur fond de Venise Hollandaise à Amsterdam de nuit

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 :

<a href="https://murviel-info.com">bombes</a>

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.

<a href="https://murviel-info.com" target="_blank" rel="noopener">bombes</a>

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.

/**
 * 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);

/**

* 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>.

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 ),
] );

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 :

Fenêtre modale des liens enrichie de checkboxes pour l'attribut rel. Les cases Nouvel onglet, noopener et noreferer sont cochées

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 :

<a href="https://murviel-info.com" target="_blank" rel="noopener noreferer">bombes</a>

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 :

   add_filter( 'wp_targeted_link_rel', [$this, 'wp_targeted_link_rel'] );
/*
..
*/
   public function wp_targeted_link_rel( $rel ) {
      // Original value: noopener noreferrer
      return false;
   }

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

add_filter( 'wp_targeted_link_rel', '__return_false' );

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.

Ajouter l’attribut rel aux liens dans WordPress TinyMCE

Le bouton `Insérer un lien`

Lien et attributs

Javascript

Les cases à cocher

Sauvegarde du post

Soumettre un commentaire Annuler la réponse

Sommaire

Ajouter l’attribut rel aux liens dans WordPress TinyMCE

Le bouton Insérer un lien

Lien et attributs

Javascript

Les cases à cocher

Sauvegarde du post

Articles connexes

Problème du this undefined dans un gestionnaire d’événement React

React sans create-react-app

Méthode pour obtenir tous les éléments frères suivants d’un élément en javacript

Compteur de secondes en javascript

Soumettre un commentaire Annuler la réponse

Sommaire

Étiquettes

Le bouton `Insérer un lien`

Problème du `this undefined` dans un gestionnaire d’événement React