WordPress Widget Plugin

Merhaba

Bu yazımda wordpresse nasıl eklenti yazılır bir örnekle anlatmaya çalışacağım. Anlamlı Sözler adını belirlediğim bir eklenti oluşturacak, eklentilerden eklenmesini sağlayacak, aktifleştirecek ve Tema bileşenlerde kullanımını örnekleyeceğim. En son da ise oluşturduğum eklentiyi zip formatında paylaşacağım.

Önce eklentim için Klasör oluşturuyorum.

klasor-olustuyoruz

Klasörün içerisine ise

css ve images klasörleri oluşturuyorum. Ardından ise anlamli-sozler.php ve readme.txt dosyası oluşturuyorum.

klasor-olustuyoruz2

Eklentiyi yazmaya başlıyorum.

anlamli-sozler.php

PHP dosyamızda temanın adını, açıklamasını(description) yazıyorum ve böylelikle wordpress için hem eklenti klasörü için bir ad tanımlamış hemde kullanıcılar için kısa bir tanımlama yapmış oldum.

<?php
/*
Plugin Name: Anlamlı Sozler
Plugin URI: http://www.veblebi.com
Description: Anlamlı Sözler Eklentisi
Version: 1.0
Author: Sinan Tekmil
Author URI: http://www.veblebi.com
License: GPLv2

1. Download and unzip the latest release zip file
2. Upload directory to your `/wp-content/plugins/` 
3. Activate the plugin through the 'Plugins' menu in WordPress
*/

İlk giriş bölümü. Eklentinin adı, ve elle yükleme seçeneğini ekledim. Gerçi eklentimiz, oluşturduğumuz zip dosyasından otomatik kurulacak.

Ardından eklenti sınıfını oluşturuyorum;
Şimdide sırada eklentimizin bileşenlerde nasıl görüneceği, neleri içereceği kısmına geldim.

/** WP_Widget **/
define('IS_ADMIN', !is_admin() ? false :true);
class anlamli_sozler_widget extends WP_Widget {
 function anlamli_sozler_widget() {
	/* settings. */
	$widget_ops = array( 'classname' => 'anlamli-sozler', 'description' => 'Anlamlı Sözler' );
 	/* control settings. */
	$control_ops = array( 'id_base' => 'anlamli-sozler-widget' );
 	/* Create the widget. */
	$this->WP_Widget( 'anlamli-sozler-widget', 'Anlamlı Sözler', $widget_ops, $control_ops );
 }

anlamli-sozler-bilesen
Anlamlı sözler Eklentimiz artık hazır…

Sırada ise kullanımı var. Bunun içinde

Hemen altına  verileri kaydetme fonksiyonunu yazıyorum
form adında bir fonksiyon oluşturuyorum.

