JQuery istifadə edərək WordPress-də hamar sürüşdürmə 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ərinizə əvvəlinə qayıtmaq üçün asan bir yol vermək istədikdə bu əladır. Bu yaxınlarda oxucularımızdan biri WordPress-də üst effektə hamar sürüşmənin əlavə edilməsi barədə soruşdu. Bu yazıda, jQuery istifadə edərək WordPress-də üst effektə hamar sürüşmə qaydasını necə əlavə edəcəyimizi göstərəcəyik.

Qeyd: Bu dərslik mövzularını düzəldən rahat bir DIY ara istifadəçisi üçün yaradılmışdır. Bir plugin metodundan istifadə etmək istəyirsinizsə, yuxarı plaginə yumşaq səhifə sürüşməsindən istifadə edin. Bunu bir 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ğı hərəkət etdikdə, naviqasiya bağlantılarının hamısı yüksəlir. İstifadəçilər həmin məqaləni oxuduqdan sonra veb saytlarında 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:

^Top
 

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ısına sürətlə sürüşdürün. Bu gözəl bir effekt yaradır və istifadəçi təcrübəsini inkişaf etdirir.

WordPress-də jQuery ilə üst effektə 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 redaktorunu açın. Bir fayl yaradın və smoothscroll.js kimi qeyd edin. Bu kodu kopyalayın və fayla yapışdırın:

jQuery(document).ready(function($){
 	$(window).scroll(function(){
         if ($(this).scrollTop()  

Guarde el archivo y cárguelo en la carpeta / js / de su directorio de temas de WordPress (consulte Cómo usar FTP para cargar archivos en WordPress). Si su tema no tiene un directorio / js /, cree uno y cargue smoothscroll.js en él. Este código es el script jQuery que agregará un efecto de desplazamiento suave a un botón que lleva a los usuarios a la parte superior de la página.

Lo siguiente que debe hacer es agregar smoothscroll.js a su tema. Para hacerlo bien, colocaremos el script en WordPress (obtenga más información en nuestra guía sobre cómo agregar correctamente los scripts en WordPress). Copie y pegue este código en el archivo functions.php de su tema.

wp_enqueue_script( 'smoothup', get_template_directory_uri() . '/js/smoothscroll.js', array( 'jquery' ), '',  true );
 

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ətnlə əlaqələndirmədik. Bunun səbəbi yuxarı düyməni geri göstərmək üçün yuxarı bir ox ilə bir şəkil simgesini istifadə edəcəyimizdir. Bu nümunədə, 40x40px bir işarədən istifadə edirik. Bunu temanın tərz cədvəlinə əlavə edin.

#smoothup { 
 height: 40px; 
 width: 40px; 
 position:fixed;
 bottom:50px;
 right:100px;
 text-indent:-9999px;
 display:none;
 background: url("https://www.example.com/wp-content/uploads/2013/07/top_icon.png"); 
 -webkit-transition-duration: 0.4s; 
 -moz-transition-duration: 0.4s; transition-duration: 0.4s; 
 }
 
 #smoothup:hover {
 -webkit-transform: rotate(360deg) }
 background: url('') no-repeat;
 }
 

Yuxarıdakı CSS-də, görüntü simgesimiz üçün sabit bir mövqedən istifadə etdik və fon şəkli olaraq bir şəkil simgesini istifadə etdik. Şəkil işarənizi WordPress media yükləyicisindən istifadə edərək yükləyə bilərsiniz və sonra şəkil URL-ni arxa plana URL kimi yapışdırmaq üçün əldə edə bilərsiniz. Bir istifadəçi üzərində gəzdikdə düyməni çevirə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ə veb saytınızda başqa şeylər tapmağa imkan verir. Edə biləcəyiniz başqa bir şey, seçilmiş məzmunu nümayiş etdirmək üçün saytımızda mövcud olduğu kimi üzən altbilgi altlığı əlavə etməkdir. İstifadəçilərinizin məqalənizi bölüşmək üçün yuxarıya doğru hərəkət etməsini istəmirsinizsə, WPBeginner-də etdiyimiz kimi sosial paylaşma çubuğunda üzən plagindən istifadə etməyinizi tövsiyə edirik.

Ümid edirik ki, bu məqalə jQuery istifadə edərək saytınızdakı səhifə effektinin üst hissəsinə hamar sürüşməyə əlavə etdi. WordPress-də jQuery-nin digər böyük istifadəsi üçün jQuery akkordeonunun FAQ məqaləsini və ya tənbəl yükləmə şəkilləri məqaləsini nəzərdən keçirə bilərsiniz.

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