WordPress'te Sayfa Yükleme Animasyonu (Ön Yükleyici) Nasıl Eklenir?

Sayfa hızı, web sitenizin performansında kritik bir rol oynar. Bir sayfanın tamamen yüklenmesi bir veya iki saniyeden uzun sürerse, bu, kullanıcıları sitenizden ayrılmalarına neden olacak kadar sinirlendirebilir. Ancak, sayfanın yüklenmesi tamamlanırken ziyaretçinin bakabileceği ilgi çekici bir şey olması yardımcı olabilir.

Sayfa yükleme animasyonu veya "ön yükleyici animasyonu", ziyaretçilere bir sayfanın yüklendiğini (sıkışmadığını) bildirmeye yardımcı olur ve sitede kalma olasılıklarını artırır. Bu sayede Kullanıcı Deneyimini (UX) iyileştirebilir ve hemen çıkma oranlarınızı düşürebilir.

Bu gönderide, ön yükleyici animasyonlarının faydalarını ve ne zaman kullanılacağını açıklayacağız. Ardından, bir WordPress sayfa yükleme animasyonu ekleme seçenekleriniz arasında size yol göstereceğiz. Başlayalım!

Ön Yükleyici Animasyonu Nedir?

Bir ön yükleyici animasyonu, kullanıcılara bir sayfanın aktif olarak yüklendiğini bildirir. Bir seferde yalnızca belirli içerik parçalarını yükleyen sayfalar için ilerleme göstergesi olarak kullanılabilecek basit bir animasyon.

WordPress ön yükleyicileri, ziyaretçilere sayfanın tamamının yüklenmesini beklerken saniyeler içinde bakabilecekleri daha eğlenceli ve ilginç şeyler sunar. Bazı durumlarda, ne kadar süre kaldığına dair bir tahmin bile sunabilirler.

Ne Zaman Ön Yükleyici Kullanmalıyım?

Yüklemesi normalden biraz daha uzun süren, video veya resim ağırlıklı bir WordPress siteniz olduğunda ön yükleyici akıllıca bir seçimdir. Bu şekilde, ziyaretçiler sitenizin amaçlandığı gibi çalıştığından ve bozuk olmadığından emin olacaktır.

Ancak, siteniz çoğunlukla metin tabanlıysa, ön yükleyici animasyonu gerekli olmayabilir. Bunun yerine, sayfa hızınızı artırmaya odaklanmak daha mantıklı olacaktır.

WordPress'e Sayfa Yükleme Animasyonu Eklemek için 2 Seçenek

Sitenize bir WordPress ön yükleyici animasyonu eklemek için kullanabileceğiniz iki ana yöntem vardır. Daha kolay bir seçenek olan bir eklenti kullanabilir veya görevi manuel olarak gerçekleştirebilirsiniz. Her iki yönteme nasıl başlayacağınıza bir göz atalım.

1. Seçenek: Eklenti Kullanarak Ön Yükleyici Animasyonu Ekleme

Bir eklenti aracılığıyla bir önyükleyici animasyonu eklemek, çoğu kullanıcı için daha hızlı ve daha kolay bir seçenektir. Kullanabileceğiniz bir avuç eklenti var, ancak WP Smart Preloader'ı öneriyoruz:

Bu ücretsiz, son derece özelleştirilebilir bir eklentidir. İçerik yüklenirken kullanıcıların web sitenizden ayrılma riskini azaltmaya yardımcı olmak için CSS ve minimum HTML işaretlemesi kullanır. Aşağıdaki adımlarda, size nasıl çalıştığını göstereceğiz.

1. Adım: WP Smart Preloader'ı indirin

WP Smart Preloader eklentisini WordPress Eklenti Dizini aracılığıyla indirebilirsiniz. Ardından yönetici panosunda Eklentiler > Yeni Ekle > Eklenti Yükle'ye giderek .zip dosyasını WordPress sitenize yükleyebilirsiniz:

Başka bir seçenek de Eklenti > Yeni Ekle ekranındaki arama çubuğu aracılığıyla eklentiyi aramaktır:

