Herkese selamlar. Bu başlık altında sıfırdan WordPress eklentisi nasıl yazılır ve WordPress.org'da nasıl yayınlanır buna değineceğiz. Vakit kaybetmeden başlayalım :)
Öncelikle WordPress, mevcut FTP dosyalarında, eklenti yolu olarak ''/wp-content/plugins'' klasörünü kullanır. Tüm işlemlerimizi bu klasörde gerçekleştiriyor olacağız.
Adım 1 - FTP Eklenti Dosyalarını Oluşturma
Öncelikle ''wp-content/plugins'' klasörünün içine, klasör > yeni klasör ekle diyerek hazırlamak istediğimiz eklentinin klasörünü oluşturuyoruz.
Adım 2 - Eklenti PHP Dosyası Oluşturma
Eklenti klasörümüzü oluşturduktan sonra, bu klasörün içerisinde, dosya > yeni dosya diyerek ''index.php'' adında bir dosya oluşturuyoruz. Bu dosya, eklentimizin admin panelindeki ana sayfası olacak.
Adım 3 - Eklentimizi Panelimize Tanıtma
Sıra geldi eklentimizin index.php dosyasını düzenleyerek, eklentimizi, admin panelimize tanıtacağız. Buradaki kodların ne anlama geldiklerine kısaca değinelim:
Defined
if ( ! defined( 'ABSPATH' ) ) exit;
defined, WordPress'in eklenti güvenliği için tüm developerlardan beklediği bir güvenlik sorgusudur. Admin yetkilendirmesi dışında erişim sağlanırsa, ziyaretçiyi eklenti sayfasından atmaktadır.
add_action
add_action('admin_menu', 'wmaraci_eklentisi');
add_action ile ''wmaraci_eklentisi'' adında yeni bir aksiyon başlattığımızı WordPress'e bildiriyoruz.
Fonksiyon
function wmaraci_eklentisi() {
add_menu_page('WmAraci Eklentisi', 'WmAraci', 'manage_options', 'wm-araci-eklenti', 'wm_araci_fonksiyon');
}
Fonksiyonumuzu oluşturuyoruz ve admin panelinde eklentimizi yapılandırıyoruz. add_menu_page adından da anlayacağınız gibi admin panelinde menü ve eklenti yerleşimini tanıttığımız bir kısım. Burada:
WmAraci Eklentisi = Sayfa Başlığımız;
WmAraci = Menüdeki İsmi
wm-araci-eklenti = Eklentimizin URL'i.
wm_araci_fonksiyon = Eklenti sayfamızda kullanacağımız fonksiyon.
Adım 4 - Eklentimizi Panelden Kontrol Etme
Dosyamızı oluşturduk, fonksiyonlarımızı hazırladık ve eklentimizi panelimize tanıttık. Şimdi panelden kontrolünü sağlıyoruz.
Harika! Eklentimiz artık panelimizde ve aktif :) Sıra geldi fonksiyonlarımızı yazmaya ve yapmak istediğimiz değişikliklere :)
Adım 5 - Fonksiyonları Hazırlama
Eklenti sayfamızdaki yansımasını görmek için deneme amaçlı bir echo paylaştım ve kontrolümü sağladım. Eklentim sorunsuz bir şekile bağlantısını sağladı. Artık üretmek istediğim tüm fonksiyonları hazırlamaya başlayabilirim. Buradaki eğitimde, sitemizin herhangi bir yerinde kısakod ile paylaşmak istediğimiz kampanya görseli ve butonu hazırlayacağız.
Adım 6 - Kurguyu Kodlama
Örnek bir kampanya divi oluşturuyorum ve içerisinde görselimi ve butonumu ekliyorum.
Burada dikkat edersiniz function wm_araci_fonksiyon() fonksiyonuma girdikten sonra ''?>'' iler PHP'mi kapattım ve HTML kodlarımdan sonra tekrar açarak fonksiyonumu bitirdim. Bunu yapmamdaki amaç, php içinde düz bir şekilde HTML veya JS kodları yazamıyor olmamız. Bunun için, ister benim yaptığım şekliyle yapabiliriz, isterseniz echo '
' kullanarak PHP kapatmadan HTML kodlarınızı yazdırabilirsiniz. Ancak echo ile yazdırılan JS kodları çoğu zaman çalışmamaktadır.
Kontrolümü sağladığımda div ve butonum hazır. Ancak şimdi geldi eklentimize CSS ve IMAGES dosyalarımızı eklemeye :)
Adım 7 - İhtiyaç Duyulan Diğer Klasörleri Hazırlama
Eklentimde kullanacağım CSS ve IMAGES dosyaları için bu dosyaların barınacağı klasörleri açıyorum.
Klasörlerimi açtığıma göre sıra geldi kampanya tasarımımda kullanacağım görselimi hazırlamaya ve images klasörüme yüklemeye. :)
Adım 8 - Materyalleri Hazırlama
Kampanya görseli olarak bu görseli kullanacağım.
Şimdi görselimi images klasörüne yüklüyor ve ardından kodlarıma dahil ederek kontrolünü sağlıyorum.
Harika! Görselim başarıyla eklendi. Burada dikkat etmeniz gereken nokta şudur:
image adresini verirken:
olarak ekledim. Burada sık yapılan hatalardan birisi, doğrudan dosyanın tüm adresini yazmaktır. Yani orada PHP başlatıp plugins_url yerine genel kullanım ''/wp-content/plugins/wmaraci-wordpress-eklentisi/images/kampanya.jpg'' şeklindedir. Ancak WordPress bu dosya çağırma yolunu kabul etmez. Çünkü WordPress açık kaynak kodlu ve düzenlemeye müsait bir sistemdir. Yani herhangi birisi /wp-content/ yolunun adını değiştirebilir. /wp-dosyalarim/ olarak kullanabilir. Bu yüzden eklentimizin bulunduğu klasörü, WordPress'in otomatik bulmasını sağlıyoruz.
Adım 9 - CSS Hazırlama ve Çağırma
Görselimi başarıyla hazırladıktan sonra sıra geldi butonuma biraz şekil vermeye :) Bunun için CSS klasörüme gidiyor ve eklentim için bir CSS dosyası açarak, bu dosyayı eklentime dahil ediyorum.
Dosyamı oluşturdum ve şimdi wp_enqueue_style ile eklentime dahil ediyorum.
Burada dikkat etmeniz gereken bir diğer unsur ise, WordPress pluginlerine style ve js dahil ederken wp_enqueue_style ve wp_enqueue_script komutlarını kullanmanızdır. WordPress stil dosyalarının ve js dosyalarının bu şekilde çağrılmasını istiyor. CSS dosyamı da dahil ettiğime göre sıra geldi butonuma id verip CSS ile tasarımını değiştirmeye.
CSS kodlarımı hazırladım ve son olarak kampanya görselimin nasıl göründüğünü kontrol ediyorum.
Harika! Görselim artık paylaşıma hazır. Sıra geldi kısakod oluşturarak görselimi istediğim yerlere eklemeye.
Not: kısa kod oluşturarak ekleme dışında pek çok gösterim yöntemi kullanabilirsiniz. En çok sorulan kısa kod oluşturma olduğu için anlattım.
Adım 10 - Kısa Kod Oluşturma
Burada kısa kod oluşturmak için:
fonksiyonunu kullandım ve eklentime dair tüm divleri bu fonksiyonumun içine aldım. Böylece artık websitemde her nereye [wm_butonum][/wm_butonum] kısa kodunu eklersem, hazırladığım kampanya görselim çıkacak. Haydi deneyelim ve görelim.
Adım 11 - Eklentinin Çalışılabilirliğini Kontrol Etme
Örnek bir WordPress Ana sayfasına hazırladığım eklentimin kısa kodunu ekliyorum.
Harika! Artık eklentim kullanıma hazır ve başarıyla çalışıyor! Sıra geldi son aşama olan WordPress.Org'a eklentimizi göndermeye.
Not: WordPress'de eklentinizi yayınlama zorunluluğunuz yoktur. Sadece kendinizin kullanacağı eklentileri yayınlama talebinde bulunmadan kullanabilirsiniz.
Adım 12 - Eklentiyi WordPress.Org'a Göndermek
Bu kısımda eklentimizi WordPress'e göndermek ve yayın talebinde bulunmak için öncelikle eklentimizin ne olduğu ve nasıl çalıştığına dair bir readme.txt dosyası hazırlıyoruz. Ardından eklenti dosyamızı .zip yaparak sıkıştırıp aşağıdaki adrese gönderiyoruz.
https://wordpress.org/plugins/developers/add/
Ortalama 1 hafta içerisinde, WordPress düzeltmemizi istediği hatalar varsa bunları bizimle paylaşıyor, yahut kabul ediliyse yayına almaya hazır hale geliyor. Eklenti taslak dosyalarını ekte paylaşıyorum. Şimdiden herkese kolay gelsin :)
Lions
Eklenti taslağı: https://dosya.co/6ezo2zdk4g9o/wmaraci-wordpress-eklentisi.zip.html
Kontrolümü sağladığımda div ve butonum hazır. Ancak şimdi geldi eklentimize CSS ve IMAGES dosyalarımızı eklemeye :)
Adım 7 - İhtiyaç Duyulan Diğer Klasörleri Hazırlama
Eklentimde kullanacağım CSS ve IMAGES dosyaları için bu dosyaların barınacağı klasörleri açıyorum.
Klasörlerimi açtığıma göre sıra geldi kampanya tasarımımda kullanacağım görselimi hazırlamaya ve images klasörüme yüklemeye. :)
Adım 8 - Materyalleri Hazırlama
Kampanya görseli olarak bu görseli kullanacağım.
Şimdi görselimi images klasörüne yüklüyor ve ardından kodlarıma dahil ederek kontrolünü sağlıyorum.
Harika! Görselim başarıyla eklendi. Burada dikkat etmeniz gereken nokta şudur:
image adresini verirken:
 ?> )
