Genesis’te paralaks efekti ile ön sayfa nasıl oluşturulur

Genesis Framework, WordPress temalarının hızlı gelişimi için en popüler çerçevelerden biridir. En iyi imkansız olan – herhangi bir biçimde kalkınma açısından “en iyi” hiçbir şey yoktur. Bir hedef için çok iyi olan şey başka amaçlar için tamamen işe yaramaz olabilir. Ancak Genesis’in getirdiği iyi şeylerden biri, şablondaki unsurları kolayca yeniden düzenlememizi sağlayan bir dizi eylem ve filtre ile gelmesidir. Bu öğreticide, widget’lara (bunu başarmanın başka yolları olmasına rağmen) ve özel arka plana (WordPress ayarıyla yapılır) dayalı bir paralaks efekti ile bir ön sayfanın nasıl oluşturulacağını açıklayacağım.
Size göstereceğim kodu test etmek istiyorsanız, işlev gören bir çocuğun temasına ihtiyacınız var, çünkü Genesis Runs temasının geliştirilmesiyle tüm kod. Bu öğreticinin sonunda, doğrudan demoya bir bağlantı bulacaksınız. Paralax efektleri seçmek paralaks son yıllarda (iyi nedenlerle) giderek daha popüler hale geldi ve müşterilerden sık sık bir istektirken, son yıllarda yapılan en iyi web temaları ve tasarımlarından bazıları düzenli olarak çeşitli paralaks efektleri içerir. Hangisini seçeceğiniz zor bir sorudur, çünkü “en iyi” için ararsanız, jQuery, Pure JavaScript, Pure CSS efektlerine vb. Dayalı yüzlerce paralaks efektiyle kolayca boğulabilirsiniz. Basit şeyleri korumak için basit ve hafif bir parallax.js eklentisi seçtim (düşük sürüm 6,50 kb var). Bu eklenti MIT lisansı altında lisanslanmıştır.
Komut dosyasını indirdikten sonra, hiyerarşiyi temiz tutmak için JS’de tercih edilen çocuk tema klasörüne doğru bir şekilde koymamız gerekir: add_action (‘wp_enqueue_scripts’, ‘gs_custom_enqueue_parallax_script’);İşlev gs_custom_enqueue_parallax_script () {wp_enqueue_script (‘parallax’, get_stylesheet_directory_uri (). ‘/Js/parallax.min.js’, dizi (‘jQuery’));} Paralaks komut dosyasının jQuery’ye bağlı olduğunu unutmayın.İçerik alanının kaydedilmesi bir Register_idabarabak ($ ​​args);WordPress işlevi, ancak Genesis Genesis_register_idabar () sağlar;aynı şeyi yapan işlevler.Daha önce de belirtildiği gibi, ön sayfada içerik oluşturmak için bir widget kullanmaya karar verdik.Kaç parça istediğimize bağlı – bu amaçla, ev widget’ının (bölüm) altı alanını kaydeteceğiz.Bu işlevi girecektir.php:
//* Genesis_register_sidebar (‘id’ => ‘home-1’, ‘name’ => __ (‘Ana Sayfa Bölüm 1 (paralaks)’, ‘gs-custom-theme’) widget alanını kaydedin. , ‘açıklama’ => __ (‘Ana Sayfa Bölüm 1 (paralaks)’, ‘gs-custom-tema’),); Genesis_register_sidebar (Array (‘id’ => ‘home-2’, ‘name’ => __ (‘Home bölüm 2 (karalaksız),’ gs-custom-tema ‘),’ açıklama ‘=> __ (‘ ev Bölüm 2 (paralaks olmadan) ‘,’ gs-custom-tema ‘),); Genesis_register_sidebar (dizi (‘id’ => ‘ev-3’, ‘ad’ => __ (‘ana bölüm 3 (paralaks)’, ‘gs-custom-tema’), ‘açıklama’ => __ (‘ana bölümü 3 (paralaks) ‘,’ gs-custom-tema ‘),); Genesis_register_sidebar (Array (‘id’ => ‘ev-4’, ‘ad’ => __ (‘Ana Sayfa 4 (karalaksız),’ gs-custom-tema ‘),’ açıklama ‘=> __ (‘ ev 4 (paralaks olmadan) ‘,’ gs-custom-tema ‘),); Genesis_register_sidebar (dizi (‘id’ => ‘ev-5’, ‘ad’ => __ (‘ana bölüm 5 (paralaks)’, ‘gs-custom-tema’), ‘açıklama’ => __ (‘ana bölümü 5 (paralaks) ‘,’ gs-custom-tema ‘),); Genesis_register_sidebar (Array (‘id’ => ‘ev-6’, ‘ad’ => __ (‘Ana Sayfa 6 (parallax),’ gs-custom-tema ‘),’ açıklama ‘=> __ (‘ ev Bölüm 6 (paralaks olmadan) ‘,’ gs-custom-tema ‘),);
Ayarlama seçeneğini kaydettirerek Verandada altı içerik alanı yapmaya karar verdiğimizi göz önünde bulundurarak altı ayar kontrolüne de ihtiyacımız vardı. Üçü arka plan görüntülerini kontrol edecek ve üçü arka plan rengini kontrol edecek. Kodu takip: GS_CUSTOM_THEM_HOME_SECTIONS ($ wp_customize) işlevi {// $ wp_customize-> add_section (‘gs_custom_theme_front_section’, dizi (” ayarına yeni bir parça ekleyin (‘ // Arka plan görüntüsünün üç bölümünü $ wp_customize-> add_setting (‘gs_custom_theme_setting_background_image_1’, dizi (‘varsayılan’ => “, ‘saditize_callback’ => ‘gs_custom_theme_sanitize_bgi’,); $ wp_customize-> add_control (yeni wp_customize_image_control ($ wp_custrostomize, ‘gs_custom_theme_background_image_1’, dizi (‘label’ => __ (‘ilk arka plan görüntüsü’, ‘gs-custom-the’) ‘gs_custom_front_sprone’ ))); $ wp_customize-> add_setting (‘gs_custom_theme_setting_background_image_2’, dizi (‘varsayılan’ => “, ‘sendize_callback’ => ‘gs_custom_theme_sanitize_bgi’,); $ wp_customize-> add_control (new wp_customize_image_control ($ wp_custground_image_2 ‘, array (‘ label ‘=> __ (‘ arka plan görüntüsü 2nd ” => ‘gs_custom_theme_front_section’>) ‘); $ wp_customize->
add_setting (‘gs_custom_theme_setting_background_image_3’, dizi (‘default’ => “, ‘sametize_callback’ => ‘gs_custom_theme_sanitize_bgi’,)); $ wp_customize-> add_control (new wp_customize_image_control ($ wp_custground_image_3 ‘, dizi (‘ label ‘=> __ (‘ arka plan görüntüsü 3nd ‘=>’ gs_custom_theme_front_section ‘,’); // Rengiden üç arka plan parçasını kaydedin $ wp_customize-> add_setting (‘gs_custom_theme_setting_color_background_1’, dizi (‘varsayılan’ => ‘000000’, ‘sendize_callback’ => ‘sanitize_hex_color’); $ wp_customize-> add_control (yeni wp_customize_color_control ($ wp_customize, ‘gs_custom_color_bg_setting_1’, dizi (‘label’ => __ (‘arka plan renk 1’ ‘,’ ‘=>’ gs_custom_theme_front_section ‘)’) ‘); $ wp_customize-> add_setting (‘gs_custom_theme_setting_color_background_2’, dizi (‘varsayılan’ => ‘#000000’, ‘sanitize_callback’ => ‘saditize_hex_color’)); $ wp_customize-> add_control (new wp_customize_color_control ($ wp_customize, ‘gs_custom_color_bg_setting_2’, dizi (‘label’ => __ (‘arka plan renk 2nd’, ‘=>’ gs_custom_theme_front_section ‘)’) ‘);
$ wp_customize-> add_setting (‘gs_custom_theme_setting_color_background_3’, dizi (‘varsayılan’ => ‘#000000’, ‘sanitize_callback’ => ‘saditize_hex_color’))); $ wp_customize-> add_control (yeni wp_customize_color_control ($ wp_customize, ‘gs_custom_color_bg_setting_3’, dizi (‘label’ => __ (‘arka plan renk 3rd’, ‘=>’ gs_custom_theme_front_section ‘)’) ‘); } Add_action (‘customize_register’, ‘gs_custom_theme_home_sections’); bu oldukça kolaydır, ancak bu kodu function.php’ye veya başka bir yere girerseniz (ancak function.php tarafından yayınlanan bir dosyada), bir hata alabilirsiniz çünkü bir hata alabilirsiniz Sanitasyon için kullandığımız özel işlevleri tanımlar. Premium temalar hakkında konuşsak bile, özel ayar kontrolünün ne sıklıkta bir sanitasyon işlevi olmadığına şaşıracaksınız. Tersine, WordPress.org Tema Dizini’nde sanitasyon işlevi olmayan bir tema bulamazsınız, çünkü temayı incelerken, gözden geçiren tarafından incelenecek ilk şeylerden biri olacaktır.

Sanitasyonun neden önemli olduğunu açıklamamız gerektiğini düşünmüyorum, ancak şablonun düzeni göz önüne alındığında, görüntüler ve renkler için bir sanitasyon işlevine ihtiyacımız var.Renkler için, WordPress Sendize_Hex_Color (String $ Color) ‘nın varsayılan işlevini kullanabiliriz, arka plan görüntüleri için basit mimes kontrolleri kullanabiliriz: gs_custom_theme_sanitize_bgi ($ görüntü) $ ayar) {$ mimes = array (‘ jpg | jpg | jpeg | jpeg | jpeg | jpeg | jpeg => ‘image/jpeg’, ‘gif’ => ‘image/gif’, ‘png’ => ‘image/png’, ‘bmp’ => ‘resimler/bmp’, ‘ tif | tiff ‘=>’ resimler /tiff ‘,’ ico ‘=>’ image /x-icon ‘);$ file = wp_check_filetype ($ image, $ mimes);return ($ file [‘ext’]? $ görüntü: $ sett-> varsayılan);}
Ön sayfa şablonları oluşturma ön sayfa şablonları -rront -page.php bizim durumumuzda -Template, ayarlar> okuma -> ön sayfa ekranı ayarlanıyor (bunu başarmanın başka yolları olmasına rağmen, ancak bu önemli değil bu zaman).Ve bu, bu öğreticinin son adımına ulaştığımız yerdir – widget alanını ve ayar kontrolünü uygulamamız gerekir.Ancak bunu yapmadan önce, küçük bir öğeyi sıfırlayalım, varsayılan işaretlemeyi ve kanca düzeninin işlevini Genesis_after_header () kancasına silelim.Remove_action (‘Genesis_Loop’, ‘Genesis_do_Loop’);Remove_action (‘Genesis_after_header’, ‘Genesis_do_nav’);Add_action (‘Genesis_header_right’, ‘Genesis_do_nav’);add_filter (‘Genesis_markup_site-inner’, ‘__return_null’);add_filter (‘Genesis_markup_concent-in-wrap_output’, ‘__Rereturn_false’);add_filter (‘Genesis_markup_content’, ‘__return_null’);Add_action (‘Genesis_after_header’, ‘gs_custom_theme_home_content_sections’);
Bkz. Ayarlamalarda ayarlanan renkleri ve resimleri nasıl kullanabileceğimize dair örnekler: $ background_image_url = get_theme_mod (‘gs_custom_theme_setting_background_image_1’);echo ‘
‘; if (is_active_idabar (‘ home-1 ‘)) {dynamic_idebar (‘ home-1 ‘);} echo’ ‘; $ background_color_one = get_theme_mod (‘ gs_custom_theme_color_background_1 ‘; div class = div class “Parallax-window” style = “arka plan-color: ‘. $ background_color_one.’ 2 ‘);} echo’