Jak stworzyć wtyczkę WordPress TinyMCE

Jeśli jesteś programistą WordPress, to w pewnym momencie możesz natknąć się na konfigurator lub rozszerzenie edytora wizualnego WordPress. Na przykład, możesz chcieć dodać przycisk do paska narzędzi Edytora wizualnego, aby umożliwić twojemu klientowi łatwe wstawienie pola tekstowego lub przycisku wezwania do działania bez pisania jakiegokolwiek kodu HTML. W tym artykule pokażemy, jak utworzyć wtyczkę TinyMCE w WordPress.

Wymagania

Ten poradnik jest przeznaczony dla zaawansowanych użytkowników. Jeśli jesteś początkującym użytkownikiem, który chce tylko rozszerzyć edytor wizualny, sprawdź wtyczkę TinyMCE Advanced lub zapoznaj się z tymi wskazówkami dotyczącymi korzystania z edytora wizualnego WordPress.

Aby skorzystać z tego poradnika, będziesz potrzebować podstawowych umiejętności kodowania, dostępu do instalacji WordPress a, na której będziesz mógł go przetestować.

Złą praktyką jest tworzenie wtyczek na działającej witrynie internetowej. Drobny błąd w kodzie może sprawić, że twoja witryna będzie niedostępna. Ale jeśli musisz to zrobić na żywej witrynie, to przynajmniej najpierw wykonaj kopię zapasową WordPressa.

Tworzenie twojej pierwszej wtyczki TinyMCE

Zaczniemy od stworzenia wtyczki WordPress, która zarejestruje nasz własny przycisk paska narzędzi TinyMCE. Po kliknięciu, przycisk ten pozwoli użytkownikowi na dodanie odnośnika z własną klasą CSS.

Kod źródłowy zostanie podany w całości na końcu tego artykułu, ale do tego czasu stwórzmy wtyczkę krok po kroku.

Po pierwsze, musisz utworzyć katalog w wp-content/plugins w twojej instalacji WordPress. Nazwij ten katalog tinymce-custom-link-class.

Od tego miejsca zaczniemy dodawać kod naszej wtyczki.

Nagłówek wtyczki

Utwórz nowy plik w katalogu wtyczki, który właśnie utworzyliśmy i nazwij ten plik tinymce-custom-link-class.php. Dodaj ten kod do pliku i zapisz go.

/**
 * Plugin Name: TinyMCE Custom Link Class
 * Plugin URI: http://wpbeginner.com
 * Version: 1.0
 * Author: WPBeginner
 * Author URI: https://www.wpbeginner.com
 * Description: A simple TinyMCE Plugin to add a custom link class in the Visual Editor
 * License: GPL2
 */

.

Jest to tylko komentarz PHP, który mówi WordPressowi nazwę wtyczki, a także autora i opis.

W obszarze administracyjnym WordPress włącz twoją nową wtyczkę, przechodząc do Wtyczki > Zainstalowane wtyczki, a następnie klikając Włącz obok wtyczki TinyMCE Custom Link Class:

Konfiguracja naszej klasy wtyczek

Jeśli dwie wtyczki WordPress mają funkcje o tej samej nazwie, spowoduje to błąd. Unikniemy tego problemu, opakowując nasze funkcje w klasę.

class TinyMCE_Custom_Link_Class {
	
	/**
	* Constructor. Called when the plugin is initialised.
	*/
	function __construct() {
		
	}

}

$tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;

.

Tworzy to naszą klasę PHP wraz z konstrukcją, która jest wywoływana, gdy dojdziemy do linii $tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;.

Wszelkie funkcje, które dodamy wewnątrz tej klasy, nie powinny kolidować z innymi wtyczkami WordPress.

Rozpocznij konfigurację naszej wtyczki TinyMCE

Następnie musimy powiedzieć TinyMCE, że możemy chcieć dodać nasz własny przycisk do paska narzędzi edytora wizualnego. Aby to zrobić, możemy użyć działań WordPressa – w szczególności działania init.

Dodaj następujący kod wewnątrz funkcji __construct () twojej wtyczki:

if ( is_admin() ) {
	add_action( 'init', array(  $this, 'setup_tinymce_plugin' ) );
}

.

Ta funkcja sprawdza, czy jesteśmy w interfejsie administracyjnym WordPress. Jeśli tak, to prosi WordPressa o uruchomienie funkcji setup_tinymce_plugin wewnątrz naszej klasy, gdy WordPress zakończy procedurę początkowego wczytywania.

Następnie dodajemy funkcję setup_tinymce_plugin:

/**
* Check if the current user can edit Posts or Pages, and is using the Visual Editor
* If so, add some filters so we can register our plugin
*/
function setup_tinymce_plugin() {

// Check if the logged in WordPress User can edit Posts or Pages
// If not, don't register our TinyMCE plugin
	
if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ) {
	        return;
}

// Check if the logged in WordPress User has the Visual Editor enabled
// If not, don't register our TinyMCE plugin
if ( get_user_option( 'rich_editing' ) !== 'true' ) {
return;
}

