Barba.js kullanarak WordPress’e bir sayfa geçişi ekleyin
Bu kısa öğreticide barba.js, oksijen üreticisi ve küçük bir manuel çalışma kullanarak WordPress’e bir sayfa geçişinin nasıl ekleneceğini tartışacağız. Barba.js nedir?
Barba.js, web sitesi sayfalarınız arasında sorunsuz ve sorunsuz bir geçiş yapmanızı sağlayan bir JavaScript kütüphanesidir. Bu geçiş, bir sonraki sayfaya solmak kadar basit olabilir ve kullanıcı yan yana dolaşırken yeni bir öğe kadar karmaşık olabilir. Ne kullanırsanız kullanın, bu, herhangi bir WordPress web sitesine profesyonel alanlar ekleyen çok harika bir kitaplıktır.
Ayrıca, sayfalar arasındaki gecikmeleri azaltarak, HTTP isteklerini en aza indirerek ve kullanıcı deneyimini geliştirerek performansınızı artırır. Bu, oksijen üreticisi kullanılarak WordPress’e entegre edilmesi oldukça basit olan çok hafif bir kütüphane (sadece 9kbs). Neden Barba.js ve oksijen üreticisi? Devam etmeden önce, oksijen üreticisi ile oluşturulan WordPress web sitemize bir sayfa geçişi ekleyeceğimizi anlamalısınız. Oksijen üreticisi tüm WordPress site yapısını değiştirir. Genellikle, düzinelerce PHP dosya şablonundan oluşan önceden yapılmış bir tema kullanırsınız. Oksijen oluşturucuyu kullanırken, WordPress temasını denklemden siler ve başlangıçtan itibaren bir web sitesi oluşturursunuz. Bu, görsel bir yapıcı kullanarak bir web sitesi oluşturmak için özel bir şekilde tam bir yol arıyorsanız, tasarım ve geliştirme açısından çok yararlıdır.
Tüm inşaatçılardan, oksijen üreticisi bu nedenle geliştiriciler için en iyisidir. Barba.js’yi WordPress sitesine birleştirmek söz konusu olduğunda, oksijen üreticisi süreci çok basitleştiriyor. Yine de Barba.js’yi temalarla oluşturulan geleneksel bir WordPress web sitesine koyabilirsiniz, ancak bu çok daha zordur ve kendi web sitenizi oluşturan ve kendi kodunuzu ekleyen gerçek PHP dosyasını girmenizi gerektirir. Bununla rahat hissediyorsanız, bu öğreticiye devam edin ve Barba.js’nin WordPress sitesine temel uygulamasını anlayabileceksiniz. Değilse ve bir WordPress web sitesi oluşturmak için Oxygen Builder’ı kullanmazsanız, bunu kullanmayı bırakmak isteyebilirsiniz. Veya oksijen üreticisini görebilir ve kendiniz deneyebilirsiniz (ömür boyu lisans, para garantisi geri garanti ve bağlı kuruluş programı yoktur). Şimdi, barba.js’yi oksijen üreticisi ile yapılan WordPress sitesine nasıl gireceğine bakalım . Bu aslında oldukça basit ve kütüphanenin karmaşıklığını hatırlamak şaşırtıcı. Barba.js kullanarak WordPress sitesine bir sayfa geçişi ekleyin Oxygen Builder ile bir WordPress web sitesi oluştururken, genellikle siteye başlıklar ve altbilgi uygulayan bir catchall şablonunuz vardır. Depolama şablonunda, altbilgideki başlıklar arasında, iç içeriğin bir bileşenidir. Bu içerik bileşeni, bir şablon yüklerken gerçek sayfayı çağırır. Her sayfanın kendi şablonu olabilir (kategoriler, arşivler ve aklınıza gelebilecek her şey).
Kaynak ancak oksijen üreticisinin güzelliği, PHP’nin nasıl çalıştığını anlamaya gerek kalmadan bile tüm sayfalarınız üzerinde tam kontrole sahip olmanızdır. Ve bu basitlik, barba.js eklemek, WordPress sayfamız arasında yüksek kaliteli bir geçiş yapmak ve tüm müşterileri ve ziyaretçileri web sitemize etkilemek için kullanacağımız şeydir. Yine, bu JavaScript kütüphanenize nasıl uygulanacağına dair temel bir öğreticidir. WordPress sitesi, Barba.js ile daha fazla şey yapacağınıza dair bir öğretici arıyorsanız, başka bir yerde arama yapmalısınız. WordPress’e kütüphaneler eklemek için oksijen oluşturucu şablonunuzu hazırlayın, üstbilgiler ve footer catchall şablonlarını kullanacağız. Bunun nedeni, iki div’de web sitesine içerik sarmamız gerektiğidir. Bu aslında oldukça kolay.
… Değiştirilecek İçerik
İşte Oxygen Builder web sitesine nasıl uygulanacağının kısa bir diyagramı.
Gördüğünüz gibi, ambalajımıza sahibiz, daha sonra tüm javascript ve cdn barba.js içeren kodumuzu engelliyoruz, o zaman tüm içerik için bir kapsayıcı olan div’imiz var ve sonra div’de genellikle içerikte bir parça var bölüm. İlk Div Kimliği şu şekilde değiştirilir: #Barba-WRAPPER BLOK KODU ve CDN ve tüm geçiş kuralları içeren.
İkinci div yeni bir sınıf alır: Ve hepsi bu. Gördüğünüz gibi, oksijen üreticisini kullanarak barba.js eklemek kolaydır. Oksijen oluşturucu kullanmayan bir WordPress web siteniz varsa tema dosyalarını düzenlerken aynı genel yapıyı takip edebilirsiniz. Oradan, daha fazla kural, geçiş ve daha fazlasını yapabilirsiniz. Bu kodda yayınımızda yer alan geçiş çok basittir ve sayfanın vücudun arka planının rengine kaybolmasını sağlar. Daha karmaşık olan barba.js geçişleri SVG ekranları, daha fazla ayrı parça ve daha fazlasını içerebilir.
