fullPage.js ve Gelişmiş Özel Alan Entegrasyonu

fullPage.js, (adından da anlaşılacağı gibi) çok çekici, dinamik ve duyarlı tam ekran kaydırma web siteleri oluşturma yeteneği sunan, son derece güçlü, ücretsiz bir jQuery tabanlı JavaScript kitaplığıdır. Kütüphane İspanyol geliştirici Álvaro Trigo tarafından oluşturuldu ve dünyanın en iyi markalarından bazıları tarafından kullanılıyor.

Bazı özelleştirmeler ve değişiklikler için kodu gözden geçirmeniz gerekse bile, kitaplığın kendisinin kullanımı çok kolaydır. Ama her şey “olması gereken yerde” ve iyi yorumlanmış.

Gelişmiş Özel Alanlar eklentisinin popülaritesi ve kitaplığın çalışma şekli – özellikle menü öğeleri ve bölümleri – göz önüne alındığında, Tekrarlayıcı alanını kullanarak tüm bölümleri yalnızca tek bir sayfadan oluşturmanın kolay bir yolunu bulmayı ve aynı zamanda insanların ekleme yapmasına izin vermeyi düşünüyordum. herhangi bir programlama bilgisine ihtiyaç duymadan kolayca yeni menü öğeleri. ACF/fullPage.js entegrasyonu ile ilgili aynı fikri olan var mı diye araştırmak pek umurumda olmasa da, oluşturduğum kod gerçekten hafif ve diğer temalardan oldukça farklı. Lütfen Tekrarlayıcı alanının ACF PRO'nun bir parçası olduğunu unutmayın, bu da bunun için biraz para ödemeniz gerekeceği anlamına gelir.

WordPress temanızla ilgili yardıma mı ihtiyacınız var? Bruno Kos'u işe alın ve sihrini sizin için yapmasına izin verin!

Boş bir sayfa oluşturun

Bu temayı yalnızca kitaplığı kullanarak tam sayfa düzeni olarak kullanılmak üzere oluşturdum. Bu nedenle, index.php şablonundaki standart döngü gibi bazı oldukça standart WordPress öğeleri dışarıda bırakılmıştır. Endişelenmeyin – wp_head() ve wp_footer() her ikisi de dahildir. Kod gerçekten çok az, CSS ise Twenty Sixteen temasından alınmıştır. Ayrıca kendi CSS'imden daha küçük bir miktar ekledim, ancak genel olarak tasarım, bu eğitim boyunca önemli değil çünkü bu temayı kullanacak olan herkes kendi eşyalarını tasarlayacaktır.

İşte anlaşma – boş bir sayfa oluşturun ve bunu Ayarlar -> Okuma menü öğesinde statik bir sayfa olarak ayarladığınızdan emin olun. Bu bizim başlangıç ​​noktamız ve bu olmadan işe yaramaz.

Komut dosyası ekleme

İkinci adım, WordPress temamızla çalışacak komut dosyaları eklemektir – en son fullPage.js sürümünü resmi web sitesinden indirebilirsiniz. Dahil etme oldukça standarttır:

add_action('wp_enqueue_scripts', 'bbird_scroller_scripts'); function bbird_scroller_scripts() { wp_enqueue_style( 'temel-css', get_stylesheet_uri() ); wp_enqueue_style('font-awseome', get_stylesheet_directory_uri().'/css/font-awesome.min.css'); wp_enqueue_style( 'tam sayfa-css', get_stylesheet_directory_uri() .'/css/jquery.fullPage.css'); wp_enqueue_script('fullpage-js', get_stylesheet_directory_uri() .'/js/jquery.fullPage.js', dizi('jquery')); wp_enqueue_script('fullpage-initialize', get_stylesheet_directory_uri() .'/js/fullpage.initialize.js', array('jquery')); }

Kendi eğlencem için eklediğim Font Awesome'in yanı sıra eminim fullpage.initialize.js betiğini de fark edeceksiniz – buna daha sonra geleceğiz.

Menüler ve özel yürüteç sınıfı oluşturma

Demo sitelerinde fullPage.js kitaplığı tarafından oluşturulan menüyü kontrol ederseniz, bazı özel veri öznitelikleri, yani data-menuanchor , diğer yandan bölümlere (tam ekran sayfalar) data-anchor özniteliği aracılığıyla bağlanır.

