Kuinka lisätä sujuva taustavärimuutoksen vaikutus WordPressiin

Haluatko lisätä sujuvan taustavärimuutoksen WordPress-sivustoosi? Olet ehkä nähnyt joillakin suosituilla verkkosivustoilla, joilla tietyn alueen tai koko verkkosivun taustaväri vaihtuu automaattisesti yhdestä väristä toiseen. Tämä kaunis vaikutus voi auttaa sinua houkuttelemaan käyttäjien huomion ja parantamaan sitoutumista verkkosivustoosi. Tässä artikkelissa näytämme, kuinka voit lisätä helposti sileän taustavärimuutoksen WordPressiin.

<img title = "Lis√§√§ sujuva taustav√§rimuutoksen vaikutus WordPressiin" src = "https://blogging-techies.com/wp-content/uploads/2020/03/bgcolorchangewp.png" alt = "Lis√§√§ sile√§ taustav√§rimuutosvaikutus WordPressiss√§” width=”550″ height=”340″ class=”alignnone size-full wp-image-50813″/>

Mikä on tasainen taustavärin muutosvaikutus?

Sileän taustavärinvaihtotehosteen avulla voit siirtyä automaattisesti eri taustavärien välillä. Muutos tapahtuu hitaasti läpi eri värejä, kunnes se saavuttaa lopullisen värin. Se näyttää tältä:

<img title = "V√§rinvaihtotehosteanimaatiot" src = "https://blogging-techies.com/wp-content/uploads/2020/03/bganimate.gif" alt = "V√§rimuutotehosteanimaatio” width=”550″ height=”231″ class=”alignnone size-full wp-image-50814″/>

Tätä tekniikkaa käytetään kiinnittämään käyttäjän huomio silmälle miellyttävillä sileillä vaikutuksilla.

Katsotaanpa tämän jälkeen, kuinka lisätään tämä sujuva taustavärimuutoksen vaikutus mihin tahansa WordPress-teemaan.

Lisää sujuva taustavärin muutosvaikutus WordPressiin

Tämä opas vaatii koodin lisäämistä WordPress-tiedostoihin. Jos et ole vielä tehnyt tätä aikaisemmin, tutustu oppaaseemme, jolla voit kopioida ja liittää koodia WordPressiin.

Ensin on selvitettävä muutettavan alueen CSS-luokka. Voit tehdä tämän käyttämällä selaimen Tarkasta-työkalua. Siirrä hiiri muutettavan alueen päälle ja napsauta hiiren kakkospainikkeella tarkastaa-työkalua.

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

Seuraavaksi sinun on kirjoitettava CSS-luokka, johon haluat kohdistaa. Esimerkiksi yllä olevassa kuvakaappauksessa haluamme osoittaa widget-alueen alareunassa, jolla on CSS-luokan "sivun otsikko".

Seuraavassa vaiheessa sinun täytyy avata tavallinen tekstieditori tietokoneellasi ja luoda uusi tiedosto. Sinun tulisi tallentaa tämä tiedosto työpöydälle nimellä wpb-background-tutorial.js.

Seuraavaksi sinun on lisättävä seuraava koodi JS-tiedostoosi:

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);
         });
         }); 
 

Jos tutkit tätä koodia, huomaat, että olemme käyttäneet CSS-luokkaa, johon haluamme osoittaa koodissa. Olemme myös lisänneet neljä väriä. Pehmeä taustatehoste alkaa ensimmäisestä väristä, siirry seuraavaan väriin ja jatkuu näiden värien läpi.

Muista tallentaa muutokset tiedostoon.

Seuraavaksi sinun on lähetettävä wpb-bg-tutorial.js-tiedosto WordPress-teeman / js / kansioon FTP: n avulla. Jos teemallasi ei ole js-kansiota, sinun on luotava se.

<img title = "uploadjs" src = "https://cdn3.wpbeginner.com/wp-content/uploads/2018/02/uploadjs.png" alt = "Lataa javascript-tiedostosi” width=”550″ height=”278″ class=”alignnone size-full wp-image-50811″/>

Kun olet lähettänyt JavaScript-tiedostosi, on aika lähettää se WordPressiin.

Sinun tulisi lisätä seuraava koodi teeman function.php-tiedostoon.

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' ); 
 

Tämä koodi lataa oikein JavaScript-tiedoston ja siitä riippuvan jQuery-komentosarjan, jota tarvitset tämän koodin toimimiseen.

Siinäpä, voit nyt käydä heidän verkkosivustollaan nähdäksesi sen toiminnassa. Huomaat sujuvan taustavärin muutoksen vaikutuksen kohdealueellasi.

On monia muita tapoja käyttää WordPress-taustavärejä käyttäjien huomion kiinnittämiseksi tai sisällön erottamiseksi. Voit esimerkiksi kokeilla:

  • Lis√§√§ taustakuvia koko n√§yt√∂lle
  • Lis√§√§ videotaustat koko n√§yt√∂lle
  • Satunnaiset taustav√§rit jokaisella sivun latauksella
  • Lis√§√§ parallaksi-tehosteita mihin tahansa WordPress-teemaan
  • Suunnittele yksitt√§isi√§ viestej√§, joilla on erilainen tausta

Toivomme, että tämä artikkeli on auttanut sinua oppimaan lisäämään helposti sileän taustavärin muutoksen vaikutuksen WordPressiin. Haluat ehkä myös nähdä luettelon parhaista WordPress-sivunrakennuksen lisäosista, joita voit kokeilla.

Jos pidit tästä artikkelista, tilaa kanavamme YouTube katsoa WordPress-opetusvideoita. Löydät meidät myös osoitteesta Twitter ja Facebook.