WordPress'e Ön Yükleyici Animasyonu Nasıl Eklenir (Adım Adım)

Bir web sitesi yüklenirken görünen o dönen simgeyi veya animasyonu hiç fark ettiniz mi? İşte bu bir yükleme öncesi animasyonudur ve WordPress projelerinizde kullanabileceğiniz kullanışlı bir araçtır.

Yükleyiciler gerçek bir amaca hizmet eder. İçeriği yoğun sitelerde, ziyaretçileri o kritik yükleme saniyeleri boyunca meşgul tutarlar, bu da hemen çıkma oranlarını azaltabilir.

Ve iş siteleri için markalı bir ön yükleyici, profesyonel bir dokunuş bile katabilir.

Bunun karmaşık geldiğini düşünüyorsanız, endişelenmeyin. Tüm beceri seviyelerindeki kullanıcılar için uygun, bir WordPress ön yükleyici animasyonu eklemek için 2 yöntem geliştirdik.

WordPress'e Bir Yükleyici Animasyonu Neden Eklenir?

Ön yükleyici, bir sayfanın yüklenmesini beklerken gördüğünüz bir animasyondur. Kullanıcılara web sitesinin çalıştığını bildirir ve sabırla beklemelerini ister.

İçerik hazır olduğunda, ön yükleyici kaybolur ve ziyaretçi siteyi normal şekilde gezebilir. İşte bu WordPress tasarım öğesinin bir örneği:

Sayfanız büyük resimler veya video yerleştirmeleri içeriyorsa bir yükleme animasyonu eklemek isteyebilirsiniz. Bunların yüklenmesi daha uzun sürdüğü için, ön yükleyici kullanıcıları meşgul tutar, böylece erken ayrılmazlar.

Ancak, yalnızca kötü performansı gizlemek için ön yükleyicileri kullanmamalısınız.

Bunu söyledikten sonra, WordPress web sitenize kolayca bir sayfa yükleme animasyonu eklemenin yollarına bakalım. Kullanmak istediğiniz yönteme doğrudan atlamak için aşağıdaki hızlı bağlantıları kullanmanız yeterlidir:

WP Smart Preloader ile Basit Bir Yükleme Animasyonu Nasıl Eklenir

WordPress'e bir ön yükleme animasyonu eklemenin kolay bir yolu WP Smart Preloader kullanmaktır.

Çok fazla ayarla uğraşmadan hızlı ve kolay bir çözüm istiyorsanız bu eklenti harika bir seçimdir.

Bunun nedeni, kullanabileceğiniz 6 yerleşik WordPress ön yükleyici animasyonuna sahip olması ve animasyonu etkinleştirmek için çok fazla ayar yapılandırmanıza gerek olmamasıdır.

Yapmanız gereken ilk şey WP Smart Preloader eklentisini kurmak ve etkinleştirmektir. Daha fazla ayrıntı için, WordPress eklentisinin nasıl kurulacağına dair adım adım kılavuzumuza bakın.

Etkinleştirdikten sonra, Ayarlar » WP Smart Preloader'a gidin ve ardından 'Smart Preloader' açılır menüsünü açın. Bu, kullanabileceğiniz farklı animasyonların tümünü gösterir.

Eklenti, seçtiğiniz animasyonun bir önizlemesini gösterecektir, böylece hangisinin en iyisi olduğunu görmek için farklı ön yükleyiciler seçebilirsiniz.

Varsayılan olarak, animasyon WordPress web sitenizde görünecektir, ancak isterseniz yalnızca ana sayfanızda kullanabilirsiniz. Sadece 'Yalnızca Ana Sayfada Göster' kutusunu işaretleyin.

Kendi CSS animasyonunuzu oluşturmak istiyorsanız, kodunuzu 'Özel CSS' kutusuna yazmanız yeterlidir.

Başka bir seçenek de ‘Özel Animasyon’ kutusuna kod ekleyerek özel bir HTML5 animasyonu oluşturmaktır.

