Barba.js Kullanarak WordPress'e Sayfa Geçişleri Ekleme

Bu hızlı eğitimde, Barba.js , Oxygen Builder ve biraz manuel çalışma kullanarak WordPress'e sayfa geçişlerinin nasıl ekleneceğini tartışacağız.

Barba.js nedir?

Barba.js, web sitelerinizin sayfaları arasında akıcı ve yumuşak geçişler oluşturmanıza olanak tanıyan bir JavaScript kitaplığıdır. Bu geçişler, bir sonraki sayfaya geçiş yapmak kadar basit olabilir ve kullanıcı kenarda gezinirken öğelerin yenilerine dönüşmesi kadar karmaşık olabilir. Ne kullanırsanız kullanın, bu, herhangi bir WordPress web sitesine profesyonel bir alan ekleyen çok güzel bir kütüphanedir.

Ayrıca sayfalar arasındaki gecikmeyi azaltarak, HTTP isteklerini en aza indirerek ve kullanıcı deneyimini artırarak performansınızı artırır. Oxygen Builder'ı kullanarak WordPress'e entegre edilmesi oldukça basit olan inanılmaz derecede hafif bir kitaplık (sadece 9 kbs).

Neden Barba.js Ve Oksijen Oluşturucu?

Devam etmeden önce, Oxygen Builder ile oluşturulmuş WordPress web sitemize sayfa geçişleri ekleyeceğimizi anlamalısınız. Oxygen Builder, bir WordPress web sitesinin genel yapısını değiştirir.

Tipik olarak, düzinelerce PHP dosya şablonundan oluşan önceden hazırlanmış bir tema kullanırsınız. Oxygen Builder'ı kullanırken, WordPress temasını denklemden kaldırır ve web sitesini sıfırdan oluşturursunuz. Görsel bir oluşturucu kullanarak bir web sitesi oluşturmak için tamamen özel bir yol arıyorsanız, bu hem tasarım hem de geliştirme açısından gerçekten yararlıdır.

Tüm inşaatçılar arasında Oxygen Builder, bu nedenle geliştiriciler için en iyisidir. Barba.js'yi bir WordPress web sitesine dahil etmek söz konusu olduğunda, Oxygen Builder süreci son derece basitleştirir. Yine de Barba.js'yi bir temayla yapılmış geleneksel bir WordPress web sitesine dahil edebilirsiniz, ancak bu çok daha zordur ve web sitesini oluşturan gerçek PHP dosyalarına gitmenizi ve kendi kodunuzu eklemenizi gerektirir.

Bu konuda rahatsanız, bu eğiticiye devam edin ve Barba.js'nin temel uygulamasını bir WordPress web sitesinde anlayabileceksiniz.

WordPress web sitesini oluşturmak için Oxygen Builder kullanmıyorsanız ve kullanmıyorsanız, bunu bir kenara bırakmak isteyebilirsiniz. Veya Oxygen Builder'a bir göz atabilir ve kendiniz deneyebilirsiniz (ömür boyu lisans, para iade garantisi ve bağlı kuruluş programı yok).

Şimdi, Barba.js'nin Oxygen Builder ile oluşturulmuş bir WordPress web sitesine nasıl dahil edileceğine bir göz atalım. Aslında oldukça basit ve kütüphanenin karmaşıklığı göz önüne alındığında bu şaşırtıcı.

Barba.js kullanarak bir WordPress web sitesine sayfa geçişleri ekleme

Oxygen Builder ile bir WordPress web sitesi oluştururken, genellikle üstbilgiyi ve altbilgiyi siteye uygulayan kapsamlı bir şablona sahip olursunuz. bu catchall şablonunda, altbilgideki üstbilgi arasında bir iç içerik bileşeni bulunur. Bu Inter içerik bileşeni, şablon yüklenirken asıl sayfayı çağırır. Her sayfanın kendi şablonu olabilir (kategoriler, arşivler ve aklınıza gelebilecek her şey gibi).

Ancak Oxygen Builder'ın güzelliği, PHP'nin nasıl çalıştığını anlamanıza gerek kalmadan tüm sayfa şablonlarınız üzerinde tam kontrole sahip olmanızdır. Barba.js'yi eklemek, WordPress sayfalarımız arasında yüksek kaliteli geçişler oluşturmak ve tüm müşterilerimizi ve web sitesi ziyaretçilerini etkilemek için kullanacağımız şey bu basitliktir.

