Fullpage.js ve Gelişmiş Özel Seviye Entegrasyonu

Fullpage.js, çok güçlü, çok ilginç, dinamik ve duyarlı bir tam ekran kaydırma web sitesi oluşturma yeteneği sunan (adından da anlaşılacağı gibi) çok güçlü olan ücretsiz bir jQuery tabanlı JavaScript kütüphanesidir. Bu kütüphane İspanyol geliştiricisi Lvaro Trigo tarafından yapıldı ve dünyanın en iyi markaları tarafından kullanılıyor. Bazı ayarlamalar ve değişiklikler için koddan geçmelisiniz, ancak kütüphanenin kendisinin kullanımı çok kolaydır. Ama her şey “olması gereken yerde” ve iyi yorum yaptı. Gelişmiş özel eklenti eklentisinin popülaritesi ve kütüphanenin nasıl çalıştığı göz önüne alındığında – özellikle menü öğeleri ve parçalar – tekrarları kullanarak yalnızca bir sayfanın tüm parçalarını yapmanın kolay yollarını bulmayı düşünüyorum, aynı zamanda insanların yeni menü öğeleri eklemesine izin veriyor Kolayca programlama bilgisi gerektirir. Yaptığım kod gerçekten hafif ve diğer temalardan çok farklı, ancak ACF/Fullpage.js’in entegrasyonu hakkında aynı fikre sahip olup olmadığını gerçekten umursamıyorum. Tekrarlayıcı alanının ACF Pro’nun bir parçası olduğunu, yani bunun için bir miktar para ödemeniz gerektiği anlamına geldiğini lütfen unutmayın.
WordPress temanızla ilgili yardıma mı ihtiyacınız var?Bruno Kos’u işe al ve senin için sihrini yapmasına izin ver!Boş bir sayfa oluşturun Bu temayı, kütüphaneyi kullanarak yalnızca tam sayfa düzeni olarak kullanılmak üzere yaptım.Bu nedenle, index.php şablonundaki standart döngüler gibi oldukça standart WordPress şeyler terk edildi.Endişelenmeyin – wp_head () ve wp_footer () dahildir.Kod gerçekten minimum iken, CSS yirmi on altı temasından alınmıştır.Ayrıca kendi CSS’imden daha az bir miktar ekledim, ancak genel olarak tasarım tüm bu öğreticide önemli değil, çünkü bu temayı kullanacak herkesin olasılığı kendi öğelerini tasarlayacak.
Yani, bu sorundur -boş bir sayfa oluşturun ve Ayarlar -> Menü Öğeleri Okuma’da statik bir sayfa olarak ayarladığınızdan emin olun.Bu bizim başlangıç ​​noktamız ve bu olmadan işe yaramayacak.İkinci adım komut dosyası ekle WordPress temamızla işlev görmek için bir komut dosyası eklemektir – en son Fullpage.js sürümünü resmi web sitesinden indirebilirsiniz.İçerme oldukça standarttır: add_action (‘wp_enqueue_scripts’, ‘bbird_scroller_scripts’);işlev bBird_scroller_scripts () {wp_enqueue_style (‘Basic-css’, get_stylesheet_uri ());wp_enqueue_style (‘yazı tipi -awseome’, get_stylesheet_directory_uri (). ‘/css/font-awesome.min.css’);wp_enqueue_style (‘fullpage-css’, get_stylesheet_directory_uri (). ‘/css/jquery.fullpage.css’);wp_enqueue_script (‘fullpage-js’, get_stylesheet_directory_uri ().wp_enqueue_script (‘FullPage-Initialize’, get_stylesheet_directory_uri ().}
Kendi zevkim için dahil ettiğim harika yazı tipine ek olarak, eminim FullPage.initialize.js Script – daha sonra tartışacağız. Özel bir Walker menüsü ve sınıfı oluşturun Fullpage.js kütüphanesi tarafından üretilen menüyü demo sitelerinde kontrol ederseniz, bazı özel veri öznitelikleri, yani Data-Mesant çapası bulursunuz. Navigasyon FullPage.js böyle çalışıyor. Bu makaledeki özel veri özniteliklerinin WordPress menüsüne uygulanmadığı göz önüne alındığında, tüm WordPress ekosistemleri – özel Walker sınıfında favorilerimden birini yapmamız gerekiyor. Tüm yorumların sınıfını temizledim ve böyle görünüyor: [kod lang = ‘php’] işlev artışı () {static $ i = 1; geri $ i ++; } Sınıf Bbird_scroller_walker Walker_nav_menu {function start_el (& $ output, $ öğe, $ derinlik = 0, $ args = array (), $ id = 0) {$ intent = ($ derinlik)? str_repeat (“t”, $ derinlik): “; $ class = boş ($ öğe-> sınıf)? Array (): (dizi) $ öğe-> sınıflar; $ sınıflar [] = ‘menü-item-‘. $ öğe-> id; $ args = Applate_filters (‘nav_menu_item_args’, $ args, $ öğe, $ derinlik); $ class_names = join (”, appling_filters (‘nav_menu_css_class’, array_filter ($ sınıflar), $ öğe, $ args, $ derinlik)); $ class_names = $ class_names? ‘class = “‘. Esc_attr ($ class_names). ‘”: “; $ id = applect_filters (‘ nav_menu_item_id ‘,’ menü-item- ‘. $ öğe-> id, $ args, $ args, $ args); id = $ id? ‘id = “‘. ESC_ATTR ($ ID). “” “:”; $ slider_value = ‘slayt’. arttırmak (); $ output. = $ girinti. ‘
‘; $ Att = array (); $ atts [‘başlık’] =! boş ($ öğe-> attr_title)? $ öğe-> attr_title: “; $ atts [‘hedef’] =! boş ($ öğe-> hedef)? $ öğe-> hedef: “; $ atts [‘Rail’] =! boş ($ öğe-> xfn)? $ öğe-> xfn: “; $ atts [‘href’] =! boş ($ öğe-> url)? $ öğe-> url: “; $ atts = Appli_filters (‘nav_menu_link_atttribes’, $ atts, $ öğe, $ args, $ derinlik); $ öznitelik = “; foreach ($ atts olarak $ attr => $ value) {if (! boş ($ değer)) {$ value = (‘href’ === $ attr)? ESC_URL ($ değeri): ESC_ATTR ($ değeri); $ öznitelik. = ”. $ Attr. ‘= “‘. $ value. ‘”;}} $ title = Apple_filters (‘ the_title ‘, $ öğe-> başlık-> id); $ title = appling_filters (‘ nav_menu_item_title ‘, $ öğe. $ args, $ derinlik); $ öğe_utput = $ args-> önceden; $ öğe_utput. = ‘ link_after; $ item_utput. = “; $ item_output. = $ args-> sonra; $ output /kod] Burada çok fazla değişiklik bulamazsınız, ancak istisnalar dışında-artışın işlevi (. Değiştirmenin amacını görmeme rağmen.
Öyleyse yalnızca bir artış eklediğim kısmı kontrol edelim: $ slider_value = ‘kayma’.arttırmak ();$ output. = $ girinti.Gördüğünüz gibi, sadece özel özelliklerimiz için kullanılan yeni bir değişken ** $ slider_value ** yapıyorum.Son olarak, bir menüyü de kaydetmemiz gerekir: // Gezinme menüsü işlevini kaydedmemiz BBird_Scroller_Register_Menus () {$ locations = Array (‘Main’ => __ (‘Ana Menü ve Yalnızca temalarda’, ‘Text_Doain’),);Register_nav_menus ($ konum);} Add_action (‘init’, ‘Bbird_scroller_register_menus’);
Fullpage.js Başlatma Gösterge tablosuna girmeden önce kütüphaneyi başlatalım. Bu da oldukça kolaydır ve bu başlatmanın amacı aslında (en azından bence), düzenli olarak güncellenen çekirdek dosyaya gerek kalmadan kütüphaneye dahil olan tüm ayarları kolayca değiştirebilmenizdir. Bu, başlatma işlevlerimizin nasıl görülebileceğine dair birçok örnekten sadece biridir: jQuery (belge) .Ready (işlev ($) {$ (‘#fullPage’). FullPage ({// navigasyon menüsü: ‘#menu’ , // Gerekirse daha fazla çapa ekleyin, ancak bence 10 Çapa projesi için 10 yeterli olacak: [‘slayt1’, ‘slayt2’, ‘slayt3’, ‘slayt4’, ‘slayt5’, ‘slayt6’, ‘slayt7’, ‘slayt8’, ‘slayt9’, ‘slayt10’], navigationPosition: ‘sağ’, navigatontooltips: [‘ev’, ‘hakkında’, ‘portföy’, ‘slayt4’, ‘slayt4’, ‘slayt5’, ‘slayt6’, ‘Slayt7’ ‘,’ slayt9 ‘,’ slayt10 ‘], showactiVetooltip: false, // kaydırma CSS3: True, ScrollingsPeed: 700, otomatikrolling: true, fittosection: true, fittosectielay: 1000, scrollbar: false, // erişilebilirlik anahtar panoları /Design Controlarrows: true, paddingtop: ‘3em’, paddingBottom: ’10px’, stileelements: ‘haader,. Footer’, reçeteli genişlik: 0, reçeteleci: 0,});});
Çekirdek dosyayı kontrol ederseniz, tüm bu seçenekleri de bulacaksınız, ancak (biraz daha fazla) ve navigatontips (biraz daha az) ile ilgilenen bir seçenek var. Bu çapalar olmadan menümüz çalışmaz, böylece ziyaretçiler sayfayı yalnızca fare tekerleği veya klavyeden rol alabilir. Bu nedenle, birkaç çapa eklememiz gerekiyor – bu amaçla, gerektiğinde daha fazlasını ekleyebilseniz bile, çoğu proje için yeterli olan 10 tanesini ekledim. Ama 15, 20 veya daha fazla menü öğeniz olacağından çok şüpheliyim Yukarıdaki JavaScript, BBird_scroller_Scripts () işlevinden aradığımız FullPage.initialize.js dosyasında bulunur. ACF tekrarlayıcı alanları ve alt bölümleri oluşturmak ana fikri karşıladığımız yerdir – FullPage.js sayfaları üretmek için tekrarlayıcı alanı. Ayrıca, tekrarlayıcımızda biri arka plan görüntüleri için, biri başlık ve diğeri metin için başka bir alan kaydettim. Öğreticiyi kısaltmak için, bu makalenin sonunda size ACF dışa aktarma dosyaları vereceğim, ancak bu yapıdır – burada muhteşem bir şey olmaması için varsayılan değer bile çalışıyor. Bu alanın düzenini istediğiniz gibi değiştirmekte özgürsünüz, ancak kodda da değiştirmedikçe alanın adını değiştirmeyin.