WordPress-ə əvvəlcədən yükləyən animasiya necə əlavə etmək olar (addım-addım)

WordPress saytınıza əvvəlcədən yükləyici əlavə etmək istəyirsiniz? Öncədən yükləyən – arxa planda bir səhifə yükünün tərəqqisini göstərən bir animasiya.

Preloaders istifadəçiləri veb səhifəni yükləmək üçün işlədiyinə inandırır. Bu istifadəçi təcrübəsini yaxşılaşdırmağa və ümumi sıçrayış sürətini azaltmağa kömək edə bilər.

Bu yazıda WordPress-ə asanlıqla bir ön yükləyicini necə əlavə edəcəyinizi göstərəcəyik.

WordPress veb saytınıza əvvəlcədən yükləyici əlavə edin

Ön yükləmə nədir və nə vaxt istifadə etməlisiniz?

Öncədən yükləyən bir səhifə səhifəni arxa plana yükləmənin gedişatını göstərən bir animasiya və ya status mesajıdır.

Adətən, bir veb saytına daxil olduqda brauzeriniz məzmunun müxtəlif hissələrini yükləməyə başlayır. Veb saytın bəzi hissələri daha sürətli yükləyir (yəni mətn, HTML, CSS), digərləri daha yavaş yükləyir (yəni şəkillər və videolar).

Məzmununuzun çoxu çox az şəkil və video olan mətndirsə, veb saytınıza əvvəlcədən yükləmə əlavə etməyinizə ehtiyac yoxdur. Bunun əvəzinə daha sürətli səhifə yükləməsi üçün veb sürətini və performansını yaxşılaşdırmağa diqqət etməlisiniz.

Digər tərəfdən, əgər məzmunun çoxu şəkillər, şəkillər və videolardırsa, istifadəçiləriniz bütün məzmunu görməzdən əvvəl bir az gözləməlidirlər.

Bu qismən yükləmələr zamanı veb saytınız yavaş görünə bilər. Bəzən istifadəçilər bunun pozulduğunu düşünə bilər. Ön yükləyici əlavə etmək bu boşluğu doldurur və istifadəçi səhifəyə yükləmə zamanı tərəqqi göstəricisini göstərir.

WordPress-də bir bloq yazarkən önizleme düyməsini basaraq bir ön yükləyicinin canlı nümunəsini görə bilərsiniz.

WordPress blogunuzun canlı görüntüsünü yeni bir pəncərədə açacaq və əslində canlı əvvəlcədən görünməzdən əvvəl əvvəlcədən yükləyən cihazı göstərəcəkdir.

WordPress Post Preview Ön Yükləmə

Sözügedən sözlə, WordPress veb saytınıza asanlıqla necə yüklədiyinizi nəzərdən keçirək.

Metod 1. WP Smart Preloader istifadə edərək bir WordPress ön yükleyici əlavə edin

Bu metod tətbiq etmək daha asandır və WordPress mövzusunda heç bir dəyişiklik tələb etmədiyi üçün tövsiyə olunur.

Etdiyiniz ilk şey WP Smart Preloader plaginini quraşdırmaq və aktivləşdirməkdir. Daha çox məlumat üçün, WordPress plaginini necə quraşdıracağımızı addım-addım təlimatımıza baxın.

Aktivləşdirildikdən sonra ziyarət etməlisiniz Parametrlər »WP Smart Preloader plugin parametrlərini konfiqurasiya etmək üçün səhifə.

WP Smart Preloader Ayarları

Birincisi, əvvəlcədən yükləyən stil və ya səhifə yükləmə animasiyasını seçməlisiniz. Plugin seçmək üçün altı daxili animasiya ilə gəlir. Xüsusi əvvəlcədən yükləmə qurmaq üçün özəl HTML və CSS yükləyə bilərsiniz.

Bundan sonra, "Yalnız ana səhifədə göstər" seçimini yoxlamaqla əvvəlcədən yükləyən cihazı yalnız ana səhifədə görünə bilərsiniz.

Sonra "Yükləyicini göstərmə müddəti" hissəsinə aşağıya fırlanmalısınız. Öncədən yükləyicinin müddətini göstərməlisiniz. Varsayılan seçim 1500 milisaniyədir (1,5 saniyə), bu da əksər saytlar üçün işləməlidir, ancaq istəsəniz dəyişdirə bilərsiniz.

