WordPress'e CSS Animasyonları Ekleme

Animasyonlar, web sayfalarınız için ilgi çekici ve görsel olarak ilginç bir özellik olabilir. Ancak, Flash veya JavaScript ile animasyon oluşturmak, sitenizin kaynaklarının önemli bir bölümünü tüketecektir.

Neyse ki, bunun yerine Basamaklı Stil Sayfaları (CSS) ile WordPress web sitenize animasyonlar ekleyebilirsiniz. Bu kodlama dili, sitenize sınırsız animasyon eklemenizi sağlar, ancak yine de nispeten ulaşılabilir ve öğrenmesi kolaydır.

Bu yazıda, CSS animasyonlarının nasıl çalıştığını ve web sitenize eklentili ve eklentisiz bir CSS animasyon özelliğinin nasıl ekleneceğini tartışacağız. Hadi hareketlenelim!

CSS Animasyonları Nasıl Çalışır? (Ve Neden Bunları Kullanmalısınız)

CSS3, kullanıcılara bir öğenin (örneğin bir resim veya düğme) stilini zaman içinde değiştirerek animasyonlar oluşturma fırsatı verir. Öğenin CSS özelliklerini istediğiniz kadar, istediğiniz kadar değiştirebilirsiniz.

Flash veya Javascript animasyonlarından farklı olarak, CSS animasyonları tarayıcı uyumluluğu sorunlarını ve karmaşık kodlamayı önler. Bu, düşük performans gibi olumsuz yan etkiler olmadan önemli özelliklere dikkat çekmenizi sağlar.

Eklenti ile CSS Animasyonları Ekleme

Kodlama becerilerinize güvenmiyorsanız, yanınızdayız. Bunun yerine bir eklenti ile kolayca CSS animasyonları oluşturabilirsiniz.

1. Adım: Bir CSS Animasyon Eklentisi Kurun ve Etkinleştirin

Başlamak için bir CSS animasyon eklentisi yüklemeniz gerekir. Blocks Animation kullanıyoruz: Gutenberg Blocks için CSS Animations, özellikle Block Editor için yapılmış nispeten yeni bir araç.

Bu eklentiyi, WordPress kontrol panelinizde Eklentiler > Yeni Ekle'ye giderek bulabilirsiniz. Bulduktan sonra, Şimdi Kur'a ve ardından Etkinleştir'e tıklayın:

Aktivasyon tamamlandıktan sonra, basit animasyonunuzu eklemek istediğiniz gönderiye veya sayfaya gidin.

2. Adım: Animasyonunuzu Tasarlayın

Ardından, canlandırmak istediğiniz öğeye tıklayın. Kenar çubuğunun Engelle sekmesinde, 1. Adımda eklentiyi etkinleştirdiğimizde eklenen Animasyon etiketli bölümü arayın . Burada birkaç farklı efekti listeleyen bir açılır menü göreceksiniz:

İçeriğinize uygun olanı bulmak için istediğiniz kadar animasyon seçeneğiyle oynayabilirsiniz.

3. Adım: Gecikme ve Hızı Özelleştirin

Blocks Animation eklentisi, animasyonunuzun Gecikmesini ve Hızını özelleştirmek için bir zamanlama işleviyle birlikte gelir:

Bu iki ayardan ilki animasyonun başlamasını erteler. Bu, sayfa yüklendikten sonra öğenize dikkat çekmeye yardımcı olabilir veya birazdan göstereceğimiz gibi, animasyonları kombinasyon halinde kullanmanıza olanak sağlayabilir. Animasyon gecikme özelliğini beş saniyeye kadar ayarlayabilirsiniz.

Hız açılır menüsünü kullanarak animasyonunuzu Yavaş, Daha Yavaş, Hızlı veya Daha Hızlı yapabilirsiniz. Daha yavaş bir animasyon ziyaretçiler için daha incelikli ve daha az rahatsız edici olabilirken, daha hızlı bir animasyon onların dikkatini çekmek için daha fazlasını yapacaktır.

4. Adım: Animasyonunuzu Kaydedin ve Önizleyin

Gönderinizi veya sayfanızı taslak olarak kaydetmenizi ve yayınlamadan önce animasyonlu öğenizi önizlemenizi öneririz. Bir sayfada birden çok CSS animasyonu ile çalışıyorsanız, animasyon adı özelliğini de kaydettiğinizden emin olun. Animasyonlar çok faydalı olabilse de, dikkati dağıtma ve sayfalarınızı darmadağın hissettirme potansiyeline de sahiptirler.