	// widget form creation
	function form($instance) {
		if(IS_ADMIN == true) {
			// Check values
			if( $instance) {
				  $title = esc_attr($instance['title']);
				  $size = esc_attr($instance['size']);
				  $renk = esc_attr($instance['renk']);
				  $resim = esc_attr($instance['resim']);
				  $textarea = esc_textarea($instance['textarea']);
			} else {
				  $title = '';
				  $renk = 'Default';
				  $size = '14';
				  $textarea = '';
			}
			$arr_select = array(
				'default'	=> 'Default',
				'red' 		=> 'Kırmızı',
				'blue'		=> 'Mavi',
				'green'		=> 'Yeşil',
				'pink' 		=> 'Pembe',
				'orange' 	=> 'Turuncu',
				'maroon' 	=> 'Maroon',
				'rose' 		=> 'Gül',
				'cerulean' => 'Cerulean',
				'azure' 	=> 'Azure',
				'violet' 	=> 'Mor'
			);
			$arr_size = array(
				'12'	=> 'Küçük',
				'14' => 'Normal',
				'16'	=> 'Orta',
				'18'	=> 'Büyük',
				'24' => 'Çok Büyük'
			);

	?>
		<p>
		<label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Widget Title (Başlık)', 'wp_widget_plugin'); ?></label>
		<input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" />
		</p>
		<p>
		<label for="<?php echo $this->get_field_id('renk'); ?>"><?php _e('Color - Renk:', 'wp_widget_plugin'); ?></label>
		<select class="widefat" id="<?php echo $this->get_field_id('renk');?>" name="<?php echo $this->get_field_name('renk'); ?>">
		<?php foreach($arr_select as $key => $v ): ?>
		<?php $slc = $renk == $key ? ' selected="selected"':null ?>
		<option value="<?php echo $key?>"<?php echo $slc?>><?php echo $v?></option>
		<?php endforeach;?>
		</select>
		</p>
		<p>
		<label for="<?php echo $this->get_field_id('size'); ?>"><?php _e('Size - Boyut:', 'wp_widget_plugin'); ?></label>
		<select class="widefat" id="<?php echo $this->get_field_id('size');?>" name="<?php echo $this->get_field_name('size'); ?>">
		<?php foreach($arr_size as $ky => $v ): ?>
		<?php $slc = $size == $ky ? ' selected="selected"':null ?>
		<option value="<?php echo $ky?>"<?php echo $slc?>><?php echo $v?></option>
		<?php endforeach;?>
		</select>
		</p>
		<p>
		<label for="<?php echo $this->get_field_id('resim'); ?>"><?php _e('Image - Resim:', 'wp_widget_plugin'); ?></label>
		<select class="widefat" id="<?php echo $this->get_field_id('resim');?>" name="<?php echo $this->get_field_name('resim'); ?>">
		<?php for($i=1;$i<20;$i++ ): ?>
		<?php $slc = $resim == $i ? ' selected="selected"':null ?>
		<option value="<?php echo $i?>"<?php echo $slc?>>Resim <?php echo $i?></option>
		<?php endfor;?>
		</select>
		</p>
		<p>Seperator ENTER - ENTER ile ayırın</p>
		<p>
		<label for="<?php echo $this->get_field_id('textarea'); ?>"><?php _e('Sözler:', 'wp_widget_plugin'); ?></label>
		<textarea class="widefat" rows="10" id="<?php echo $this->get_field_id('textarea'); ?>" name="<?php echo $this->get_field_name('textarea'); ?>"><?php echo $textarea; ?></textarea>
		</p>
	<?php
	}
}

update adında bir fonksiyon oluşturuyorum.

	// update (Guncelle) widget
	function update($new_instance, $old_instance) {
		if( IS_ADMIN == true) {
			$instance = $old_instance;
			// Alanlar
			$instance['title'] = strip_tags($new_instance['title']);
			$instance['renk'] = strip_tags($new_instance['renk']);
			$instance['size'] = strip_tags($new_instance['size']);
			$instance['resim'] = strip_tags($new_instance['resim']);
			$instance['textarea'] = strip_tags($new_instance['textarea']);
		  return $instance;
	  }
	}

FORM fonksiyonumuzda if( $instance) koduyla, eğer formun durumu boş değilse, içeriklerini alıyorum, eğer boş ise varsayılan değerleri belirliyorum. Bu bölüm eklentimizi ilk oluşturduğumuz anı ya da sonrasını kapsıyor. Kısaca, Kaydet ve Güncelle kısmı.

Form alanımızda 4 adet ALAN OLUŞTURDUK. Bunlardan ilki BAŞLIK, İkincisi YAZI RENGİ, ÜÇÜNCÜSÜ DIVIDER(yani yazı arka planında, alta yerleştireceğimiz resim), ve dördüncüsüde ENTER ile ayırcağımız anlamlı sözler kutusu.

Önce tanımladık, sonrasında ise ilgili HTM kodlarıyla formumuza yerleştirdik.

Güncelleme fonksiyonumuzda yaptığımız değişiklikleri kaydetmemize olanak verdi.

BURAYA KADAR kulalnılan fonksiyonlar ADMIN PANEL için geçerliydi. Şimdi sırada sitede EKLENTİNİN gösterilmesi kısmı var.

Hemen update fonksiyonumun altına widget fonksiyonumu oluşturuyorum. Bu ziyaretçiler siteye girdiğinde işlev görecek olan fonksiyondur.

