Bu yazıda Wordpress 'de yazı yazarken kullandığımız editörün HTML kısmına buton eklemeyi anlatacağım. Bu iş için Wordpress'in her sürümünde bulunan quicktags.js 'yi düzenlememiz gerek. Bu dosya Wordpress'in 2.0 ve sonraki sürümlerinde /wp-includes/js dizininde bulunuyor. Daha önceki sürümler için /wp-admin klasörüne bakmalısınız. Bu dosyayı Notepad yada herhangi bir metin editörü ile açın ve aşağıdaki kodları bulun.

Kod Görünümü
JavaScript:
  1. edButtons[edButtons.length] =
  2. new edButton('ed_strong'
  3. ,'b'
  4. ,'<strong>'
  5. ,'</strong>'
  6. ,'b'
  7. );

Bu kodlar bizim de editöre buton eklemek içib kullanacağımız kodlar. Şimdi vereceğim kodu kopyalayın ve üstteki kodun altına yapıştırın.

Kod Görünümü
JavaScript:
  1. edButtons[edButtons.length] =
  2. new edButton('ed_alticizili' //butonun kod için gerekli adı
  3. ,'u' //menüde görünecek buton adı
  4. ,'<span style="text-decoration: underline;">' //tag başlangıcı
  5. ,'</span>' //tag bitişi
  6. ,'' // eklemek istiyorsanız butonun kısayol tuşu
  7. );

İlk satırda değiştirilecek bir şey yok, ikinci satırda ed_alticizili yazan yerin sadece alticizili kısmını değiştiriyoruz ve istediğimiz bir isim veriyoruz.Bu butonun adında yazacak yazı değil, sadece kod ve stil atamak için gerekli, Türkçe ve özel karakter kullanmayın. Üçüncü satırda menüden görünecek buton ismini yazıyoruz. Dördüncü satır seçimin başlangıcına, beşinci satır da sonuna eklenecek kodu gösteriyor. Altıncı satırdan kısayol tuşu ekleyebiliyorsunuz, buraya sadece bir harf yazın. Örneğin harf g ise editörde Alt+G tuş kombinasyonunu kullandığınızda kodu ekler. Şu anda bizim eklediğimiz buton altı çizili yazma özelliği kazandırdı. Eklediğiniz butonun sırasını quicktags.js dosyasındaki standart olarak eklenmiş butonlardan önce yada sonra ekleyerek ayarlayabilirsiniz.
Wordpress Editor HTML Menu
Menüye bakarsanız bazı butonlarda altı çizili, italik yada farklı renkde yazılar olduğunuz görürsünüz. Kendi butonumuza bu özelliklerden birini eklemek için /wp-admin dizininden wp-admin.css dosyasını metin editörünüzle açın. Aşağıda verdiğim kodda ilgili yerleri değiştirerek bu dosyanın başına yada sonuna (yada css hakkında bilgi sahibi iseniz düzeni bozmadan herhangi bir yere) ekleyin. İlgili yerler diye bahsettiğim ikinci satırda yazdığımız buton adı (bizim örneğimizde alticizili kısmı).

Kod Görünümü
CSS:
  1. #quicktags #ed_alticizili,
  2. #ed_reply_toolbar #ed_reply_alticizili {
  3. text-decoration: underline;
  4. }

Bu kod ile butonumuzun görünümünü u şekline çevirdik. CSS kodları hakkında bilginiz yoksa bu sayfadan yararlanabilirsiniz.

Bu kodları kendinize göre özelleştirebilir, yazılarınızda sık kullandığınız div tarzı tagları ekleyebilirsiniz. Fakat bu taglara atadığınız stillerin yazılarınızda gözükmesi için temanızın içinde bulunan style.css dosyasına stil adıyla kodların eklenmesi gerektiğini unutmayın.

Bu yazının bazı kısımlarında şu adresten yararlanılmıştır.