Customizer API ile bir kontrol alanı (text alanı, dosya yükleme, radio….) oluşturduğumuzda, bu alan belli ve sabit bir şablonda gelir. Aynı alandan yüz tane de oluştursak hepsi birbirinin aynısı olacaktır. Bu derste, Customizer API kontrol alanlarını dilediğimiz gibi özelleştirebileceğimizi öğreneceğiz. WordPress ile bir Customizer API kontrolü oluştururken, kullandığımız form alanları için özel tasarımlar yapabileceğiz. Örnek olarak, kedimize özel bir text alanı şablonu oluşturup, bu şablonu dilediğimiz zaman kullanabileceğiz.

Bu dersi anlamak için, Customizer API Alanları adlı dersimizi biliyor olmanız iyi olacaktır.

Underscore.js Nedir?

Underscore.js, WordPress temalarında, şablon parçaları oluşturmak için kullanılan bir JavaScript kütüphanesidir. WordPress kurulumu ile birlikte gelir ve gerektiğinde kullanmak için temamıza şu kodu eklememiz yeterlidir:

functions.php

add_action( 'wp_enqueue_scripts', 'jt_scriptini_kullan' );

function jt_scriptini_kullan() {
    wp_enqueue_script( 'wp-util' );
}

Bizim yukarıdaki kodu eklememize gerek kalmayacak çünkü, bahsedeceğimiz Customizer API özelliğini kullanırken bu kütüphane otomatik olarak kullanımda olacaktır.

Underscore.js kütüphanesinin kendine özgü yazım kuralları (syntax) vardır. Bu kurallar şunlardır:

• {{ değişken }} Değişkenin değerini, HTML taglarını temizleyerek getirir ve ekrana basar.
• {{{ değişken }}}  Değişkenin değerini, HTML tagları ile birlikte getirir ve ekrana basar.
• <# JavaScript kodları #> Sayfada, JavaScript kodları için bir bölüm açar. Yani bildiğimiz <script>....</script> kodlarının yerine kullanılır.

Aşağıda, Underscore.js ile hazırlanmış ve temamızın footer.php dosyasında gösterilmek üzere ayarlanmış bir şablon örneği vardır:

functions.php

add_action( 'wp_footer', 'jt_yazi_sablonunu_goster', 25 );

function jt_yazi_sablonunu_goster() { ?>

    <script type="text/html" id="tmpl-jt-post">

        <article class="post">

            <header class="entry-header">
                <h1 class="entry-title">{{ data.post_title }}</h1>
                <span class="entry-author">{{ data.post_author }}</span>
            </header>

            <div class="entry-content">
                {{{ data.post_content }}}
            </div>

        </article>

    </script>
<?php }

Yukarıdaki kodda id="tmpl-jt-post" ifadesindeki kimlik değeri her zaman tmpl- şeklinde başlamalıdır, devamı ise sizin tercihinize bırakılmıştır. Bu id değerinin devamı olan jt-post kısmı, bu şablona ulaşmak için kullanılacaktır: wp.template( 'jt-post' )

PHP Datasını Underscore.js Şablonunda Kullanmak

Yukarıdaki şablon, bir yazıyı sunmak için hazırlanmıştır. Bu şablonu, PHP verileri ile doldurarak kullanmak için şu kodlar kullanılır:

functions.php

add_action( 'wp_footer', 'jt_sablon_icerigi_scripti', 25 );

function jt_sablon_icerigi_scripti() {

    $json = array(
        'post_title'   => 'This is awesome!',
        'post_author'  => 'Justin Tadlock',
        'post_content' => '<p>This is the content of an example post.</p>'
    ); ?>

    <script type="text/javascript">
        jQuery( document ).ready( function() {

            var post_template = wp.template( 'jt-post' );

            jQuery( '.site-content' ).append( post_template( <?php echo wp_json_encode( $json ); ?> ) );
        } );
    </script>
<?php }

JavaScript Datasını Underscore.js Şablonunda Kullanmak

Yukarıda hazırladığımız Undercsore.js şablonunda, JavaScript dataları da kullanabiliriz. Aşağıda bunun örneği verilmiştir:

functions.php

add_action( 'wp_footer', 'jt_print_scripts', 25 );

function jt_print_scripts() { ?>

    <script type="text/javascript">
        jQuery( document ).ready( function() {

            var post_template = wp.template( 'jt-post' );

            var data = {
                post_title   : 'This is awesome!',
                post_author  : 'Justin Tadlock',
                post_content : '<p>This is the content of an example post.</p>'
            }

            jQuery( '.site-content' ).append( post_template( data ) );
        } );
    </script>
<?php }

Özel Bir Customizer API Kotrol Alanı Şablonu Oluşturma

Underscore.js kütüphanesi yardımı ile kendimize özel bir select alanı şablonu oluşturacağız. Bunu yapmak için şu adımları takip etmemiz yeterli olacaktır:

I. Şablon Kodlarını İçeren Bir PHP Sınıfı Oluşturuyoruz:

Kendimize özel bir kontrol alanı şablonu oluşturmak için, 'WP_Customize_Control' sınıfını uzatmamız gerekiyor. Aşağıda, 'Ozel_Select_Kontrolu' adında bir sınıf yardımı ile özel bir select alanı şablonu oluşturuyoruz. Ben bu iş için temamızın ana dizininde inc adında bir klasör oluşturmayı ve bu klasör içinde de ozel-customizer-sablonu.php adında bir dosya kullanmayı tercih ettim:

inc/ozel-customizer-sablonu.php

<?php
class Ozel_Select_Kontrolu extends WP_Customize_Control {

