WordPress Tema Özelleştirici için Özel Kontroller Nasıl Oluşturulur
Yayınlanan: 2015-06-17WordPress Tema Özelleştirici ("Customizer" olarak da anılır) özelliği, geliştiricilere temalarının görünümünü özelleştirme ve hatta temada yapılan değişiklikleri gerçek zamanlı olarak önizlemelerine yardımcı olma yeteneği verir. Müşterileri bir web sitesine çekme yarışının yoğunlaştığı günümüz çağında, genellikle web sitesi tasarımınızı özelleştirme ihtiyacı hissedeceksiniz. Ve tema özelleştirici sayesinde, WordPress tasarımınızda yapılan değişiklikleri canlı olarak önizleyerek değerli zamanınızdan çok tasarruf edebilirsiniz.
WordPress tema özelleştirici, Tema Özelleştirme API'sinin (WordPress sürüm 3.4'te tanıtıldı) bir parçası olarak tanıtıldı. Tema ayarlarınızda değişiklik yapmak istiyorsanız, temayla birlikte gelen özel denetimleri kullanmanız gerekir. bir onay kutusu, metin alanı, radyo ve diğerleri gibi özelleştirici. Peki ya WordPress temanıza kendi özel kontrollerinizi eklemek isterseniz?
Spesifik ihtiyaçlarınızı karşılamak için özel olarak hazırlanmış kontrolleri nasıl oluşturabileceğinizi ve ekleyebileceğinizi anlamanıza yardımcı olmak için, temamızın alt bilgisinde birkaç değişiklik yapmak için üç özel kontrol oluşturmayı göstereceğiz. Ancak, işleme başlamak için önce WP_Customizer_Control sınıfına aşina olmanız gerekir.
“WP_Customizer_Control” Sınıfı Hakkında Bilgi Edinme
Özel bir kontrol oluşturmak için yeni bir sınıf oluşturmanız ve onu WP_Customizer_Control sınıfını kullanarak genişletmeniz gerekir. Bu sınıf, WordPress site teması özelleştirme ekranınıza kendi özel kontrolünüzü eklemek için “$wp_customize->add_control()” yöntemini kullanır. Ayrıca, bu yönteme erişmek için eylem kancasında bulunan $wp_customize nesnesini kullanmanız gerekir: custom_register.
Tema bölümünüze ('customize_register' eylem kancasında) mevcut bir özel denetimi nasıl ekleyebileceğinizi gösteren bir örneği aşağıdaki gibi ele alalım:
$wp_customize->add_control( new WP_Customize_Header_Image_ Control( $wp_customize, 'header_image', array( 'label' => __( 'Header image', 'mynewtheme' ), 'section' => 'header_image_settings', 'settings' => 'header_image_position', ) ) );$wp_customize->add_control( new WP_Customize_Header_Image_ Control( $wp_customize, 'header_image', array( 'label' => __( 'Header image', 'mynewtheme' ), 'section' => 'header_image_settings', 'settings' => 'header_image_position', ) ) );
Yukarıdaki örnekte, kullanıcılara yeni bir başlık resmi seçme olanağı verecek bir kontrol oluşturuyoruz.
Gösteren Örnekler: Daha Fazla Özel Kontrol Nasıl Oluşturulur?
Bu bölüm üç farklı adıma bölünmüştür; burada her adım, tema özelleştiriciniz için metin alanı için özel bir kontrol oluşturacak kodu içerir. Yeni metin alanı kontrolleri aracılığıyla altbilgide değişiklik yapmak için kodu WordPress temasının footer.php dosyasına ekleyeceğiz.
Adım 1: Basit Metin Alanı Kontrolü Oluşturma
Yukarıda tartıştığımız gibi, yeni bir özel kontrol oluşturmak için WP_Customize_Control sınıfını genişletmek için kullanılacak bir sınıf tanımlamamız gerekiyor. Esasen bu sınıf, tema özelleştirme ekranına bir giriş denetimi (yani özel denetim) eklemek için WordPress Tema Özelleştirme API'si ile birlikte kullanılır. Bu görevi uygulamak için koda bakalım:
/*Customizer Code HERE*/ add_action('customize_ register', 'theme_footer_customizer'); function theme_footer_customizer($wp_ customize){ //adding section in wordpress customizer $wp_customize->add_section(' footer_settings_section', array( 'title' => 'Footer Text Section' )); //adding setting for footer text area $wp_customize->add_setting(' text_setting', array( 'default' => 'Default Text For Footer Section', )); $wp_customize->add_control(' text_setting', array( 'label' => 'Footer Text Here', 'section' => 'footer_settings_section', 'type' => 'textarea', ));/*Customizer Code HERE*/ add_action('customize_ register', 'theme_footer_customizer'); function theme_footer_customizer($wp_ customize){ //adding section in wordpress customizer $wp_customize->add_section(' footer_settings_section', array( 'title' => 'Footer Text Section' )); //adding setting for footer text area $wp_customize->add_setting(' text_setting', array( 'default' => 'Default Text For Footer Section', )); $wp_customize->add_control(' text_setting', array( 'label' => 'Footer Text Here', 'section' => 'footer_settings_section', 'type' => 'textarea', ));
Bu kodda, client_register eylem kancası, WordPress'e şu adla oluşturduğumuz özel işlevi anlatmak için kullanılır: theme_footer_customizer. Bildiğiniz gibi, WP_Customize_Manager sınıfı WordPress Tema Özelleştiriciyi kontrol etmeye yardımcı olur ve bu nedenle özel kontrol bu sınıfın bir parçası haline gelir. Ancak, denetiminize erişmek için, custom_register kancasının bir örneği olan "wp_customize" nesnesini kullanmanız gerekir.
Bizim durumumuzda wp_customize nesnesi, metin alanına dahil edilecek yeni bir altbilgi bölümü tanımlamak için kullanılır. Böylece, altbilgi bölümüne “metin alanı” ne yazarsanız yazın, aşağıdaki ekran görüntüsünde gösterildiği gibi temanızın altbilgisinde görüntülenecektir:
Bu ekran görüntüsünde temanıza yeni bir “Alt Bilgi Metni bölümü” eklendiğini görebilirsiniz. Bu bölümde yazılan metin, temanızın alt bilgisinde görüntülenecektir.
2. Adım: Arka Plan Rengini Değiştirmek için Özel Kontrol Ekleme
Artık bir metin alanı kontrolü oluşturduğumuza göre, ona birçok farklı özel kontrol ekleyebilirsiniz. Bu örnekte, yeni Altbilgi metin bölümümüze altbilginin arka plan rengini değiştirmeye yardımcı olacak özel bir denetim ekleyeceğiz. Bunu yapmak için temanızın footer.php dosyasına aşağıdaki kod parçasını eklemeniz yeterlidir:
//adding setting for background $wp_customize->add_setting(' background_color', array( 'default' => '#ffffff', ) ); $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'background_color', array( 'label' => 'Footer Color Setting', 'section' => 'footer_settings_section', 'settings' => 'background_color', )));//adding setting for background $wp_customize->add_setting(' background_color', array( 'default' => '#ffffff', ) ); $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'background_color', array( 'label' => 'Footer Color Setting', 'section' => 'footer_settings_section', 'settings' => 'background_color', )));
Yukarıdaki ekran görüntüsünde de görebileceğiniz gibi “Footer Color Setting”den uygun bir renk seçilerek altbilginin arka plan rengi griye dönmüştür.
3. Adım: Logo Eklemek İçin Özel Kontrol Ekleme
Altbilgi metin bölümüne eklediğimiz bir diğer kontrol ise “Alt Bilgi Logosu”. Adından da anlaşılacağı gibi, 'Altbilgi Logosu' denetimi, altbilgiye bir logo eklemeye yardımcı olacaktır. Bu kontrolü eklemek için aşağıdaki kod parçacığını footer.php dosyasına eklemeniz gerekir:
//adding setting for footer logo $wp_customize->add_setting(' footer_logo'); $wp_customize->add_control(new WP_Customize_Upload_Control($ wp_customize,'footer_logo', array( 'label' => __('Footer Logo', 'mytheme'), 'section' => 'footer_settings_section', 'settings' => 'footer_logo', ))); }//adding setting for footer logo $wp_customize->add_setting(' footer_logo'); $wp_customize->add_control(new WP_Customize_Upload_Control($ wp_customize,'footer_logo', array( 'label' => __('Footer Logo', 'mytheme'), 'section' => 'footer_settings_section', 'settings' => 'footer_logo', ))); }
Toplayalım!
Özel kontroller oluşturma sürecini biraz zaman alıcı bulabilirsiniz. Ancak, web sitenizin tema özelleştirme ekranına ne kadar iyi kontroller eklerseniz, kullanıcılarınızın o kadar fazla zaman kazanabileceğini ve böylece gelişmiş kullanıcı deneyimine yol açabileceğini göz ardı edemezsiniz. Bu nedenle, WordPress tema özelleştiricisine eklenmek üzere kendi başınıza bazı özel kontroller oluşturmayı planlıyorsanız, bu gönderi sizin için becerikli bir rehber olacaktır.
