Kurs WordPress (12)

Autor: Damian Chodorek • Opublikowany: 20 stycznia 2015 • Ostatnia aktualizacja: 8 lutego 2015 • Kategoria: kursy, wordpress

Dodawanie własnej funkcjonalności do edytora treści.

Być może zastanawiałeś się kiedyś co jeśli stworzysz piękny, skrojony na miarę szablon dla jakiejś firmy lub osoby, a potem Twórca treści popsuje go. Jak? Poprzez niechlujne wstawianie zdjęć, niekonsystentne korzystanie z czcionek i innych efektów tekstowych, które nie będą do siebie pasowały.

Najlepiej byłoby gdyby użytkownik korzystał z kodu HTML i CSS’owych klas, stworzonych na potrzeby szablonu. Jeżeli tego nie potrafi, to żeby przynajmniej używał Twoich shortcodes. Czasem jednak mamy wątpliwości czy klient da radę.

Łatwym rozwiązaniem powyższych problemów jest zaprojektowanie własnego edytora tekstowego. Z własnymi przyciskami, które owijają zaznaczony tekst w odpowiednie znaczniki HTML posiadające odpowiednie klasy. A już w ogóle idealnie byłoby, gdyby użytkownik widział na bieżąco graficzne zmiany, które dokonuje.

Z tego artykułu dowiesz się jak tworzyć własne i usuwać już istniejące przyciski z edytora wbudowanego w WordPressa.

TinyMCE

Tak właśnie nazywa się domyślny edytor WYSWIG (What You See Is What You Get) w WordPressie. Posiada on bardzo potężne możliwości (niektóre domyślnie wyłączone). Można go także rozszerzać pisząc własne wtyczki.

Artykuł, w którym pokazano jak włączyć nieaktywne przyciski jest tutaj. Listę dostępnych przycisków znajdziesz tutaj. W tym momencie nie będzie Ci to jednak potrzebne.

Własne przyciski

Oczywiście może zdarzyć się, że domyślna funkcjonalność nie wystarczy. W takim wypadku będziesz potrzebował rozszerzyć edytor swoimi przyciskami. Na potrzeby tego artykułu dodamy dwa:

  • przycisk owijający test w znacznik HTML’owy,
  • przycisk wstawiający parametryzowany shortcode.

W katalogu z Twoim szablonem utwórz folder my-editor-buttons, a w nim pliki: buttons.php, buttons-plugin.js oraz buttons-styles.css. Do pliku functions.php dodaj poniższą linijkę, która dołączy nowo powstały plik.

require( 'my-editor-buttons/buttons.php' );

Nasze przyciski nazwiemy: my-wrapper-button oraz my-shortcode-button. Pierwszy z nich będzie potrzebował jakichś stylów CSS, aby było widać zmiany po jego kliknięciu. Powiedzmy, że będzie to zmiana koloru czcionki na czerwony. Jeżeli chodzi o drugi przycisk, ten który odpowiada za dodanie shortcode, to załóżmy, że jego zadaniem będzie wstawienie podtytułu. W pliku buttons-styles.css dodajmy więc poniższe linijki.

/* style wrappera */
.my-wrapper{
    color: red !important;
}

/* style podtytułu */
h3.subtitle{
    font-weight: bold;
}

Poniżej kod, który na podstawie shortcode wygeneruje HTML’a. Należy go umieścić w buttons.php.

add_shortcode( 'my-title', 'my_title_handler' );

function my_title_handler($atts, $content=''){
    return '<h3 class="subtitle">'.$content.'</h3>';
}

Po kliknięciu przycisku my-shortcode-button, pojawi się okno dialogowe, w które użytkownik będzie musiał wpisać podtytuł. Po zatwierdzeniu zostanie wstawiony odpowiedni shortcode.

Zarejestrowanie wtyczki edytora

Poniższy kod służy do rejestracji pluginu, który chcemy dodać. Wstawiamy go w buttons.php.

add_action( 'init', 'my_buttons' );

function my_buttons() {
    add_filter( "mce_external_plugins", "add_buttons" );
    add_filter( 'mce_buttons', 'register_buttons' );

    add_editor_style( 'my-editor-buttons/button-styles.css' );
}

function add_buttons( $plugin_array ) {
    // dodanie ścieżki do wtyczki, kluczem tablicy jest ID wtyczki:
    $plugin_array['mybuttons'] = get_template_directory_uri() . '/my-editor-buttons/buttons-plugin.js';
    return $plugin_array;
}

function register_buttons( $buttons ) {
    // rejestracja wymaga podania nazw przycisków
    array_push( $buttons, 'my-wrapper-button', 'my-shortcode-button' );
    return $buttons;
}

Funkcja add_editor_style() pozwala na dodanie własnego arkusza stylów do edytora. Zauważ, że ścieżka jest relatywna do szablonu, a nie pluginu.

Szkielet wtyczki, który znajduje się poniżej, należy umieścić w pliku buttons-plugin.js.

