29 Ağustos 2009

Eklentilere Çoklu Dil Desteği Ekleme - 1

WordPress Yorum Ekle

Yazdığınız eklentiler ya da tasarladığınız temaların daha çok kişiye ulaşabilmesini sağlamak için onların kolaylıkla başka dillere çevrilmesine imkan vermeniz, artık şart oldu. WordPress dil desteği için GNU Gettext Portable Object Base Translation (POT) denilen bir sistem kullanır. Bu sistemde çeşitli dillere çevrilecek olan metinler .pot uzantılı dosyalara aktarılır. Bu dosyalar derlenerek kullanılır. Kullandığınız eklenti ve temalarda da bu tür dosyalarla karşılaşmışsınızdır (.pot, .po, .mo uzantılı olabilir). Daha önceden eklentileri nasıl Türkçeleştireceğinizi yazmıştım. Bu yazımda da Türkçe olarak yazdığınız bir eklentiye nasıl çoklu dil desteği ekleyebileceğinizi anlatacağım. Böylece eklentinizi WordPress eklenti dizininde yayımlayabilir, daha çok kişinin kullanmasına olanak sağlayabilirsiniz. Merak etmeyin, eklentiniz beğenildiğinde çeşitli ülkelerden kişiler çevirisini yapacaklar ve size göndereceklerdir. Haydi işe başlayalım.

Türkçe Eklentimizi Yazıyoruz

Konuya anlatmak için basit bir Türkçe eklenti yazalım. Eklentimiz, yan menüde kullanıcının belirlediği bir resmi, alt yazısıyla beraber gösteren bir bileşen olsun. Daha önceden WordPress 2.8 için bileşen nasıl yazılır anlatmıştım. Aşağıdaki bileşen kodlarını anlayabilmeniz için lütfen o yazımı dikkatlice okuyunuz.
Fazla uzatmadan, bileşenin Türkçe olarak oluşturulmuş kodlarını aşağıya ekliyorum.

  1. <?php
  2. /*
  3. Plugin Name: Resim Göster
  4. Plugin URI: http://www.yakupgovler.com/?p=1039
  5. Description: Yan menünüzde resim gösterir.
  6. Version: 1.0
  7. Author: Yakup GÖVLER
  8. Author URI: http://www.yakupgovler.com
  9. */
  10.  
  11. class yg_show_image extends WP_Widget {
  12.     function yg_show_image() {
  13.      //Load Language
  14.      //load_plugin_textdomain( 'yg-show-img', false, dirname(plugin_basename(__FILE__)) .  '/lang' );
  15.      
  16.      $widget_ops = array('description' => 'Yan menünüzde resim gösterir.');
  17.      
  18.      //Create widget
  19.      $this->WP_Widget('ygshowimage', 'Resim Göster', $widget_ops);
  20.     }
  21.  
  22.   function widget($args, $instance) {
  23.             extract($args, EXTR_SKIP);
  24.             echo $before_widget;
  25.             $title = empty($instance['title']) ? 'Bir Resim' : apply_filters('widget_title', $instance['title']);
  26.             //Set a default title if not
  27.             $imgurl = esc_url($instance['imgurl']);
  28.           $imgtext = esc_attr($instance['imgtext']);
  29.  
  30.             if ( !empty( $title ) ) {
  31.             echo $before_title . $title . $after_title;
  32.             };
  33.  
  34.           echo '<div class="yg_show_image">';
  35.             echo '<img src="' . $imgurl . '" title="'.$imgtext.'" alt="'.$imgtext.'" /><br />';
  36.             echo '<em>'.$imgtext.'</em></div>';
  37.  
  38.             echo $after_widget;
  39.   } //end of widget
  40.    
  41.     //Update widget options
  42.   function update($new_instance, $old_instance) {
  43.  
  44.         $instance = $old_instance;
  45.         //get old variables
  46.         $instance['title'] = esc_attr($new_instance['title']);
  47.         $instance['imgurl'] = esc_url($new_instance['imgurl']);
  48.         $instance['imgtext'] = esc_attr($new_instance['imgtext']);
  49.         return $instance;
  50.   } //end of update
  51.    
  52.     //Widget options form
  53.   function form($instance) {
  54.         $instance = wp_parse_args( (array) $instance, array( 'title' => 'Bir Resim', 'imgurl'=>'', 'imgtext'=>'' ) );
  55.        
  56.         $title = esc_attr($instance['title']);
  57.         $imgurl = esc_url($instance['imgurl']);
  58.     $imgtext = esc_attr($instance['imgtext']);
  59.         ?>
  60.         <p>
  61.            <label for="<?php echo $this->get_field_id('title'); ?>">Başlık:  
  62.               <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; ?>" />
  63.            </label>
  64.         </p>
  65.       <p>
  66.           <label for="<?php echo $this->get_field_id('imgurl'); ?>">Resim Adresi:
  67.            <input class="widefat" id="<?php echo $this->get_field_id('imgurl'); ?>" name="<?php echo $this->get_field_name('imgurl'); ?>" type="text" value="<?php echo $imgurl; ?>" /><br />
  68.           </label>
  69.       </p> 
  70.       <p>
  71.           <label for="<?php echo $this->get_field_id('imgtext'); ?>">Resim Yazısı:  
  72.            <input class="widefat" id="<?php echo $this->get_field_id('imgtext'); ?>" name="<?php echo $this->get_field_name('imgtext'); ?>" type="text" value="<?php echo $imgtext; ?>" /><br />
  73.           </label>
  74.       </p>
  75.    <?php
  76.   } //end of form
  77. }
  78.  
  79. add_action( 'widgets_init', create_function('', 'return register_widget("yg_show_image");') );
  80. //Register Widget
  81.  
  82. ?>

Bileşenin Türkçe olarak yazılmış halini indirmek için tıklayınız.
Bileşeni sitenize kurup, etkinleştirdiğinizde, bileşen Yönetim Paneli/Görünüm/Bileşenler bölümünde aşağıdaki gibi görünecektir.

Gördüğünüz gibi bileşene dair her şey Türkçe olarak çıktı. Şimdi Türkçe olan kısımları öyle bir değiştireceğiz ki kolaylıkla dil dosyası eklenebilir hale gelecek.

Load_plugin_textdomain(), _e() ve __() Fonksiyonları

Eklentilere çoklu dil eklemek için bu üç fonksiyon kullanılır. Fonksiyonları kullanımları ve amaçları şöyle:
Load_plugin_textdomain() Fonksiyonu: Bu fonksiyon eklentinize ait dil dosyalarından sitede yüklü olan WordPress diline uygun dil dosyasını yükler. Bunu yaparken, wp-config.php dosyasında bulunan define ('WPLANG', 'tr_TR'); satırında yazılı olan dil kodunu (tr_TR bölümü) kullanır.
Kullanımı: load_plugin_textdomain( 'yg-show-img', false, dirname( plugin_basename(__FILE__) ) . '/lang' );
'yg-show-img' : Dil dosyamızın kök adı, buna WordPress domain diyor.. Oluşturacağımız .po uzantılı dosyanın adı yg-show-img.po olacak. Bunu Türkçeye çevirdiğimizde ise yg-show-img-tr_TR.po olarak farklı kaydedeceğiz.
false: Kesin dosya adresi vereceğimizi bildirir.
dirname( plugin_basename(__FILE__) ): Eklenti dosyamızın bulunduğu klasör adresini verir. Biz bu adresin sonuna dil dosyalarımızı içerisine koyacağımız 'lang' klasörünün adını da ekleyerek, fonksiyona dil dosyasını nerede bulacağını söylüyoruz.
Bu fonksiyonu eklentimizin işe başladığı ilk yere ekleyeceğiz yani her zaman ilk çağırılan fonksiyona ya da eklenti dosyamızın en başına ekliyoruz.
_e() Fonksiyonu: Bu fonksiyon kendisine verilen domain'e ait dil dosyasından bir satırı yazdırmanızı sağlar.
Kullanımı: _e('Image URL', 'yg-show-img');
'Image URL': Dil dosyasındaki Image URL satırını almasını söyler. load_plugin_textdomain fonksiyonun yüklediği dil dosyasına göre ekranda görünen ifade değişir. Örneğin bu kod Türkçe dil dosyasını lang klasörüne koyduğumuzda 'Resmin Adresi' ifadesini ekrana yazacaktır. Dikkat etmeniz gereken bu ifadenin başına 'echo' komutunu koymadık.
'yg-show-img': Dil dosyasının domain adı yani kök adı. Bu load_plugin_textdomain fonksiyonuna girdiğim ad ile aynı olmalıdır. Aksi halde dil değişimi görülmez. Aynı durum __() fonksiyonu için de geçerlidir.
__() Fonksiyonu: Dil dosyasından ilgili satırı alıp, değer olarak döndürür. Yani _e() fonksiyonu gibi ekrana yazdırmaz. Bu daha çok bir değişkene dile bağlı bir ifadeyi aktarmak için kullanılır. Örneğin bileşenimize bir başlık ya da açıklama belirlerken bu fonksiyonu kullanırız.
Kullanımı: 'title' => __('An Image', 'yg-show-img');
İfadesi dil dosyasından 'An Image' satırını değer olarak döndürür ve 'title' dizi değişken elemanına aktarır. Türkçe dil dosyası olduğunda bu değer 'Bir Resim' olarak aktarılacaktır. 'yg-show-img' ise dil dosyamızın domain'i.

Eklentimizi Çoklu Dil Desteğine Hazırlıyoruz

Bu kadar ön bilgiden sonra artık eklentimizi çoklu dil desteği ekleyebileceğimiz hale getireceğiz. Bunun için yapmamız gereken, eklentimizin her zaman çalışan fonksiyonuna load_plugin_textdomain fonksiyonunu eklemek, Türkçe ifadeleri, ekrana yazdırılması gerekenleri _e() fonksiyonu ile değişken olarak dönmesi gerekenleri __() fonksiyonu ile İngilizce olarak değiştirmek.
Aşağıdaki kodlar bu değişimin ve ekleme işleminin yapılmış halidir. Yukarıdaki kod ile aşağıdakini karşılaştırarak, aradaki farkları görebilirsiniz.

  1. <?php
  2. /*
  3. Plugin Name: Show Image
  4. Plugin URI: http://www.yakupgovler.com/?p=981
  5. Description: Widget displays an image.
  6. Version: 1.0
  7. Author: Yakup GÖVLER
  8. Author URI: http://www.yakupgovler.com
  9. */
  10.  
  11. class yg_show_image extends WP_Widget {
  12.     function yg_show_image() {
  13.      //Load Language
  14.      load_plugin_textdomain( 'yg-show-img', false, dirname(plugin_basename(__FILE__)) .  '/lang' );
  15.      
  16.      $widget_ops = array('description' => __('Show an image on your sidebar.', 'yg-show-img') );
  17.      
  18.      //Create widget
  19.      $this->WP_Widget('ygshowimage', __('Show Image', 'yg-show-img'), $widget_ops);
  20.     }
  21.  
  22.   function widget($args, $instance) {
  23.             extract($args, EXTR_SKIP);
  24.             echo $before_widget;
  25.             $title = empty($instance['title']) ? __('An Image', 'yg-show-img') : apply_filters('widget_title', $instance['title']);
  26.             //Set a default title if not
  27.             $imgurl = esc_url($instance['imgurl']);
  28.           $imgtext = esc_attr($instance['imgtext']);
  29.  
  30.             if ( !empty( $title ) ) {
  31.             echo $before_title . $title . $after_title;
  32.             };
  33.  
  34.           echo '<div class="yg_show_image">';
  35.             echo '<img src="' . $imgurl . '" title="'.$imgtext.'" alt="'.$imgtext.'" /><br />';
  36.             echo '<em>'.$imgtext.'</em></div>';
  37.  
  38.             echo $after_widget;
  39.   } //end of widget
  40.    
  41.     //Update widget options
  42.   function update($new_instance, $old_instance) {
  43.  
  44.         $instance = $old_instance;
  45.         //get old variables
  46.         $instance['title'] = esc_attr($new_instance['title']);
  47.         $instance['imgurl'] = esc_url($new_instance['imgurl']);
  48.         $instance['imgtext'] = esc_attr($new_instance['imgtext']);
  49.         return $instance;
  50.   } //end of update
  51.    
  52.     //Widget options form
  53.   function form($instance) {
  54.         $instance = wp_parse_args( (array) $instance, array( 'title' => __('An Image','yg-show-img'), 'imgurl'=>'', 'imgtext'=>'' ) );
  55.        
  56.         $title = esc_attr($instance['title']);
  57.         $imgurl = esc_url($instance['imgurl']);
  58.     $imgtext = esc_attr($instance['imgtext']);
  59.         ?>
  60.         <p>
  61.            <label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:','yg-show-img');?>
  62.               <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; ?>" />
  63.            </label>
  64.         </p>
  65.       <p>
  66.           <label for="<?php echo $this->get_field_id('imgurl'); ?>"><?php _e('Image URL:', 'yg-show-img');?>
  67.            <input class="widefat" id="<?php echo $this->get_field_id('imgurl'); ?>" name="<?php echo $this->get_field_name('imgurl'); ?>" type="text" value="<?php echo $imgurl; ?>" /><br />
  68.           </label>
  69.       </p> 
  70.       <p>
  71.           <label for="<?php echo $this->get_field_id('imgtext'); ?>"><?php _e('Image Text:', 'yg-show-img');?>
  72.            <input class="widefat" id="<?php echo $this->get_field_id('imgtext'); ?>" name="<?php echo $this->get_field_name('imgtext'); ?>" type="text" value="<?php echo $imgtext; ?>" /><br />
  73.           </label>
  74.       </p>
  75.    <?php
  76.   } //end of form
  77. }
  78.  
  79. add_action( 'widgets_init', create_function('', 'return register_widget("yg_show_image");') );
  80. //Register Widget
  81.  
  82. ?>