fullPage.js navigasyonu bu şekilde çalışır. Bu yazı itibariyle özel veri niteliklerinin henüz WordPress menülerine uygulanmadığı göz önüne alındığında, tüm WordPress ekosisteminde favorilerimden birini oluşturmamız gerekecek – özel yürüteç sınıfı . Sınıfı tüm yorumlardan temizledim ve şöyle görünüyor:

[code lang='php'] function artış() { statik $i = 1; $i++ döndür; } class bbird_scroller_walker Walker_Nav_Menu { function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) { $indent = ( $derinlik ) ? str_repeat(“t”, $derinlik): ”; $sınıflar = boş( $item->sınıflar ) ? dizi() : (dizi) $item->sınıflar; $classes[] = 'menü öğesi-' . $item->Kimlik; $args = application_filters( 'nav_menu_item_args', $args, $item, $derinlik); $class_names = join( ' ', application_filters( 'nav_menu_css_class', array_filter( $sınıflar), $item, $args, $depth ) ); $sınıf_adı = $sınıf_adı ? 'sınıf=”' . esc_attr($sınıf_adı) . '”' : ”; $id = application_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args, $depth ); $kimlik = $kimlik? 'id=”' . esc_attr( $id ) . '”' : ”; $slider_value = 'slayt' . artış(); $çıktı .= $girinti . '