Yine, bu JavaScript kitaplığını WordPress web sitenize nasıl uygulayacağınıza dair temel bir eğitimdir, Barba.js ile gelişmiş şeylerin nasıl yapılacağına dair bir eğitim arıyorsanız, başka bir yere bakmalısınız.

Oksijen Oluşturucu şablonunuzu ayarlayın

Kitaplığı WordPress'e eklemek için bir üstbilgi ve altbilgi yakalama şablonu kullanacağız. Bunun nedeni, web sitesinin iç içeriğini iki Div'e sarmamız gerektiğidir. bu aslında oldukça kolaydır.

Ayrıca Oxygen Builder'a özgü bir kod bloğu bileşeni kullanacağız ve bir CDN'den Barba.js kitaplığını ekleyip başlatacağız.

Barba.js kitaplığını herhangi bir web sitesine eklerken iki Div eklemeniz gerekir. ilki, tüm içeriği çevreleyen bir sarmalayıcıdır. İkincisi, sayfa geçişleri sırasında canlandırılmasını istediğiniz içeriğin içinde bulunduğu bir kapsayıcıdır.

 <div> <div class="barba-container"> ... content to be changed </div> </div>

İşte bir Oxygen Builder web sitesine tam olarak nasıl uygulandığının hızlı bir diyagramı.

Gördüğünüz gibi, sarmalayıcımız var, ardından tüm JavaScript ve CDN Barba.js'yi içeren kod bloğumuz, ardından tüm içeriğin kapsayıcısı olan DIV'imiz var ve sonra bu DIV içinde genellikle bir iç içerik bölümü.

İlk DIV kimliği şu şekilde yeniden adlandırıldı: #barba-wrapper

Kod Bloğu, tüm geçiş kurallarının yanı sıra CDN'yi de içerir.

 <script src="https://unpkg.com/@barba/core"></script> <!-- load gsap animation library (minified version) --> <script src="https://unpkg.com/[email protected]/dist/gsap.min.js"></script> <!-- init barba with a simple opacity transition --> <script type="text/javascript"> barba.init({ transitions: [{ name: 'opacity-transition', leave(data) { return gsap.to(data.current.container, { opacity: 0; transition-duration: 5000ms; }); }, enter(data) { return gsap.from(data.next.container, { opacity: 0; transition-duration: 5000ms; }); } }] }); </script>

İkinci DIV yeni bir sınıf alır: .barba-container

Tüm sayfa içeriği "iç içerik bloğu" bu DIV'ye eklenir.

Ve bununla ilgili. Gördüğünüz gibi Barba.js'yi Oxygen Builder kullanarak WordPress'e eklemek gerçekten çok kolay. Oxygen Builder kullanmayan bir WordPress web siteniz varsa, tema dosyalarını düzenlerken aynı genel yapıyı takip edebilirsiniz. Bundan, gelişmiş kurallar, geçişler ve daha fazlasını oluşturabilirsiniz.

Gönderimizde bu kodun içerdiği geçiş çok basittir ve sayfanın gövde arka plan rengine dönmesini sağlar.

Daha karmaşık Barba.js geçişleri, SVG ekranlarını, daha fazla bireysel bölümü ve daha fazlasını içerebilir.

Çözüm

Bu hızlı öğretici, Oxygen Builder'ı kullanarak Barba.js'yi WordPress'e eklemek için atabileceğiniz genel adımları size göstermiş olmalıdır. Görsel oluşturucuda web sitenizin her yönünü kontrol edebildiğiniz için, içeriğinizi bu etiketlerde rap yapmayı gerçekten kolaylaştırır. Oxygen Builder'ınız yoksa ve WordPress'e Barba.js eklemek istiyorsanız, bu biraz daha karmaşık hale gelir ancak bu makalede özetlenen genel ilkeleri takip edebilir ve sarmalayıcıları temanıza uygulayabilirsiniz.

Herhangi bir sorunuz varsa, yorumlarda bize ulaşmaktan çekinmeyin. Bunu da beğendiyseniz sağdaki butonları kullanarak paylaşın!