WordPress’de Düz Arkaplan Renk Değişikliği Etkisi Ekleme

WordPress sitenize pürüzsüz bir arka plan renk değişimi efekti eklemek ister misiniz? Belirli bir alanın arka plan renginin veya tüm web sayfasının otomatik olarak bir renkten diğerine geçtiği bazı popüler web sitelerinde görmüş olabilirsiniz. Bu güzel etki, kullanıcıların dikkatini çekmenize ve web sitenizdeki etkileşimi artırmanıza yardımcı olabilir. Bu makalede, WordPress’te pürüzsüz bir arka plan renk değişimi efektinin nasıl ekleneceğini göstereceğiz.

WordPress'de düzgün arka plan rengi değişikliği efekti ekleme

Pürüzsüz Arkaplan Renk Değişikliği Etkisi Nedir?

Düzgün arka plan rengi değiştirme efekti, farklı arka plan renkleri arasında otomatik olarak geçiş yapmanızı sağlar. Değişim, yavaşça farklı renklerden geçerek nihai renge ulaşıncaya kadar olur. Şuna benziyor:

Renk değişimi efekti animasyonu

Bu teknik, kullanıcı dikkatini göze hoş gelen yumuşak efektlerle yakalamak için kullanılır.

Bu, herhangi bir WordPress temasında bu düzgün arka plan renk değişimi efektinin nasıl ekleneceğine bakalım.

WordPress’de Düzgün Arkaplan Renk Değişikliği Etkisi Ekleme

Bu eğitici, WordPress dosyalarınıza kod eklemenizi gerektirir. Bunu daha önce yapmadıysanız, lütfen WordPress’te kodun nasıl kopyalanacağı ve yapıştırılacağı konusunda kılavuzumuza göz atın .

Öncelikle, değiştirmek istediğiniz alanın CSS sınıfını bulmanız gerekir. Bunu tarayıcınızdaki Inspect aracını kullanarak yapabilirsiniz . Sadece farenizi değiştirmek istediğiniz alana götürün ve Inspect aracını seçmek için sağ tıklayın.

CSS sınıfını bul

Ardından, hedeflemek istediğiniz CSS sınıfını yazmanız gerekir. Örneğin, yukarıdaki ekran görüntüsünde, CSS sınıfının ‘sayfa başlığı’ olan alt kısımdaki widget alanını hedeflemek istiyoruz.

Bir sonraki adımda, bilgisayarınızda düz bir metin düzenleyicisi açmanız ve yeni bir dosya oluşturmanız gerekir. Bu dosyayı masaüstünüzde wpb-background-tutorial.js olarak kaydetmeniz gerekiyor.

Ardından, JS dosyanızın içine aşağıdaki kodu eklemeniz gerekir:

1
2
3
4
5
6
7
8
9
10
11
12
jQuery(function($){
        $('.page-header').each(function(){
            var $this = $(this),
            colors = ['#ec008c', '#00bcc3', '#5fb26a', '#fc7331'];
            setInterval(function(){
                var color = colors.shift();
                colors.push(color);
                $this.animate({backgroundColor: color}, 2000);
            },4000);
        });
        });

Bu kodu okursanız, kodda hedeflemek istediğimiz CSS sınıfını kullandığımızı fark edersiniz. Ayrıca dört renk ekledik. Sorunsuz arka plan efektimiz ilk renkten başlayacak, ardından bir sonraki renge geçiş yapacak ve bu renkler arasında dolaşmaya devam edecektir.

Değişikliklerinizi dosyaya kaydetmeyi unutmayın.

Ardından, wpb-bg-tutorial.js dosyasını WordPress theme’s / js / klasörüne FTP kullanarak yüklemeniz gerekir . Temanızın içinde bir js klasörü yoksa, o zaman bir tane oluşturmanız gerekir.

Javascript dosyanızı yükleyin

JavaScript dosyanızı yükledikten sonra, WordPress’e yükleme zamanı geldi.

Aşağıdaki kodu, theme’s functions.php dosyanıza eklemeniz gerekir .

1
2
3
4
function wpb_bg_color_scripts() {   
wp_enqueue_script( 'wpb-background-tutorial',  get_stylesheet_directory_uri() . '/js/wpb-background-tutorial.js', array( 'jquery-color' ), '1.0.0', true );
 }
add_action( 'wp_enqueue_scripts', 'wpb_bg_color_scripts' );

Bu kod , bu kodun çalışması için gereken JavaScript dosyasını ve bağımlı jQuery komut dosyasını düzgün şekilde yükler .

Hepsi bu, şimdi eylemde görmek için web sitenizi ziyaret edebilirsiniz. Hedeflediğiniz alanda düzgün arka plan renk değişikliği efektini göreceksiniz.

Kullanıcı dikkatini çekmek veya içeriğinizi dışarı çıkarmak için WordPress uygulamasında arka plan renklerini kullanmanın birçok yolu vardır. Örneğin, şunları deneyebilirsiniz:

Bu makalenin, WordPress uygulamasında kolayca arka plan rengi değişimi efektinin nasıl ekleneceğini öğrenmenize yardımcı olduğunu umuyoruz. Ayrıca deneyebileceğiniz en iyi WordPress sayfa oluşturucu eklentileri listemizi de görmek isteyebilirsiniz .

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

RSS
Facebook20
Facebook