Her iki durumda da, eklenti yüklendikten sonra Etkinleştir düğmesine tıklayın. Daha sonra seçeneklerini Ayarlar > WP Smart Preloader altında bulabilirsiniz.

2. Adım: Tarzınızı Seçin

WP Akıllı Ön Yükleyici Ayarları sayfasında yapılacak ilk şey, ön yükleyici için bir stil seçmektir. Ön Yükleyici Seç bölümünün altında, altı stil seçeneği arasından seçim yapmanızı sağlayan bir açılır menü ve özel animasyon için bir seçenek olacaktır:

Bir stil seçtikten sonra, onu aşağıdaki pencerede önizleyebilirsiniz. Kendi özel animasyonunuzu eklemek isterseniz HTML kodunuzu Özel Animasyon bölümü altına ekleyebilirsiniz:

Bu ekranın sonunda, yükleyicinin süresini ve 'fade out' efektini ayarlayabilirsiniz:

Bu alanları boş bırakırsanız, varsayılanlar sırasıyla 1500 milisaniye (1,5 saniye) ve 2500 milisaniye (2,5 saniye) olarak ayarlanacaktır. İşiniz bittiğinde, Değişiklikleri Kaydet düğmesine tıklayın.

3. Adım: Ön Yükleyici Animasyonunuzu Önizleyin

Ayarlarınızı yapılandırmayı tamamladığınızda, ön yükleyici animasyonunu önizlemek için WordPress sitenizi yeni bir tarayıcı sekmesinde ziyaret edin. Gerektiğinde stilistik değişiklikler yapmak için geri dönebilirsiniz. Ön yükleyiciden memnun olduğunuzda kurulur ve kullanıma hazır hale gelir.

2. Seçenek: Manuel Olarak Ön Yükleyici Animasyonu Ekleme

Bir eklenti kullanmakla ilgilenmiyorsanız, yine de bu özelliği sitenize manuel olarak ekleyebilirsiniz. Özel bir ön yükleyici oluşturmanın ana avantajı, nasıl tasarlanacağı konusunda daha fazla esnekliğe sahip olmanızdır.

Tabii aynı zamanda daha zor bir süreç. Ardından, WordPress siteniz için özel bir ön yükleyici animasyonunu nasıl oluşturacağınızı, yükleyeceğinizi ve biçimlendireceğinizi anlatacağız.

1. Adım: Animasyonunuz İçin Beyin Fırtınası Yapın

İlk adım, ne tür bir animasyon kullanacağınıza karar vermektir. Beğendiğiniz stil hakkında bir fikir edinmek için diğer ön yükleyici animasyon araçlarını araştırabilirsiniz. Codepen'de kullanabileceğiniz ve keşfedebileceğiniz bazı ücretsiz animasyonlar var, bu da bazı fikirler edinmenin harika bir yolu olabilir.

2. Adım: Animasyonunuzu Geliştirin veya İndirin

Animasyonunuzu geliştirmek için Photoshop gibi bir araç kullanarak bir GIF veya dönen bir ön yükleyici animasyonu oluşturabilirsiniz. CSS kullanarak WordPress animasyonları oluşturma konusundaki kaynağımıza da başvurabilirsiniz.

WordPress sitenize bir GIF ön yükleyici eklemek en iyi şekilde bir eklenti ile yapıldığından, ikinci yaklaşımı öneririz. Codepen'e (yukarıda bahsedilen) ek olarak, Spinkit ve LoadLab gibi sitelerden bir animasyon da indirebilirsiniz.

Bu eğitim için, Spinkit'ten bir ön yükleyici animasyonu kullanacağız. Animasyonunuzu nereden aldığınıza bakılmaksızın, onu WordPress sitenize manuel olarak eklemek için CSS kaynak koduna ihtiyacınız olacak:

Çoğu ücretsiz önyükleyici animasyonu, hem HTML hem de CSS'sini bulabileceğiniz bir kaynak bağlantı içerir:

