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?

Bir ön yükleyici veya sayfa yükleyici, bir sayfanın yüklenmesini beklerken gördüğünüz bir animasyondur. Kullanıcılara web sayfasının hala hazırlandığını söyler ve sabırla beklemelerini ister. Yükleme bittiğinde, ön yükleyici kaybolur ve ziyaretçi web sayfasını normal şekilde görebilir.

İşte bu WordPress tasarım öğesinin bir örneği:

Bir yükleme animasyonu eklemek isteyebileceğiniz bir senaryo, web sayfanızda çok sayıda büyük resim veya video yerleştirmesi varsa geçerlidir. Bu durumda, sayfanızın yüklenme süresi normalden daha uzun olacaktır ve kullanıcıların sayfanın tamamen görünmesi için yeterince beklemelerini istersiniz.

Sayfanızda çok fazla ağır öğe yoksa, web sitenizin hızını ve performansını iyileştirmeye odaklanmak daha iyidir. Ayrıca daha iyi bir WordPress barındırma sağlayıcısına yükseltmek isteyebilirsiniz.

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
• How to Add a Customizable Loading Animation With Safelayout Cute Preloader
• Frequently Asked Questions About WordPress Preloaders

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

WordPress'e ö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, bir WordPress eklentisinin nasıl kurulacağına dair adım adım kılavuzumuza bakın: bir WordPress eklentisinin nasıl kurulacağına dair adım adım kılavuz.

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şaretlemeniz yeterlidir.

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.

Ön yükleyicinin çalışırken görünmesi için artık 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ıza uyacak şekilde tasarım üzerinde daha fazla kontrol 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, bir WordPress eklentisinin nasıl kurulacağına dair kılavuzumuza bakın: WordPress eklentisi nasıl kurulur.

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, sadece 'Arka Plan Yok' seçeneğini belirleyin.

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?

Bir ön yükleyici kendi başına web sitenizi hızlandırmaz. Amacı, yükleme sürecini şık bir animasyonla gizleyerek kullanıcı deneyimini iyileştirmektir.

Sitenizin hızını gerçekten iyileştirmek için WP Rocket ile önbelleğe alma, resimlerinizi optimize etme ve yüksek performanslı bir barındırma sağlayıcısı kullanma gibi şeylere odaklanmalısınız.

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

Doğru uygulandığında, hafif bir ön yükleyici SEO'nuza zarar vermemelidir. Ancak, kötü kodlanmış veya ağır bir animasyon ilk sayfa yüklemesini yavaşlatabilir.

Bu, arama sıralamaları için önemli olan Core Web Vitals'ınızı olumsuz etkileyebilir. Anahtar, basit ve hızlı tutmaktır.

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 Kar Taneleri Eklemeyi Öğrenin – Sitenize kış büyüsü dokunuşuyla ziyaretçilerinizi memnun edin.
• WordPress Web Sitenize Karanlık Modu Kolayca Nasıl Ekleyebilirsiniz – Bu popüler özellik ile daha rahat bir gezinme deneyimi sunun.
• WordPress Sitenize Cadılar Bayramı Efektleri Getirmenin Yolları – Bu eğlenceli ve şenlikli Cadılar Bayramı hileleriyle sitenizi ürkütücü hale getirin.
• WordPress'te Animasyonlu Arka Plan Ekleme – 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ırmayı Nasıl Ekleyebilirsiniz (Adım Adım Kılavuz) – Ziyaretçileri kaydırdıkça daha fazla içeriği sorunsuz bir şekilde yükleyerek etkileşimde tutun.

Umuyoruz ki 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 bir WordPress web sitesini nasıl düzenleyeceğiniz hakkındaki kapsamlı rehberimize 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.