Kalian pasti tahu bahwa tombol share sangat penting untuk memperluas jangkauan konten kalian di media sosial. Tapi, tidak semua orang ingin menambah plugin di WordPress karena bisa memperlambat website. Nah, di sini kita akan membahas cara membuat tombol share di WordPress tanpa menggunakan plugin, mudah dan efektif!
Kenapa Harus Tanpa Plugin?
Penggunaan plugin memang praktis, tapi ada beberapa alasan kenapa kalian mungkin ingin menghindarinya:
- Kinerja Website: Terlalu banyak plugin bisa memperlambat kecepatan website.
- Keamanan: Plugin pihak ketiga bisa menjadi celah keamanan jika tidak dikelola dengan baik.
- Kustomisasi: Kalian punya kontrol penuh untuk menyesuaikan tampilan dan fungsi tombol share sesuai keinginan.
Langkah-langkah Membuat Tombol Share WordPress Tanpa Plugin
1. Buat Backup Website Kalian
Sebelum melakukan perubahan apa pun, selalu penting untuk membuat backup website kalian. Ini untuk memastikan bahwa kalian bisa mengembalikan situs ke kondisi semula jika terjadi kesalahan.
2. Tambahkan Kode HTML Tombol Share
Pertama-tama, kita perlu menambahkan kode HTML untuk tombol share. Berikut adalah contoh kode untuk tombol share ke Facebook, Twitter, dan LinkedIn:
<div class="share-buttons">
<a href="https://www.facebook.com/sharer/sharer.php?u=<URL>" target="_blank">
<img src="https://example.com/images/facebook.png" alt="Facebook" />
</a>
<a href="https://twitter.com/intent/tweet?url=<URL>&text=<TEXT>" target="_blank">
<img src="https://example.com/images/twitter.png" alt="Twitter" />
</a>
<a href="https://www.linkedin.com/shareArticle?mini=true&url=<URL>&title=<TITLE>&summary=<SUMMARY>&source=<SOURCE>" target="_blank">
<img src="https://example.com/images/linkedin.png" alt="LinkedIn" />
</a>
</div>
Gantilah <URL>, <TEXT>, <TITLE>, <SUMMARY>, dan <SOURCE> dengan URL artikel kalian, teks yang ingin dibagikan, judul artikel, ringkasan artikel, dan sumber artikel kalian.
3. Tambahkan Kode CSS untuk Styling
Agar tombol share kalian terlihat menarik, tambahkan kode CSS berikut ke dalam file style.css di theme kalian:
.share-buttons {
display: flex;
justify-content: space-around;
margin-top: 20px;
}
.share-buttons a {
text-decoration: none;
}
.share-buttons img {
width: 32px;
height: 32px;
}
Kode ini akan membuat tombol share kalian berjajar rapi dan berukuran seragam.
4. Tambahkan Kode JavaScript (Opsional)
Untuk menambahkan sedikit interaktivitas, kalian bisa menambahkan kode JavaScript berikut ke file theme.js atau langsung di dalam template kalian:
document.querySelectorAll('.share-buttons a').forEach(function(button) {
button.addEventListener('click', function(event) {
event.preventDefault();
window.open(this.href, 'popup', 'width=600,height=600');
return false;
});
});
Kode ini akan membuka link share di jendela pop-up yang lebih kecil, memberikan pengalaman pengguna yang lebih baik.
Menempatkan Tombol Share di Template WordPress
1. Single Post Template
Untuk menempatkan tombol share di template postingan, buka file single.php dan tambahkan kode HTML tombol share setelah konten postingan:
<?php the_content(); ?>
<div class="share-buttons">
<!-- Kode HTML Tombol Share di sini -->
</div>
2. Page Template
Jika kalian ingin menambahkan tombol share di halaman statis, buka file page.php dan lakukan hal yang sama:
<?php the_content(); ?>
<div class="share-buttons">
<!-- Kode HTML Tombol Share di sini -->
</div>
3. Sidebar atau Footer
Untuk menempatkan tombol share di sidebar atau footer, buka file sidebar.php atau footer.php dan tambahkan kode HTML tombol share di tempat yang kalian inginkan:
<div class="share-buttons">
<!-- Kode HTML Tombol Share di sini -->
</div>
Uji Coba dan Penyesuaian
Setelah menambahkan kode, pastikan untuk menguji coba tombol share kalian di berbagai perangkat dan browser. Periksa apakah tombol berfungsi dengan baik dan apakah tampilan sudah sesuai dengan yang diinginkan.
Jika ada masalah, periksa kembali kode HTML, CSS, dan JavaScript yang sudah kalian tambahkan. Jangan ragu untuk menyesuaikan styling dan interaktivitas sesuai kebutuhan.
Keuntungan Membuat Tombol Share Tanpa Plugin
- Ringan dan Cepat: Mengurangi beban website karena tidak menggunakan plugin tambahan.
- Keamanan Terjaga: Mengurangi risiko celah keamanan dari plugin pihak ketiga.
- Kustomisasi Penuh: Lebih mudah menyesuaikan tampilan dan fungsi sesuai keinginan kalian.
Kesimpulan
Membuat tombol share di WordPress tanpa plugin ternyata tidak terlalu sulit, kan? Dengan mengikuti langkah-langkah di atas, kalian bisa menambahkan fitur share yang fungsional dan menarik tanpa mengorbankan performa website. Selamat mencoba dan semoga website kalian semakin populer dengan tombol share yang baru!