Bir önyükleyici animasyonundan CSS kaynak kodunu da kullanabileceğinizi ve daha sonra onu beğeninize göre özelleştirebileceğinizi unutmayın.

3. Adım: Bir Alt Tema Oluşturun

Animasyonunuzu aldıktan sonra, onu WordPress sitenize ekleyebilirsiniz. Bunu yapmanın en güvenli yolu, bir alt tema oluşturmaktır. Bunu nasıl yapacağınızdan emin değilseniz, bir WordPress alt temasının nasıl oluşturulacağına ilişkin eğitimimizi inceleyebilirsiniz.

4. Adım: Temanızın header.php Dosyasına HTML Kodu Ekleyin

Bir sonraki adım, WordPress temanız için header.php dosyasını bulmaktır. Bunu WordPress Tema Düzenleyici ekranından yapabilirsiniz:

FileZilla gibi bir FTP istemcisi kullanarak da dosyaları düzenleyebilirsiniz. Dosya, sitenizin kök dizinindeki wp-content> theme klasöründe bulunacaktır.

Dosyayı bulup açtıktan sonra, aşağıdaki HTML kodunu gövde etiketinin altına ekleyin:

 <!--CSS Spinner--> <div class="spinner-wrapper"> <div class="spinner"></div> </div>

Belirli WordPress ön yükleyici animasyonunuz için gerekli olan HTML kodunu ayarlayın veya ekleyin ve dosyayı kaydedin.

Adım 5: CSS Kodunu Stil Sayfanıza Ekleyin

Şimdi animasyonunuza stil vermek için CSS ekleme zamanı. WordPress temanız için CSS stil sayfasını ( style.css ) bulun, ardından animasyonunuz için CSS kaynak kodunu kopyalayıp yapıştırın. Bizim durumumuzda, aşağıdakileri ekleyeceğiz:

 .spinner { margin: 100px auto; width: 50px; height: 40px; text-align: center; font-size: 10px; } .spinner > div { background-color: #333; height: 100%; width: 6px; display: inline-block; -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; animation: sk-stretchdelay 1.2s infinite ease-in-out; } .spinner .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .spinner .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .spinner .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .spinner .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } @-webkit-keyframes sk-stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 20% { -webkit-transform: scaleY(1.0) } } @keyframes sk-stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); } 20% { transform: scaleY(1.0); -webkit-transform: scaleY(1.0); } }

Değişikliklerinizi kaydetmeden önce şu bölümü kaldırın: “margin: 100px auto;”. Onun yerine, aşağıdakileri kopyalayıp yapıştırın:

 position: absolute; top: 48%; left: 48%;

Ardından dosyayı kaydedebilirsiniz.

6. Adım: Animasyonun Çalışması İçin jQuey Kodu Ekleyin

Döndürücü önyükleyici animasyonunuzun çalışması için biraz jQuery eklemeniz gerekir. Bunu yapmak için, header.php dosyasına geri dönebilir ve kapanış gövdesi etiketinden önce aşağıdakini ekleyebilirsiniz:

 <script> $(document).ready(function() { //Preloader preloaderFadeOutTime = 500; function hidePreloader() { var preloader = $('.spinner-wrapper'); preloader.fadeOut(preloaderFadeOutTime); } hidePreloader(); }); </script>

Ardından dosyanızı kaydedin ve WordPress önyükleyici animasyonunun amaçlandığı gibi çalıştığından emin olmak için sitenizi önizleyin.

WP Engine'den Daha Fazla İpucu ve Kılavuz Bulun

Sitenize WordPress ön yükleyici animasyonları eklemek, ziyaretçilerin ilgisini çekmeye ve hemen çıkma oranlarını düşürmeye yardımcı olabilir. Ayrıca, işi hızlı bir şekilde halletmek için birden fazla seçeneğiniz var.

WP Engine'de, web sitenizin her zaman en iyi şekilde görünmesini sağlamanıza yardımcı olmak için geliştiricilere ipuçları, püf noktaları ve kaynaklar sağlamak bizim görevimizdir. Bugün planlarımız hakkında daha fazla bilgi edinin!