Sayfanızı önizlemek ve animasyonlarınızı nispeten basit tutmak, bu istenmeyen sonuçları önleyecektir. Aşağıda, animasyonlu bir görüntüyü önceki adımlarda şekillendirdiğimiz düğmeyle eşleştiren tamamlanmış CSS animasyon örneğimizi görebilirsiniz:

Animasyonunuzun içeriğinizin geri kalanına uymadığını veya istediğiniz efekte sahip olmadığını fark ederseniz, Blok Düzenleyiciye geri dönüp onu ayarlayabilirsiniz. Bir CSS animasyon eklentisi kullanmanın güzelliği buradadır – hızlı ve kolaydır.

Eklenti Olmadan CSS Animasyonları Ekleme

Temanızın dosyalarını düzenleme konusunda rahatsanız, eklenti olmadan manuel olarak özel animasyonlar oluşturabilirsiniz. Biraz kodlama bilgisi gerektirir, bu nedenle bu çözüm en iyi geliştirme deneyimi olanlara bırakılabilir.

Başlamadan önce sitenizi yedeklediğinizden emin olun. Ayrıca bir alt tema kullanmak da akıllıca olur, böylece ihtiyaç duyduğunuzda temanızın varsayılan dosyalarına kolayca dönebilirsiniz.

Adım 1: İlgili CSS Özelliklerini Anlayın

Herhangi bir düzenleme yapmadan önce, CSS animasyonları oluştururken akılda tutulması gereken sekiz önemli özellik vardır:

• @keyframes: Animasyon aracılığıyla öğeye uygulanacak stilleri belirtir.
• animasyon-adı: Kodunuzda başka bir yerde animasyona başvurmak için kullanabileceğiniz bir ad oluşturur.
• animasyon süresi: Animasyonun ne kadar süreyle çalışacağını tanımlar.
• animasyon gecikmesi: Sayfa yüklendikten sonra bir animasyonun başlamak için ne kadar beklemesi gerektiğini belirtir.
• animasyon-yineleme-sayısı: Animasyonun kaç kez çalışması gerektiğini not eder.
• animasyonlar-yön: Animasyonun hangi yönde çalışması gerektiğini belirtir.
• animasyon-zamanlama-fonksiyonu: Animasyonun hız eğrisini belirler.
• animasyon doldurma modu: Animasyon oynatılmadığında öğe için bir stil belirtir.
• animasyon: Ana kareleri öğelere bağlamak için bir kısayol özelliği.

Bu özelliklerden anlaşılması gereken en önemli şey 'ana kare'dir. Bu terim, ana karenin ana kare olarak adlandırıldığı ve diğerlerinin bu kareye girip çıkmak için çizildiği elle çizilmiş animasyon süreçlerinden gelir.

CSS animasyonunda ana kare, ne olduğunu ve ne zaman olduğunu belirtir. Bunu al, örneğin:

 @keyframes örneği {
 %0 {arka plan rengi: kırmızı;}
 %25 {arka plan rengi: sarı;}
 %50 {arka plan rengi: mavi;}
 %100 {arka plan rengi: yeşil;}
 }

Yukarıdaki ana kare, animasyonun yüzde 25'inde belirtilen öğenin arka plan renginin kırmızıdan sarıya değişeceğini belirtir. Yüzdeler genellikle animasyonun zamanlamasını tanımlamak için kullanılır. Ancak from ve to, sırasıyla %0 ve %100 yerine kullanılabilir.

2. Adım: animate.css Dosyanızı Oluşturun

CSS animasyonları eklemek için yukarıdaki özellikleri kullanarak tercih ettiğiniz metin düzenleyicide bir dosya oluşturmanız gerekir. Kullanmak istediğiniz herhangi bir animasyon için ana kareler içermelidir. Ardından, bunları sitenizdeki öğelere uygulayabilmeniz için belirli CSS sınıflarına bağlarsınız.

