WORDPRESS'TE PLUGIN NASIL YAZILIR
Wordpress'te plugin yazmak için ilk önce hook mantığına sahip olmanız gerekmektedir. WP Hook'un ne olduğunu bilmeyenleri buraya alalım.
BİLGİ : Wordpress'te eklentiler “wp-content/plugins” altına yazılır. Bu klasör yazının devamında “WP eklenti klasorü” şeklinde anılacaktır.
BU KONUDA NELER ÖĞRENECEKSİNİZ
- WP Eklenti Oluşturma ve Tanımlama
- Eklenti Admin Sayfası Oluşturma
- Eklenti Yüklendiğinde İşlem Yaptırmak
- WP Eklentilerinde Ajax İşlemleri
- WP Eklentilerinde Shortcode Oluşturma
- WP Post Editörü'ne Buton Ekleme
WP Hook mantığını kavradığınıza göre, şimdi adf.ly eklentisi yazalım. Eklentinin ana mantığı postumuzu yazarken, bir butona basarak yazıya tag ekleyeceğiz. Bu tagta belirtilen adres ise adf.ly adresindeki üyeliğimiz sayesinde kısa bir linke çevrilecek.
Hazırsanız başlayalım.
WP PLUGIN TANIMLAMA
Wordpress'te plugin tanımlanırken ilk önce ana bir dosya belirlenir. Genellikle functions.php dosyası kullanılır. Bu dosyanın başına yazacağınız PHP'de yorum kodu olarak geçen bir kaç satırlık kod, hem bizim plugin açıklamamız olacak, hemde WP'nin pluginimizi tanımasını sağlayacaktır.
Wp eklenti klasörü altına bir klasör oluşturalım. Adı da “sd-adfly” olsun. Bu klasör altına functions.php ve index.php dosyalarını da oluşturalım. İndex.php dosyasına herhangi bir şey yazmayacağız.
Functions.php dosyasını açın ve aşağıdaki satırları <?php tagında sonra yapıştırın.
PHP- Kodu:
/*
Plugin Name: sDenizhan Adf.ly Link Kısaltıcı
Plugin URI: http://www.sdenizhan.com
Description: Adf.ly Linkleriniz Üzerinden Para Kazanmanızı Sağlar
Version: 1.0
Author: Süleyman DENİZHAN
Author URI: http://www.sdenizhan.com
*/ 
 | Orjinal Boyutunda Açmak İçin ( 909x74 ve %3$sKB ) Buraya Tıklayın |