Bir animasyon seçtikten sonra, 'Yükleyiciyi Gösterme Süresi' bölümüne gidin. Burada, ön yükleyicinin ne kadar süreyle oynatılacağını değiştirebilirsiniz. 

Varsayılan seçenek 1500 milisaniye veya 1,5 saniyedir. Bu çoğu site için iyi çalışmalıdır, ancak isterseniz farklı bir sayı yazabilirsiniz.

Varsayılan olarak, animasyon tamamen solması 2500 milisaniye veya 2,5 saniye sürecektir. Bunu değiştirmek için, 'Solacak Yükleyici' alanına daha büyük veya daha küçük bir sayı yazmanız yeterlidir.

Ön yükleyicinin kurulumundan memnun kaldığınızda, ayarlarınızı kaydetmek için 'Değişiklikleri Kaydet' düğmesine tıklamanız yeterlidir.

Artık ön yükleyicinin çalışırken görünmesi için WordPress blogunuzu veya web sitenizi ziyaret edebilirsiniz.

Safelayout Cute Preloader ile Özelleştirilebilir Bir Yükleme Animasyonu Nasıl Eklenir

İlk eklenti, WordPress'e bir yükleme animasyonu eklemeyi kolaylaştırır. Ancak, markanızla eşleşmesi için tasarıma daha fazla hakimiyet istiyorsanız, Safelayout Cute Preloader'ı inceleyebilirsiniz.

Başlamak için, eklentiyi WordPress yönetici alanınıza kurun ve etkinleştirin. Daha fazla ayrıntı için, WordPress eklentisinin nasıl kurulacağına dair kılavuzumuza bakın.

Eklenti etkinleştirildikten sonra, kurulumuna başlamak için Ayarlar » Safelayout Ön Yükleyici bölümüne gidin.

Adım 1: Ön Yükleyiciyi Etkinleştirin ve Bir Hazır Ayar Seçin

İlk olarak, ön yükleyiciyi açmanız ve sitenizde nerede görüneceğine karar vermeniz gerekir.

Önceden hazırlanmış bir tasarım seçmek için 'Presetler' sekmesinden başlayabilirsiniz. Birini beğenirseniz, şablonun altındaki 'Bu ön yükleyiciye ayarları değiştir' düğmesine tıklamanız yeterlidir.

Ardından, 'Görüntü ayarları' sekmesine geçin.

Burada, eklentinin çalıştığından emin olmak için 'Safelayout Cute Preloader'ı Etkinleştir' kutusunu işaretlemeniz gerekir.

Ardından, ön yükleyicinin nerede gösterileceğini seçmek için 'Göster' açılır menüsünü kullanın. Bu eğitim için 'Tüm web sitesi'ni seçeceğiz.

Bu ekranda animasyonun süresini de ayarlayabilirsiniz.

• Minimum Yükleme Süresi: Ön yükleyicinin görüneceği en kısa süreyi ayarlar. Sayfanız anında yüklenirse bile markalı animasyonunuzun en azından bir süre görünmesini sağlamak istiyorsanız kullanışlıdır.
• Maksimum Yükleme Süresi: Bu, ön yükleyicinin ne kadar süreyle görünür olacağını belirler. Bu, sayfanız bir yükleme hatasıyla karşılaşırsa kullanıcıların ön yükleyiciyi izlemek zorunda kalmamasını sağlamak için bir güvenlik ağı görevi görür ve ön yükleyiciyi otomatik olarak gizler.

Ayrıca birkaç saniye geçtikten sonra bir 'Kapat' düğmesi göstermeyi de seçebilirsiniz. Değişikliklerinizi yaptıktan sonra 'Değişiklikleri Kaydet'e tıklamanız yeterlidir.

Adım 2: Core Animation'ı Özelleştirin

Şimdi, animasyonun kendisinin görünümünü tasarlayabilirsiniz. Bu, arka planı, ana simgeyi ve isteğe bağlı bir ilerleme çubuğunu içerir.

Öncelikle 'Arka Plan' sekmesine gidin.

Burada bir animasyon efekti seçebilir, arka plan rengini değiştirebilir ve opaklığını ayarlayabilirsiniz.