	/**
	 * Kontrol alanının kimliği.
	 */
	public $type = 'select-group';

	/**
	 * JSON formatında ve JavaScript diline göndermek için kontrol parametreleri
	 * Bu parametreler, Kontrol alanı oluştururken bizim girdiğimiz PHP dilindeki parametrelerdir
	 */
	public function to_json() {
		parent::to_json();

		$choices = $group = array();

		foreach ( $this->choices as $choice => $maybe_group ) {

			if ( is_array( $maybe_group ) )
				$group[ $choice ] = $maybe_group;
			else
				$choices[ $choice ] = $maybe_group;
		}

		$this->json['choices'] = $choices;
		$this->json['group']   = $group;
		$this->json['link']    = $this->get_link();
		$this->json['value']   = $this->value();
		$this->json['id']      = $this->id;
	}

	/**
	 * Bu fonksiyon boş olarak bırakılmalıdır. Çünkü burayı JavaScript şablon için kullanacak.
	 *
	 */
	protected function render_content() {}

	/**
	 * Kontrol Alanını Oluşturuken Girdiğimiz Verileri Kullanarak Oluşturulan Underscore JS şablonu.
	 *
	 */
	public function content_template() { ?>

		<# if ( ! data.choices && ! data.group ) {
			return;
		} #>

		<label>

			<# if ( data.label ) { #>
				<span class="customize-control-title">{{ data.label }}</span>
			<# } #>

			<# if ( data.description ) { #>
				<span class="description customize-control-description">{{{ data.description }}}</span>
			<# } #>

			<select {{{ data.link }}}>

				<# _.each( data.choices, function( label, choice ) { #>

					<option value="{{ choice }}" <# if ( choice === data.value ) { #> selected="selected" <# } #>>{{ label }}</option>

				<# } ) #>

				<# _.each( data.group, function( group ) { #>

					<optgroup label="{{ group.label }}">

						<# _.each( group.choices, function( label, choice ) { #>

							<option value="{{ choice }}" <# if ( choice === data.value ) { #> selected="selected" <# } #>>{{ label }}</option>

						<# } ) #>

					</optgroup>
				<# } ) #>
			</select>
		</label>
	<?php }
}

II. Oluşturduğumuz Şablon Dosyasını ve Şablon Sınıfını Temamıza Tanıtıyoruz:

Underscore.js ile oluşturduğumuz şablon parçası dosyasını ve sınıfını temamıza tanıtmak için 'customize_register' kancasını kullanıyoruz.

functions.php

// Undercore.js Özel Kontrol Şablonu Dosyası ve Sınıfı
add_action( 'customize_register', 'jt_sablonu_kaydet' );

function jt_sablonu_kaydet( $wp_customize ) {

	// Şablon dosyasını temamıza tanıtıyoruz.
	require_once( trailingslashit( get_template_directory() ) . 'inc/ozel-customizer-sablonu.php' );

	// Şablon için oluşturduğumuz PHP sınıfını temamıza tanıtıyoruz.
	$wp_customize->register_control_type( 'Ozel_Select_Kontrolu' );
}

III. Kontrol Alanı Şablonunu Temada Kullanıyoruz

Bu dersin konusunu oluşturan kodlar aslında burada bitiyor. Budan sonrası, oluşturduğumuz bu kontrolü temamızda kullanmaktır. Aşağıda, bu kontrol alanı şablonunu temada nasıl kullanacağımızı gösteren örnek bir kod verilmiştir. İşin bu kısmı, daha önce Customizer API Alanları adlı dersimizde anlatıldığı için detaya girmeden doğrudan kodu veriyoruz:

function ilktemam_customizer_alanlari( $wp_customize ) {

	// PANEL: "Tema Ayarları" adında bir panel ekler
	$wp_customize->add_panel(
		'tema-ayarlari', // Panelin kimliği
		array(
			'title' => __( 'Tema Ayarları', 'textdomain' ),
			'description' => __( '<p>Temanızın ayarlarını yapıyorsunuz.</p>', 'textdomain'),
			'priority' => 65,
		)
	);

	// BÖLÜM: "Tema Ayarları" Paneline "Blog Seçenekleri" bölümü ekler
	$wp_customize->add_section( 'blog-secenekleri', 
		array(
			'title'       => __( 'Blog Seçenekleri', 'textdomain' ),
			'priority'    => 65,
			'yapabilirlikte'  => 'edit_theme_options',
			'description' => __('Temanızın blog sayfası ile ilgili bir takım ayarlar yapılır.', 'textdomain'), // Bölümüm açıklaması
			'panel' => 'tema-ayarlari',
		) 
	);

        // AYAR: Bir ayar oluşturyoruz 
	$wp_customize->add_setting( 'text_deneme', 
		array(
			'default' => 'sagda',
			'sanitize_callback' => '',
		) 
	);
	
	// KONTROL: "select" tipinde bir kontrol alanı oluşturuyoruz.
	$wp_customize->add_control( new Hybrid_Customize_Control_Select_Group( $wp_customize,
		'text_deneme',
		array(
			'label'      => __( 'Sidebar Konumu', 'textdomain' ),
			'description'=> __( 'Sidebar konumunu ayarlar.', 'textdomain' ),
			'settings'   => 'text_deneme',
			'choices' => array(
					'sagda' => __( 'Sağda', 'textdomain' ),
					'solda' => __( 'Solda', 'textdomain' ),
					'kaldir' => __( 'Kaldır', 'textdomain' ),
					),
			'priority'   => 1,
			'section'    => 'blog-secenekleri',
		     ) 
		) 
	);
       
}
add_action( 'customize_register', 'ilktemam_customizer_alanlari' );