• '; $atts = dizi(); $atts['başlık'] = ! boş( $item->attr_title ) ? $item->attr_title : ”; $atts['hedef'] = ! boş( $item->target ) ? $item->hedef : ”; $atts['rel'] = ! boş( $item->xfn ) ? $item->xfn : ”; $atts['href'] = ! boş( $item->url ) ? $item->url : ”; $atts = application_filters( 'nav_menu_link_attributes', $atts, $item, $args, $depth ); $nitelikler = ”; foreach ( $atts as $attr => $değer ) { if ( ! boş( $değer ) ) { $değer = ( 'href' === $attr ) ? esc_url( $değer ) : esc_attr( $değer ); $attributes .= ' ' . $attr. '=”' . $değer . ''''; } } $title = application_filters( 'the_title', $item->title, $item->ID ); $başlık = application_filters( 'nav_menu_item_title', $başlık, $item, $args, $derinlik); $item_output = $args->önce; $item_output .= '<a'. $attributes=”” .'=””>'; $item_output .= $args->link_before . $başlık . $args->link_after; $item_output .= ”; $item_output .= $args->sonra; $output .= application_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); } } [/kod] </a'.>

Burada çok fazla değişiklik bulamazsınız, ancak bir istisna dışında – increment() işlevi. Bu ne işe yarıyor? Bu, her yeni "slayt" için artışlar ekleyen son derece basit bir işlevdir – bu, tüm kodu temiz tutmak için benim kişisel tercihimdi. Değiştirme amacını göremesem de “slide” yerine başka bir isim kullanabilirsiniz.

Şimdi sadece artım eklediğim kısmı inceleyelim:

$slider_value = 'slayt' . artış(); $çıktı .= $girinti .

Gördüğünüz gibi, özel özniteliğimiz için kullanılan yalnızca yeni bir **$slider_value** değişkeni oluşturdum. Son olarak, bir menüyü de kaydetmemiz gerekiyor:

// Navigasyon Menülerini Kaydet işlevi bbird_scroller_register_menus() { $locations = array( 'Birincil' => __( 'Temadaki ana ve tek menü', 'text_domain' ), ); register_nav_menus( $konumlar); } add_action('init', 'bbird_scroller_register_menus');

fullPage.js başlatılıyor

Kontrol paneline geçmeden önce kütüphaneyi başlatalım. Bu aynı zamanda oldukça basittir ve bu başlatmanın amacı aslında (en azından benim düşündüğüm gibi), düzenli olarak güncellenen çekirdek dosyanın üzerine yazmaya gerek kalmadan kitaplıkla birlikte gelen tüm ayarları kolayca geçersiz kılabilmenizdir. Bu, başlatma işlevimizin nasıl görünebileceğinin birçok örneğinden sadece biridir:

jQuery(document).ready(function($) { $('#fullpage').fullpage({ //Gezinme menüsü: '#menu', //Gerekirse daha fazla bağlantı ekleyin, ancak bence 10 çoğu proje bağlantı noktası:['slide1', 'slide2', 'slide3', 'slide4', 'slide5', 'slide6', 'slide7', 'slide8', 'slide9', 'slide10'], navigationPosition: 'right ', navigasyonAraç ipuçları: ['Ana Sayfa', 'Hakkında', 'Portföy', 'slide4', 'slide5', 'slide6', 'slide7', 'slide8', 'slide9', 'slide10'], showActiveTooltip: false, //Scrolling css3: true, scrollingSpeed: 700, autoScrolling: true, fitToSection: true, fitToSectionDelay: 1000, scrollBar: false, //Erişilebilirlik klavyesiScrolling: true, //Tasarım kontrolüOklar: true, paddingTop: '3em', paddingBottom: ' 10px', fixElements: '#header, .footer', responsiveWidth: 0, responsiveHeight: 0, }); });

Çekirdek dosyayı kontrol ederseniz, tüm bu seçenekleri de bulacaksınız, ancak özellikle ilgilendiğimiz bir tane var – çapalar (biraz daha fazla) ve navigasyonAraç ipuçları (biraz daha az). Bu çapalar olmadan menümüz çalışmaz, böylece ziyaretçi sayfalar arasında yalnızca fare tekerleği veya klavye aracılığıyla gezinebilir. Bu nedenle, birkaç çapa eklememiz gerekiyor – bu amaçla, gerekirse daha fazlasını ekleyebilmenize rağmen, çoğu proje için yeterli olduğunu düşündüğüm 10 tanesini ekledim. Ancak 15, 20 veya daha fazla menü öğesi – sayfanız olacağından ciddi şekilde şüpheliyim.

NavigationTooltips söz konusu olduğunda, bunlar yalnızca gezinme düğmelerinin üzerinde görünen başlıklardır (bunları da devre dışı bırakabilirsiniz) ve bu nedenle bu eğitim için önemli değildir. Yukarıdaki JavaScript, bbird_scroller_scripts() fonksiyonu ile çağırdığımız fullpage.initialize.js dosyası içerisinde yer almaktadır.

ACF tekrarlayıcı alanı ve alt alanları oluşturma

Burada ana fikirle tanışıyoruz – fullPage.js sayfaları oluşturmak için Tekrarlayıcı alanları. Ayrıca, Tekrarlayıcımıza, biri arka plan görüntüsü, biri başlık ve biri metin için olmak üzere birkaç alan daha kaydettim. Öğreticiyi kısa tutmak için, bu makalenin sonunda size ACF dışa aktarma dosyası sağlayacağım, ancak yapı böyle görünüyor – varsayılan değerler bile çalışıyor, bu yüzden burada gerçekten olağanüstü bir şey yok. Bu alanların düzenini istediğiniz gibi değiştirmekte özgürsünüz, ancak Alan Adlarını kod içinde değiştirmediğiniz sürece değiştirmeyin.

Index.php şablonu

Daha önce de belirtildiği gibi, bu tema ACF kurulumu dışında başka bir şey için kullanılmamalıdır – bu nedenle, özel sayfa şablonunda da olabilse bile tüm kod index.php'dedir. Kodu inceleyelim (makale amacıyla, makalenin altındaki tam tema zip içinde bulabileceğiniz birkaç standart öğeyi kaldırdım):

 '; son zaman; else : // satır bulunamadı endif; ?>

Menüler ve son demo

Menü olmadan tam sayfa düzeni oluşturabilseniz de (ki bu genellikle böyledir), menüyü korumanın çok önemli bir parçası olduğunu düşünüyorum. Menü öğeleri eklemek çok kolaydır ve bağlantılara (kendi işlev dizimizi başlatırken belirlediğimiz) ve özel veri özniteliklerine dayanır. Özel örneğimizde, sayfalar arasında düzgün kaydırmaya izin vererek menü yapısının nasıl görünmesi gerektiği:

Doğal olarak, tüm dosyaları çalışırken göremiyorsanız veya tüm dosyaları indirme imkanınız yoksa, bunların hiçbir anlamı yoktur, bu nedenle aşağıdaki bağlantıları kontrol ettiğinizden emin olun:

• Demo
• temayı indir
• ACF dışa aktarma dosyası

Umarım bu öğreticiyi beğenmişsinizdir ve müşterileriniz için bir sonraki harika temanızı oluşturmak için başlangıç ​​temamı kullanacağınızı daha da çok umuyorum!

Yeni bir WordPress temasına veya herhangi bir tema özelleştirmesine mi ihtiyacınız var? Bruno Kos'u işe alın ve hemen onunla çalışmaya başlayın!