WordPress eklentiniz için yönetici arayüzü oluşturmak

Image: @qimono, 2016, Pixabay

WordPress’in filtre ve eylem kancalarına (filter & action hooks) takılarak sihirli işler yapan eklentiler yazmak oldukça keyifli bir iştir. Fakat bir eklenti için yönetici arayüzünü kodlamak, eklentinin kendini kodlamaktan daha sıkıcıdır. Bu yazıda, geçmişte yazdığım ve bazı eklentiler için şablon olarak kullandığım Toolbar Login Button eklentisinden kod parçacıkları sunacağım.

Bunlar yalnızca örnek kod parçacıklarıdır, ilgilenirseniz eklentinin tamamını inceleyebilirsiniz. Bu kod parçacıkları ve eklentinin kendisi GPLv2 lisansı ile paylaşılmaktadır.

Öncelikle, yönetici arayüzü eklentinin asıl PHP dosyasından ayrılmalıdır. Yönetici arayüzünü eklenti klasörünüz altında admin/settings.php şeklinde bir dosyaya kaydedebilirsiniz.

Bu örnekte, üç adet WordPress eylemine kanca atacağız.

...
// Create options menu
add_action( 'admin_menu', array( __CLASS__, 'create_plugin_options_menu' ) );

// Register settings
add_action( 'admin_init', array( __CLASS__, 'register_plugin_settings' ) );

// Add admin css
add_action( 'admin_enqueue_scripts', array( __CLASS__, 'custom_admin_style' ) );
...

Buradaki  ‘admin_menu’ eylemine, seçenekler menüsünü oluşturmak için kanca (hook) atıyoruz. Bu kısım oldukça basit. add_options_page() WordPress fonksiyonu, sadece menüyü oluşturuyor. (Örnekteki eklentide statik fonksiyonlar tanımlanıyor. Kendi eklentinizde statik veya dinamik fonksiyonlar kullanabilir, hatta eklentinizi sınıf (class) kullanmadan da yazabilirsiniz.)

/*
* Plugin options menu
*/
static function create_plugin_options_menu() {
    $admin_page = add_options_page( 'Toolbar Login Button', 'Toolbar Login Button', 'manage_options', self::OPTIONS_SLUG, array( __CLASS__, 'display_plugin_options' ) );
    // Add a help tab when this plugin's options page gets loaded
    add_action( 'load-' . $admin_page, array( __CLASS__, 'add_help_tab' ) );
}// function

Yukarıda ayrıca ‘display_plugin_options’ şeklinde bahsedilen bir geri çağrılabilir fonksiyon (callback) belirtilmiştir. Bu fonksiyon eklentinin yönetici arayüzünü (html) çıktı olarak gönderir. Bu noktada, add_settings_field() ve add_settings_section() gibi fonksiyonları kullanmaktansa, işleri basitleştirmek adına örnekteki gibi direkt uyumlu html çıktıyı gönderebilirsiniz. Ayrıntılı bilgi WordPress Settings API kısmında verilmiştir.

 

/*
* Diplay plugin options page
*/
static function display_plugin_options() {
  if ( !current_user_can( 'manage_options' ) )  {
        wp_die( __( 'You do not have sufficient permissions to access this page.' ) );
  }

…

…

  <form method="post" action="options.php">
    <?php settings_fields( 'toolbar_login_button_settings' ); ?>
    <!--main content-->
    <div id="post-body-content">
      <div class="meta-box-sortables ui-sortable">
        <!--settings group-->
        <div class="postbox">
          <h2 class="hndle"><span><?php esc_html_e( 'Logged in users', 'toolbar-login-button' ); ?></span></h2>
          <div class="inside">
            <table class="form-table">
              <tr valign="top">
                <th scope="row"><?php esc_html_e( 'Show front end toolbar', 'toolbar-login-button' ); ?></th>
                <td>
                  <select name="tlb_show_logged_in" title="">

                    <option title="" value="1"<?php $tlb_show_logged_in = tlb_settings::get_option( 'tlb_show_logged_in' ); selected( '1', $tlb_show_logged_in ); ?>><?php esc_html_e( 'Show', 'toolbar-login-button' ); ?><?php self::e_default( 'tlb_show_logged_in', '1' ); ?></option>

                    <option title="" value="0"<?php selected( '0', $tlb_show_logged_in ); ?>><?php esc_html_e( 'Hide', 'toolbar-login-button' ); ?><?php self::e_default( 'tlb_show_logged_in', '0' ); ?></option>

                  </select>
                </td>
              </tr>
            </table>
          </div><!--.inside-->
        </div><!--.postbox-->

…

…

Buradaki html çıktılar ile aşağıdaki register_setting() fonksiyonunda aynı isimlerin kullanıldığını görebilirsiniz. Örneğin, <select name=”tlb_show_logged_in” title=””>

Sıradaki hamle  ‘admin_init’ WordPress eylemine takılmak, ki bu register_setting() WordPress fonksiyonunu çağırmak ve eklentiye özgü seçenekleri tanımlamak için uygun bir noktadır. ‘tlb_show_logged_in’ isimli seçenek için ‘intval’ (PHP’deki intval) temizlik fonksiyonu olarak belirtilmiş ve veritabanına sadece tamsayı yazılmasını sağlıyor.  Temizlik fonksiyonu belirtilmeyen ‘tlb_remember_user_role’ ve ‘tlb_redirect_after_login’ isimli seçeneklerde veritabanına kartakterlerden oluşan herhangi bir dizi (string) kayıt edilebilir. Son seçenek ‘tlb_cookie_expire’ için ise kayıt edilebilecek minimum ve maksimum değerleri belirleyecek bir anonim temizlik fonksiyonu (closure / anonymous / lambda function) tanımlanmıştır.

/*
* Register plugin settings
*/
static function register_plugin_settings() {
    // Register plugin settings
    register_setting( 'toolbar_login_button_settings', 'tlb_show_logged_in', 'intval' );
    register_setting( 'toolbar_login_button_settings', 'tlb_show_logged_out', 'intval' );
    register_setting( 'toolbar_login_button_settings', 'tlb_remember_user_role' );
    register_setting( 'toolbar_login_button_settings', 'tlb_redirect_after_login' );
    register_setting( 'toolbar_login_button_settings', 'tlb_cookie_expire', function( $value ) {
        return ( filter_var( $value, FILTER_VALIDATE_INT, array( 'options' => array( 'min_range' => 2592000, 'max_range' => 31536000*10 ) ) ) ) ? $value : self::$default_options['tlb_cookie_expire'];
    } );
    register_setting( 'toolbar_login_button_unistall', 'tlb_uninstall_delete', 'intval' );
}// function

‘admin_enqueue_scripts’ isimli son eylem kancası ise sadece yönetici arayüzü (GUI) için gerekli javascript ve css dosyalarını dahil etmek için kullanılmaktadır. Bu WordPress eylemi çağrıldığında, wp_enqueue_style() fonksiyonu ile eklentimizin arka yüzünde görünecek bir css dosyasını, wp_enqueue_script() ile de javascript dosyasını dahil edebiliriz.

/*
* Custom admin style
*/
static function custom_admin_style( $hook ) {
    // Add custom css only into the plugin's options page
    if( $hook == 'settings_page_' . self::OPTIONS_SLUG ) {
        wp_enqueue_style( 'toolbar_login_button_admin_css', plugins_url( 'admin/css/admin.css', dirname( __FILE__ ) ) );
    }
}// function

Kaynak: https://volkan.xyz

 

Bu yazıyı yalnızca kaynak göstererek ve önceden belirtilen Kullanım Koşulları altında paylaşabilirsiniz.

 

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir