WordPress’te Düz Arkaplan Renk Değişikliği Nasıl Yapılır?
WordPress sitenize pürüzsüz bir arka plan renk değişimi efekti eklemek ister misiniz? WordPress’te Düz Arkaplan Renk Değişikliği Nasıl Yapılır? 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 yazıda, WordPress’te harika bir arka plan renk değişimi efektinin nasıl ekleneceğini göstereceğiz.
ARKAPLAN RENK DEĞİŞİKLİĞİ ETKİSİ NEDİR?
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ş yavaş farklı renklere geçerek nihai renge ulaşıncaya kadar değişim devam eder.
Bu teknik, kullanıcı dikkatini göze hoş gelen yumuşak efektlerle yakalamak için kullanılır.
WordPress’te Düz Arkaplan Renk Değişikliği Nasıl Yapılır?
WORDPRESS’TE DÜZGÜN ARKAPLAN RENK DEĞİŞİKLİĞİ NASIL EKLENİR?
Bu işlemi yapmak için, WordPress dosyalarınıza kod eklemeniz gerekir. Bunu daha önce yapmadıysanız, lütfen WordPress’te kodun nasıl kopyalanacağı ve yapıştırılacağı konusunda bir araştırma yapın ya da işi bilen birisinden yardım alın. Ufak bir hata size daha fazla iş çıkarabilir.
Ö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.
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 wp_betawppostsb-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, wp_betawppostsb-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ü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 wp_betawppostsb_bg_color_scripts() { wp_betawpposts_enqueue_script( 'wp_betawppostsb-background-tutorial', get_stylesheet_directory_uri() . '/js/wp_betawppostsb-background-tutorial.js', array( 'jquery-color' ), '1.0.0', true ); }add_action( 'wp_betawpposts_enqueue_scripts', 'wp_betawppostsb_bg_color_scripts' ); |
Bu kod , bu işlemin ç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.
Bu yazının, WordPress uygulamasında kolayca arka plan rengi değişimi efektinin nasıl ekleneceğini öğrenmenize yardımcı olduğunu umuyoruz.
WordPress sitenize kod eklemede sıkıntı yaşarsanız bizimle iletişime geçebilirsiniz .