// Setup some filters
add_filter( 'mce_external_plugins', array( &$this, 'add_tinymce_plugin' ) );
add_filter( 'mce_buttons', array( &$this, 'add_tinymce_toolbar_button' ) );
		
	}

.

Sprawdza ona, czy obecny, aktualny użytkownik WordPressa może edytować wpisy lub strony. Jeśli nie mogą, nie ma sensu rejestrować naszej wtyczki TinyMCE dla tego użytkownika, ponieważ nigdy nie zobaczą edytora wizualnego.

Następnie sprawdzamy, czy użytkownik korzysta z Edytora wizualnego, ponieważ niektórzy użytkownicy WordPressa wyłączają go poprzez Użytkownicy > Twój profil. Ponownie, jeśli użytkownik nie korzysta z Edytora wizualnego, zwracamy (kończymy) funkcję, ponieważ nie musimy robić nic więcej.

Na koniec dodajemy dwa filtry WordPress – mce_external_plugins i mce_buttons, aby wywołać nasze funkcje, które będą wczytywać wymagany plik Javascript dla TinyMCE i dodawać przycisk do paska narzędzi TinyMCE.

Rejestracja pliku Javascript i przycisku w edytorze wizualnym

Przejdźmy dalej i dodajmy funkcję add_tinymce_plugin:

/**
* Adds a TinyMCE plugin compatible JS file to the TinyMCE / Visual Editor instance
*
* @param array $plugin_array Array of registered TinyMCE Plugins
* @return array Modified array of registered TinyMCE Plugins
*/
function add_tinymce_plugin( $plugin_array ) {

$plugin_array['custom_link_class'] = plugin_dir_url( __FILE__ ) . 'tinymce-custom-link-class.js';
return $plugin_array;

}
    

.

Ta funkcja mówi TinyMCE, że musi wczytywać pliki Javascript przechowywane w tablicy $plugin_array. Te pliki Javascript powiedzą TinyMCE, co ma robić.

Musimy również dodać kod do funkcji add_tinymce_toolbar_button, aby poinformować TinyMCE o przycisku, który chcemy dodać do paska narzędzi:

/**
* Adds a button to the TinyMCE / Visual Editor which the user can click
* to insert a link with a custom CSS class.
*
* @param array $buttons Array of registered TinyMCE Buttons
* @return array Modified array of registered TinyMCE Buttons
*/
function add_tinymce_toolbar_button( $buttons ) {

array_push( $buttons, '|', 'custom_link_class' );
return $buttons;
}

.

Spowoduje to dodanie dwóch elementów do tablicy przycisków TinyMCE: separatora (|) i programowej nazwy naszego przycisku(custom_link_class).

Zapisz swoją wtyczkę, a następnie edytuj stronę lub wpis, aby zobaczyć edytor wizualny. Prawdopodobnie pasek narzędzi nie jest teraz wyświetlany:

Nie martw się – jeśli użyjemy konsoli inspektora naszej przeglądarki internetowej, zobaczymy, że błąd 404 i powiadomienie zostały wygenerowane przez TinyMCE, informując nas, że nie może znaleźć naszego pliku Javascript.

To dobrze – oznacza to, że pomyślnie zarejestrowaliśmy nasz własny konfigurator TinyMCE, a teraz musimy utworzyć plik Javascript, aby powiedzieć TinyMCE, co ma robić.

Tworzenie wtyczki Javascript

Utwórz nowy plik w twoim katalogu wp-content/plugins/tinymce-custom-link-class i nazwij go tinymce-custom-link-class.js. Dodaj ten kod do twojego pliku js:

(function() {
	tinymce.PluginManager.add( 'custom_link_class', function( editor, url ) {
		
	});
})();

.

Wywołuje to klasę TinyMCE Plugin Manager, której możemy użyć do wykonania szeregu działań związanych z wtyczkami TinyMCE. W szczególności dodajemy naszą wtyczkę do TinyMCE za pomocą funkcji add.

Przyjmuje ona dwa elementy: nazwę wtyczki(custom_link_class) i anonimową funkcję.

Jeśli znasz pojęcie funkcji w kodowaniu, funkcja anonimowa to po prostu funkcja bez nazwy. Na przykład, function foobar() { ... } to funkcja, którą możemy wywołać w innym miejscu naszego kodu za pomocą funkcji foobar( ).

W przypadku funkcji anonimowej nie możemy wywołać tej funkcji w innym miejscu naszego kodu – jest ona wywoływana tylko w momencie wywołania funkcji add ().

Zapisz twój plik Javascript, a następnie edytuj stronę lub wpis, aby zobaczyć edytor wizualny. Jeśli wszystko zadziałało, zobaczysz pasek narzędzi:

W tej chwili nasz przycisk nie został dodany do tego paska narzędzi. To dlatego, że powiedzieliśmy tylko TinyMCE, że jesteśmy konfiguratorem wtyczek. Teraz musimy powiedzieć TinyMCE, co ma zrobić – czyli dodać przycisk do paska narzędzi.

Zaktualizuj twój plik Javascript, zastępując istniejący kod następującym:

