24 Aralık 2008

Editöre Yeni Düğmeler Ekliyoruz

WordPress Yorum Ekle

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:

  1. edButtons[edButtons.length] =
  2. new edButton('ed_em'
  3. ,'i'
  4. ,'<em>'
  5. ,'</em>'
  6. ,'i'
  7. );

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.

  1. edButtons[edButtons.length] =
  2. new edButton('ed_h1'
  3. ,'h1'
  4. ,'<h1>'
  5. ,'</h1>'
  6. ,'h'
  7. );

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.

  1. edButtons[edButtons.length] =
  2. new edButton('ed_br'
  3. ,'br'
  4. ,'<br />'
  5. ,''
  6. ,'y'
  7. ,-1
  8. );

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.

  1. edButtons[edButtons.length] =
  2. new edButton('ed_h1'
  3. ,'h1'
  4. ,'<h1>'
  5. ,'</h1>'
  6. ,'h'
  7. );
  8. edButtons[edButtons.length] =
  9. new edButton('ed_h2'
  10. ,'h2'
  11. ,'<h2>'
  12. ,'</h2>'
  13. ,'w'
  14. );
  15. edButtons[edButtons.length] =
  16. new edButton('ed_h3'
  17. ,'h3'
  18. ,'<h3>'
  19. ,'</h3>'
  20. ,'n'
  21. );
  22. edButtons[edButtons.length] =
  23. new edButton('ed_h4'
  24. ,'h4'
  25. ,'<h4>'
  26. ,'</h4>'
  27. ,'g'
  28. );
  29. edButtons[edButtons.length] =
  30. new edButton('ed_h5'
  31. ,'h5'
  32. ,'<h5>'
  33. ,'</h5>'
  34. ,'v'
  35. );
  36. edButtons[edButtons.length] =
  37. new edButton('ed_h6'
  38. ,'h6'
  39. ,'<h6>'
  40. ,'</h6>'
  41. ,'z'
  42. );
  43. edButtons[edButtons.length] =
  44. new edButton('ed_br'
  45. ,'br'
  46. ,'<br />'
  47. ,''
  48. ,'y'
  49. ,-1
  50. );

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.


“Editöre Yeni Düğmeler Ekliyoruz” yazısı için 11 Yorum

Bu yazıya yapılan yorumları dilerseniz, ( RSS 2.0 ) beslemesini kullanarak takibe alabilirsiniz.

  1. İstediğiniz Yazıda Eklentisiz Adsense Reklam Gösterimi | elektronik projeler devreler şemalar dedi ki:

    [...] 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 [...]

  2. gevv dedi ki:

    Teşekkürler hocam kod renklendirme için kullandığım eklentinin butonunu eklemek istedim fakat editör tamamen kayboldu eklemek istediğim etiket

  3. Yakup Gövler dedi ki:

    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ış.

  4. gevv dedi ki:

    Anladım hocam teşekkürler

  5. Berkan dedi ki:

    Abi bende editöre gerektiğinde belirteceğim olarak kullanacağım

  6. Berkan dedi ki:

    Ü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?

  7. Muzaffer dedi ki:

    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...

  8. Yakup Gövler dedi ki:

    @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

    1. yazarken bunu [code=\'css\'] şeklinde yazmanız gerekiyor.
    2.  
    3. edButtons[edButtons.length] =
    4. new edButton('ed_csscode'
    5. ,'csscode'
    6. ,'[code=\'css\']'
    7. ,'

    '
    ,'y'
    );

  9. More’dan Öncesini Nasıl Gizleriz? · Yakup Gövler'in Not Defteri dedi ki:

    [...] 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 [...]

  10. Yazılarınızda Eklentisiz Adsense Reklam Gösterimi « Wordpress web seo tema ip uçları php script grafik tasarım dedi ki:

    [...] 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 [...]

  11. Oğuzhan Aslan dedi ki:

    Çok teşekkür ediyorum hocam...