WordPress – własny przycisk w wizualnym edytorze

Własny przycisk

Być może jako użytkownik WordPressa, jesteś na etapie pisania własnych skórek, być może już to umiesz, jedno jest pewne, dobra skórka nie obejdzie się bez zestawu shortcodes. Pomocne małe stworki, które odwalają za nas brudną robotę, tylko czy pamiętasz nazwy ich wszystkich? Przy 5 nie ma problemu, ale przy 20? Rozwiązaniem tego problemu może być umieszczenie własnych przycisków w wizualnym edytorze, o czym dziś w tym gościnnym wpisie dla WPNinja.

Celem tego artykułu jest umieszczenie przycisku, który wstawi nam do wpisu jakiś prosty shorcodes, powiedzmy że generujący nam jakiś fajny przycisk za stylami CSS3. Trochę szpanu na stronie nie zaszkodzi.

Shortcode

Jako że wpis nie dotyczy tworzenia shortcode, umieszczę tutaj gotowy kod, wraz z opisem gdzie go umieścić. Jeżeli, ktoś nie wie co oznaczają poniższe linijki, powinien zajrzeć do: Tworzymy własny „shortcode” wyświetlający ogólną liczbę wpisów i komentarzy, lub mojego artykułu: WordPress: ShortCode.

Poniższy kod wstawiamy w pliku functions.php naszej skórki:

function generate_css_button($atts, $content = null){
   $result = extract(shortcode_atts(array(
   'to' => '#'
   ), $atts));
   return "<a class='css_button_blue' href='$to'>$content</a>";
}
add_shortcode('css_button', 'generate_css_button'); 

Pozostaje na jeszcze wstawić do odpowiedniego pliku CSS (w większości przypadków będzie to style.css znajdujący się w katalogu skórki) style dla naszego przycisku.

.css_button_blue{
   position: relative;
   background-color: #2daebf;
   background-image: -webkit-linear-gradient(top, #17c1d7, #2daebf);
   background-image: -moz-linear-gradient(top, #17c1d7, #2daebf);
   font-size: 14px;
   padding: 8px 19px 9px;
   border-radius: 5px;
   color: #fff;
   text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
   font-weight: bold;
   box-shadow: 0 4px 0 #0595a8;
}
 
.css_button_blue:hover{
   text-decoration: none;
   box-shadow: 0 0 1px #0595a8;
   top: 4px;
} 

To wszystko. Nie ma co opisywać kodu, bo to tylko przykład na potrzeby artykułu. Przykład użycia:

[css_button]Clik Me![/css_button] 

Inicjalizacja przycisku

Czas dodać do naszego edytora przycisk, który wstawi nam do wpisu stworzony shortcode. Na samym początku musimy dodać akcję, która zostanie wykonana w trakcie ładowania strony, a jej zadaniem będzie wywołać funkcję rejestrującą nasz przycisk.

add_action('init', 'add_css_button'); 

Kod wywoływanej funkcji znajduje się poniżej:

function add_css_button() {
   if(current_user_can('edit_posts') && current_user_can('edit_pages')){
      add_filter('mce_external_plugins', 'add_new_plugin');
      add_filter('mce_buttons', 'register_new_button');
   }
} 

Powyższa funkcja na samym początku sprawdza uprawnienia osoby, która chce używać edytora i jeżeli wszystko jest ok, to dodajemy nowy plugin do edytora i rejestrujemy przycisk, który go wywoła.

function add_new_plugin($plugin_array) {
   $plugin_array['css_button'] = get_bloginfo('template_url').'/js/plugins.js';
   return $plugin_array;
} 

Powyższa funkcja wskazuje edytorowi, gdzie znajduje się plugin, który chcemy wykorzystać. W tym wypadku plik plugins.js został umieszczony w katalogu js, który znajduje się w głównym katalogu skórki.

function register_new_button($buttons) {
   array_push($buttons, "css_button");
   return $buttons;
} 

Ta funkcja rejestruje nowy przycisk, który chcemy umieścić w edytorze.

Plugin tinyMCE

Pozostaje nam już tylko stworzyć odpowiedni plugin, który zostanie załadowany do edytora i obsłuży nowy przycisk.

span style="color: #3366CC;">'tinymce.plugins.cssButton''css_button', {
            title: 'Add a CSS Button',
            image: url+'/css_button_icon.png''&#91css_button to="#"&#93' + editor.selection.getContent() + '&#91/css_button&#93''css_button' 

Powyższy kod to wszystko czego nam potrzeba, żeby jednak nie zostawiać was ze zdziwieniem na twarzy wyjaśnię co za co odpowiada.

Na samym początku wywołujemy metodę create, która jako parametr przyjmuje nazwę naszego pluginu oraz obiekt (tak wygląda obiekt w JS) przekazujący kilka parametrów. Jednym z nich jest metoda init, z dwoma parametrami:

1. editor – instancja aktualnego edytora

2. url – adres url naszego pluginu

Wewnątrz metody init do obiektu edytora dodajemy przycisk, któremu przypisujemy tytuł, obrazek i funkcję do zdarzenia onclick. Ważne! Adres obrazka jest podawany względem adresu url pluginu. W tym przykładzie obrazek znajduje się w tym samym katalogu. Ważne omówienia są też funkcje setContent() i getContent(). Pierwsza z nich ustawia a druga pobiera zaznaczony w momencie klikania w przycisk tekst. W tym przykładnie zaznaczony tekst został otoczony kodem naszego shortcode i zwrócony do edytora. Ostatnim elementem jest dodanie pluginu przez funkcję tinymce.PluginManager.add.

To wszystko. Teraz wystarczy zapisać i sprawdzić działanie.

Dodatkowy przycisk w wizualnym edytorze

Podsumowanie

Jak widać udało nam się z powodzeniem dodać nowy przycisk do wizualnego edytora tinyMCE, dzięki czemu nie musimy już pamiętać wszystkich zdefiniowanych shortcodes w swojej skórce.

#edytorwizualny #shortcode #tworzeniemotywów #tworzeniewtyczek