WordPress-də hamar bir fon rəng dəyişdirmə effektini necə əlavə etmək olar

WordPress saytınıza hamar bir fon rəng dəyişdirmə effekti əlavə etmək istəyirsiniz? Müəyyən bir ərazinin və ya bütün veb səhifənin fon rəngi avtomatik olaraq bir rəngdən digərinə keçdiyi bəzi məşhur veb saytlarda görmüş ola bilərsiniz. Bu gözəl effekt istifadəçilərin diqqətini cəlb etməyə və veb saytınızdakı nişanlanmanı inkişaf etdirməyə kömək edə bilər. Bu yazıda WordPress-də hamar bir rəng rəng dəyişdirmə effektini necə asanlıqla əlavə edəcəyinizi sizə göstərəcəyik.

<img title = "WordPress-də hamar bir fon rəng dəyişdirmə effekti əlavə edin" src = "https://blogging-techies.com/wp-content/uploads/2020/03/bgcolorchangewp.png" alt = "Əlavə et WordPress-də hamar fon rəng dəyişdirmə effekti” width=”550″ height=”340″ class=”alignnone size-full wp-image-50813″/>

Hamar fon rəng dəyişdirmə effekti nədir?

Hamar fon rənginin dəyişdirilməsi effekti müxtəlif fon rəngləri arasında avtomatik olaraq keçməyə imkan verir. Dəyişmə son rəngə çatana qədər yavaş-yavaş müxtəlif rənglərdən keçir. Bu kimi görünür:

<img title = "Rəng dəyişdirmə effekti animasiyası" src = "https://blogging-techies.com/wp-content/uploads/2020/03/bganimate.gif" alt = "Rəng dəyişməsi effekti animasiyası” width=”550″ height=”231″ class=”alignnone size-full wp-image-50814″/>

Bu üsul istifadəçinin diqqətini gözə xoş gələn hamar effektlərlə cəlb etmək üçün istifadə olunur.

Deyilənlərlə, bu hamar fon rəng dəyişdirmə effektini istənilən WordPress mövzusuna necə əlavə edəcəyinizə nəzər salaq.

WordPress-də hamar bir fon rəng dəyişdirmə effekti əlavə edin

Bu dərs vəsaiti WordPress sənədlərinizə kod əlavə etməyinizi tələb edir. Əgər əvvəllər bunu etməmisinizsə, WordPress-də kodu necə kopyalayacağınıza dair təlimatımıza baxın.

Birincisi, dəyişdirmək istədiyiniz ərazinin CSS sinifini tapmalısınız. Brauzerinizdəki Inspect alətindən istifadə edərək bunu edə bilərsiniz. Dəyişdirmək istədiyiniz ərazinin üzərinə siçan vurun və Təftiş alətini seçmək üçün sağ vurun.

<img title = "CSS sinifini Toque" src = "https://blogging-techies.com/wp-content/uploads/2020/03/findcssclass.png" alt = "CSS sinifini Toque” width=”550″ height=”303″ class=”alignnone size-full wp-image-50810″/>

Bundan sonra hədəf almaq istədiyiniz CSS sinifini yazmalısınız. Məsələn, yuxarıdakı ekran görüntüsündə, altındakı CSS sinfi "səhifə başlığı" olan widget sahəsinə işarə etmək istəyirik.

Növbəti addımda kompüterinizdə düz mətn redaktoru açmalı və yeni bir sənəd yaratmalısınız. Bu faylı masaüstünüzde wpb-background-tutorial.js kimi saxlamalısınız.

Sonra, JS faylınızın içinə aşağıdakı kodu əlavə etməlisiniz:

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 öyrənsəniz, kodda qeyd etmək istədiyimiz CSS sinifini istifadə etdiyimizi görəcəksiniz. Dörd rəng əlavə etdik. Yumşaq fon effektimiz ilk rəngdən başlayacaq, sonra növbəti rəngə keçin və bu rənglərə davam edin.

Dəyişikliklərinizi fayda saxlamağı unutmayın.

Sonra, wpb-bg-tutorial.js faylını FTP istifadə edərək WordPress mövzusundakı / js / qovluğuna yükləməlisiniz. Mövzunuzun içərisində bir js qovluğu yoxdursa, birini yaratmalısınız.

<img title = "uploadjs" src = "https://cdn3.wpbeginner.com/wp-content/uploads/2018/02/uploadjs.png" alt = "Javascript faylınızı yükləyin.” width=”550″ height=”278″ class=”alignnone size-full wp-image-50811″/>

JavaScript sənədinizi yüklədikdən sonra onu WordPress-ə yükləmək vaxtı gəldi.

Mövzunuzun funksiyaları.php faylına aşağıdakı kodu əlavə etməlisiniz.

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 düzgün şəkildə JavaScript faylı və bu kodun işləməsi üçün lazım olan jQuery skriptini yükləyir.

Bu, indi hərəkətdə görmək üçün veb saytlarına baş çəkə bilərsiniz. Hədəf etdiyiniz ərazidə hamar fon rəng dəyişdirmə effektini görəcəksiniz.

İstifadəçinin diqqətini cəlb etmək və ya məzmununuzu ayırd etmək üçün WordPress fon rənglərindən istifadə etməyin bir çox yolu var. Məsələn, cəhd edə bilərsiniz:

  • Tam ekrana fon şəkilləri əlavə edin
  • Tam ekrana video arxa plan əlavə edin
  • Hər səhifə yükləmə zamanı təsadüfi fon rəngləri
  • Hər hansı bir WordPress mövzusuna paralaks effektləri əlavə edin
  • Fərdi yazıları fərqli mənşəli dizayn edin

Ümid edirik ki, bu məqalə WordPress-də hamar bir rəng rəng dəyişdirmə effektini necə asanlıqla əlavə etməyinizi öyrənməyə kömək etdi. Siz də cəhd edə biləcəyiniz ən yaxşı WordPress səhifə qurucusu plaginlərimizin siyahısını görmək istəyə bilərsiniz.

Bu yazını bəyənmisinizsə, kanalımıza abunə olun YouTube WordPress tutorial video izləmək üçün. Bizi də tapa bilərsiniz Twitter y Facebook.