Dodanie niestandardowych przycisków za pomocą QuickTag w WordPress

Najpierw co to jest QuickTag?. Jest to API w wordpressie, które umożliwia dodanie przycisków (button) do edytora tekstu w panelu administratora.
Przydaje się na takich stronach jak ta 😉

Aby dodać szybki tag, musisz podłączyć niestandardową funkcję do hooka admin_print_footer_scripts. Chodzi o dodanie niestandardowego kodu javascript w stopce administratora. Interfejs API udostępnia wbudowaną funkcję o nazwie addButton:

QTags.addButton(id, display, arg1, arg2, access_key, title, priority, instance);

Ta funkcja przyjmuje osiem argumentów:

• id: (string) (wymagany) id HTML przycisku
• display: (string) (wymagany) jest to wyświetlany tekst w przycisku
• arg1: (string) (wymagany) jest to tag początkowy do wstawienia, np. <span> lub wywołanie funkcji js po kliknięciu w przycisk
• arg2: (string) (opcjonalny) jest to tag końcowy, np. </span>, pozostawiamy pusty jeżeli tag nie trzeba zamykać np. <br>
• access_key: (string) (opcjonalny) skrót klawiszowy dla przycisku
• title: (string) (opcjonalny) tytuł po najechaniu na przycisk
• priority: (int) (opcjonalny) liczba reprezentująca położenie przycisku na pasku 1-9 = pierwsza, 11 - 19 = druga, 21 - 29 = trzecia itd
• instance: (string) (opcjonalny) ogranicz przycisk do określonej instancji Quicktags

QuickTag ma kilka domyślnych przycisków, które możemy dodać do naszej strony.

Poniżej przykład funkcji jakiej używam aby stawić przycisk [wstaw kod] oraz kod na stronę.

function wp_add_custom_quicktags()
{
  if (wp_script_is('quicktags')) {
?>
    <script>
      QTags.addButton('add-code', 'wstaw kod', add_code);

      function selected_txt() {
        var tekst = document.getElementById('content');
        return tekst.value.substring(tekst.selectionStart, tekst.selectionEnd);
      }

      function add_code() {
        var tekst = selected_txt();
        var url = prompt('Podaj język https://highlightjs.readthedocs.io/en/latest/index.html', '');

        if (url === null) return;
        if (add_code) {
          QTags.insertContent(`[cc lang="${url}"]${tekst}[\/cc]`);
          // musiałem dać \/cc powinno być /cc bo wycina to moja funkcja w php
        }
      }
    </script>
  <?php
  }
}
add_action('admin_print_footer_scripts', 'wp_add_custom_quicktags');

Wynikiem powyższej funkcji jest dodanie przycisku [wstaw kod]

Kliknięcie tego przycisku powoduje wyświetlenie promptu w którym mamy możliwość podania języka programowania a ten kod stawiany jest do edytora [cc lang="js"][\/cc]