	function widget($args, $instance) {
		if(IS_ADMIN == false) {
			extract( $args );
			// these are the widget options (ayarlar)
			$title = apply_filters('widget_title', $instance['title']);
			$textarea = $instance['textarea'];
			$size = $instance['size'];
			$renk = $instance['renk'];
			$resim = $instance['resim'];
			echo $before_widget;
			// Display the widget
			echo '<div class="widget-text wp_widget_plugin_box">';
			// Check if title is set
			if ( $title ) {
				echo $before_title . $title . $after_title;
			}
			// Check if textarea is set
			if( $textarea ) {
			  $textarea = trim($textarea);
			  $exp = explode( "\n", $textarea );
			  $arr = array();
			  foreach($exp as $v) {
					if($v != null) $arr[] = $v;
			  }
			  $top = count($arr);
			  if($top == true) {
				  $rand = mt_rand( 0, $top - 1 );
				  $padding = ';padding-bottom:';
				  if($resim == 4 || $resim == 9 || $resim ==14 || $resim == 17 )
						$padding .= '50px';
				  elseif($resim == 18)
						$padding .= '80px';
				  else
						$padding .= '20px';
				  $resim = plugins_url(P_URL.'images/'.$resim.'.png');

				  $resim = 'background-image: url('.$resim.');';
				  echo '<div class="anlamli-sozler-textarea" style="color:'.$renk.';font-size:'.$size.'px;'.$resim.$padding.'">'.$arr[$rand].'</div>';
			  }
			}
			echo '</div>';
			echo $after_widget;
		}
	}
}

function anlamli_sozler_styles() {
wp_register_style( 'anlamli-sozler', plugins_url( P_URL.'css/style.css' ) );
wp_enqueue_style( 'anlamli-sozler' );
}
add_action('widgets_init', create_function('', 'return register_widget("anlamli_sozler_widget");'));
if(IS_ADMIN == false ) add_action( 'wp_head', 'anlamli_sozler_styles' );

Burada ise eklenti alanlarının içeriğini okuduk. Başlığı, rengi, ebadı, ve sözleri aldık.

Daha sonra eklenmiş olan sözleri satırlara göre böldük. Hemen ardından boş satırlar varsa-ki olabilirdi- onları temizledik. Tüm sözlerin toplamını aldık ve rastgele bir rakam alarak, o sözü seçtik. İlgili bölümde gösterime aldık.

Oluşturduğumuz  sınıfı çağırdık.

En altta ise style dosyamızı(örnek olsun diye veriyorum) sitenin üst kısmına(head) yerleştirdik(ADMIN SAYFASINDA DEGILSEK).

Kullanımına ait görüntüler;

anlamli_sozler_sidebar

Site görüntüsü

anlamli_sozler_site

Özetlersek;

  1. Giriş bölümünde eklentinin adını, yapımcısını, tanımını vb tanımalrı oluşturduk.
  2. Ardından Sınıfımızı WordPress Widget sınıfına dahil ettik. “class anlamli_sozler_widget extends WP_Widget”
  3. function anlamli_sozler_widget() Fonksiyonu ile eklentimizin adını, tanımını belirledik.
  4. function form($instance) Fonksiyonu ile eklentimizin, sidebardaki giriş alanlarını oluşturduk ve tanımladık.
  5. function update($new_instance, $old_instance) ile eklenti alanlarının güncellenmesini sağladık.
  6. function widget($args, $instance) Fonksiyonumuzda ise sidebar alanına eklenmiş olan eklentimizin sitede gösterimini sağladık. Seçilmiş rengi, resimleri aldık, resim yolunu sistemin belirlediği eklenti klasöründeki images dosyasından çektik. Yine her seferinde rastgele bir söz göstermek için Sözler alanıan girilmeiş sözleri parçaladık, temizledik ve rastgele bir seçim yaparak ekrana yansıttık.
  7. En sonunda ise style dosyamızı yükledik.

İndirmek için Tıklayın.

 

1 Yorum

  1. Yapabilirsiniz

    Textarea ekler, bu örnekteki ihtiyaç olmayacak form alanlarını kaldırırsınız, textarea alanı için ise formatlı giriş belirlersiniz, örneğin aşağıdaki gibi veriler girilir

    Eczane Adı, Tarih
    Eczane Adı, Tarih

    Yukarıdaki biçimde girer sonrada parçalarsınız

    önce “\n” olarak parçalayıp satırları diziye aktarır sonra diziyi sırayla işleyip, “,” virgülleri parçalar ve eczane adıyla, o eczanin nöbet tarihini diziye alır yansıtırsınız…

    Diğer yöntem ise javascript ile tarih ve eczane adı altında inputboxlar oluşturmak ve name değerlerini “eczane[adi][]”, “eczane[tarih][]” olarak belirledikten sonra, bir adet “yeni” butonu koyarak alanları ihtiyaç sayısı kadar arttırmak olur, form alanalrının veritabanına işlenmesi içinde “eczane” değerli POST değişkenini ister üstteki format biçimine uygun biçimde şekillendirip kaydeder, ister tekrar işlenebilir (array biçimli) PHP serialize metoduyla, isterseniz JSON olarak yaparsınız…

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir