Cara Menambahkan Animasi Preloader ke WordPress (Langkah demi Langkah)

Apakah Anda ingin menambahkan preloader ke situs WordPress Anda? Prapemuat adalah animasi yang menunjukkan progres pemuatan halaman di latar belakang.

Prapemuat meyakinkan pengguna bahwa situs web sedang bekerja memuat halaman. Ini dapat membantu meningkatkan pengalaman pengguna dan mengurangi tingkat pentalan keseluruhan.

Di artikel ini, kami akan menunjukkan kepada Anda cara menambahkan preloader ke WordPress dengan mudah.

Apa itu Preloader dan Kapan Anda Harus Menggunakannya?

Prapemuat adalah pesan animasi atau status yang menunjukkan progres pemuatan halaman di latar belakang.

Biasanya ketika Anda mengunjungi situs web, browser Anda mulai mengunduh berbagai bagian konten. Beberapa bagian situs web memuat lebih cepat (mis. Teks, kode HTML, CSS) sedangkan yang lain memuat lebih lambat (mis. Gambar dan video).

Jika sebagian besar konten Anda berupa teks dengan sangat sedikit gambar dan video, maka Anda tidak perlu menambahkan preloader ke situs web Anda. Sebaliknya, Anda harus fokus meningkatkan kecepatan dan kinerja situs web untuk memuat halaman lebih cepat.

Di sisi lain, jika sebagian besar konten Anda adalah gambar, foto, dan embed video, maka pengguna Anda perlu menunggu beberapa saat sebelum mereka benar-benar dapat melihat semua konten.

Selama unduhan parsial ini, situs web Anda mungkin terasa lambat. Terkadang pengguna bahkan berpikir itu rusak. Menambahkan preloader, mengisi celah ini dan menunjukkan kepada pengguna indikator kemajuan selama pemuatan halaman.

Anda dapat melihat contoh langsung dari preloader dengan mengklik tombol Preview sementara menulis posting blog di WordPress.

WordPress akan membuka pratinjau langsung dari posting blog Anda di jendela baru, dan itu akan menampilkan preloader sebelum benar-benar menunjukkan pratinjau langsung.

Karena itu, mari kita lihat bagaimana Anda dapat dengan mudah menambahkan preloader ke situs web WordPress Anda.

Metode 1. Menambahkan Preloader di WordPress menggunakan WP Smart Preloader

Metode ini disarankan karena lebih mudah diterapkan dan tidak memerlukan perubahan apa pun pada tema WordPress Anda.

Hal pertama yang perlu Anda lakukan adalah menginstal dan mengaktifkan WP Smart Preloader plugin. Untuk detail lebih lanjut, lihat panduan langkah demi langkah kami di cara menginstal plugin WordPress.

Setelah aktivasi, Anda perlu mengunjungi Pengaturan »WP Smart Preloader halaman untuk mengkonfigurasi pengaturan plugin.

Pertama, Anda harus memilih gaya preloader atau animasi pemuatan halaman. Plugin ini dilengkapi dengan enam animasi bawaan untuk dipilih. Anda juga dapat mengunggah HTML dan CSS kustom Anda sendiri untuk membuat preloader khusus.

Setelah itu, Anda dapat membuat preloader hanya muncul di beranda dengan mencentang opsi ‘Tampilkan hanya di Halaman Beranda’.

Selanjutnya, Anda perlu menggulir ke bawah ke bagian 'Durasi untuk menampilkan Loader'. Anda perlu menentukan durasi untuk preloader. Opsi default adalah 1500 milidetik (1,5 detik) yang seharusnya berfungsi untuk sebagian besar situs, tetapi Anda dapat mengubahnya jika diinginkan.

Anda juga dapat mengatur waktu pemuatan yang diperlukan untuk sepenuhnya memudar. Opsi default adalah 2500 detik atau 2,5 detik.

Terakhir, jangan lupa klik tombol ‘Simpan perubahan’ untuk menyimpan pengaturan Anda.

Anda sekarang dapat mengunjungi situs web Anda untuk melihat preloader sedang beraksi.

Metode 2. Menambahkan Preloader di WordPress menggunakan Preloader Plugin

Metode ini fleksibel tetapi membutuhkan langkah-langkah tambahan untuk menerapkannya dengan benar pada Anda Situs WordPress.

Hal pertama yang perlu Anda lakukan adalah menginstal dan mengaktifkan Prapemuat plugin. Untuk detail lebih lanjut, lihat panduan langkah demi langkah kami di cara menginstal plugin WordPress.

Setelah aktivasi, Anda perlu mengunjungi Plugin »Preloader halaman untuk mengkonfigurasi pengaturan plugin.

Pertama, Anda harus memasukkan kode Hex untuk warna latar belakang yang ingin Anda gunakan untuk layar pemuatan. Opsi default adalah #FFFFFF (putih). Anda dapat menggunakan alat pemilih warna online untuk menemukan kode HEX untuk warna yang ingin Anda gunakan.

Selanjutnya, Anda perlu memberikan URL gambar preloader yang ingin Anda gunakan. Plugin ini dilengkapi dengan gambar animasi default.

Jika Anda ingin menggunakan animasi lain, maka Anda akan menemukan tautan untuk mengunduh gambar preloader animasi dari situs web pihak ketiga. Anda kemudian dapat mengunggah gambar itu ke folder konten wp Anda dan menempelkan URL di sini.

Selanjutnya, Anda harus memilih di mana Anda ingin menampilkan preloader.

Anda dapat memilih untuk menampilkannya di semua halaman situs web Anda, atau Anda dapat memilih bagian tertentu.

Terakhir, Anda akan melihat instruksi untuk menambahkan kode berikut ke file header.php tema WordPress Anda.

Sebelum Anda meninggalkan halaman, jangan lupa klik tombol ‘Simpan perubahan’ untuk menyimpan pengaturan Anda.

Kami tidak merekomendasikan menambahkan kode ke tema WordPress Anda karena akan dihapus ketika Anda memperbarui tema.

Jika Anda menggunakan a tema anak, maka tidak apa-apa untuk menambahkan kode ke file header.php tema anak Anda.

Solusi yang lebih baik adalah menambahkan kode ini menggunakan yang terpisah Plugin Code Snippets, atau dalam a plugin khusus situs.

Inilah kode yang perlu Anda tambahkan:

function wpb_add_preloader () {
 gaung

';
 }
 add_action ('wp_body_open', 'wpb_add_preloader');

catatan: metode penambahan kode ini hanya akan berfungsi pada tema WordPress yang kompatibel dengan fungsi wp_body_open () yang ditambahkan WordPress 5.2.

Metode menambahkan kode ini memastikan bahwa kode Anda tetap di sana bahkan jika Anda memperbarui tema.

Setelah menambahkan kode, Anda dapat mengunjungi situs web Anda untuk melihat preloader beraksi.

Kami harap artikel ini membantu Anda mempelajari cara menambahkan Preloader dengan mudah ke situs WordPress Anda. Anda mungkin juga ingin melihat daftar kami yang paling berguna Kiat, trik, dan peretasan WordPress untuk ide-ide keren lainnya.

Jika Anda menyukai artikel ini, silakan berlangganan artikel kami Saluran Youtube untuk tutorial video WordPress. Anda juga dapat menemukan kami di Kericau dan Facebook.

.

Sumber Artikel