Editöre Yeni Düğmeler Ekliyoruz

24 Aralık 2008

Siz de benim gibi WordPress yazı editöründe görsel editörü değil de HTML editörünü kullanıyorsanız, editöre yeni düğmeler eklemek isteyebilirsiniz. Örneğin h1, h2 gibi başlık etiketleri için düğme eklemek isteyebilirsiniz.

1. Adım

Sitenizdeki /wp-includes/js/quicktags.js dosyasını UTF-8 (BOM olmadan kodla) olarak açınız. 36. satırda aşağıdaki gibi bir kod olacak:

edButtons[edButtons.length] =
new edButton('ed_em'
,'i'
,'<em>'
,'</em>'
,'i'
);

Bu kod editöre i isimli düğmeyi ekliyor, düğme seçili yazının italik yazılmasını sağlıyor.

2. Adım

Dosya içerisinde değişiklik yapmadan önce dosyanın yedeğini almayı unutmayın.
Şimdi h1 html etiketi için kendi düğmemizi ekleyelim. Bunu yapmak için yukarıdaki kodu kopyalayıp, hemen altına yapıştırın ve aşağıdaki gibi değiştirin.

edButtons[edButtons.length] =
new edButton('ed_h1'
,'h1'
,'<h1>'
,'</h1>'
,'h'
);

Kodu Açıklayalım

Kodun bölümlerini şöyle açıklayabiliriz.
edButtons[edButtons.length] =
new edButton('ed_h1'
edButtons bir dizi, edButton ise bir fonksiyon. Bu kod ile diziye yeni bir elemanı fonksiyon ile eklemiş oluyoruz. ed_h1 düğmenin ID'si oluyor.
,'h1'
Editörde düğmenin üzerinde görünecek düğme adı.
'<h1>'
Bu düğme ilk tıklandığında editöre eklenecek olan etiket. h1 etiketi açma kodudur.
,'</h1>'
Düğmeye tekrar tıklandığında editöre eklenecek etiket. h1 etiketini kapatma kodudur.
,'h'
);
Düğmenin kısayol tuşudur. Editördeyken Alt + h tuşuna basıldığında bu düğmeye tıklanmış gibi olacak. Bildiğiniz kısayol işte. Ayrıca düğmenin tanımlanma kodunun da sonu.
Ayrıca düğmeye bir parametre daha eklenebilir yani diyelim ki <br /> gibi bir etiket için düğme eklemek istiyorsunuz. Bu etiket kapatılmaz. Böyle bir düğme tanımlarken bu etiketin kapatılmayacağını belirtmek için şöyle bir tanımlama yapmak gerekiyor.

edButtons[edButtons.length] =
new edButton('ed_br'
,'br'
,'<br />'
,''
,'y'
,-1
);

kodda görebileceğiniz gibi etiketin kapatılması için </h1> gibi bir etiket kullanmadık ve yeni parametre olarak -1 girdik. Bu parametre etiketin kapatılmayacak bir etiket olduğunu söylüyor. Yeterince açıklayıcı bir yazı oldu sanırım. h2 ve diğer başlık kodlarını da örneklerden yola çıkarak oluşturabilirsiniz, dikkat etmeniz gereken ed_h1, ed_br kısmında aynı isimleri kullanmamak, aynı kısayolu atamamak. Ben diğerlerini de eklediğimde aşağıdaki gibi bir editör elde ettim.

Hadi size bir kıyak daha geçeyim, bu düğmelere ait kodları da vereyim.

edButtons[edButtons.length] =
new edButton('ed_h1'
,'h1'
,'<h1>'
,'</h1>'
,'h'
);
edButtons[edButtons.length] =
new edButton('ed_h2'
,'h2'
,'<h2>'
,'</h2>'
,'w'
);
edButtons[edButtons.length] =
new edButton('ed_h3'
,'h3'
,'<h3>'
,'</h3>'
,'n'
);
edButtons[edButtons.length] =
new edButton('ed_h4'
,'h4'
,'<h4>'
,'</h4>'
,'g'
);
edButtons[edButtons.length] =
new edButton('ed_h5'
,'h5'
,'<h5>'
,'</h5>'
,'v'
);
edButtons[edButtons.length] =
new edButton('ed_h6'
,'h6'
,'<h6>'
,'</h6>'
,'z'
);
edButtons[edButtons.length] =
new edButton('ed_br'
,'br'
,'<br />'
,''
,'y'
,-1
);

Kaynak: WPCandy (Buradaki yazı hatalıydı, ben düzelterek yazdım)

Bu yazının kısa bağlantısı http://www.yakupgovler.com/?p=612.

Yazılarımı RSS aboneliği ile takip edebilir, yeni yazılarıma kolaylıkla ulaşabilirsiniz. Bunun için ise RSS adresimi kullanabilirsiniz.