Bagaimana cara menambahkan animasi preloader ke WordPress (langkah demi langkah)
Ingin menambahkan pra-pembaca ke situs WordPress Anda? Pre-reader adalah animasi yang menunjukkan progres memuat halaman di latar belakang.
Pembaca meyakinkan pengguna bahwa situs tersebut berfungsi memuat halaman. Ini dapat membantu meningkatkan pengalaman pengguna dan mengurangi tingkat pentalan keseluruhan.
Pada artikel ini, kami akan menunjukkan kepada Anda cara menambahkan pembaca pra-WordPress dengan mudah.
Apa yang dimaksud dengan pra-pembaca dan kapan Anda harus menggunakannya?
Pra-pembaca adalah pesan animasi atau status yang menunjukkan status pemuatan halaman di latar belakang.
Ketika Anda mengunjungi situs web, browser Anda biasanya mengunduh berbagai bagian konten. Beberapa bagian situs memuat lebih cepat (mis. Teks, HTML, CSS), sementara yang lain memuat lebih lambat (mis. Gambar dan video).
Jika sebagian besar konten Anda berupa teks dengan sedikit gambar dan video, Anda tidak perlu menambahkan pra-pembaca ke situs Anda. Alih-alih, fokus pada peningkatan kecepatan dan kinerja situs untuk mempercepat pemuatan halaman.
Tetapi jika sebagian besar konten Anda terdiri dari gambar, foto, dan video yang disematkan, pengguna Anda harus menunggu sedikit hingga mereka dapat melihat semua konten.
Situs Anda mungkin terlihat lambat selama unduhan parsial ini. Terkadang, pengguna bahkan berpikir itu rusak. Menambahkan pra-pembaca mengisi celah ini dan menunjukkan kepada pengguna bilah status saat halaman dimuat.
Anda dapat melihat pratinjau langsung dari pembaca sebelumnya dengan mengklik tombol Pratinjau saat menulis posting blog di WordPress.
WordPress membuka pratinjau langsung pos blog Anda di jendela baru dan menampilkan pratinjau sebelum pratinjau langsung & # 39;
Mari kita lihat bagaimana cara menambahkan pre-reader dengan mudah ke situs WordPress Anda.
Metode 1, Tambahkan Preloader WordPress dengan WP Smart Preloader
Metode ini direkomendasikan karena lebih mudah diterapkan dan tidak memerlukan perubahan pada tema WordPress Anda.
Pertama, instal dan aktifkan plugin WP Smart Preloader. Untuk informasi lebih lanjut, lihat panduan langkah demi langkah kami untuk menginstal plugin WordPress.
Setelah kunjungan aktivasi Pengaturan »WP Smart Preloader Konfigurasikan halaman konfigurasi plugin.
Pertama, pilih gaya preloader atau animasi pemuatan halaman. Plugin berisi enam animasi bawaan untuk dipilih. Anda juga dapat mengunggah HTML dan CSS kustom Anda sendiri untuk membuat pembaca baca khusus.
Kemudian Anda hanya dapat melihat pratinjau beranda di beranda dengan mengaktifkan opsi "Tampilkan hanya di beranda".
Kemudian gulir ke bawah ke bagian "Tampilkan durasi pengisi daya". Anda harus menentukan durasi prelektor. Pengaturan default adalah 1500 milidetik (1,5 Detik) yang seharusnya berfungsi untuk sebagian besar situs. Namun, Anda dapat mengubahnya jika Anda mau.
Anda juga dapat mengonfigurasi waktu yang diperlukan agar pengisi daya benar-benar hilang. Pengaturan standar adalah 2500 detik atau 2,5 detik.
Jangan lupa klik tombol "Simpan Perubahan" untuk menyimpan pengaturan Anda.
Anda sekarang dapat mengunjungi situs mereka untuk melihat preloader beraksi.
Metode 2, Tambahkan preloader WordPress dengan plugin preloader
Metode ini fleksibel, tetapi membutuhkan langkah-langkah tambahan untuk menerapkannya dengan benar di situs WordPress Anda.
Pertama, Anda perlu menginstal dan mengaktifkan plugin preloader. Untuk informasi lebih lanjut, lihat panduan langkah demi langkah kami untuk menginstal plugin WordPress.
Setelah kunjungan aktivasi Plugin »Preloader Konfigurasikan halaman konfigurasi plugin.
Pertama, masukkan kode heksadesimal untuk warna latar yang ingin Anda gunakan untuk layar pemuatan. Pengaturan standar adalah #FFFFFF (putih). Anda dapat menggunakan alat pemilihan warna online untuk menemukan kode HEX untuk warna yang Anda inginkan.
Lalu masukkan URL gambar pratinjau yang ingin Anda gunakan. Pengaya berisi gambar animasi standar.
Jika Anda ingin menggunakan animasi yang berbeda, Anda akan menemukan tautan untuk mengunduh gambar animasi preloader dari situs pihak ketiga. Kemudian Anda dapat mengunggah gambar ke direktori konten wp Anda dan menempelkan URL di sini.
Kemudian pilih di mana Anda ingin pengisi daya muncul.
Anda dapat menampilkannya di halaman mana saja di situs Anda atau memilih bagian tertentu.
Terakhir, lihat instruksi untuk menambahkan kode berikut ke file header.php di tema WordPress Anda.
Antes de abandonar la página, no lobo hacer clic y el botón "Guardar cambios" para modificar su configuración.
No se recomienda agregar el código a su tema de WordPress porque se borrará cuando modifica el tema.
Puede usarlo como secundario, generando el código de archivo bien encabezado.php de su tema secundario.
Además de una serie más grande de agregados, podemos complementar los fragmentos del código separándolos o complementando los detalles del sitio.
Aquí está el código que debe agregar:
function wpb_add_preloader() {
echo '';
}
add_action( 'wp_body_open', 'wpb_add_preloader' );
catatan: Metode penambahan kode ini hanya berfungsi dengan tema WordPress yang ada di WordPress 5.2 mendukung fungsi tambahan wp_body_open ().
Metode menambahkan kode ini memastikan bahwa kode Anda tetap di sana bahkan jika Anda memperbarui tema.
Setelah menambahkan kode, Anda dapat mengunjungi situsnya untuk melihat tindakan pra-bacaan.
Kami harap artikel ini membantu Anda mempelajari cara menambahkan pra-pembaca dengan mudah ke situs WordPress Anda. Untuk ide yang lebih menarik, lihat daftar tips, trik, dan peretasan WordPress yang paling berguna.
Jika Anda menyukai artikel ini, berlangganan saluran kami YouTube untuk menonton video tutorial WordPress. Anda juga dapat menemukan kami di Twitter y Facebook.
