Cara Menambahkan Animasi Pemuatan Halaman (Preloader) di WordPress

Kecepatan halaman memainkan peran penting dalam kinerja situs web Anda. Jika dibutuhkan lebih dari satu atau dua detik untuk memuat halaman sepenuhnya, hal itu dapat membuat pengguna cukup frustrasi sehingga membuat mereka meninggalkan situs Anda. Namun, ini dapat membantu jika pengunjung memiliki sesuatu yang menarik untuk dilihat saat halaman selesai dimuat.

Animasi pemuatan halaman, atau 'animasi prapemuat', membantu memberi tahu pengunjung bahwa halaman sedang dimuat (tidak macet), dan meningkatkan kemungkinan mereka tetap berada di situs. Dengan cara ini, ini dapat meningkatkan Pengalaman Pengguna (UX) dan mengurangi rasio pentalan Anda.

Dalam postingan ini, kami akan menjelaskan manfaat animasi preloader dan kapan menggunakannya. Kemudian kami akan memandu Anda melalui opsi untuk menambahkan animasi pemuatan halaman WordPress. Mari kita mulai!

Apa Itu Animasi Preloader?

Animasi prapemuat memberi sinyal kepada pengguna bahwa laman sedang dimuat secara aktif. Ini adalah animasi sederhana yang dapat digunakan sebagai indikator kemajuan untuk halaman yang hanya memuat konten tertentu dalam satu waktu.

Prapemuat WordPress memberi pengunjung sesuatu yang lebih menyenangkan dan menarik untuk dilihat dalam hitungan detik sambil menunggu seluruh halaman selesai dimuat. Dalam beberapa kasus, mereka bahkan dapat menawarkan perkiraan berapa banyak waktu yang tersisa.

Kapan Saya Harus Menggunakan Preloader?

Prapemuat adalah pilihan cerdas ketika Anda memiliki situs WordPress yang penuh dengan video atau gambar yang membutuhkan waktu lebih lama untuk memuat dari biasanya. Dengan begitu, pengunjung akan diyakinkan bahwa situs Anda berfungsi sebagaimana mestinya, dan tidak rusak.

Namun, jika sebagian besar situs Anda berbasis teks, animasi prapemuat mungkin tidak diperlukan. Sebaliknya, akan lebih masuk akal untuk fokus pada peningkatan kecepatan halaman Anda.

2 Pilihan untuk Menambahkan Animasi Pemuatan Halaman ke WordPress

Ada dua metode utama yang dapat Anda gunakan untuk menambahkan animasi preloader WordPress ke situs Anda. Anda dapat menggunakan plugin, yang merupakan opsi yang lebih mudah, atau melakukan tugas secara manual. Mari kita lihat cara memulai dengan kedua metode tersebut.

Opsi 1: Tambahkan Animasi Preloader Menggunakan Plugin

Menambahkan animasi preloader melalui plugin adalah pilihan yang lebih cepat dan mudah bagi sebagian besar pengguna. Ada beberapa plugin yang dapat Anda gunakan, tetapi kami merekomendasikan WP Smart Preloader:

Ini adalah plugin gratis yang sangat dapat disesuaikan. Ini menggunakan CSS dan markup HTML minimal untuk membantu mengurangi risiko pengguna meninggalkan situs web Anda saat konten dimuat. Pada langkah-langkah berikut, kami akan menunjukkan cara kerjanya.

Langkah 1: Unduh WP Smart Preloader

Anda dapat mengunduh plugin WP Smart Preloader melalui Direktori Plugin WordPress. Kemudian Anda dapat mengunggah file .zip ke situs WordPress Anda, dengan membuka Plugin > Tambah Baru > Unggah Plugin di dasbor admin:

Pilihan lainnya adalah mencari plugin melalui bilah pencarian di layar Plugin > Add New :

Either way, setelah plugin diinstal, klik tombol Activate . Anda kemudian dapat menemukan opsinya di bawah Pengaturan > WP Smart Preloader .

Langkah 2: Pilih Gaya Anda

Pada halaman Pengaturan Preloader Cerdas WP, hal pertama yang harus dilakukan adalah memilih gaya untuk prapemuat. Di bawah bagian Select Preloader , akan ada menu drop-down yang memungkinkan Anda memilih dari enam opsi gaya, serta opsi untuk animasi kustom:

Setelah Anda memilih gaya, Anda dapat mempratinjaunya di jendela di bawah ini. Jika Anda ingin menambahkan animasi khusus Anda sendiri, Anda dapat memasukkan kode HTML Anda di bawah bagian Animasi Khusus :

Di akhir layar ini, Anda dapat mengatur durasi loader itu sendiri dan efek 'fade out':

Jika Anda membiarkan kolom ini kosong, defaultnya akan ditetapkan masing-masing pada 1500 milidetik (1,5 detik) dan 2500 milidetik (2,5 detik). Setelah selesai, klik tombol Simpan Perubahan .

Langkah 3: Pratinjau Animasi Preloader Anda

Setelah Anda selesai mengonfigurasi pengaturan Anda, kunjungi situs WordPress Anda di tab browser baru untuk mempratinjau animasi preloader. Anda dapat kembali untuk melakukan perubahan gaya sesuai kebutuhan. Setelah Anda puas dengan prapemuat, prapemuat akan disiapkan dan siap digunakan.

Opsi 2: Tambahkan Animasi Preloader Secara Manual

Jika Anda tidak tertarik menggunakan plugin, Anda tetap dapat menambahkan fitur ini ke situs Anda secara manual. Keuntungan utama membuat prapemuat khusus adalah Anda memiliki lebih banyak fleksibilitas dalam cara mendesainnya.

Tentu saja, ini juga proses yang lebih sulit. Selanjutnya, kami akan memandu Anda tentang cara membuat, mengunggah, dan memformat animasi prapemuat khusus untuk situs WordPress Anda.

Langkah 1: Brainstorming Animasi Anda

Langkah pertama adalah memutuskan jenis animasi apa yang akan Anda gunakan. Anda dapat meneliti alat animasi prapemuat lainnya untuk mendapatkan gambaran tentang gaya yang Anda sukai. Ada beberapa animasi gratis yang bisa Anda gunakan dan jelajahi di Codepen, yang bisa menjadi cara bagus untuk mendapatkan beberapa ide.

Langkah 2: Kembangkan atau Unduh Animasi Anda

Untuk mengembangkan animasi Anda, Anda dapat menggunakan alat seperti Photoshop untuk membuat GIF atau animasi preloader yang berputar. Anda juga dapat merujuk ke sumber daya kami untuk membuat animasi WordPress menggunakan CSS.

Kami merekomendasikan pendekatan yang terakhir, karena menambahkan prapemuat GIF ke situs WordPress Anda paling baik dilakukan dengan plugin. Selain Codepen (disebutkan di atas), Anda juga dapat mengunduh animasi dari situs seperti Spinkit dan LoadLab.

Untuk tutorial ini, kami akan menggunakan animasi preloader dari Spinkit. Dari mana pun Anda mendapatkan animasi, Anda memerlukan kode sumber CSS untuk menambahkannya secara manual ke situs WordPress Anda:

Sebagian besar animasi prapemuat gratis menyertakan tautan sumber, tempat Anda dapat menemukan HTML dan CSS-nya:

Ingatlah bahwa Anda juga dapat menggunakan kode sumber CSS dari animasi prapemuat, lalu menyesuaikannya sesuai keinginan Anda.

Langkah 3: Buat Tema Anak

Setelah Anda memiliki animasi, Anda dapat menambahkannya ke situs WordPress Anda. Cara teraman untuk melakukannya adalah menyiapkan tema anak. Jika Anda tidak yakin bagaimana melakukannya, Anda dapat meninjau tutorial kami tentang cara membuat tema anak WordPress.

Langkah 4: Tambahkan Kode HTML ke File header.php Tema Anda

Langkah selanjutnya adalah mencari file header.php untuk tema WordPress Anda. Anda dapat melakukan ini melalui layar Editor Tema WordPress:

Anda juga dapat mengedit file menggunakan klien FTP seperti FileZilla. File tersebut akan ditempatkan di folder wp-content > themes di direktori root situs Anda.

Setelah Anda menemukan dan membuka file, masukkan kode HTML berikut di bawah tag body:

 <!--CSS Spinner--> <div class="spinner-wrapper"> <div class="spinner"></div> </div>

Sesuaikan atau tambahkan kode HTML apa pun yang diperlukan untuk animasi preloader WordPress khusus Anda, dan simpan file tersebut.

Langkah 5: Tambahkan Kode CSS ke Stylesheet Anda

Sekarang saatnya menambahkan CSS untuk mengatur gaya animasi Anda. Temukan lembar gaya CSS ( style.css ) untuk tema WordPress Anda, lalu salin dan tempel kode sumber CSS untuk animasi Anda. Dalam kasus kami, kami akan menambahkan yang berikut:

 .spinner { margin: 100px auto; width: 50px; height: 40px; text-align: center; font-size: 10px; } .spinner > div { background-color: #333; height: 100%; width: 6px; display: inline-block; -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; animation: sk-stretchdelay 1.2s infinite ease-in-out; } .spinner .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .spinner .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .spinner .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .spinner .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } @-webkit-keyframes sk-stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 20% { -webkit-transform: scaleY(1.0) } } @keyframes sk-stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); } 20% { transform: scaleY(1.0); -webkit-transform: scaleY(1.0); } }

Sebelum Anda menyimpan perubahan Anda, hapus bagian ini: "margin: 100px auto;". Sebagai gantinya, salin dan tempel berikut ini:

 position: absolute; top: 48%; left: 48%;

Kemudian Anda dapat menyimpan file tersebut.

Langkah 6: Tambahkan Kode jQuey untuk Membuat Karya Animasi

Agar animasi preloader spinner Anda berfungsi, Anda perlu menambahkan sedikit jQuery. Untuk melakukan itu, Anda dapat menavigasi kembali ke file header.php , dan menyisipkan yang berikut ini sebelum tag body penutup:

 <script> $(document).ready(function() { //Preloader preloaderFadeOutTime = 500; function hidePreloader() { var preloader = $('.spinner-wrapper'); preloader.fadeOut(preloaderFadeOutTime); } hidePreloader(); }); </script>

Kemudian simpan file Anda, dan pratinjau situs Anda untuk memastikan animasi prapemuat WordPress berfungsi sebagaimana mestinya.

Temukan Lebih Banyak Tips dan Panduan dari WP Engine

Menambahkan animasi prapemuat WordPress ke situs Anda dapat membantu melibatkan pengunjung dan mengurangi rasio pentalan. Selain itu, Anda memiliki banyak opsi untuk menyelesaikan pekerjaan dengan cepat.

Di WP Engine, misi kami adalah memberikan tip, trik, dan sumber daya bagi pengembang, untuk membantu Anda memastikan bahwa situs web Anda selalu terlihat terbaik. Pelajari lebih lanjut tentang rencana kami hari ini!