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]