Szkolenie redaktorów TinyMCE - Lekcja 32
Bardzo podoba mi się zdolność CMS WordPress do pracy z edytorem wizualnym TinyMCE, te funkcje zostały wprowadzone dla tych, którzy korzystają z powyższej wersji WP 3,9. Nie obiecuję, że udzielę pełnych informacji nt API TinyMCE, ale podam przykłady kodu, które możesz wykorzystać w swojej pracy.
Rozpocznijmy naszą długą i interesującą lekcję!
Dodanie pola wyboru rodziny czcionek i rozmiaru czcionki
Aby dodać elementy do pracy z czcionkami i ich rozmiarami, użyj poniższego kodu.
|
1 2 3 4 5 6 7 8 9 |
// Enable font size & font family selects in the editor if ( ! function_exists( 'wpex_mce_buttons' ) ) { function wpex_mce_buttons( $buttons ) { array_unshift( $buttons, 'fontselect' ); // Add Font Select array_unshift( $buttons, 'fontsizeselect' ); // Add Font Size Select return $buttons; } } add_filter( 'mce_buttons_2', 'wpex_mce_buttons' ); |
Oto, co mamy:
Możemy zmienić mce_buttons_2 na mce_buttons_3 lub mce_buttons_1, umożliwi to przenoszenie nowych elementów pomiędzy pierwszymi, drugi i trzeci panel.
Dodawanie niestandardowych rozmiarów czcionek
Domyślne rozmiary czcionek nie zawsze są odpowiednie do projektu tekstu na stronie. Kolejny problem z domyślnymi czcionkami, tak są skonfigurowane w punktach, nie piksele, jak się do tego przyzwyczailiśmy. Wolę używać wartości pikseli (10Px, 12Px, 13Px, 14piks..). Poniżej podaję przykład funkcji, która zmieni domyślne rozmiary i jednostki czcionek w WordPressie..
Dodawanie niestandardowych czcionek
Domyślnie silnik nie może używać niestandardowych nazw czcionek., choć często są potrzebne. Jeśli stworzyłeś własny szablon i chcesz dostosować wybór czcionki dla użytkownika, wtedy potrzebujesz następującej funkcji.
|
1 2 3 4 5 6 7 8 |
// Add custom Fonts to the Fonts list if ( ! function_exists( 'wpex_mce_google_fonts_array' ) ) { function wpex_mce_google_fonts_array( $initArray ) { $initArray['font_formats'] = 'Lato=Lato;Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats'; return $initArray; } } add_filter( 'tiny_mce_before_init', 'wpex_mce_google_fonts_array' ); |
Ponieważ niektóre czcionki mogą nie znajdować się na komputerze użytkownika, musimy nie tylko zapewnić wybór tych czcionek, ale także połącz je z WordPress? tak, aby wyświetlały się poprawnie w panelu administratora. Na przykład możesz dołączyć czcionkę Lato którego używam powyżej.
|
1 2 3 4 5 6 7 |
if ( ! function_exists( 'wpex_mce_google_fonts_styles' ) ) { function wpex_mce_google_fonts_styles() { $font_url = 'https://fonts.googleapis.com/css?family=Lato:300,400,700'; add_editor_style( str_replace( ',', '%2C', $font_url ) ); } } add_action( 'init', 'wpex_mce_google_fonts_styles' ); |
Jeśli jeszcze nie korzystałeś z tej funkcji, w takim razie radzę spróbować w akcji, a wynikiem tej funkcji będzie menu pokazane na poniższym obrazku.
Dodawanie nowych pozycji do menu jest bardzo proste, a pierwszą rzeczą, którą musisz wiedzieć, jest dodatek, którego użyjemy w poniższym kodzie $ustawienia[„style_formats_merge”] = prawda; ten dodatek pomoże Ci nie tworzyć osobnego menu, ale w celu uzupełnienia już istniejącego menu formatów.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
// Add new styles to the TinyMCE "formats" menu dropdown if ( ! function_exists( 'wpex_styles_dropdown' ) ) { function wpex_styles_dropdown( $settings ) { // Create array of new styles $new_styles = array( array( 'title' => __( 'Custom Styles', 'wpex' ), 'items' => array( array( 'title' => __('Theme Button','wpex'), 'selector' => 'a', 'classes' => 'theme-button' ), array( 'title' => __('Highlight','wpex'), 'inline' => 'span', 'classes' => 'text-highlight', ), ), ), ); // Merge old & new styles $settings['style_formats_merge'] = true; // Add new styles $settings['style_formats'] = json_encode( $new_styles ); // Return New Settings return $settings; } } add_filter( 'tiny_mce_before_init', 'wpex_styles_dropdown' ); |
Pod numerem (2) istnieje aktywny element, który zawiera zaznaczony tekst w znaczniku piędź z klasą podświetlenie tekstu.
Pod numerem (1) pozycja nieaktywna, ponieważ ten element będzie działał tylko wtedy, gdy tekst zostanie umieszczony w tagu <a> i podświetlone. Pokazałem to na poniższym obrazku. Dokładnie przeanalizuj kod, aby zrozumieć, dlaczego tak się dzieje., tutaj pozwalam ci to rozgryźć, i pójdziemy dalej.
Tworzenie przycisku w edytorze TinyMCE
Tworzenie przycisków jest dla nas szczególnie przydatne, ponieważ tworząc motyw dla wordpress często tworzymy skróty, a użytkownik nie musi znać wszystkich skrótów na pamięć. Podczas tworzenia przycisku użytkownik będzie musiał go tylko kliknąć, aby dodać krótki kod lub określony tekst. Tworzenie przycisku zostanie podzielone na dwie części.
- Kod do deklarowania nowej wtyczki w functions.php.
- Skrypt JS dodający przycisk do edytora;
Pierwszy skrypt będzie ściśle powiązany z plikiem JS. Więc pozwól, że cię przedstawię 2 kod:
Dodanie skryptu do pliku functions.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
// Hooks your functions into the correct filters function my_add_mce_button() { // check user permissions if ( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) { return; } // check if WYSIWYG is enabled if ( 'true' == get_user_option( 'rich_editing' ) ) { add_filter( 'mce_external_plugins', 'my_add_tinymce_plugin' ); add_filter( 'mce_buttons', 'my_register_mce_button' ); } } add_action('admin_head', 'my_add_mce_button'); // Declare script for new button function my_add_tinymce_plugin( $plugin_array ) { $plugin_array['my_mce_button'] = get_template_directory_uri() .'/js/mce-button.js'; return $plugin_array; } // Register new button in the editor function my_register_mce_button( $buttons ) { array_push( $buttons, 'my_mce_button' ); return $buttons; } |
Dodaj javascript w /wp-content/themes/intrepidity/js/mce-button.js
|
1 2 3 4 5 6 7 8 9 10 11 |
(function() { tinymce.PluginManager.add('my_mce_button', function( editor, url ) { editor.addButton('my_mce_button', { text: 'New Button', icon: false, onclick: function() { editor.insertContent('wp-admin.com.ua - уроки wordpress!'); } }); }); })(); |
Przycisk utworzony i wstawia tekst.
Jedyną wadą takiego przycisku jest to, że zajmuje dużo miejsca w edytorze., więc sugeruję zrobić przycisk z ikoną.
Możesz użyć nowych dołączonych stylów, aby dostosować ikony, dla panelu administratora, dodaj je do pliku functions.php:
|
1 2 3 4 |
function my_shortcodes_mce_css() { wp_enqueue_style('symple_shortcodes-tc', get_bloginfo('template_url').'/css/my-mce-style.css' ); } add_action( 'admin_enqueue_scripts', 'my_shortcodes_mce_css' ); |
Jeśli style muszą zostać załadowane z wtyczki, możesz użyć następującego kodu:
|
1 2 3 4 |
function my_shortcodes_mce_css() { wp_enqueue_style('symple_shortcodes-tc', plugins_url('/css/my-mce-style.css', __FILE__) ); } add_action( 'admin_enqueue_scripts', 'my_shortcodes_mce_css' ); |
Utwórz folder obrazów w folderze motywu, jeśli jeszcze go nie ma. W utworzonym folderze dodaj ikonę o nazwie check.png.
Następnie dodaj styl przyszłej ikony do pliku css/my-mce-style.css.
|
1 2 3 |
i.mce-i-my-mce-icon { background-image: url('../images/check.png'); } |
Przerób wcześniej utworzony skrypt w folderze js/mce-button.js, skomentuj podpis przycisku tekstowego: Ikona „Nowy przycisk”.: fałszywe.
Dodaj nowy parametr ikony: „mce-i-moja-mce-ikona”, co doda do nowego przycisku klasę utworzoną wcześniej w pliku stylu panelu administracyjnego.
Jeśli zrobione dobrze, wtedy będziesz miał przycisk z ikoną, który po naciśnięciu doda napis.
Stworzyliśmy przycisk z ikoną, ale jeśli potrzebujesz stworzyć złożoną funkcjonalność szablonu i wiele przycisków, ta metoda będzie trudna. Ponadto niewygodna jest praca, gdy na panelu jest dużo przycisków.. Teraz postaramy się zrozumieć pytanie „jak dodać więcej wolnego miejsca w panelu edytora?”. Zmień kod przycisku w pliku js/mce-button.js na ten, który widzisz poniżej.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
(function() { tinymce.PluginManager.add('my_mce_button', function( editor, url ) { editor.addButton('my_mce_button', { /*text: 'New Button', icon: false,*/ icon: 'my-mce-icon', type: 'menubutton', menu: [ { text: 'Item 1', menu: [ { text: 'Sub Item 1', onclick: function() { editor.insertContent('wp-admin.com.ua - уроки wordpress!'); } }, { text: 'Sub Item 2', onclick: function() { editor.insertContent('wp-admin.com.ua - уроки wordpress!'); } } ] }, { text: 'Item 2', menu: [ { text: 'Sub Item 1', onclick: function() { editor.insertContent('wp-admin.com.ua - уроки wordpress!!'); } }, { text: 'Sub Item 2', onclick: function() { editor.insertContent('wp-admin.com.ua - уроки wordpress!'); } } ] } ] }); }); })(); |
Jeśli przyjrzysz się uważnie strukturze kodu, wtedy zrozumiesz, że nie ma w tym nic skomplikowanego i nie będzie trudno to przetworzyć. Oto wynik, który otrzymujemy:
Jeśli do tej pory zrobiłeś wszystko dobrze, zobaczysz, że po wybraniu jednej z podpozycji menu w polu tekstowym pojawi się napis „wp-admin.com.ua – lekcje wordpress”!”.
Najczęściej wklejanie tekstu bez modyfikacji nie jest zbyt przydatne., ponieważ podczas wstawiania krótkiego kodu należy określić dodatkowe opcje, kto będzie kontrolował pracę shortcode. Możesz użyć wyskakującego okienka, aby określić opcje w krótkim kodzie, wspólnie wymyślmy, jak go stworzyć.
Wyskakujące okienko wordpress tinymce
Aby utworzyć wyskakujące okienko, musisz zmienić kod w pliku js/mce-button.js na następujący. Jestem pewien, że wcześniej czytałeś uważnie i wszystko Ci się ułożyło, wtedy nie będziesz miał problemów ze zrozumieniem poniższego kodu.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
(function() { tinymce.PluginManager.add('my_mce_button', function( editor, url ) { editor.addButton('my_mce_button', { /*text: 'New Button', icon: false,*/ icon: 'my-mce-icon', type: 'menubutton', menu: [ { text: 'Item 1', menu: [ { text: 'Sub Item 1', onclick: function() { editor.insertContent('wp-admin.com.ua - уроки wordpress!'); } }, { text: 'Sub Item 2', onclick: function() { editor.insertContent('wp-admin.com.ua - уроки wordpress!'); } } ] }, { text: 'Item 2', menu: [ { text: 'Sub Item 1', onclick: function() { editor.insertContent('wp-admin.com.ua - уроки wordpress!!'); } }, { text: 'Pop-Up', onclick: function() { editor.windowManager.open( { title: 'Вставить произвольный шорткод', body: [ { type: 'textbox', name: 'textboxName', label: 'Text Box', value: '30' }, { type: 'textbox', name: 'multilineName', label: 'Multiline Text Box', value: 'You can say a lot of stuff in here', multiline: true, minWidth: 300, minHeight: 100 }, { type: 'listbox', name: 'listboxName', label: 'List Box', 'values': [ {text: 'Option 1', value: '1'}, {text: 'Option 2', value: '2'}, {text: 'Option 3', value: '3'} ] } ], onsubmit: function( e ) { editor.insertContent( '[random_shortcode textbox="' + e.data.textboxName + '" multiline="' + e.data.multilineName + '" listbox="' + e.data.listboxName + '"]'); } }); } } ] } ] }); }); })(); |
Oto, co stało się w wyniku pracy wykonanej z wyskakującym okienkiem.
Wnioski z lekcji
Co dalej? Wtedy wszystko jest w twoich rękach, możesz dowiedzieć się, jak będziesz używać skrótów i paska narzędzi edytora tinymce. Lekcja okazała się trudna i trochę zagmatwana, ale nie jesteśmy też na pierwszej lekcji., czas nauczyć się kodować, jeśli to nie zadziała, ale chcesz dowiedzieć się, jak osadzić kod w swoim motywie, mogę poświęcić czas i przeprowadzić płatną lekcję.
Źródło pomysłów i inspiracji do lekcji:
/*
- Podstawowy kurs projektowania stron internetowych;
- Układ stron;
- Ogólny kurs CMS WordPress oraz kontynuacja kursu dotyczącego tworzenia szablonów;
- Tworzenie stron internetowych w PHP.
