Jak dodać własne przyciski do edytora TinyMCE w WordPress

Edytor klasyczny w WordPress, znany jako TinyMCE, wciąż jest popularny wśród użytkowników, którzy wolą tradycyjny sposób edycji treści zamiast Gutenberga. Jedną z jego zalet jest możliwość dodawania własnych przycisków, które mogą znacznie przyspieszyć pracę i zwiększyć funkcjonalność edytora.

W tym artykule pokażemy krok po kroku, jak dodać własny przycisk do TinyMCE w WordPress.

Dlaczego warto dodać własne przyciski?

Dodanie niestandardowych przycisków pozwala:

• wstawiać często używane fragmenty kodu (np. shortcode’y),
• dodawać niestandardowe style tekstu,
• wprowadzać własne znaczniki HTML,
• przyspieszyć pracę redaktorów treści.

Krok 1: Dodaj filtr do functions.php

Aby zarejestrować nowy przycisk, otwórz plik functions.php swojego motywu (lub użyj wtyczki typu Code Snippets) i dodaj poniższy kod:

function myplugin_add_tinymce_button( $buttons ) {
    array_push( $buttons, 'mycustombutton' );
    return $buttons;
}
add_filter( 'mce_buttons', 'myplugin_add_tinymce_button' );

function myplugin_register_tinymce_plugin( $plugin_array ) {
    $plugin_array['mycustombutton'] = get_template_directory_uri() . '/js/mycustombutton.js';
    return $plugin_array;
}
add_filter( 'mce_external_plugins', 'myplugin_register_tinymce_plugin' );

Ten kod:

• rejestruje przycisk o nazwie mycustombutton,
• wskazuje plik JS, który zdefiniuje zachowanie przycisku.

Krok 2: Utwórz plik JavaScript z logiką przycisku

W katalogu motywu (np. /js/) utwórz plik mycustombutton.js i dodaj:

(function() {
    tinymce.create('tinymce.plugins.MyCustomButton', {
        init: function(editor, url) {
            editor.addButton('mycustombutton', {
                text: 'Wstaw shortcode',
                icon: false,
                onclick: function() {
                    editor.insertContent('[moj_shortcode]');
                }
            });
        }
    });
    tinymce.PluginManager.add('mycustombutton', tinymce.plugins.MyCustomButton);
})();

W powyższym przykładzie kliknięcie przycisku doda do treści shortcode [moj_shortcode].

Krok 3: Odśwież edytor

Zaloguj się do panelu WordPress, przejdź do Wpisy → Dodaj nowy i upewnij się, że używasz klasycznego edytora.
Nowy przycisk powinien pojawić się w pasku narzędzi TinyMCE.

Dodatkowe możliwości

Możesz:

• dodać ikonę do przycisku (używając np. Dashicons),
• otwierać okna dialogowe z dodatkowymi opcjami,
• przypisać skróty klawiszowe do swojego przycisku.

TinyMCE jest bardzo elastyczny, więc możliwości personalizacji są ogromne.

Podsumowanie

Dodanie własnych przycisków do edytora TinyMCE to prosty sposób na zwiększenie efektywności pracy redaktorów i ułatwienie wstawiania powtarzalnych elementów treści.
Niezależnie od tego, czy chcesz dodawać shortcode’y, własne znaczniki HTML czy formatowanie – możesz to zrobić w zaledwie kilku linijkach kodu.