Özel bir arka plan efekti istemiyorsanız, 'Arka Plan Yok' seçeneğini seçin.

Ardından, 'İlerleme Çubuğu' sekmesine tıklayın.

Bir ilerleme çubuğu, ziyaretçilere sayfanın yüklendiğini göstermenin harika bir yoludur.

Bir şekil seçebilir ve ardından rengini, konumunu ve boyutunu özelleştirebilirsiniz.

İstemiyorsanız, sadece 'İlerleme Çubuğu Yok' seçeneğini seçin.

Bundan sonra, 'Simge' sekmesine gidin.

Bu, dönen bir daire gibi ana animasyonlu grafiktir.

Bir simge seçebilir ve ardından boyutunu, rengini ve animasyon stilini değiştirebilirsiniz. Bir simgenin diğer ayarlarınızla birlikte fazla olduğunu düşünüyorsanız, 'Simge Yok' seçeneğini seçebilirsiniz.

Her sekmeyi özelleştirmeyi bitirdiğinizde ‘Değişiklikleri Kaydet’ düğmesine tıklamayı unutmayın.

Adım 3: Markalamanızı ve Metninizi Ekleyin

Son olarak, ön yükleyicinin markanızla mükemmel uyum sağlaması için logonuzu ve özel metninizi ekleyebilirsiniz.

'Marka Görünümü' sekmesine gidin ve logonuzu eklemek için 'Markayı göster' kutusunu işaretleyin.

Ardından, logo resminizi yüklemek için 'Medya Kütüphanesi' düğmesine tıklayın.

Ardından, logonun konumunu ve kenar boşluklarını, diğer öğelerle güzelce uyum sağlayacak şekilde ayarlayabilirsiniz.

Sonra, 'Sayaç' sekmesine bakalım.

Bu ayar, yükleme ilerlemesini göstermek için %0 ile %100 arasında bir yüzde gösterir. Bunu etkinleştirebilir ve konumunu, rengini ve yazı tipi boyutunu özelleştirebilirsiniz.

Son olarak, ‘Metin’ sekmesine gidin. Varsayılan olarak, ön yükleyici ‘Yükleniyor…’ metnini gösterir, ancak bunu daha yaratıcı bir şeye değiştirebilirsiniz.

'Metni göster' kutusunu işaretleyin, kendi mesajınızı yazın ve yazı tipini, rengini ve konumunu özelleştirin.

İşiniz bittiğinde, 'Değişiklikleri Kaydet' düğmesine tıklayın.

Ve işte bu kadar! Ön yükleyici animasyonunuz artık yapılandırmalarınıza göre görünecektir. Hareket halindeyken görmek için sitenizi mobil, masaüstü veya tablette görüntüleyebilirsiniz.

Bizimki şöyle görünüyor:

WordPress Ön Yükleyicileri Hakkında Sıkça Sorulan Sorular

Yıllar boyunca birçok okuyucumuz ön yükleyicileri kullanma hakkında bize sorular sordu. İşte en yaygın sorulardan bazılarına verilen yanıtlar.

Ön yükleyiciler web sitesi hızını etkiler mi?

Hayır, bir ön yükleyici web sitenizin daha hızlı yüklenmesini sağlamaz. Tarayıcı içeriğinizi indirirken ziyaretçileri eğlendirmek için tamamen görsel bir araçtır.

Sitenizin hızını gerçekten iyileştirmek için önbelleğe alma, resimleri optimize etme ve hızlı bir barındırma sağlayıcısı kullanmaya odaklanmalısınız.

Yükleme öncesi animasyonlar SEO için kötü mü?

Doğru uygulandığında, sorun olmaz. Ancak, Google'ın Temel Web Önemlileri, özellikle En Büyük İçerik Boyama (LCP) konusunda dikkatli olmalısınız.

Ön yükleyiciniz ekranda çok uzun süre kalırsa, Google ana içeriğinizin henüz yüklenmediğini düşünebilir. Bu, sıralamanızı olumsuz etkileyebilir. Animasyon süresini 1,5 ila 2 saniyenin altında tutmanızı öneririz.

