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.
Tarih: 11 Ocak 2009 Saat: 00:33
[...] Yakup Gövler Hocamızın Editöre Yeni Düğmeler Ekliyoruz yazısındaki uygulamayı gerçekleştirirsek yazı paneline buton olarak gösterim metinini [...]
Tarih: 01 Mart 2009 Saat: 17:27
Teşekkürler hocam kod renklendirme için kullandığım eklentinin butonunu eklemek istedim fakat editör tamamen kayboldu eklemek istediğim etiket
Tarih: 01 Mart 2009 Saat: 17:38
Oradaki tek tırnaklar işi bozuyor olmalı, onları \' olacak şekilde değiştirip dener misin? olmazsa sadece olarak ekleterek işini görmeye çalış.
Tarih: 01 Mart 2009 Saat: 21:08
Anladım hocam teşekkürler
Tarih: 07 Mart 2009 Saat: 00:12
Abi bende editöre gerektiğinde belirteceğim olarak kullanacağım
Tarih: 07 Mart 2009 Saat: 00:15
Üst mesajda div class=hata olarak kullandığım css uyarı şeklinde yani kare içine alacağım onu koymak için nasıl yapacağım?
Tarih: 23 Mart 2009 Saat: 03:31
Merhaba,
yukarıda anlatıldığı gibi buton eklemeye çalıştım ancak olmadı. Eklemeye çalıştığım kod idi. Yorumlarda benzer bir kod eklenmeye çalışan bir arkadaş olmuş. O arkadaşa verdiğiniz önerileri de denedim olmadı.
Hatta yukarıda verdiğiniz h1 li kodu da denedim sonuç yine hüsran. Sorun nedir anlayamadım. Sürümden kaynaklanabilir mi bilmiyorum ama wp sürümüm 2.7.1 Şimdiden teşekkürler...
Tarih: 23 Mart 2009 Saat: 07:57
@Muzaffer, ben localhde denediğimde aşağıdaki şekilde ekledim. Düğmeye verdiğiniz isim önemli eğer siz benim yaptığımın aksine ed_csscode yerine code yazmışsanız bu problemdir ayrıca
'
,'y'
);
Tarih: 20 Nisan 2009 Saat: 23:05
[...] anlatmak gerekirse; En güzeli ise bunu yapmak için eklenti vs. kullanmamak. Hatta daha güzeli buradaki yazımı okuyarak, bu etiketi eklemede kullanacağınız bir düğmeyi yazı editörüne de [...]
Tarih: 25 Nisan 2009 Saat: 17:14
[...] Yakup Gövler Hocamızın Editöre Yeni Düğmeler Ekliyoruz yazısındaki uygulamayı gerçekleştirirsek yazı paneline buton olarak gösterim metinini [...]
Tarih: 30 Haziran 2009 Saat: 01:26
Çok teşekkür ediyorum hocam...