olarak ekledim. Burada sık yapılan hatalardan birisi, doğrudan dosyanın tüm adresini yazmaktır. Yani orada PHP başlatıp plugins_url yerine genel kullanım ''/wp-content/plugins/wmaraci-wordpress-eklentisi/images/kampanya.jpg'' şeklindedir. Ancak WordPress bu dosya çağırma yolunu kabul etmez. Çünkü WordPress açık kaynak kodlu ve düzenlemeye müsait bir sistemdir. Yani herhangi birisi /wp-content/ yolunun adını değiştirebilir. /wp-dosyalarim/ olarak kullanabilir. Bu yüzden eklentimizin bulunduğu klasörü, WordPress'in otomatik bulmasını sağlıyoruz.
Adım 9 - CSS Hazırlama ve Çağırma
Görselimi başarıyla hazırladıktan sonra sıra geldi butonuma biraz şekil vermeye :) Bunun için CSS klasörüme gidiyor ve eklentim için bir CSS dosyası açarak, bu dosyayı eklentime dahil ediyorum.
Dosyamı oluşturdum ve şimdi wp_enqueue_style ile eklentime dahil ediyorum.
Burada dikkat etmeniz gereken bir diğer unsur ise, WordPress pluginlerine style ve js dahil ederken wp_enqueue_style ve wp_enqueue_script komutlarını kullanmanızdır. WordPress stil dosyalarının ve js dosyalarının bu şekilde çağrılmasını istiyor. CSS dosyamı da dahil ettiğime göre sıra geldi butonuma id verip CSS ile tasarımını değiştirmeye.
CSS kodlarımı hazırladım ve son olarak kampanya görselimin nasıl göründüğünü kontrol ediyorum.
Harika! Görselim artık paylaşıma hazır. Sıra geldi kısakod oluşturarak görselimi istediğim yerlere eklemeye.
Not: kısa kod oluşturarak ekleme dışında pek çok gösterim yöntemi kullanabilirsiniz. En çok sorulan kısa kod oluşturma olduğu için anlattım.
Adım 10 - Kısa Kod Oluşturma
Burada kısa kod oluşturmak için:
add_shortcode('wm_butonum', 'wm_buton');
function wm_buton() {}
fonksiyonunu kullandım ve eklentime dair tüm divleri bu fonksiyonumun içine aldım. Böylece artık websitemde her nereye [wm_butonum][/wm_butonum] kısa kodunu eklersem, hazırladığım kampanya görselim çıkacak. Haydi deneyelim ve görelim.
Adım 11 - Eklentinin Çalışılabilirliğini Kontrol Etme
Örnek bir WordPress Ana sayfasına hazırladığım eklentimin kısa kodunu ekliyorum.
Harika! Artık eklentim kullanıma hazır ve başarıyla çalışıyor! Sıra geldi son aşama olan WordPress.Org'a eklentimizi göndermeye.
Not: WordPress'de eklentinizi yayınlama zorunluluğunuz yoktur. Sadece kendinizin kullanacağı eklentileri yayınlama talebinde bulunmadan kullanabilirsiniz.
Adım 12 - Eklentiyi WordPress.Org'a Göndermek
Bu kısımda eklentimizi WordPress'e göndermek ve yayın talebinde bulunmak için öncelikle eklentimizin ne olduğu ve nasıl çalıştığına dair bir readme.txt dosyası hazırlıyoruz. Ardından eklenti dosyamızı .zip yaparak sıkıştırıp aşağıdaki adrese gönderiyoruz.
https://wordpress.org/plugins/developers/add/
Ortalama 1 hafta içerisinde, WordPress düzeltmemizi istediği hatalar varsa bunları bizimle paylaşıyor, yahut kabul ediliyse yayına almaya hazır hale geliyor. Eklenti taslak dosyalarını ekte paylaşıyorum. Şimdiden herkese kolay gelsin :)
Lions
Eklenti taslağı: https://dosya.co/6ezo2zdk4g9o/wmaraci-wordpress-eklentisi.zip.html