(function() {
    tinymce.create('tinymce.plugins.Wptuts', {
        /*
         * Inicjalizacja pluginu 
         */
        init : function(ed, url) {
         /*
          * ed - instancja edytora
          * url - ścieżka do wtyczki
          */  
        },

        createControl : function(n, cm) {
            return null;
        },
 
        /*
         * Zwraca informacje dotyczące pluginu.
         */
        getInfo : function() {
            return {
                longname : 'My Buttons',
                author : 'I am',
                authorurl : '...',
                infourl : '...',
                version : "0.1"
            };
        }
    });
 
    // tutaj zachodzi faktyczne dodanie pluginu
    tinymce.PluginManager.add( 'mybuttons', tinymce.plugins.Wptuts );
})();

W funkcji init() należy stworzyć przyciski. Uzupełnij więc funkcję o poniższy kod.

        init : function(ed, url) {
            ed.addButton('my-wrapper-button', {
                title : 'Wrapper Button',
                cmd : 'my-wrapper-button',
                image : url + '/wrapper.jpg'
            });
 
            ed.addButton('my-shortcode-button', {
                title : 'Shortcode Button',
                cmd : 'my-shortcode-button',
                image : url + '/shortcode.jpg'
            });
        },

Jak widzisz należy również dodać odpowiednie ikony przycisków. Są to wrapper.jpg oraz shortcode.jpg. Metoda addButton() przyjmuje dwa parametry:

  • id naszego przycisku, które musi być zgodne z wcześniejszą definicją,
  • informacje o przycisku; na szczególną uwagę zasługuje cmd czyli id komendy, która zostanie uruchomiona po wciśnięciu przycisku.

W twoim edytorze powinny pojawić się dwa nowe przyciski. Aktualnie ich wciśnięcie nie ma żadnego skutku. Powód? Jak już wcześniej wspomniałem po wciśnięciu przycisku uruchamiana jest komenda zgodna z podanym id. Żeby wszystko działało, należy zdefiniować komendy w postaci funkcji. Znów aktualizujemy funkcję init().

        init : function(ed, url) {
            ed.addButton('my-wrapper-button', {
                title : 'Wrapper Button',
                cmd : 'my-wrapper-button',
                image : url + '/wrapper.jpg'
            });
 
            ed.addButton('my-shortcode-button', {
                title : 'Shortcode Button',
                cmd : 'my-shortcode-button',
                image : url + '/shortcode.jpg'
            });
            
            // owiń treść HTML'owym tagiem
            ed.addCommand('my-wrapper-button', function() {
                // treść, którą zaznaczył użytkownik:
                var selected_text = ed.selection.getContent();
                var ret = '';
                ret = '<span class="my-wrapper">' + selected_text + '</span>';
                ed.execCommand('mceInsertContent', 0, ret);
            });
 
            // wstaw shortcode
            ed.addCommand('my-shortcode-button', function() {
                var title = prompt("Wpisz tytuł"),
                shortcode = '[my-title]'+title+'[/my-title]';
                ed.execCommand('mceInsertContent', 0, shortcode);
            });
        },

Gotowe! Nasze przyciski są w pełni funkcjonalne. Pierwszy sprawi, że zaznaczony tekst stanie się czerwony, a drugi wstawi shortcode na podstawie tego co wpisze użytkownik.

Więcej ustawień edytora

Jeżeli interesuje Cię zabawa z edytorem, włączanie i wyłączanie wtyczek, dodawanie i usuwanie przycisków, a nawet podmienienie wszystkich stylów, to pomocny będzie poniższy kod.

function my_format_TinyMCE( $in ) {
    $in['remove_linebreaks'] = false;
    $in['gecko_spellcheck'] = false;
    $in['keep_styles'] = true;
    $in['accessibility_focus'] = true;
    $in['tabfocus_elements'] = 'major-publishing-actions';
    $in['media_strict'] = false;
    $in['paste_remove_styles'] = false;
    $in['paste_remove_spans'] = false;
    $in['paste_strip_class_attributes'] = 'none';
    $in['paste_text_use_dialog'] = true;
    $in['wpeditimage_disable_captions'] = true;
    $in['plugins'] = 'tabfocus,paste,media,fullscreen,wordpress,wpeditimage,wpgallery,wplink,wpdialogs,wpfullscreen';
    $in['content_css'] = get_template_directory_uri() . "/editor-style.css";
    $in['wpautop'] = true;
    $in['apply_source_formatting'] = false;
    $in['block_formats'] = "Paragraph=p; Heading 3=h3; Heading 4=h4";
    $in['toolbar1'] = 'bold,italic,strikethrough,bullist,numlist,blockquote,hr,alignleft,aligncenter,alignright,link,unlink,wp_more,spellchecker,wp_fullscreen,wp_adv ';
    $in['toolbar2'] = 'formatselect,underline,alignjustify,forecolor,pastetext,removeformat,charmap,outdent,indent,undo,redo,wp_help ';
    $in['toolbar3'] = '';
    $in['toolbar4'] = '';
    return $in;
}
add_filter( 'tiny_mce_before_init', 'my_format_TinyMCE' );

Jest to przykład ze strony http://codex.wordpress.org/TinyMCE. Jak widzisz jest całe mnóstwo parametrów, które można ustawiać. Te, które mogą być interesujące to:

  • toolbar1 – lista przycisków, które znajdują się w edytorze,
  • plugins – lista wtyczek edytora, są tu wtyczki odpowiadające za pokazywanie galerii, edycję mediów, itd.,
  • content_css – arkusz stylów edytora; można go całkowicie usunąć, aby pozbyć się jakiegokolwiek formatowania.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.