Ajouter une balise Span à un texte dans WordPress avec la toolbar
Bonjour à tous amis de WordPress et du Code ❤️,
comment ajouter une balise span à un texte dans WordPress?
Ce que je souhaite faire est d’ajouter un bouton à la barre d’outils de l’éditeur Gutenberg qui une fois cliqué dessus entoure le texte sélectionné avec une balise
Code:
<span data-no-translation=""></span>
. J’ai essayé différentes approches en utilisant l’API de blocs de WordPress, mais le résultat obtenu n’est pas celui attendu. J’arrive juste à voir le bouton no translate.
Apres plusieurs essai le bouton ne fonctionne pas comme prévu. Soit il ne fait rien du tout, soit il ajoute simplement la balise <span> sans le contenu sélectionné soit j’ai ai mieux :
Code:
<span class= »no-translation »>test</span>
hors je veux :
Code:
<span data-no-translation= » »>test</span>
Voici le code JavaScript que j’ai utilisé pour mon bouton personnalisé :
Code:
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
| ( function( wp ) {
var MyCustomButton = function( props ) {
return wp.element.createElement(
wp.blockEditor.RichTextToolbarButton, {
icon: 'editor-code',
title: 'No Translate',
onClick: function() {
props.onChange( wp.richText.toggleFormat(
props.value,
{ type: 'my-plugin/my-custom-button' }
) );
},
isActive: props.isActive,
}
);
}
wp.richText.registerFormatType(
'my-plugin/my-custom-button', {
title: 'No Translate',
tagName: 'span',
className: 'no-translation',
attributes: {
'data-no-translation': 'true'
},
edit: MyCustomButton,
}
);
} )( window.wp ); |
+ ce code ds mon fichier functions.php
Code:
1
2
3
4
5
6
7
8
9
| function mon_plugin_gutenberg() {
wp_enqueue_script(
'mon-plugin-gutenberg',
get_stylesheet_directory_uri() . '/mon-plugin-gutenberg.js',
array( 'wp-blocks', 'wp-dom', 'wp-editor', 'wp-rich-text' ),
filemtime( get_stylesheet_directory() . '/mon-plugin-gutenberg.js' )
);
}
add_action( 'enqueue_block_editor_assets', 'mon_plugin_gutenberg' ); |
Je suis sûr qu’il s’agit d’une petite erreur dans mon code ou d’un problème de configuration, mais je n’arrive pas à trouver la solution. Si quelqu’un pourrait me donner un coup de main pour résoudre ce problème, je vous en serais très reconnaissant.
Je me sers de ma cette attribut pour ne pas traduire certains liens et ou textes,
par exemple pour ma page
J'utilise le plugin TranslatePress qui change/traduit automatiquement les urls si il s'agit d'une url interne
https://translatepress.com/
j’ai mis un lien vers ma home ( https://wikihhc.com/) dans le contenu de ma page :
https://wikihhc.com/guide/hhc/
et si je ne rajoute pas <span data-no-translation= » »> en passant par « modifier en HTML »
le lien n'est plus sur la home mais sur
https://wikihhc.com/es/ pour la page traduite en espagnol par exemple : https://wikihhc.com/es/guia/hhc/
Dans la plupart des cas c’est ce que je désire mais dans cette exemple précis non,)
Merci d’avance pour votre aide !
