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

WordPress sitenize bir ön yükleyici animasyonu eklemek ister misiniz?

Ön yükleyici, arka planda yüklenen bir sayfanın ilerleme durumunu gösteren bir animasyondur. Bu, ziyaretçilerin sayfanın yüklendiğini bilmesini sağlayarak kullanıcı deneyimini iyileştirebilir ve hemen çıkma oranınızı azaltabilir.

Bu makalede, WordPress’e nasıl ön yükleyici ekleyeceğinizi adım adım göstereceğiz.

Ön Yükleyici Animasyonu Nedir ve Neden WordPress’e Eklenmelidir?

Ön yükleyici, bir sayfanın yüklenmesini beklerken gördüğünüz bir animasyondur. Kullanıcılara web sayfasının hala hazır olduğunu söyler ve sabırla beklemelerini ister. Yükleme tamamlandığında, ön yükleyici kaybolur ve kullanıcılar web sayfasını normal şekilde görebilirler.

İşte yeni bir yazı eklerken ve WordPress’te önizleme yaparken ön yükleyici animasyonunun bir örneği:

Bir ön yükleyici eklemek isteyebileceğiniz bir senaryo, web sayfanızda çok sayıda resim veya video yerleştirmesi olmasıdır. Bu durumda, sayfanızın yüklenmesi normalden daha uzun sürecektir ve kullanıcıların sayfanın tamamen görünmesi için yeterince uzun süre kalmasını istersiniz.

Sayfanızda çok fazla ağır öğe yoksa, web sitenizin hızını ve performansını artırmaya odaklanmak daha iyidir. Ayrıca daha iyi bir WordPress barındırma sağlayıcısına geçmek isteyebilirsiniz.

Bununla birlikte, WordPress web sitenize nasıl kolayca bir ön yükleyici ekleyebileceğinize bakalım. Kullanmak istediğiniz yönteme doğrudan atlamak için aşağıdaki hızlı bağlantıları kullanmanız yeterlidir:

Yöntem 1: WP Smart Preloader ile WordPress’e Ön Yükleyici Ekleme (Kolay Yöntem)

WordPress’e ön yükleyici eklemenin en kolay yolu WP Smart Preloader kullanmaktır. Bu eklentide kullanabileceğiniz altı yerleşik ön yükleyici animasyonu vardır veya özel HTML ve CSS kullanarak kendi animasyonlarınızı oluşturabilirsiniz.

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

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

Eklenti seçtiğiniz animasyonun bir önizlemesini gösterecektir, böylece hangisini en çok sevdiğinizi görmek için farklı ön yükleyiciler seçebilirsiniz.

Varsayılan olarak, animasyon WordPress web sitenizin tamamında görünecektir, ancak tercih ederseniz, yalnızca ana sayfanızda kullanabilirsiniz. ‘Sadece 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 ilerleyin. 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ışacaktır, ancak isterseniz farklı bir sayı yazabilirsiniz.

Varsayılan olarak, animasyonun tamamen sönmesi 2500 milisaniye veya 2,5 saniye sürecektir. Bunu değiştirmek için ‘Sönecek Yükleyici’ alanına daha büyük veya daha küçük bir sayı yazmanız yeterlidir.

Ön yükleyicinin nasıl ayarlandığından memnun olduğunuzda, ayarlarınızı kaydetmek için ‘Değişiklikleri Kaydet’ düğmesine tıklamanız yeterlidir.

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

Yöntem 2: LoftLoader ile WordPress’e Ön Yükleyici Ekleme (Daha Özelleştirilebilir)

WordPress web sitenize ön yükleyici animasyonu eklemenin bir başka yolu da LoftLoader kullanmaktır. Bu eklenti yerleşik animasyonlarla birlikte gelir ve ön yükleyiciyi birçok farklı şekilde özelleştirmenize olanak tanır.

Yapmanız gereken ilk şey LoftLoader eklentisini kurmak ve etkinleştirmektir. Daha fazla ayrıntı için WordPress eklentisi yükleme hakkındaki başlangıç kılavuzumuza bakın.

Etkinleştirmenin ardından, eklenti ayarlarını yapılandırmak için Ayarlar ” LoftLoader Lite bölümüne gidin. LoftLoader Lite, WordPress tema özelleştirici ile entegre olduğundan bu ekran tanıdık gelecektir.

