Własne Quicktag Buttons a upgrade WordPressa

Quicktag Buttons – własne przyciski w edytorze HTML WordPressa (WP) – opisane wiele razy dość wyczerpująco (np. modyfikacja pliku quicktags.js, zmienianie 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.