(function() {
	tinymce.PluginManager.add( 'custom_link_class', function( editor, url ) {
		// Add Button to Visual Editor Toolbar
		editor.addButton('custom_link_class', {
			title: 'Insert Button Link',
			cmd: 'custom_link_class',
		});	
	});
})();

.

Powiadomienie nasza anonimowa funkcja ma dwa argumenty. Pierwszym z nich jest instancja edytora – jest to edytor wizualny TinyMCE. W ten sam sposób, w jaki możemy wywoływać różne funkcje w PluginManager, możemy również wywoływać różne funkcje w edytorze. W tym przypadku wywołujemy funkcję addButton, aby dodać przycisk do paska narzędzi.

Zapisz swój plik Javascript i wróć do swojego Visual Editora. Na pierwszy rzut oka wydaje się, że nic się nie zmieniło. Jeśli jednak najedziesz kursorem myszy na prawą ikonkę w górnym rzędzie, powinna pojawić się etykietka:

Udało nam się dodać przycisk do paska narzędzi, ale potrzebuje on obrazka. Dodaj następujący parametr do funkcji addButton, poniżej linii title::

obrazek: url + '/ikonka.png',

url to adres URL naszej wtyczki. Jest to przydatne, jeśli chcemy odwołać się do pliku obrazu w katalogu naszej wtyczki, ponieważ możemy dołączyć nazwę pliku obrazu do adresu URL. W tym przypadku będziemy potrzebować obrazka o nazwie icon.png w katalogu naszej wtyczki. Użyj poniższej ikonki:

Przeładuj nasz edytor wizualny, a zobaczysz teraz twój przycisk z ikonką:

Definiowanie polecenia do uruchomienia

W tej chwili, jeśli klikniesz przycisk, nic się nie stanie. Dodajmy do TinyMCE polecenie mówiące, co zrobić po kliknięciu naszego przycisku.

W naszym pliku Javascript dodaj następujący kod poniżej końca sekcji editor.addButton:

// Add Command when Button Clicked
editor.addCommand('custom_link_class', function() {
	alert('Button clicked!');
});

.

Przeładuj nasz edytor wizualny, kliknij przycisk, a pojawi się alert potwierdzający, że właśnie kliknęliśmy przycisk:

Zastąpmy alert monitem, pytając użytkownika o odnośnik, który chce zawinąć wokół zaznaczonego tekstu w edytorze wizualnym:

// Add Command when Button Clicked
editor.addCommand('custom_link_class', function() {
	// Check we have selected some text that we want to link
	var text = editor.selection.getContent({
		'format': 'html'
	});
	if ( text.length === 0 ) {
		alert( 'Please select some text to link.' );
		return;
	}

	// Ask the user to enter a URL
	var result = prompt('Enter the link');
	if ( !result ) {
		// User cancelled - exit
		return;
	}
	if (result.length === 0) {
		// User didn't enter a URL - exit
		return;
	}

	// Insert selected text back into editor, wrapping it in an anchor tag
	editor.execCommand('mceReplaceContent', false, '<a class="button" href="' + result + '">' + text + '</a>');
});

.

Ten blok kodu wykonuje kilka działań.

Najpierw sprawdzamy, czy użytkownik wybrał jakiś tekst do odnośnika w edytorze wizualnym. Jeśli nie, zobaczy alert informujący go o konieczności wybrania tekstu do odnośnika.

Następnie prosimy o wpisz odnośnik, ponownie sprawdzając, czy to zrobił. Jeśli anulowali lub nic nie wpiszą, nie robimy nic więcej.

Na koniec uruchamiamy funkcję execCommand w edytorze TinyMCE, a konkretnie uruchamiamy działanie mceReplaceContent. Powoduje to zastąpienie zaznaczonego tekstu naszym kodem HTML, który składa się z odnośnika kotwicy z class=”button”, wykorzystującego tekst wybrany przez użytkownika.

Jeśli wszystko zadziałało, zobaczysz, że twój zaznaczony tekst jest teraz odnośnikiem w edytorze wizualnym i widokach tekstowych, z klasą ustawioną na przycisk:

Podsumowanie

Z powodzeniem stworzyliśmy wtyczkę WordPress, która dodaje przycisk do edytora wizualnego TinyMCE w WordPress. Ten poradnik obejmował również niektóre podstawy interfejsu API TinyMCE i filtrów WordPress dostępnych dla integracji TinyMCE.

Dodaliśmy kod, aby po kliknięciu przez klienta naszego własnego przycisku, został on poproszony o wybranie tekstu w edytorze wizualnym, który następnie może zostać odnośnikiem do wybranego adresu URL. Na koniec nasza wtyczka zastępuje wybrany tekst odnośnikiem zawierającym własną klasę CSS o nazwie button.

Mamy nadzieję, że ten poradnik pomógł ci nauczyć się tworzyć wtyczkę WordPress TinyMCE. Możesz również zapoznać się z naszym przewodnikiem na temat tworzenia wtyczki WordPress dla witryny.

Jeśli podobał ci się ten artykuł, zasubskrybuj nasz kanał YouTube, aby zobaczyć poradniki dotyczące filmów WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.