Panduan Pengembang Tambahkan Gulir Halus ke Efek Teratas di WordPress menggunakan JQuery

Diterbitkan: 2022-06-03

Kita semua menyukai WordPress karena mulusnya dan fakta bahwa itu membuat segalanya lebih mudah ketika menggunakan Sistem Manajemen Konten yang efisien.

Ini tidak berlebihan tetapi pengembangan web yang mudah dan dapat diakses adalah berkah bagi webmaster baru. WordPress memiliki lusinan fitur yang memungkinkan berbagai pemilik situs web menyediakan antarmuka yang sangat halus dan interaktif kepada penggunanya.

Mereka yang baru mengenal WordPress, dapat memeriksa tutorial WordPress di sumber seperti The Blog Starter, yang memiliki panduan langkah demi langkah tentang cara memulai dan mengelola blog Anda.

Jika Anda hanya berfokus pada konten di situs web Anda, kami ingin memberi tahu Anda bahwa situs web yang responsif dan menarik secara visual sama pentingnya dengan konten.

Jika Anda sudah memiliki situs web dan tidak tahu harus mulai dari mana, luangkan waktu dan investasikan 30 menit setiap hari untuk memikirkan tampilan dan antarmuka situs web Anda. Percayai kami karena Anda akan secara bertahap menemukan elemen yang perlu Anda perbaiki. Setelah Anda meningkatkan situs web Anda dengan upaya visual yang luar biasa, tingkat percakapan akan meningkat.

Dan jika Anda adalah seseorang yang telah berinvestasi dalam menyediakan pengalaman mengunjungi yang lancar untuk situs web Anda, Kudos to you! Nah, kami memiliki tutorial yang bagus untuk semua orang yang ingin lebih memberikan perubahan yang menarik pada situs web mereka dan meningkatkan kinerja visual situs web mereka secara keseluruhan.

Dalam posting blog ini, izinkan kami memandu Anda tentang menambahkan Gulir Halus ke efek teratas di WordPress dengan bantuan jQuery.

Mengapa menggunakan Gulir Halus?

Biasanya, ketika situs web memiliki artikel yang panjang dan pengguna sedang membacanya, mereka mungkin merasa frustasi untuk mencapai akhir halaman web.

Jadi, jika situs web Anda dapat memberikan gulir mulus ke atas hanya dalam satu klik, pembaca akan menemukan situs web Anda mulus dan super mulus.

Jadi, jika Anda adalah pemilik situs web atau pemasar digital, Anda harus menjadi oportunis dan memastikan bahwa Anda melakukan semua yang diperlukan untuk menarik audiens tambahan dan organik ke situs web Anda.

Cara Menambahkan Gulir Halus ke Efek Teratas di WordPress

Untuk dapat menambahkan scroll mulus ke To Effect di WordPress, Anda dapat menggunakan salah satu cara di bawah ini:

1. Menggunakan beberapa kode yang ditulis dalam jQuery

2. Menggunakan plugin

Kami biasanya lebih suka coding daripada plugin karena itu tidak menyisakan ruang untuk cegukan jika dilakukan dengan cara yang benar. Plugin terkadang dapat mengurangi kecepatan memuat situs web tetapi pengkodean dapat membantu Anda menambahkan beberapa penyesuaian tanpa memengaruhi kecepatan di tempat pertama. Khususnya, dalam tutorial ini, kami akan menjelaskan proses pengkodean.

Bagaimana Cara Menambahkan Efek Gulir Halus ke Atas di WordPress dengan coding?

Untuk menambahkan gulir halus ke efek teratas di situs WordPress Anda menggunakan pengkodean, Anda harus mengikuti empat langkah ini:

Buat file “Smoothscrolleffect.js”.
Lampirkan fungsi “Smoothscrolleffect.js” ke tema Anda.
Tambahkan ikon di tema
Menghubungkan efek dengan halaman web

Setelah Anda selesai dengan 4 langkah ini, Anda siap untuk mendapatkan lebih banyak pembaca. Jika Anda seorang programmer, maka Anda dapat membuat skrip sendiri sesuai kebutuhan Anda.

Untuk non-programmer, kami telah menjelaskan setiap langkah secara menyeluruh dan menambahkan kode yang diperlukan. Jadi, Anda hanya perlu membaca langkah-langkahnya dan menjalankannya sesuai dengan itu.

Langkah 1: Buat file “Smoothscrolleffect.js”

Ini adalah file terpenting yang akan Anda buat untuk langkah ini. Jika Anda gagal menerapkan langkah ini secara efektif, maka Anda mungkin tidak akan mendapatkan scroll yang mulus sepenuhnya.

Pada langkah ini, kita akan membuat file “.js” (jQuery) yang berisi fungsi yang akan menambahkan scroll halus ke efek Top. Ikuti langkah-langkah untuk membuat file “.js” dan mengunggahnya ke direktori situs web.

Buat file notepad baru di sistem Anda.
Salin kode berikut:

jQuery(dokumen).siap(fungsi($){

$(jendela).scroll(fungsi(){

if ($(ini).scrollTop() < 200) {

$('#smoothup') .fadeOut();

} kalau tidak {

$('#smoothup') .fadeIn();

}

});

$('#smoothup').on('klik', function(){

$('html, body').animate({scrollTop:0}, 'cepat');

kembali salah;

});

Rekatkan kode di file notepad.
Simpan dengan nama apapun tapi pastikan ekstensinya adalah “.js”.
Masuk ke cPanel situs web Anda.
Arahkan ke direktori situs web “/js/”

Catatan: Jika situs web Anda tidak memiliki direktori js maka Anda harus membuatnya.

Unggah file “.js” yang telah Anda buat di sistem Anda ke dalam direktori.

Langkah 2: Lampirkan gulir halus ke tema

Pada langkah di atas, kami telah membuat file (dengan fungsi gulir halus) di direktori situs web, dan pada langkah ini, kami akan menautkan fungsi gulir halus ke tema kami. Untuk melakukannya, ikuti langkah-langkahnya:

Arahkan ke editor tema Anda di dasbor Admin WordPress. Buka function.php untuk Mengedit. dan paste kode berikut di dalamnya.

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

Tekan "Simpan Perubahan".

Langkah 3. Tambahkan ikon ke tema

Jelas, Anda ingin menambahkan ikon ke situs web Anda di mana Anda dapat menawarkan pembaca untuk menggulir ke Atas. Selain itu, Anda perlu membuatnya lebih interaktif dan responsif. Anda bisa menyelesaikannya dengan bantuan CSS sebagai berikut:

Arahkan ke stylesheet.css tema Anda di Editor tema.
Salin kode berikut.

#memperhalus {

tinggi: 40 piksel;

lebar: 40 piksel;

Posisi: tetap;

Bawah:50 piksel;

Kanan: 100 piksel;

Indentasi teks:-9999px;

Tampilan: tidak ada;

Latar Belakang:url(“http://www.example.com/wp-content/uploads/2013/07/top_icon.png”);

-webkit-transisi-durasi: 0.4s;

-moz-transisi-durasi: 0.4s; durasi transisi: 0,4 detik;

}

#smoothup:arahkan kursor {

-webkit-transform: putar (360 derajat) }

latar belakang: url() no-repeat;

}

Tempelkan di lembar gaya tema Anda.
Tekan "Simpan Perubahan".

Di sini Anda dapat mengubah ikon sesuai kebutuhan Anda; kami telah menggunakan referensi. Untuk mengubah gambar, Anda dapat mengunggahnya ke situs web Anda dan menempelkannya ke bidang Latar Belakang: URL pada kode di atas.

Langkah 4: Menghubungkan gulir halus dengan halaman web.

Sekarang kita telah membuat file “.js”, dan mengunggahnya ke direktori situs web, melampirkannya dengan tema, dan membuat ikon untuk efek, saatnya untuk langkah terakhir. Kami sekarang akan menautkan efek gulir halus ke semua halaman web situs web. Ikuti langkah-langkahnya:

Buka footer.php di Editor tema.
Salin kode berikut:
1. <a href="#top" id="smoothup" title="Kembali ke atas"></a>
Paste di halaman footer.php.
Tekan "Simpan Perubahan".

Selamat!, Anda telah berhasil menambahkan efek smooth scroll top ke situs WordPress Anda menggunakan jQuery.

Kesimpulan

Kami berharap tutorial di atas akan secara efektif membantu Anda menambahkan efek 'gulir halus ke Atas' di WordPress menggunakan JQuery dan merayu pengguna Anda dengan pengalaman navigasi situs web yang luar biasa.

Jika Anda menghadapi masalah dalam menerapkan langkah-langkah yang disebutkan di atas, beri tahu kami dengan memberikan komentar di bawah.