İşte bir örnek. Aşağıdaki kodda, önce bir öğeyi ekranın sağ tarafından kaydırmamızı sağlayacak olan transform ve görünürlük özelliklerini kullanarak bir CSS ana kare animasyonu oluşturuyoruz:

 @keyframes slideInRight {
itibaren {
-webkit-dönüşümü: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
görünürlük: görünür;
}
ile {
-webkit-dönüşümü: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}

Daha sonra bu animasyon karesini bir CSS sınıfına bağlamamız gerekir. Bu durumda, slideInRight olarak adlandırılmıştır. Bu kod, dosyadaki yukarıdaki ana karenin hemen sonrasına yerleştirilecektir:

 .slideInRight {
 -webkit-animasyon-adı: slideInRight;
 animasyon adı: slideInRight;
 }

İstediğiniz kadar animasyon oluşturmak için bu işlemi tekrarlayabilirsiniz. Ardından dosyayı animate.css olarak kaydedin. Alternatif olarak, popüler Animate.css dosyasını indirebilirsiniz. Kendi karmaşık animasyonunuzu kodlamanıza gerek kalmaması için düzinelerce popüler animasyonun ana karelerini ve CSS sınıflarını içerir.

3. Adım: animate.css Dosyanızı Sitenize Yükleyin

animate.css dosyanız tamamlandığında, onu temanızın dizinine yüklemeniz gerekir. Bunu yapmak için, Dosya Aktarım Protokolü (FTP) ve FileZilla gibi bir FTP istemcisi kullanarak sitenize erişin. Gerekli kimlik bilgilerini barındırma hesabınızda bulabilirsiniz.

public_html dizininizi girmeniz, wp-content > theme'a gitmeniz ve aktif temanızın (veya alt temanızın) klasörünü bulmanız gerekir:

css etiketli bir alt dizini arayın. Varsa, animate.css dosyanızı (veya Animate.css'deki animate.mini.css dosyasını) bu dosyaya yükleyin. Bu klasöre sahip değilseniz, kolayca yeni bir alt dizin oluşturabilir ve buna göre adlandırabilirsiniz:

Dosyanız başarıyla yüklendikten sonra FTP istemcinizden hemen ayrılmayın. WordPress sitenizde bu stil sayfasına erişmek için küçük bir dosya düzenlemesi yapmanız gerekecek.

Adım 4: Animate Stil Sayfasını Function.php Üzerinden Çağırın

Ardından, aktif temanızın klasöründe function.php dosyanızı bulun. Sonunda, bu kod parçasını ekleyin:

 add_action('wp_enqueue_scripts', 'wpb_animate_styles');
function wpb_animate_styles() {
 wp_enqueue_style( 'animate-css', get_stylesheet_directory_uri() .'/css/animate.css', '3.5.0', 'tümü');
}

animate.min.css dosyasını Animate.css'den yüklediyseniz, son satırda animate.css yerine animate.min.css kullanmanız gerekeceğini unutmayın.

Bu, temanızın az önce yüklediğiniz stil sayfasını çağırmasını sağlar, böylece içindeki sınıfları sitenizdeki öğelere uygulayabilirsiniz. Değişiklikleriniz kaydedildikten sonra WordPress kontrol panelinize geri dönün.

Adım 5: Animasyonları CSS Sınıflarını Kullanarak Uygulayın

Artık animate.css dosyanızdaki herhangi bir sınıfı yazılarınızdaki ve sayfalarınızdaki öğelere uygulayabilirsiniz. Animate.css dosyasını kullanıyorsanız, GitHub'da içerdiği her şeyin tam listesine başvurabilirsiniz.

Canlandırmak istediğiniz öğeyi içeren gönderiye veya sayfaya gidin. Klasik Düzenleyici'de metin düzenleyiciye geçin. Blok Düzenleyici'yi kullanıyorsanız, blok araç çubuğundan üç noktalı simgeye tıklayın ve HTML Olarak Düzenle'yi seçin:

Ardından, animasyonlu sınıfı ve animasyonunuzun sınıfını öğe etiketine ekleyin:

Son olarak, yayınınızı veya sayfanızı önizleyin. Animasyonunuz şimdi çalışıyor olmalı:

Bu işlemi, herhangi bir animasyonu animate.css dosyanıza dahil edecek şekilde uyarlayabilirsiniz.

WP Engine ile Sitenizin Harika Görünmesini Sağlayın

Animasyonlar gibi görsel olarak ilgi çekici özellikleri kullanmak sitenizin ziyaretçilerinin ilgisini çekebilir ve daha profesyonel bir çevrimiçi varlık sağlayabilir. Burada WP Engine'de, sitenizin her zaman en iyi şekilde görünmesi için WordPress geliştiricilerine en iyi ipuçlarını ve püf noktalarını sunmaktan gurur duyuyoruz.

Birinci sınıf barındırma platformumuzla birleştiğinde, kullanıcılarınızı etkilemek için ihtiyacınız olan tüm araçlara sahip olacaksınız. Bugün planlarımıza göz atın!