WordPress сайтыңызга жылмакай фон түсүн өзгөртүү эффектин кошкуңуз келеби? Белгилүү бир аймактын же бүт веб-баракчанын фонунун түсү автоматтык түрдө бир түстөн экинчи түскө өзгөргөн кээ бир популярдуу веб-сайттарда көргөн болушуңуз мүмкүн. Бул кооз эффект сизге колдонуучулардын көңүлүн буруп, веб-сайтыңызга тартууну жакшыртууга жардам берет. Бул макалада биз WordPressте жылмакай фон түсүн өзгөртүү эффектин кантип оңой кошууну көрсөтөбүз.
Жылмакай фон түсүн өзгөртүү эффекти деген эмне?
мазмуну
Жылмакай фон түсүн өзгөртүү эффектиси ар кандай фон түстөрүнүн ортосунда автоматтык түрдө которулууга мүмкүндүк берет. Өзгөртүү акырындык менен ар кандай түстөр аркылуу акыркы түскө жеткенге чейин ишке ашат. Бул ушундайбы:
Бул ыкма колдонуучунун көңүлүн бурган жылмакай эффекттер менен тартуу үчүн колдонулат. Ушуну менен бирге, келгиле, бул жылмакай фон түсүн өзгөртүү эффектин каалаган WordPress темасына кантип кошууну карап көрөлү.
WordPressте жылмакай фондун түсүн өзгөртүү эффектин кошуу
Бул окуу куралы сизден WordPress файлдарыңызга код кошууну талап кылат. Эгер сиз буга чейин андай кылбасаңыз, WordPressте кодду кантип көчүрүп жана чаптоо боюнча биздин колдонмону карап чыгыңыз. Биринчиден, сиз өзгөрткүңүз келген аймак үчүн CSS классын табышыңыз керек. Муну браузериңиздеги Текшерүү куралы аркылуу кылсаңыз болот. Жөн гана оңдогуңуз келген аймакка курсорду алып барыңыз жана Текшерүү куралын тандоо үчүн оң баскычты чыкылдатыңыз.
Андан кийин, сиз максат кылгыңыз келген CSS классын жазышыңыз керек. Мисалы, жогорудагы скриншотто биз ылдый жагындагы "баракчанын аталышы" CSS классы бар виджет аймагын бутага алгыбыз келет. Кийинки кадамда сиз компьютериңизде жөнөкөй текст редакторун ачып, жаңы файл түзүшүңүз керек. Бул файлды иш тактаңызда wpb-background-tutorial.js аты менен сакташыңыз керек. Андан кийин сиз JS файлыңызга төмөнкү кодду кошушуңуз керек: jQuery (функция ($) { $ ('.Page-header'). Ар бир (функция () {var $this = $(this), colors = ['# ec008c ', '#00bcc3', '#5fb26a', '#fc7331']; setInterval(function() {var color = colors.shift(); colors.push(color); $this.animate({backgroundColor: түс } , 2000);}, 4000); }); }); Эгер сиз бул кодду изилдесеңиз, биз коддо максат кылгыбыз келген CSS классын колдонгонубузду байкайсыз. Биз дагы төрт түс коштук. Биздин жумшак фон эффектибиз биринчи түстөн башталып, андан кийин кийинки түскө өтүп, ал түстөр аркылуу өтүүнү улантат. Өзгөртүүлөрүңүздү файлга сактоону унутпаңыз. Андан кийин Wpb-bg-tutorial.js файлын FTP аркылуу WordPress темаңыздын /js/ папкасына жүктөшүңүз керек. Эгер темаңызда js папкасы жок болсо, анда сиз аны түзүшүңүз керек.
JavaScript файлыңызды жүктөгөндөн кийин, аны WordPressке жүктөө убактысы келди. Темаңыздын functions.php файлына төмөнкү кодду кошушуңуз керек. 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'); } add_action('wp_enqueue_scripts', 'wpb_bg_color_scripts'); Бул код JavaScript файлын жана бул коддун иштеши үчүн сизге керектүү болгон көз каранды jQuery скриптин ийгиликтүү жүктөйт. Болду, эми сиз веб-сайтыңызга кирип, аны иш жүзүндө көрө аласыз. Сиз тандаган аймакта жылмакай фон түсүнүн өзгөрүшүнүн таасирин байкайсыз. Колдонуучунун көңүлүн буруу же мазмунуңузду өзгөчө кылуу үчүн WordPressте фон түстөрүн колдонуунун башка көптөгөн жолдору бар. Мисалы, сиз аракет кылсаңыз болот: Бул макала WordPressте жылмакай фон түсүн өзгөртүү эффектин кантип оңой кошууну үйрөнүүгө жардам берди деп үмүттөнөбүз. Сиз ошондой эле аракет кылуу үчүн мыкты WordPress баракча куруучу плагиндерибиздин тизмесин текшере аласыз. Бул макала сизге жакса, WordPress видео сабактары үчүн YouTube каналыбызга жазылыңыз. Бизди Twitter жана Facebookтан да таба аласыз.
Башында жарыяланган 2021-02-24 06:56:00.