Başlamak için ‘Göster’e tıklayın. Bu ekranda, aynı ön yükleyiciyi WordPress blogunuzun tamamında mı yoksa yalnızca ana sayfada mı kullanmak istediğinizi seçebilirsiniz.

Örneğin, ana sayfanızda sitenizin geri kalanına kıyasla çok sayıda resim ve video varsa, ön yükleyiciyi yalnızca özel ana sayfanızda göstermek mantıklı olabilir.

Kararınızı verdikten sonra, ana ayarlar sayfasına dönmek için ‘Geri’ okuna tıklayın.

Ardından, ‘Arka Plan’ seçeneğine tıklayın.

Burada, ‘Renk Seç’ kutusuna tıklayarak arka plan rengini değiştirebilirsiniz. Ayrıca arka planın opaklığını değiştirebilir ve ‘Soldur’ veya ‘Yukarı ve Aşağı Kaydır’ gibi yeni bir bitiş animasyonu seçebilirsiniz.

Siz değişiklik yaptıkça önizleme güncellenir, böylece neyin en iyi göründüğünü görmek için farklı ayarları deneyebilirsiniz. Arka plan ayarlarından memnun olduğunuzda ‘Geri’ okuna tıklayın.

Ardından, ‘Yükleyici’ seçeneğine tıklayarak animasyonu değiştirebilirsiniz.

‘Yükleyici Animasyonu’ kutusundaki farklı küçük resimlere tıklayarak yeni bir animasyon seçebilirsiniz. Ön yükleyicinin rengini değiştirmek için ‘Renk Seç’ kutusundan yeni bir renk seçmeniz yeterlidir.

Bunu yaptıktan sonra, ‘Geri’ okuna tıklayın.

Ardından, ‘Daha Fazla’ menü seçeneğine tıklayın. Burada, ‘Maksimum Yükleme Süresi’ni seçerek animasyonun ne kadar süreyle oynatılacağını değiştirebilirsiniz.

Daha sonra ön yükleyicinin ne kadar süreceğini yazabilirsiniz.

Daha sonra, özellikle daha uzun bir Maksimum Yükleme Süresi kullanıyorsanız, kullanıcılara animasyonu kapatmaları için bir yol vermek isteyebilirsiniz. Bir çıkış düğmesi eklemek için ‘Kapat Düğmesi’ne tıklayın ve ardından düğmenizi yapılandırmak için ayarları kullanın.

Düğmenin nasıl ayarlandığından memnun olduğunuzda, ön yükleyicinizi canlı hale getirmek için ‘Yayınla’ düğmesine tıklamanız yeterlidir.

Şimdi, yeni ön yükleyiciyi çalışırken görmek için web sitenizi ziyaret edebilirsiniz.

WordPress Sitenizin Performansını Artırmak için Nihai Kılavuzlar

Ön yükleyici animasyonu, gerçek hız değişmemiş olsa bile daha hızlı yükleme süreleri izlenimi verebilir. Ancak web sitenizin performansını optimize etmek için uzun vadeli bir çözüm değildir.

Bu nedenle, en iyi hız optimizasyonu uygulamalarını takip etmenizi öneririz. Siteniz büyüdükçe, kullanıcıların sitenizden çıkmasını önlemek için bir ön yükleyici yeterli olmayacaktır.

Web sitenizin performansını artırmak için aşağıdaki kılavuzlara göz atın:

• WordPress Performansını Hızlandırmak için Nihai Kılavuz
• Web Sitenizi Hızlandırmak için En İyi WordPress Önbellek Eklentileri
• En Hızlı WordPress Hosting Sağlayıcıları (Performans Testleri ile)
• Görüntüler Kaliteden Ödün Vermeden Web İçin Nasıl Kolayca Optimize Edilir?
• WordPress Web Siteniz İçin Videolar Nasıl Optimize Edilir?

Umarız bu makale WordPress’e nasıl ön yükleyici animasyonu ekleyeceğinizi öğrenmenize yardımcı olmuştur. Ayrıca WordPress ile açılış sayfası oluşturma kılavuzumuza veya en iyi sürükle-bırak WordPress sayfa oluşturucuları için uzman seçimlerimize göz atmak isteyebilirsiniz.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.