JQuery istifadə edərək WordPress-də ən yaxşı effekt əldə etmək üçün hamar sürüşmə qaydasını necə əlavə etmək olar

Səhifənin yuxarısına hamar sürüşmə əlavə edən saytları gördünüzmü? Uzun bir səhifəniz var və istifadəçilərə əvvəlinə qayıtmaq üçün asan bir yol vermək istədikdə bu əladır. Bu yaxınlarda oxucularımızdan biri WordPress-də əsas effektə hamar sürüşmə qaydasının necə əlavə olunacağını soruşdu. Bu yazıda, jQuery istifadə edərək WordPress-də ən yaxşı effekt əldə etmək üçün hamar sürüşmə qaydalarını necə əlavə edəcəyinizi göstərəcəyik.

Qeyd: Bu dərslik, mövzularını düzəltməkdə rahat hiss edən bir ara DIY istifadəçisi üçün yaradılmışdır. Bir plug-in metodundan istifadə etmək istəyirsinizsə, ən yaxşı plaginə proqramlaşdırıla bilən səhifə fırladın. Plugin olmadan necə edəcəyinizi öyrənmək istəyənlər üçün oxuyun.

Düz sürüşdürmə nədir və nə vaxt istifadə etmək lazımdır?

Üst nümunəyə gedin

Bir səhifə və ya yazı çox sayda məzmuna sahib olduqda, istifadəçilər həmin məzmunu oxumaq üçün aşağı sürüşməyə məcbur olurlar. İstifadəçilər aşağı diyirlədikcə bütün naviqasiya əlaqələri artır. İstifadəçilər bu yazını oxuduqdan sonra saytda başqa nə etmək lazım olduğunu görmək üçün yuxarıya doğru hərəkət etməlidirlər. Üst düyməyə sürüşmək istifadəçiləri tez bir zamanda səhifənin yuxarı hissəsinə göndərir. Bunu jQuery istifadə etmədən mətn bağlantısı kimi əlavə edə bilərsiniz:

^ Üst

Sadəcə istifadəçiləri səhifənin yuxarı hissəsinə göndərir və bütün səhifəni millisaniyədə sürüşdürür. Fəaliyyətlidir, ancaq yolda vurulan kimidir. Hamar sürüşmə bunun əksidir. İstifadəçini səhifənin yuxarı hissəsinə yumşaq bir şəkildə sürüşdürün. Bu xoş effekt yaradır və istifadəçi təcrübəsini inkişaf etdirir.

WordPress-də jQuery ilə ən yaxşı effekt əldə etmək üçün hamar sürüşmə əlavə edin

Yuxarı effektə hamar sürüşmə əlavə etmək üçün jQuery, bəzi CSS və WordPress mövzusunda HTML kodun bir sətirindən istifadə edəcəyik. Əvvəlcə Notepad kimi bir mətn redaktoru açın. Bir fayl yaradın və smoothscroll.js kimi qeyd edin. Bu kodu kopyalayın və fayla yapışdırın:

jQuery (sənəd) .siz (funksiya ($) {
$ (pəncərə) .scroll (function () {
əgər ($ (bu) .scrollTop ()

Faylı qeyd edin və WordPress mövzular qovluğunda / js / qovluğa yükləyin (Faylları WordPress-ə yükləmək üçün FTP-dən necə istifadə etdiyinə baxın). Mövzunuzda bir / js / qovluq yoxdursa, birini yaradın və smoothscroll.js-i yükləyin. Bu kod istifadəçiləri səhifənin yuxarı hissəsinə aparan bir düyməyə hamar bir fırlanma effekti əlavə edəcək jQuery skriptidir.

Ediləcək növbəti şey, mövzuya smoothscroll.js əlavə etməkdir. Düzgün düzəltmək üçün skriptini WordPress-ə qoyacağıq (WordPress-də skriptləri düzgün necə əlavə etmək barədə təlimatımızda daha çox məlumat əldə edin). Bu kodu kopyalayın və temanın funksiyaları.php faylına yapışdırın.

wp_enqueue_script (‘hamarlaşdırma’, get_template_directory_uri (). ‘/js/smoothscroll.js’, serial (‘jquery’), ”, doğru);

Yuxarıdakı kodda WordPress-ə skriptimizi yükləməyi və həmçinin jQuery kitabxanasını yükləməyi dedik, çünki plaginimiz ondan asılıdır. İndi jQuery hissəsini əlavə etdik, istifadəçiləri yenidən başına aparan WordPress saytımıza əsl link əlavə edək. Bu HTML-i mövzu mövzusundakı footer.php faylına yapışdırın.

Qeyd etdiyiniz kimi bir link əlavə etdik, ancaq heç bir mətnə ​​bağlamadıq. Bunun səbəbi, yuxarı düyməni geri göstərmək üçün yuxarı bir ox ilə bir şəkil işarəsini istifadə edəcəyik. Bu nümunədə, 40x40px bir işarədən istifadə edirik. Bunu temanın tərz cədvəlinə əlavə edin.

#smoothup {
hündürlüyü: 40px;
eni: 40 px;
mövqe: sabit;
alt: 50px;
sağ: 100px;
mətnin girişi: -9999px;
Heç birini göstərməyin;
background: url (“https://www.example.com/wp-content/uploads/2013/07/top_icon.png”);
-webkit-keçid-müddəti: 0.4s;
-moz-keçid-müddəti: 0.4s; keçid müddəti: 0.4s;
}

#smoothup: Siçan artıq {
-webkit-çevirmək: dönmə (360deg)}
fon: təkrarlanmadan url (”);
}

Yuxarıdakı CSS-də görüntü simgesi üçün sabit bir mövqedən istifadə edirik və arxa plan kimi bir şəkil simgesini istifadə edirik. Şəkil simgesinizi WordPress media yükləyicisindən istifadə edərək yükləyə bilərsiniz və sonra şəkil URL URL-i arxa plana kimi yerləşdirə bilərsiniz. İstifadəçi üzərində gəzdikdə dönən düyməyə kiçik bir CSS animasiya da əlavə etdik.

Ən yaxşı effektə keçmək istifadəçilərə əvvəlinə qayıtmağa və saytınızda başqa şeylər tapmağa imkan verir. Başqa bir şey, təqdim olunan məzmunu göstərmək üçün veb saytımızdakı kimi bir üzən altbilgi altlığı əlavə etməkdir. İstifadəçilərinizin məqalənizi bölüşməsini istəmirsinizsə, WPBeginner-də olduğu kimi, sosial paylaşma çubuğu üçün üzən plaginlərdən də istifadə etməyi məsləhət görürük.

Ümid edirik ki, bu məqalə jQuery istifadə edərək veb saytınızın yuxarı hissəsinin təsirinə hamar sürüşmə əlavə etdi. WordPress-də jQuery-nin digər böyük istifadələri üçün tez-tez verilən suallar məqaləsini jQuery akkordeonunda və ya yavaş yükləyən şəkil məqaləsində yoxlaya bilərsiniz.

Sizcə ən yüksək effektə keçmək faydalıdır? Aşağıda bir şərh buraxaraq bizə bildirin.