Genesis'te paralaks efektli bir ön sayfa nasıl oluşturulur?

Genesis çerçevesi, hızlı WordPress tema geliştirme için en popüler çerçeveler arasındadır. En iyisi olup olmadığı tartışılmaz – herhangi bir tür geliştirme söz konusu olduğunda "en iyi" diye bir şey yoktur. Bir amaç için mükemmel olan, başka bir amaç için tamamen yararsız olabilir.

Ancak Genesis'in getirdiği iyi şeylerden biri, şablondaki öğeleri kolayca yeniden düzenlememize izin veren oldukça fazla eylem kancası ve filtreyle gelmesidir. Bu eğitimde, widget'lara (bunu başarmanın ACF gibi başka yolları olsa da) ve özel arka planlara (WordPress özelleştirici aracılığıyla yapılır) dayalı paralaks efektli bir ön sayfanın nasıl oluşturulacağını anlatacağım.

Size göstermek üzere olduğum kodu test etmek isterseniz, çalışan bir alt temaya ihtiyacınız olacak çünkü Genesis tema geliştirme ile ilgili tüm kodlar buraya gidiyor. Bu eğitimin sonunda ayrıca canlı bir demoya bir bağlantı bulacaksınız.

Paralaks Seçimi

Paralaks efekti son yıllarda giderek daha popüler hale geldi (iyi bir nedenden dolayı) ve müşterilerden sıkça gelen bir istekken, son birkaç yılda oluşturulan en iyi temalardan ve web tasarımlarından bazıları düzenli olarak farklı türde paralaks efektleri içeriyor. Hangisini seçmeli zor bir soru çünkü “en iyisini” arıyorsanız, jQuery, saf JavaScript, saf CSS efektleri vb.'ye dayalı yüzlerce paralaks efekti ile kolayca bunalabilirsiniz. İşleri basit tutmak için, basit ve hafif bir (küçültülmüş sürüm 6.50 KB) Parallax.js eklentisi seçtik. Eklenti, MIT lisansı altında lisanslanmıştır.

Komut dosyasını indirdikten sonra, hiyerarşiyi temiz tutmak için onu alt tema klasörüne, tercihen js/ klasörüne düzgün bir şekilde yerleştirmemiz gerekir:

add_action('wp_enqueue_scripts', 'gs_custom_enqueue_parallax_script'); function gs_custom_enqueue_parallax_script() { wp_enqueue_script('paralaks', get_stylesheet_directory_uri() .'/js/parallax.min.js', dizi('jquery')); }

Paralaks betiğinin jQuery'ye bağlı olduğuna dikkat edin.

İçerik alanlarının kaydedilmesi

Varsayılan bir register_sidebar( $args ); WordPress işlevi, ancak Genesis, genesis_register_sidebar(); aynı şeyi yapan fonksiyon. Daha önce de söylendiği gibi, ön sayfa bölümlerinde içerik oluşturmak için widget kullanmaya karar verdik. Kaç bölüm istediğimiz bize kalmış – bu amaçla altı ana sayfa widget alanı (bölüm) kaydedeceğiz. Bu, functions.php dosyasına girer:

//* Widget alanlarını kaydedin genesis_register_sidebar( array( 'id' => 'home-1', 'name' => __( 'Ana Bölüm 1 (paralaks)', 'gs-custom-theme' ), 'description' = > __( 'Ana Bölüm 1 (paralaks)', 'gs-özel-tema' ), ) ); genesis_register_sidebar( array( 'id' => 'home-2', 'name' => __( 'Ana Bölüm 2 (paralakssız)', 'gs-özel-tema'), 'açıklama' => __( ' Ana Bölüm 2 (paralaks yok)', 'gs-custom-theme' ), ) ); genesis_register_sidebar( array( 'id' => 'home-3', 'name' => __( 'Ana Bölüm 3 (paralaks)', 'gs-özel-tema'), 'description' => __( 'Ana Bölüm 3 (paralaks)', 'gs-özel tema' ), ) ); genesis_register_sidebar( array( 'id' => 'home-4', 'name' => __( 'Ana Bölüm 4 (paralakssız)', 'gs-özel-tema'), 'açıklama' => __( ' Ana Bölüm 4 (paralaks yok)', 'gs-özel-tema' ), ) ); genesis_register_sidebar( array( 'id' => 'home-5', 'name' => __( 'Ana Bölüm 5 (paralaks)', 'gs-custom-theme'), 'description' => __( 'Ana Bölüm 5 (paralaks)', 'gs-özel tema' ), ) ); genesis_register_sidebar( array( 'id' => 'home-6', 'name' => __( 'Ana Bölüm 6 (paralakssız)', 'gs-özel tema'), 'açıklama' => __( ' Ana Bölüm 6 (paralaks yok)', 'gs-özel-tema' ), ) );

Özelleştirici seçeneklerinin kaydedilmesi