Öncədən yükləmə müddətini və solğunluğunu təyin edin

Şarj cihazının tamamilə yox olacağı vaxtı da konfiqurasiya edə bilərsiniz. Varsayılan seçim 2500 saniyə və ya 2.5 saniyə.

Nəhayət, parametrlərinizi saxlamaq üçün "Dəyişiklikləri Saxla" düyməsini vurmağı unutmayın.

İndi əvvəlcədən yüklədiyi cihazı görmək üçün veb saytlarına baş çəkə bilərsiniz.

WP Smart Preloader önizləmə

Metod 2. Preloader Plugin istifadə edərək bir WordPress Preloader əlavə edin

Bu metod çevikdir, lakin onu WordPress saytınızda düzgün tətbiq etmək üçün əlavə addımlar tələb olunur.

Etdiyiniz ilk şey Preloader plaginini quraşdırmaq və aktivləşdirməkdir. Daha çox məlumat üçün, WordPress plaginini necə quraşdıracağımızı addım-addım təlimatımıza baxın.

Aktivləşdirildikdən sonra ziyarət etməlisiniz Plugins »Preloader plugin parametrlərini konfiqurasiya etmək üçün səhifə.

Ön yükləmə konfiqurasiyaları

Birincisi, yükləmə ekranı üçün istifadə etmək istədiyiniz arxa rəng üçün altıbucaqlı kodu daxil etməlisiniz. Varsayılan seçim #FFFFFF (ağ). Istifadə etmək istədiyiniz rəng üçün HEX kodu tapmaq üçün onlayn rəng seçmə vasitəsindən istifadə edə bilərsiniz.

Sonrakı, istifadə etmək istədiyiniz əvvəlcədən yükləyən görüntünün URL-ini təmin etməlisiniz. Plugin standart bir animasiya görüntüsü ilə gəlir.

Başqa bir animasiyadan istifadə etmək istəyirsinizsə, üçüncü tərəf veb saytından cizgi yükləyən bir görüntü yükləmək üçün bir keçid tapacaqsınız. Sonra həmin görüntüyü wp-content qovluğunuza yükləyə və URL-i buraya yapışdıra bilərsiniz.

Sonrakı, əvvəlcədən yüklədiyiniz yeri seçmək lazımdır.

Ön yükləmə yerlərini seçin

Veb saytınızın hər səhifəsində görüntüləmək üçün seçə bilərsiniz və ya müəyyən bir bölmə seçə bilərsiniz.

Nəhayət, aşağıdakı kodu WordPress mövzusunuzun header.php faylına əlavə etmək üçün təlimatları görəcəksiniz.

 

Antes de abandonar la página, no olvide hacer clic en el botón "Guardar cambios" para almacenar su configuración.

No recomendamos agregar código a su tema de WordPress porque se borrará cuando actualice el tema.

Si está utilizando un tema secundario, entonces está bien agregar el código al archivo header.php de su tema secundario.

Una solución aún mejor sería agregar este código usando un complemento de fragmentos de código por separado, o en un complemento específico del sitio.

Aquí está el código que debe agregar:

 function wpb_add_preloader() {
 echo '';
 }
 add_action( 'wp_body_open', 'wpb_add_preloader' );
 

Qeyd: Kod əlavə etmə üsulu yalnız WordPress-də əlavə edilmiş wp_body_open () funksiyasını dəstəkləyən WordPress mövzularında işləyəcəkdir. 5.2.

Kod əlavə etmə üsulu, mövzunu yeniləsəniz də kodunuzun orada qalmasını təmin edir.

Kod əlavə etdikdən sonra əvvəlcədən yükləyən cihazı görmək üçün veb saytlarına baş çəkə bilərsiniz.

Öncədən yükləmə görüntüsü

Ümid edirik ki, bu məqalə WordPress saytınıza Preloader-i asanlıqla necə əlavə etməyinizi öyrənməyə kömək etdi. Daha maraqlı fikirlər üçün ən faydalı WordPress ipuçları, tövsiyələri və hack siyahılarımızı nəzərdən keçirmə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.