Ön yükleyicim dönmeyi durdurmuyor. Bunu nasıl düzeltebilirim?

Ön yükleyiciniz takılırsa, bu genellikle bir önbelleğe alma eklentisi çakışmasından kaynaklanır. WP Rocket gibi eklentilerde genellikle 'JavaScript Yürütmesini Geciktir' özelliği bulunur.

Bu özellik, ön yükleyicinin kodunun çalışmasını durdurur, bu nedenle sayfanın yüklenmesinin bittiği sinyalini asla almaz. Bunu düzeltmek için, ön yükleyici eklentisinin dosyalarını önbelleğe alma eklentinizdeki JavaScript gecikme ayarlarından hariç tutmalısınız.

Yalnızca belirli sayfalarda ön yükleyici kullanabilir miyim?

Evet, kesinlikle. Çoğu ön yükleyici eklentisi, animasyonun nerede görüneceğini seçmenize olanak tanır.

Bunu tüm sitede, yalnızca ana sayfada veya daha uzun yükleme süreleri beklediğiniz belirli gönderilerde ve sayfalarda bile etkinleştirebilirsiniz.

Yükleyici ile açılış sayfası arasındaki fark nedir?

Bir ön yükleyici, içeriğiniz yüklenirken oynar ve otomatik olarak kaybolur.

Splash sayfası, kullanıcının ana web sitesine girmek için bir bağlantıya veya düğmeye tıklamasını gerektiren ayrı, tanıtıcı bir ekrandır.

Açılır sayfaların kullanımını genellikle önermiyoruz çünkü ziyaretçiler için ek bir adım oluştururlar ve hemen çıkma oranınız ile SEO üzerinde olumsuz bir etkiye sahip olabilirler.

Web Sitenizin Ziyaretçilerini Etkileyecek Daha Fazla WordPress Hilesi

Bir ön yükleyici animasyonu eklemek, WordPress sitenizi geliştirmek için birçok yoldan yalnızca biridir. İzleyicilerinizi büyülemek için daha yaratıcı fikirler arıyorsanız, size yardımcı olabiliriz:

• Herhangi Bir WordPress Temasına Paralaks Efekti Nasıl Eklenir – Bu kaydırma illüzyon tekniğiyle derinlik ve görsel ilgi yaratın.
• WordPress Blogunuza Nasıl Kolayca Kar Taneleri Eklenir – Sitenize kış büyüsü dokunuşuyla ziyaretçilerinizi memnun edin.
• WordPress Web Sitenize Nasıl Kolayca Karanlık Mod Eklenir – Bu popüler özellik ile daha rahat bir gezinme deneyimi sunun.
• WordPress Sitenize Cadılar Bayramı Efektleri Getirmenin Yolları – Sitenizi bu eğlenceli ve şenlikli Cadılar Bayramı hileleriyle ürkütücü hale getirin.
• WordPress'te Hareketli Arka Plan Nasıl Eklenir – Göz alıcı hareketli arka planlarla cesur bir ifade oluşturun.
• WordPress'te YouTube Videosunu Tam Ekran Arka Plan Olarak Ekleme – Dinamik video arka planlarıyla güçlü bir ilk izlenim yaratın.
• WordPress Sitenize Sonsuz Kaydırma Nasıl Eklenir (Adım Adım Kılavuz) – Ziyaretçiler kaydırdıkça daha fazla içeriği sorunsuz bir şekilde yükleyerek etkileşimde kalın.

Umarız bu makale, WordPress sitenize kolayca bir ön yükleyici animasyonu eklemeyi öğrenmenize yardımcı olmuştur. Ayrıca WordPress'teki en iyi sürükle ve bırak sayfa oluşturucuları hakkındaki uzman seçimlerimize ve WordPress web sitesi nasıl düzenlenir hakkındaki eksiksiz kılavuzumuza da göz atmak isteyebilirsiniz.

Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi ayrıca Twitter ve Facebook'ta da bulabilirsiniz.