eLapin

Customize your quicktags buttons in WordPress
如何自訂quicktags按鍵

If you have upgraded your WordPress blog, you may want to bring back the quicktags you had added in previous version(1.5.x). Here is the way;

First of all you, for example, you will see the “quicktags” in “Write Post” page of WordPress version 2.3.x:

In this case I want to add another button called, “noteaser” to insert:
"<!–noteaser–><!–more–> ” .

Step 1: Find out the “quicktags.js” file.

In WordPress verision 1.5.x, the quicktags.js is located in the /wp-admin directory,

but in WordPress 2.x, the file you need to edit is found in the /wp-includes/js/ directory.

Step 2:Edit “quicktags.js” file.

Because I want to put the button after the button “more”, I search the code block like below:

edButtons[edButtons.length] =
new edButton('ed_more'
,'more'
,'<!--more-->'
,''
,'t'
,-1
);

, then copy and paste the same above code block after that;

Now, in this new code block(you copy and paste), please replace “<!–more–>” with “<!–noteaser–><!–more–>” , and you will get code like:

edButtons[edButtons.length] =
new edButton('ed_noteaser'
,'noteaser'
,'<!--noteaser--><!--more-->'
,''
,'t'
,-1
);

After saved and uploaded “quicktags.js”, you will see

Advanced

Because I am using lightboxplugin to enlarge my pictures, and flickr to store picture, I want insert a button called, imglb.

In flickr, the static link of medium size picture is, for exmaple:

http://farm3.static.flickr.com/2078/2185689635_b426a3b7eb.jpg

and the static link of small size picture is:

http://farm3.static.flickr.com/2078/2185689635_b426a3b7eb_m.jpg

Fortunately, the only difference is the tail part:

_m

In lightbox, the code can be added for this case is:

<a href="http://farm3.static.flickr.com/2298/2185689603_1ba9cb8251.jpg" rel="lightbox" /><img src="http://farm3.static.flickr.com/2298/2185689603_1ba9cb8251_m.jpg" alt="Customize your quicktags buttons in WordPress after" /></a>

The rel="lightbox&quot is added to indicate I use the lightbox plugin.

Now, I want to just enter the static link of flickr medium size picture, I can get the whole code above.

Step1: Add button code after “img” block in quicktags.js:

edButtons[edButtons.length] =
new edButton('ed_imglb'
,'imglb'
,''
,''
,'m'
,-1
); // special case for light box plugin with flickr

Step2: Add function code:

First, you need to find the code block below:

function edShowButton(button, i) {
	if (button.id == 'ed_img') {
		document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertImage(edCanvas);" value="' + button.display + '" />');
	}

then, add code just after that:

	else if (button.id == 'ed_imglb') {
		document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertImagelb(edCanvas);" value="' + button.display + '" />');
	}

Second, add function code in proper location(may be in the end of quicktags.js):

function edInsertImagelbs(myField) {
	var mylbs = prompt(quicktagsL10n.enterImageURL, 'http://');
	if (mylbs) {
		mylbs = '<a href="' + mylb + '" rel="lightbox[roadtrip]" />'
				+'<img src="' + mylbs.replace('.jpg','')
				+ '_m.jpg"'
				+ ' alt="' + prompt(quicktagsL10n.enterImageDescription, '') 
				+'" /></a>';
		edInsertContent(myField, mylbs);
	}
}