Fonksiyonları yazarken bize kolaylık sağlaması açısından birkaç sabit değişken tanımlayalım.
PHP- Kodu:
/**************************
* SABİTLER
* ************************/
define(ADFLY_PLUGIN_NAME, 'Skyweboffice Adf.ly Link Kısaltıcı');define(ADFLY_PLUGIN_VERSION, '1.0');define(ADFLY_PLUGIN_DIR, plugin_dir_path(__FILE__));define(ADFLY_PLUGIN_AUTHOR, 'Süleyman DENİZHAN');define(ADFLY_PLUGIN_AUTHOR_WEBSITE, 'http://www.sdenizhan.com');define(ADFLY_PLUGIN_BASE, plugin_basename(__FILE__));define(ADFLY_PLUGIN_URL, plugin_dir_url(__FILE__)); Şimdi dikkat ederseniz sabitlerde birkaç fonksiyon kulladım. O zaman bu fonksiyonları tanımak lazım.
plugin_basename(__FILE__) : Bu fonksiyon bize üzerinde çalıştığımız dosyanın klasörünü ve dosya adını verir. Örneğin, sitemizin path'i /home/www/wp-content/plugins/sd-adfly/functions.php ise, bu fonksiyon bize sd-adfly/functions.php şeklinde değer döndürür. Çok fazla kullanmayız ama bilmenizde fayda var.
plugin_dir_path(__FILE__) : Bu fonksiyon plugin klasörünun konumunu döndürür. Örnek : /home/user/var/www/wordpress/wp-content/plugins/my-plugin/ gibi...
plugin_dir_url(__FILE__): Bu fonksiyon, plugin klasörünün url'sini bize döndürür. URL'nin sonunda / ekler.
Devam edelim...
WORDPRESS EKLENTİ YÖNETİM SAYFASI
Şimdi sıra eklentimiz için yönetim sayfası yapmaya geldi. Bunun için ilk önce soldaki menülere bir menü eklememiz gerekmektedir. Bunun için aşağıdaki kodları kullanacağız.
PHP- Kodu:
//sd_admin_menus fonksiyonu var mı yok mu diye kontrol ediyoruz.if (!function_exists('sd_admin_menus'))
{
//fonksiyonumuzu yazıyoruz...
function sd_admin_menus()
{
global $page;
$page = add_options_page('Skyweboffice Adf.ly Link Kısaltıcı', 'Adf.ly Ayarları', 10, 'sd-adfly-options', 'sd_adfly_admin');
}
add_action('admin_menu', 'sd_admin_menus');
} WP Hooks konusundan öğrendiğimiz add_action fonksiyonu ile admin_menu kancasına sd_admin_menus fonksiyonunu takıyoruz. Böylece WP admin_menu kancasında sd_admin_menus fonksiyonun çalıştırılacağını öğreniyor.
sd_admin_menus fonksiyonunda ise global $page ile sayfa değişkenine erişiyoruz. add_options_page fonksiyonunun return değerini bu değişkene atayarak sayfamızı eklemiş oluyoruz.
WP'nin admin sayfaları için çeşitli fonksiyonları mevcuttur. Bunları buradaki linkten öğrenebilirsiniz. Şimdi biz add_options_page fonksiyonunu inceleyeceğiz. Zaten birini öğrendiğinizde diğerlerini de hemen kavrayacaksınız. Çünkü kullanım şekilleri aynıdır.
add_options_page : Bu fonksiyon ile WP Ayarlar menüsü altında bir alt menü oluşturuyoruz. Fonksiyonun kullanımı ise şöyle :
add_options_page('Sayfa Title', 'Menü Text', Öncelik, 'benzersiz-bir-kelime-yada-id', 'çalışacak fonksiyon');
Sayta Title : Sayfanın Title Bilgisi
Menü Text : Alt menün yazısı
Öncelik : Bu değer 1 ile 10 arasında bir integer değeri alır. Genellikle 10 yazılır.
Benzersiz-bir-kelime-yada-id : Bu kısım önemlidir. Buraya benzersiz bir kelime grubu girmelisiniz. Aksi takdirde sayfanız çalışmaz. Boşluklara – (tire) koymayı unutmayın...!
çalışacak fonksiyon : Menüye tıklandığında çalışacak fonksiyonu belirtiyoruz.
Buraya kadar herşey tamamsa şimdi admin sayfamızı yazalım. Ben bootstrap kullanarak yazdığım admin panelin kodlarını paylaşıyorum. Yazının sonunda ise hem bu dosyaları, hem de anlatım dosyalarını paylaşacağım. Gerekirse ordan kontrol edebilirsiniz.
Yönetici sayfamız için gerekli fonksiyonun adını sd_adfly_admin olarak belirlemiştik. Bu sayfa bir form oluşturup, adf.ly apisi için gerekli olan User ID ( UID ), Key ( Kullanıcı Anahtar Değeri ) ve Kısaltma Domaini değerlerini kaydettirmeyi planlıyoruz.
Fonksiyonumuz şu şekilde :
PHP- Kodu:
if (!function_exists('sd_adfly_admin'))
{
function sd_adfly_admin()
{
?>
<div class="page-header">
<h3><?php echo ADFLY_PLUGIN_NAME; ?> Ayarları</h3>
</div>
<div id="result" class="result"></div>
<form method="post" action="kaydet.php" role="form" class="form-horizontal adfly_ayar_form">
<div class="form-group">
<label class="col-sm-2">Adf.ly Kullanıcı UID Değeri:</label>
<div class="col-lg-6">
<input type="text" name="adfly_uid" id="adfly_uid" value="<?php echo get_option('sd_adfly_uid'); ?>" class="form-control">
<span class="help-block"> adf.ly tarafında size verilen UID değerini girmelisiniz. </span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2">Adf.ly Kullanıcı Anahtar Değeri:</label>
<div class="col-lg-6">
<input type="text" name="adfly_key" id="adfly_key" value="<?php echo get_option('sd_adfly_key'); ?>" class="form-control">
<span class="help-block"> adf.ly tarafında size verilen KEY değerini girmelisiniz. </span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2">Kısaltma İçin Kullanılacak Domain:</label>
<div class="col-lg-6">
<select name="adfly_domain" id="adfly_domain" class="form-control">
<option value="adf.ly" <?php echo get_option('sd_adfly_domain') == 'adf.ly' ? 'selected="selected"' : ''; ?>>adf.ly</option>
<option value="q.gs" <?php echo get_option('sd_adfly_domain') == 'q.gs' ? 'selected="selected"' : ''; ?>>q.gs</option>
</select>
<span class="help-block"> adf.ly size kısaltma için alternatif domainler sunar. </span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2"></label>
<div class="col-lg-6">
<input type="submit" name="Ayar Kaydet" value="Ayarları Kaydet" class="btn btn-success">
<img src="<?php echo ADFLY_PLUGIN_URL; ?>http://www.fuub.net/images/wpspin.gif" class="loading_icon hide" height="16" width="16" border="0" />
</div>
</div>
</form>
<div class="col-lg-12">
<div class="page-header">
<h3>Bu Bilgileri Nasıl Elde Ederim ?</h3>
</div>
<p>
Adf.ly sitesine kendi kullanıcı adı ve şifreniz ile giriş yaptıktan sonra <i>Tools</i> menüsü altındaki <i>API Documentation</i> menüsüne tıklayın.
<br>
Sayfa açıldığında sağ tarafta
<br>
<pre>http://api.adf.ly/api.php?key=<b>dd628995bd9717ed88278a7979406852</b>&uid=<b>1041595</b>&advert_type=int&domain=adf.ly&url=http://somewebsite.com</pre>
şeklinde bir link göreceksiniz. Bize lazım olan değerler, key ve uid kelimelerinin karşısında yazıyor.
</p>
</div>
<div class="col-lg-12">
<div class="page-header">
<h3>Nasıl Kullanırım ?</h3>
</div>
<p>
Adf.ly ayarlarını girip kayıt ettikten sonra yazınıza aşağıdaki kodu eklemeniz yeterli olacaktır.<br>
<pre>[sd_adfly url="http://www.google.com"][/sd_adfly]</pre>
<br>
Ayrıca editöre bu işlemi için bir buton eklenmiştir. Bu butonu kullanarakta eklentiyi kullanabilirsiniz.
</p>
<div class="page-header">
<h3>Örnek Kullanımlar</h3>
</div>
<p>
[sd_adfly url="http://www.google.com"][/sd_adfly]<br>
[sd_adfly url="http://www.google.com" title="Google.Com" target="_blank" class="link"][/sd_adfly]<br>
[sd_adfly url="http://www.google.com" title="Google.Com" target="_blank" class="link"]Buraya Tıklayın[/sd_adfly]<br>
</p>
</div>
<?php
}
} add_option : WP'ye ayar eklemeyi sağlar.
update_option : Ayarı güncellemeyi sağlar.
Sonraki konuda ve yazının genelinde bu fonksiyonların kullanımını göreceksiniz.
WORDPRESS EKLENTISI YÜKLENDIĞINDE IŞLEM YAPTIRMAK
Gördüğünüz gibi admin sayfasında kullanıcıdan birkaç bilgi istedik. Bu bilgileri wp'nin db'sinde saklayacağız. Fakat bu saklanacak alanları ayarlamamız gerekiyor değil mi
Bu durumda eklenti etkinleştiğinde wp db'sine gerekli ayar alanlarını ekleyelim.PHP- Kodu:
if (!function_exists('sd_adfly_init'))
{
function sd_adfly_init()
{
add_option('sd_adfly_uid', '');
add_option('sd_adfly_key', '');
add_option('sd_adfly_domain', '');
}
add_action('init', 'sd_adfly_init');
} add_option('ayar_alanı', 'ayar_değeri')
şeklinde kullanılır. Datada ayar_alanı adında bir yer açar ve ayar_değeri'ni oraya kaydeder.
Fonksiyondan sonra, sd_adfly_init fonksiyonunu wordpress'in init kancasına add_action ile takıyoruz. Böylece eklenti aktifleştiği zaman bu fonksiyonun çalışmasını sağlıyoruz. Burdan anlayacağınız gibi
init kancası, eklenti aktifleştiği zaman yapılacakların kancasıdır.
WP EKLENTİLERİNDE AJAX KULLANMAK
Günümüz web teknolojilerinin başında ajax gelir. Kısaca ajax ile sayfanın tamamı değil sadece belli bir bölümü ile ilgili işlemler yaptırılarak, kullanıcıya gereksiz işkence çektirilmez. Bu eklenti de ajax kullanmamızın amacı “Wordpress Eklentilerinde Ajax Nasıl Kullanılır?” sorusunu yanıtlamaktır. Ayrıca ufak bir güzelliği de yok değil yani
Wordpress'te ajax kullanırken mantık şöyle işliyor :
1- javascript kısmında post edilecek url kısmına ajaxurl yazılacak.
2- post edilecek değerlere ek olarak action : 'anahtar_deger' eklenecek. Bu kısım biraz kafa karıştırıcı olabiliyor. Bu yüzden şöyle kullanmanız sizin için daha faydalı olur.
Jquery ile ajax işlemlerinde $.post() kullanıyoruz. Bunu wp'ye göre geliştirirsek,
Kod:
$.post(ajaxurl, { data : $('#formid').serialize(), action : 'anahtar_bir_deger' }, function(){});Peki action 'i neden tanımladık ?
Worpdress ajax işlemleri için kullandığı hook'un adı şu şekildedir :
wp_ajax_{bu_kısım_javascripteki_action_kismi}
Yani yukarıda action için 'anahtar_bir_deger' tanımladık ve wp hook'u şöyle oldu :
wp_ajax_anahtar_bir_deger
Eğer kafanız karıştıysa hemen örneğe geçelim.
Ajax kullanabilmek için ilk önce adfly.js dosyası oluşturalım. Ben konum olarak bootstrap/js altına oluşturuyorum. Bu js dosyasında jQuery'nin nimetlerinde yararlanacağız.
BİLGİ : Wordpress Ajax işlemlerinde, işlem başarılı olduysa '0' (sıfır) değeri return eder. Dikkat etmeniz gereken şey, işlemin başarılı olması demek, bir dosyaya veri gönderilip, o dosyadan olumlu/olumsuz verinin geri alınması demektir.
Adfly.js içeriği :
HTML-Kodu:
jQuery(document).ready(function($){
$('form.adfly_ayar_form').submit(function(event){
event.preventDefault();
var form = $(this);
var adfly_uid, adfly_key, adfly_domain;
adfly_domain = $('#adfly_domain').val();
adfly_key = $('#adfly_key').val();
adfly_uid = $('#adfly_uid').val();
if (adfly_key == '')
{
$('#adfly_key').parent().parent().addClass('has-error');
alert('Adf.ly Kullanıcı Anahtar Değerini Girmelisiniz..!');
return;
}
if (adfly_uid == '')
{
$('#adfly_uid').parent().parent().addClass('has-error');
alert('Adf.ly UID Değerini Girmelisiniz..!');
return;
}
//Yükleniyor ...
var submitButton = form.find('input[type=submit]');
submitButton.val('Ayarlar Güncelleniyor..').attr('disabled', 'disabled');
//loading icon gösteriliyor...
form.parent().find('img.loading_icon').removeClass('hide').show();
//post url olarak ajaxurl giriyoruz...
// action : 'anahtar_kelime' tanımlıyoruz...
$.post([B][U]ajaxurl[/U][/B], { data : form.serialize(), [B][U]action : 'sd_adfly_ayar_kaydet'[/U][/B]}, function(results){
//işlem başarılı ise
if (results != '0')
{
//loading icon gösteriliyor...
form.parent().find('img.loading_icon').addClass('hide').hide();
submitButton.val('Ayarları Güncelle').css({'color' : 'white'}).removeAttr('disabled');
form.parent().find('div.result').addClass('alert alert-success').html('Ayarlar Güncellendi..!');
}
else
{
//loading icon gösteriliyor...
form.parent().find('img.loading_icon').addClass('hide').hide();
submitButton.val('Ayarları Güncelle').removeAttr('disabled');
form.parent().find('div.result').addClass('alert alert-danger').html(results);
}
});
});
});İkinci nokta ise gönderilen bilgiler kısmındadır. Buradaki action değeri bizim için önemli bir değerdir bu yüzden buradaki değeri aklınızda tutun. İleride kullanacağız.
Ajax için gerekli js dosyamızı hazırladıktan sonra bunu wp'ye eklememiz gerekiyor. Bu işlem içinde wp'nin admin_enqueue_scripts kancasını kullanacağız. Bu kanca sayesinde bu js dosyası sadece admin panelinde çalışacaktır.
PHP- Kodu:
if (!function_exists('sd_adfly_scripts'))
{
function sd_adfly_scripts($hook)
{
global $page;
//sadece bizim eklenti sayfamızda çalışmasını sağlıyoruz.
if ($page != $hook)
return;
wp_enqueue_style('sd-adfly', ADFLY_PLUGIN_URL.'bootstrap/style/style.css');
wp_enqueue_style('sd-adfly-bt', ADFLY_PLUGIN_URL.'bootstrap/style/css/bootstrap.min.css');
wp_enqueue_script('sd-adfly-js', ADFLY_PLUGIN_URL.'bootstrap/js/adfly.js', array('jquery'));
}
add_action('admin_enqueue_scripts', 'sd_adfly_scripts');
} Şimdi bu alınan verilerin kaydedileceği kısma geldik. Burada ajax ile gelen veri grubunu dbye yazdıracağız. Bu kısmı adım adım anlatacağım ki ajax mantığı otursun.
1-İlk önce bir fonksiyon tanımlayalım :
PHP- Kodu:
if (! function_exists('sd_adfyl_ayarlari_kaydet'))
{
function sd_adfyl_ayarlari_kaydet()
{
}
} PHP- Kodu:
if (! function_exists('sd_adfyl_ayarlari_kaydet'))
{
function sd_adfyl_ayarlari_kaydet()
{
}
[B]add_action('wp_ajax_sd_adfly_ayar_kaydet', 'sd_adfyl_ayarlari_kaydet');[/B]
} PHP- Kodu:
if (! function_exists('sd_adfyl_ayarlari_kaydet'))
{
function sd_adfyl_ayarlari_kaydet()
{
$data = $_POST['data'];
parse_str($data, $post);
$post = (object) $post;
if (empty($post->adfly_key) || empty($post->adfly_uid))
{
die('Tüm Forumu Doldurmalısınız..!');
}
else
{
$msg = '';
if (!update_option('sd_adfly_uid', $post->adfly_uid))
{
$msg .= 'Adf.ly UID Bilgisi Güncellenemedi.';
}
else
{
$msg .= 'Adf.ly UID Bilgisi Güncellendi.';
}
if (!update_option('sd_adfly_key', $post->adfly_key))
{
$msg .= 'Adf.ly KEY Bilgisi Güncellenemedi.';
}
else
{
$msg .= 'Adf.ly KEY Bilgisi Güncellendi.';
}
if (!update_option('sd_adfly_domain', $post->adfly_domain))
{
$msg .= 'Adf.ly DOMAIN Bilgisi Güncellenemedi.';
}
else
{
$msg .= 'Adf.ly DOMAIN Bilgisi Güncellendi.';
}
die($msg);
}
die();
}
add_action('wp_ajax_sd_adfly_ayar_kaydet', 'sd_adfyl_ayarlari_kaydet');
} Wordpress'te Ajax İşlemi bu şekilde yapılmaktadır. Eğer sistem karışık geldiyse, takıldığınız bir nokta varsa memnuniyetle cevaplayabilirim.
WORDPRESS EKLENTILERINDE SHORTCODE OLUŞTURMA
Wp'nin en güzel yanından biri de shortcode taglarıdır. Forumlarda vs. çok kullanılan, [img] gibi tagları istersek pluginlerimizde kendimizde tanımlayabiliriz.
Eklentimiz asıl işini bu kısım yapacaktır. WP postlarımız içinde tanımlayacağımız kodu görünce, buradaki fonksiyonu çalıştıracaktır. Bu yüzden adf.ly apisine de burada bağlanacağız.
Hemen işlemlerimize devam edelim ve fonksiyonumuzu yazalım.
PHP- Kodu:
if (!function_exists('sd_adfly_shortcode'))
{
function sd_adfly_shortcode($atts, $content)
{
//gelen değerleri parçalıyoruz...
extract(shortcode_atts(array(
'url' => 'http://www.sdenizhan.com',
'title' => '',
'target' => '_self',
'class' => ''
), $atts ));
//gerekli bilgileri alalım
$adfly_key = get_option('sd_adfly_key');
$adfly_uid = get_option('sd_adfly_uid');
$adfly_domain = get_option('sd_adfly_domain');
//html için değişken
$output = '<a ';
//adf.ly apisinden kısaltılmış linkini alalım
$adfly_link = file_get_contents('http://api.adf.ly/api.php?key='. $adfly_key .'&uid='. $adfly_uid .'&advert_type=int&domain='. $adfly_domain .'&url='. $url);
//link geldiyse
if ($adfly_link)
{
$output .= ' href="'. $adfly_link .'" title="'. $title .'" target="'. $target .'" class="'. $class .'"';
if (! empty($content))
{
$output .= '>'. $content .'</a>';
}
else
{
$output .= '>'. $url .'</a>';
}
return $output;
}
//link gelmediyse orjinal linki return edelim
else
{
return '<a href="'. $url .'" title="'. $title .'" target="'. $target .'" class="'. $class .'">'. $url .'</a>';
}
}
add_shortcode('sd_adfly', 'sd_adfly_shortcode');
} Tanımladığımız fonksiyon $atts ve $content şeklinde iki değişken alır. $atts değişkeni shortcode'nin parametlerini taşır. $content ise, shortcode'nin içeriğidir. Yani shortcode'miz
Kod:
[sd_adfly url='' title='' class='' target='']Buraya Tıkla[/sd_adfly]
Fonksiyonumuz extract ile bu değikenleri ayarlamaktadır. shortcode_atts ile de değişkenlerin default değerlerini belirtiyoruz. Daha sonra db'den gerekli ayarları elde edip adf.ly apisine gönderiyoruz. Apiden link geldiyse, html tagına göre bağlayıp return ediyoruz, eğer apiden link gelmediyse, Orijinal linki return ediyoruz.
SHORTCODE IÇIN EDITOR BUTONU EKLEYELIM
Eklentimizin son kısmına geldik. Bu kadar iş yaptık, herşeyimiz hazır. Fakat kullanıcılarımızdan her seferinde
Kod:
[sd_adfly url='' title='' class='' target='']Buraya Tıkla[/sd_adfly]
PHP- Kodu:
if (! function_exists('sd_adfly_add_quicktags') )
{
function sd_adfly_add_quicktags() {
?>
<script type="text/javascript">
//QTags.addButton( benzersiz_id, gorunecek_isim, kod_1, kod_2, erişim_tuşu, mouse_uzerinde_durdugunda_, priority );
QTags.addButton( 'eg_adfly', 'Adf.ly Link Converter', '[sd_adfly url="" title="" class=""]Buraya Tıklayın[/sd_adfly]', '', 'c', 'Adf.ly Link Converter', 111 );
</script>
<?php
}
add_action( 'admin_print_footer_scripts', 'sd_adfly_add_quicktags' );
} Ve eklentimizi bitirmiş bulunmaktayız. Hayırlı uğurlu olsun.
Eğer aklınıza takılan bir şey varsa sorabilirsiniz. Eklentinin hazır şekli ve dökümanı ektedir. İndirip kodları incelemenizde fayda vardır.
Hiç yorum yok:
Yorum Gönder