Bileşenimizi bu haliyle indirmek için tıklayınız.
Bileşenimiz Türkçe WordPress kurulu sitemizde aşağıdaki gibi görülecek.

Eklentimiz için bir dil dosyası oluşturmadığımız için _e() ve __() fonksiyonları içerisine yazdığımız cümleler aynen kullanılırlar. Eklentimiz artık dil dosyası oluşturmaya hazır. Eklentimiz için dil dosyası oluşturmayı öğrenmek için Eklentilere Çoklu Dil Desteği Ekleme - 2 yazımdan devam ediniz.


Bu yazının kısa bağlantısı http://www.yakupgovler.com/?p=1039.

Yazılarımı RSS aboneliği ile takip edebilir, yeni yazılarıma kolaylıkla ulaşabilirsiniz. Bunun için ise RSS adresimi kullanabilirsiniz.


“Eklentilere Çoklu Dil Desteği Ekleme – 1” yazısı için 1 Yorum

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

  1. Eklentilere Çoklu Dil Desteği Ekleme - 2 dedi ki:

    [...] Önceki bölümde örnek bir eklenti yazmış ve eklentiyi dil dosyası eklemeye hazır hale getirmiştik. Bu yazımda ise eklentimize nasıl dil dosyası ekleyebileceğimizi anlatacağım. [...]