Discussion :

[Lucas Lopez]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

<span class= »no-translation »>test</span>

hors je veux :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<span data-no-translation= » »>test</span>

Voici le code JavaScript que j’ai utilisé pour mon bouton personnalisé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

[mathieu]

le nouvel éditeur gutenberg est très particulier puisqu'il demande des connaissances avancées en javascript pour être personnalisé.
vous pouvez voir des exemples là :
https://awhitepixel.com/blog/wordpre...t-environment/
https://kinsta.com/fr/blog/blocs-gutenberg/

donc vous aurez peut-être plus d'aide dans le forum javascript.

puisque votre besoin est de modifier le comportement de l'extension TranslatePress, avez-vous déjà réfléchi à faire cela en php ?
en sachant que cette extension n'est pas libre donc je pense que ça sera compliqué de trouver de l'aide sur un forum pour faire cela.

[Lucas Lopez]

le nouvel éditeur gutenberg est très particulier puisqu'il demande des connaissances avancées en javascript pour être personnalisé.
vous pouvez voir des exemples là :
https://awhitepixel.com/blog/wordpre...t-environment/
https://kinsta.com/fr/blog/blocs-gutenberg/

donc vous aurez peut-être plus d'aide dans le forum javascript.

puisque votre besoin est de modifier le comportement de l'extension TranslatePress, avez-vous déjà réfléchi à faire cela en php ?
en sachant que cette extension n'est pas libre donc je pense que ça sera compliqué de trouver de l'aide sur un forum pour faire cela.

Merci beaucoup pr ta réponse et de me pointer le bon chemin,
je vais creuser dans cette direction!