wordpress-logo-notext-rgb

Własne Quicktag Buttons a upgrade WordPressa

wordpress-logo-notext-rgbQuicktag Buttons – własne przyciski w edytorze HTML WordPressa (WP) – opisane wiele razy dość wyczerpująco (np. modyfikacja pliku quicktags.jszmienianie kolorów Quicktag Buttons), więc do rzeczy. Standardowo autorzy różnych tutoriali zalecają modyfikację pliku /wp-includes/js/quicktags.js (od WP w wersji bodajże 2.0 +), co oczywiście działa, do momentu kiedy nie zaktualizujemy WP (lub co gorsza, klient sam tego nie zrobi za nas ;). Oto proponowane przeze mnie dwa rozwiązania.

Metoda wygodna: Quicktags.js w katalogu tematu WordPressa

Kopiujemy plik /wp-includes/js/quicktags.js do podkatalogu /js/ skórki, modyfikujemy go zgodnie ze swoimi wymaganiami, dodajemy własne przyciski, a następnie w functions.php dodajemy kod funkcji uzupełniający akcję załączania skryptów JS w panelu administracyjnym:

function fc_load_quickatags_js()
{
	wp_deregister_script('quicktags');
	wp_register_script('quicktags', (TEMPLATEPATH. "/js/quicktags.js"), false, '1.0');
}
add_action('admin_enqueue_scripts', 'fc_load_quickatags_js');

Tips: Skrypt ‚quicktags’ warto przy rejestrowaniu i późniejszych modyfikacjach wersjonować według własnej numeracji, gdyż przykładowo Chrome wymaga kilku odświeżeń, zanim go łyknie w nowej wersji.

„Metoda wygodna” sprawdza się dopóki chłopaki dziewczyny i chłopaki od WordPressa nie wprowadzą zmian w oryginalnym pliku quicktags.js (rzadko bo rzadko, ale prawdopodobne).

Metoda z Quicktags Buttonami dodawanymi przez JavaScript

Sposób lekko „na chama”, ale działający doskonale i dla prostych funkcji przypisanych do przycisków, nie wymaga grzebania w quicktags.js. Dodajemy do functions.php z katalogu skórki następujący kod:

function fc_add_quicktags()
{
	?>
	<script type="text/javascript" charset="utf-8">
	// <![CDATA[

		if (edButtons && jQuery)
		{
			amount = edButtons.length;
			i = amount;

			var my_buttons = [
				['ed_space',	'Space',	"[space]\n",	'',		''],
				['ed_hr',		'hr',		"<hr />\n",	'',		'']
			];

			jQuery.each(my_buttons, function(index, button) {
				edButtons[i++] = new edButton(button[0], button[1], button[2], button[3], button[4]);
			});

			i = amount;
			jQuery(document).ready(function(){
				jQuery.each(my_buttons, function(index, button) {

					jQuery("#ed_toolbar").append('<input type="button" class="ed_button" onclick="edInsertTag(edCanvas, ' + (i++) + ');" value="' + button[1] + '" id="' + button[0] + '"title="' + button[1] + '" accesskey="' + button[4] + '" />');
				});
			});
		}
	// ]]>
	</script>
	<?php
}
add_action( 'edit_form_advanced', 'fc_add_quicktags' );
add_action( 'edit_page_form', 'fc_add_quicktags' );

Kod powinien wydawać się dość jasny dla kogoś, kto już wcześniej dodawał własne przyciski Quicktag (tak, wiem… można wszystko rozegrać w jednym „each” :) ). Kolejne przyciski definiujemy w zmiennej my_buttons w postaci tablicy:

['ed_unikalneId', 'Nazwa przycisku', "Kod otwierający", "Kod zamykający", 'Przycisk dostępu (opcja)']

W razie czego czekam na pytania w komentarzach.

Autor

Kamil Skrzypiński

Fullstack developer, programista aplikacji internetowych i mobilnych. Zna się m.in. na Ruby on Rails, JavaScript, Objective-C, PHP, HTML5 i CSS3. Instalacja i konfiguracja serwera z mniej i bardziej popularnymi usługami, to też dla niego nie problem. Niegdyś zapalony radiowiec - głównie od strony techniczno-informatycznej.

3 myśli na temat “Własne Quicktag Buttons a upgrade WordPressa”

  1. Dzięki za ten artykuł. Właśnie szukałam czegoś, co ocali zmiany w quicktagach po upgradzie WP. Przy okazji poznałam nową metode – nie znałam tej trzeciej. Właśnie użyłam, dodałam swoje przyciski, śmiga. Bardzo dobrze opisany temat. Od dziś jestem Waszą fanką. Podpadliście mi jedynie tymi „chłopakami od WordPressa”.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *