Cara Menambahkan Back to Top di WordPress

Teknotes.id – Tombol back to top memudahkan pengguna untuk dapat kembali ke halaman paling atas dengan cepat, tanpa adanya tombol ini pengunjung Anda mungkin merasa kelelahan. Untungnya, untuk menambahkan tombol ini di WordPress sangatlah mudah dan sederhana.

Pada dasarnya kebanyakan tema sekarang sudah memiliki fitur back to top, akan tetapi jika tema yang Anda gunakan belum memiliki fitur tersebut, Anda dapat mengikuti panduan ini.

Tombol back to top dilengkapi dengan ikon panah yang memungkinkan Anda untuk menggulir ke bagian atas halaman secara cepat. Jadi saat pengguna menekan tombol back to top, maka secara otomatis akan langsung menggulir ke atas.

Pada artikel ini, kami akan menunjukkan cara menambahkan back to top di WordPress. Terdapat dua metode untuk menambahkan back to top di WordPress, metode pertama menggunakan plugin WordPress khusus dan metode kedua tanpa plugin secara manual menggunakan kode.

Panduan ini ditulis menggunakan bahasa yang mudah dimengerti dan dilengkapi dengan gambar agar lebih mudah dipahami.

1. Cara Menambahkan Back to Top di WordPress Menggunakan Plugin

Di repositori WordPress banyak sekali plugin yang memiliki fitur back to top, diantaranya seperti To Top, Scroll Top, Simple Scroll to Top Button, WPFront Scroll Top.

Diantara plugin yang disebutkan diatas, kami lebih merekomendasikan plugin WPFront Scroll Top karena memiliki semua opsi penyesuaian yang mudah. Anda dapat mengatur semua icon gambar untuk tombol Anda, menambahkan elemen Font Awesome dan bahkan menyesuaikan bentuk icon.

Selain itu WPFront Scroll Top dapat dikonfigurasi untuk menampilkan icon responsif yang dapat ditampilkan di perangkat seluler apa pun dan juga dapat menyembunyikan tombol di layar yang lebih kecil.

1.1 Langkah 1

Pertama-tama kita buka dasbor WordPress, kemudian Klik Plugins > Add New.

Cara Menaikan Memory Limit Pada WordPress

1.2 Langkah 2

Langkah selanjutnya cari plugin bernama WPFront Scroll Top.

1.3 Langkah 3

Klik Install Now dan setelah itu klik Active.

Cara Menambahkan Back to Top di WordPress

1.4 Langkah 4

Setelah mengaktifkan plugin, Anda akan secara otomatis diarahkan ke halaman penyesuaian. Jika tidak, klik Settings » Scroll Top. Selanjutnya centang pada opsi Enabled.

Plugin ini memiliki banyak penyesuaian, biarkan secara default untuk penyesuaian. Jika Anda ingin mengubahnya, jangan ragu untuk melakukannya.

Cara Menambahkan Back to Top di WordPress

1.5 Langkah 5

Pada bidang Button Style pilih Image, dan pada bidang Location pilih Button Right.

Cara Menambahkan Back to Top di WordPress

1.6 Langkah 6

Pada bidang Filter Anda dapat memilih halaman tempat yang Anda inginkan untuk menampilkan tombol back to top. Anda dapat memilih semua halaman atau halaman khusus saja. Selain itu plugin ini juga dapat mengecualikan halaman, oleh karena itu pilih cara yang Anda inginkan.

Cara Menambahkan Back to Top di WordPress

1.7 Langkah 7

Sekarang pilih icon gambar yang ingin Anda tampilkan di situs blog Anda. Selain itu Anda juga dapat menambahkan URL Anda sendiri jika icon yang disediakan tidak sesuai keinginan Anda. Jika sudah langkah terakhir adalah untuk menyimpannya, silakan klik Save Changes.

Cara Menambahkan Back to Top di WordPress

1.8 Langkah 8

Yeay! selamat Anda telah berhasil membuat tombol back to top menggunakan plugin.

Image from Gyazo

2. Cara Menambahkan Back to Top di WordPress Tanpa Plugin

Tombol yang back to top yang dibuat akan berada di kanan bawah halaman, dan sepenuhnya responsif dapat ditampilkan di berbagai perangkat.

Sebelum kita mulai ke langkah pertama, alangkah baiknya Anda untuk membackup file style.css dan functions.php untuk menjaga hal-hal yang tidak diinginkan.

Jika Anda menambahkan kode apa pun itu ke dalam WordPress, praktik terbaik WordPress adalah membuat tema child (anak), sehingga setiap ada perubahan yang Anda buat tidak akan terhapus oleh pembaruan tema asli di masa yang akan datang.

Jika Anda tidak tau cara membuat tema child, Anda dapat mengikuti artikel kami tentang Cara Membuat Child Theme WordPress.

2.1 Langkah 1

Login ke akun cPanel Anda terlebih dahulu.

Cara Memperbaiki Error WordPress not a valid JSON response

2.2 Langkah 2

Selanjutnya klik File Manager.

Cara Menaikan Memory Limit Pada WordPress

2.3 Langkah 3

Kemudian navigasikan ke folder JavaScript tema Anda yang ada di public_html » wp_content » themes » tema yang Anda digunakan » js.

Jika tema Anda tidak menemukan folder js, maka buat folder js secara manual.

Cara Menambahkan Back to Top di WordPress

2.4 Langkah 4

Didalam folder js, buat file baru bernama topbutton.js .

Cara Menambahkan Back to Top di WordPress

2.5 Langkah 5

Salin kode dibawah ini dan tempel kedalam file topbutton.js dan klik Save Changes untuk menyimpan perubahan.

// Back to Top Script.

(function($) {
  // Make sure JS class is added.
  document.documentElement.className = "js";
  // Run on page scroll.
  $(window).scroll( function() {
  
  // Toggle header class after threshold point.
    if ( $(this).scrollTop() > 100 ) {
      $(".topbutton").addClass('sticky');
    } else {
      $(".topbutton").removeClass('sticky');
    }
  });
  
  $('.topbutton').click(function() {      // When arrow is clicked
    $('body,html').animate({
        scrollTop : 0                       // Scroll to top of body
    }, 500);
});
})(jQuery);

2.6 Langkah 6

Salin dan tempel kode dibawah ini untuk memberitahu WordPress tentang fungsi kode tersebut dan menambahkan kode tombol back to top. Tambahkan kode tersebut paling bawah sendiri di file functions.php dan tekan tombol Update File untuk menyimpan perubahan.

// Enqueue custom scripts. 
add_action( 'wp_enqueue_scripts', 'teknotes_custom_scripts' );
function teknotes_custom_scripts() { 
  wp_enqueue_script( 'gp-sample-top-button-script', get_stylesheet_directory_uri() . '/js/topbutton.js', array( 'jquery' ), null, true );
}

//Back to top button.
add_action( 'wp_footer', 'teknotes_back_to_top_button' );
function teknotes_back_to_top_button() {
  echo '<div id="topbutton "><a class="topbutton" href="#top" title=”ToTop”><span class="dashicons dashicons-arrow-up-alt2"></span></a></div>';
}

2.7 Langkah 7

Pada halaman dasbor WordPress, klik menu Appearance » Customize » Additional CSS.

2.8 Langkah 8

Salin kode berikut ini dan tempel ke Additional CSS dimana pun Anda inginkan, asalkan tidak berada di antara tag dan kode yang sudah ada. Kami menyarankan untuk menempatkan paling bawah sendiri. Klik Publish untuk menyimpan perubahan.

/* Back To Top button ------------------------------------------*/
.js .topbutton.sticky {
  visibility: visible;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.topbutton {
  overflow: hidden;
  visibility: hidden;
  display: block;
  float: right;
  bottom: 3%;
  right: 1%;
  z-index: 9999;
  width: 40px;
  height: 40px;
  position: fixed;
  background-color: rgba(0,0,0,0.4);
  border-radius: 50%;
  border-bottom: none;
  text-decoration: none;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.topbutton span {
  color: #fff;
  margin: 0;
  position: relative;
  left: 10px;
  top: 8px;
  font-size: 1.2rem;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.topbutton:hover,
.topbutton:focus {
  outline: none;
  text-decoration: none;
  background-color: rgba(0,0,0,0.7);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

2.9 Langkah 9

Yeay! selamat Anda telah berhasil membuat tombol back to top tanpa plugin atau menggunakan kode script.

Image from Gyazo

Kesimpulan

Jika situs blog Anda tidak memiliki tombol ini, sekarang untuk memasangnya di blog Anda, hal ini agar lebih ramah pengguna sehingga disukai pembaca karena memudahkan visitor untuk kembali ke halaman atas dengan satu klik.

Sebagian besar tema WordPress populer memiliki opsi tombol back to top default. Jadi sebelum mengikuti artikel Cara Menambahkan Back to Top di WordPress, harap periksa apakah tema Anda memiliki fitur ini.

Jika dirasa artikel ini bermanfaat bagi Anda, jangan ragu untuk membagikannya kepada keluarga atau teman-teman Anda. Apabila Anda memiliki kendala atau masalah jangan ragu untuk berdiskusi dengan kami melalui kolom komentar dibawah ini.

Terima kasih telah membaca artikel ini hingga selesai, semoga bermanfaat. Nantikan artikel kami selanjutnya ya dan selamat mencoba.

by Mr M
Hi! I am Owner and Writer at Teknotes.id. I love WordPress, Graphic Designer, Technology, Blogging, and Programming. I will help you making some technically being easy to understand :)

Tinggalkan komentar