Ana sayfada altı içerik alanı oluşturmaya karar verdiğimize göre, altı özelleştirici kontrolüne de ihtiyacımız olacak. Bunlardan üçü arka plan resimlerini kontrol edecek ve üçü arka plan renklerini kontrol edecek. İşte kod:

function gs_custom_theme_home_sections ($wp_customize) { // Özelleştiriciye yeni bölüm ekle $wp_customize->add_section( 'gs_custom_theme_front_section', array( 'title' => 'Ön Sayfa Seçenekleri', 'priority' => 201) ); // Üç arka plan görüntüsü bölümü kaydedin $wp_customize->add_setting( 'gs_custom_theme_setting_background_image_1', array( 'default' => ”, 'sanitize_callback' => 'gs_custom_theme_sanitize_bgi', ) ); $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'gs_custom_theme_background_image_1', array( 'label' => __( 'Arka Plan Resmi 1.', 'gs-custom-theme' ), 'ayarlar'_1, 'gstting_custom_background_theme_ bölüm' => 'gs_custom_theme_front_section', 'priority' => 15 ) ) ); $wp_customize->add_setting( 'gs_custom_theme_setting_background_image_2', array( 'default' => ”, 'sanitize_callback' => 'gs_custom_theme_sanitize_bgi', ) ); $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'gs_custom_theme_background_image_2', array( 'label' => __( 'Arka Plan Resmi 2.', 'gs-özel-tema'), 'ayarlar' => 'gs_custom_background,_ bölüm' => 'gs_custom_theme_front_section', 'priority' => 17 ) ) ); $wp_customize->add_setting( 'gs_custom_theme_setting_background_image_3', array( 'default' => ”, 'sanitize_callback' => 'gs_custom_theme_sanitize_bgi', ) ); $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'gs_custom_theme_background_image_3', array( 'label' => __( 'Arka Plan Resmi 3.', 'gs-özel-tema'), 'ayarlar' => 'gs_custom_background,_ bölüm' => 'gs_custom_theme_front_section', 'priority' => 19 ) ) ); // Üç renkli arka plan bölümü kaydedin $wp_customize->add_setting( 'gs_custom_theme_setting_color_background_1', array( 'default' => '#000000', 'sanitize_callback' => 'sanitize_hex_color' ) ); $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'gs_custom_color_bg_setting_1', array( 'label' => __( 'Arka Plan Rengi 1st', 'gs-custom-theme'), 'ayarlar' => 'gstting_custom_color_theme' bölüm' => 'gs_custom_theme_front_section', 'priority' => 16 ) ) ); $wp_customize->add_setting( 'gs_custom_theme_setting_color_background_2', array( 'default' => '#000000', 'sanitize_callback' => 'sanitize_hex_color' ) ); $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'gs_custom_color_bg_setting_2', array( 'label' => __( 'Arka Plan Rengi 2.', 'gs-custom-theme'), 'settings' => 'gs_custom_color_theme,' bölüm' => 'gs_custom_theme_front_section', 'priority' => 18 ) ) ); $wp_customize->add_setting( 'gs_custom_theme_setting_color_background_3', array( 'default' => '#000000', 'sanitize_callback' => 'sanitize_hex_color' ) ); $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'gs_custom_color_bg_setting_3', array( 'label' => __( 'Arka Plan Rengi 3.', 'gs-custom-theme'), 'settings' => 'gs_custom_color_theme,' bölüm' => 'gs_custom_theme_front_section', 'priority' => 20 ) ) ); } add_action('customize_register', 'gs_custom_theme_home_sections');

Bu oldukça basittir, ancak bu kodu function.php veya başka bir yere (ancak function.php tarafından yüklenen dosyaya) koyarsanız, temizleme için kullandığımız özel işlev(ler)i tanımlamamız gerektiğinden muhtemelen hatalar alırsınız. . Premium temalardan söz ederken bile, özel özelleştirme kontrollerinin ne kadar sıklıkla temizleme işlevlerinden yoksun olduğuna şaşıracaksınız. Aksine, wordpress.org tema dizininde temizleme işlevleri olmayan bir tema bulamazsınız, çünkü temaları incelerken gözden geçirenlerin ilk kontrol edeceği şeylerden biri olacaktır.

Sanitasyonun neden önemli olduğunu açıklamamız gerektiğini düşünmüyorum, ancak şablon düzeni göz önüne alındığında, resimler ve renkler için temizleme işlevlerine ihtiyacımız var. Renkler için yerleşik WordPress sanitize_hex_color ( string $color ) işlevini kullanabiliriz, arka plan görüntüleri için ise basit bir mim kontrolü kullanabiliriz:

function gs_custom_theme_sanitize_bgi ( $image, $setting ) { $mimes = dizi( 'jpg|jpeg|jpe' => 'image/jpeg', 'gif' => 'image/gif', 'png' => 'image/png ', 'bmp' => 'image/bmp', 'tif|tiff' => 'image/tiff', 'ico' => 'image/x-icon' ); $dosya = wp_check_filetype( $görüntü, $mimes); dönüş ( $dosya['ext'] ? $image : $ayar->varsayılan ); }

Ön sayfa şablonunun oluşturulması

Ön sayfa şablonu – bizim durumumuzda front-page.php – Ayarlar > Okuma ->Ön sayfa gösterimi ayarlanırken kullanılan şablondur (bunu başarmanın başka yolları olsa da, şu anda önemli değiller). Ve bu eğitimin son adımına geldiğimiz yer burasıdır – widget alanlarını ve özelleştirici kontrollerini eyleme geçirmemiz gerekiyor. Ama yapmadan önce, öğeleri biraz yeniden düzenleyelim, varsayılan işaretlemeyi kaldıralım ve layout işlevini genesis_after_header() eylem kancasına bağlayalım.

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_content-sidebar-wrap_output', '__return_false'); add_filter('genesis_markup_content', '__return_null'); add_action('genesis_after_header', 'gs_custom_theme_home_content_sections');

Özelleştiricide ayarlanan renkleri ve görüntüleri nasıl kullanabileceğimize ilişkin örneğe bir göz atın:

$background_image_url = get_theme_mod( 'gs_custom_theme_setting_background_image_1'); echo '<div class=”parallax-window” data-speed=”0.1″ data-paralaks=”scroll” data-image-src=”'.$background_image_url.'”><<div class=”site-inner” >'; if ( is_active_sidebar( 'home-1' ) ) { dynamic_sidebar( 'home-1' ); } yankı '</div></div>'; $background_color_one = get_theme_mod( 'gs_custom_theme_setting_color_background_1'); echo '<div class=”paralaks-pencere” style=”background-color:'.$background_color_one.'”><<div class=”site-inner”>'; if ( is_active_sidebar( 'home-2' ) ) { dynamic_sidebar( 'home-2' ); } yankı '</div></div>';

Bu nedenle fikir, önce bunları değişkenlerde saklamak ve sonra bunları satır içi stiller olarak kullanmaktır. Ayrıca, data-speed özelliğine bir göz atın – parallax.js ile birlikte gelir ve paralaks etkisinin hızını değiştirir. Farklı bölümlere farklı sayılar koyarsanız daha güzel efektler elde edebilirsiniz. Son olarak, front-page.php şablonumuzun tam kodu şudur:

<<div class=”site-inner”>'; if ( is_active_sidebar( 'home-1' ) ) { dynamic_sidebar( 'home-1' ); } yankı '</div></div>'; $background_color_one = get_theme_mod( 'gs_custom_theme_setting_color_background_1'); echo '<<div class=”paralaks-pencere” style=”background-color:'.$background_color_one.'”><<div class=”site-inner”>'; if ( is_active_sidebar( 'home-2' ) ) { dynamic_sidebar( 'home-2' ); } yankı '</div></div>'; $background_image_url2 = get_theme_mod( 'gs_custom_theme_setting_background_image_2'); echo '<<div class=”paralaks-pencere” data-speed=”0.5″ data-paralaks=”kaydırma” data-image-src=”'.$background_image_url2.'”><<div class=”site-inner ”>'; if ( is_active_sidebar( 'home-3' ) ) { dynamic_sidebar( 'home-3' ); } yankı '</div></div>'; $background_color_two = get_theme_mod( 'gs_custom_theme_setting_color_background_2'); echo '<<div class=”paralaks-pencere” style=”background-color:'.$background_color_two.'”><<div class=”site-inner”>'; if ( is_active_sidebar( 'home-4' ) ) { dynamic_sidebar( 'home-4' ); } yankı '</div></div>'; $background_image_url3 = get_theme_mod( 'gs_custom_theme_setting_background_image_3'); echo '<<div class=”parallax-window” data-speed=”0.7″ data-paralaks=”scroll” data-image-src=”'.$background_image_url3.'”><<div class=”site-inner ”>'; if ( is_active_sidebar( 'home-5' ) ) { dynamic_sidebar( 'home-5' ); } yankı '</div></div>'; $background_color_3 = get_theme_mod( 'gs_custom_theme_setting_color_background_3'); echo '<<div class=”paralaks-pencere” style=”background-color:'.$background_color_üç.'”><<div class=”site-inner”>'; if ( is_active_sidebar( 'home-6' ) ) { dynamic_sidebar( 'home-6' ); } yankı '</div></div>'; } Yaratılış();

Diğer her şey, konteynerleri ve CSS'yi şekillendirmek ve eklemek/kaldırmakla ilgilidir.

Tüm bunları çalışırken görmek istiyorsanız, işte oldukça basit bir canlı demo veya kaynak kodunu indirip onunla oynayabilirsiniz:

Canlı demo | Kaynak kodu

---

Şimdi size kalmış: En sevdiğiniz paralaks efekti nedir? Özel kodlamayı mı yoksa eklentileri mi tercih edersiniz?