DeretCode|

Tips, Trik dan Tutorial
Seputar IT, Coding, Internet Marketing, Keahlian, Pendidikan, Hobi Dan Lainnya
Night :

Cara menyisipkan tombol hubungi kami di dalam artikel pada cms wordpress

advertisement
Carfa menyisipkan tombol hubungi kami di wordpress



Ketika kita membuat sebuah website untuk mempromosikan sebuah produk atau jasa, tentunya kita ingin mempermudah pelanggan ketika menghubungi kita, baik melalui whatsapp, sms ataupun telephone. Umumnya, kita hanya mencantumkan nomor telephone diwebsite agar pengunjung web mencatat dan menyimpan nomor tersebut ketika mereka ingin menghubungi kita. Namun cara ini tidak efektif karena akan sedikit merepotkan dan mengurungkan niat pengunjung yang ingin menghubungi kita. Solusi terbaik adalah dengan membuat tombol hubungi kami baik berupa pop up atau tombol yang berada di dalam artikel sehingga pengunjung tidak perlu mengingat dan menyimpan nomor telephone kita terlebih dahulu.
Untuk lebih jelas kalian bisa lihat gambar di bawah ini.


Contoh Tombol Hubungi Pada Sebuah Website Klinik

Pada kesempatan kai ini saya akan membahas cara meyisipkan tombol hubungi kami kedalam artikel dengan tiga cara, yaitu manual, semi otomatis dan otomatis pada web berplatform wordpress. Tapi sebelumnya kita siapkan terlebih dahulu hal-hal berikut :

  • Nomor telephone yang akan di gunakan untuk menerima panggilan dari pengunjung.
  • Image berformat gif atau png sebagai tombol hubungi kami.
Kemudian kita buat link menggunakan nomor tersebut untuk direct ke WhatsApp, Sms dan Telephone. Seperti berikut:
  • WhatsApphttps://api.whatsapp.com/send?phone=+62857861930**&text=hallo%20deretcode
  • Sms: sms:+62857861930**?body=hallo%20deretcode
  • Telephone: tel:+62857861930**
Keterangan: Text berwarna merah silahkan ganti dengan nomor telephone kalian dan text berwarna hijau ganti dengan isi pesan yang kalian inginkan. Ganti juga setiap spasi pada text pesan dengan %20.

Jika telah siap semua, selanjutnya kita implementasikan

Cara manual:
Cara ini adalah cara yang biasa dilakukan dan yang paling mudah di terapkan, karena tidak perlu costumize wordpress dan kemampuan programming. Cara ini sangat tepat jika tombol hubungi tidak di implementasikan di setiap artikel, misalnya hanya ada di halaman contact us. Berikut adalah langkah-langkahnya:
1. Masuk ke dasboard kalian kemudian masuk ke menu post
2. Klik Tambahkan Media dan upload image yang telah kalian siapkan sebelumnya
3. Pilih gambar yang telah kalian upload tadi dan di bagian pojok kanan pada bagian tautkan pilih URL Tersesuai dan kemudian isi url dengan link direct whatsapp, sms atau telephone yang sudah kita buat sebelumnya.
cara mengatur propeties url direct pada gambar
4. Atur poisisi dan ukuran gambar agar terlihat lebih rapi.
5. Ulangi proses di atas jika ingin kembali menambahkan tombol hubungi kami.

Cara semi otomatis:
Dengan cara ini, menyisipkan tombol hubungi kami akan lebih mudah dan cepat karena tanpa harus upload gambar dan menset link direct sms,wa atau telephonenya. Selain itu kalian juga bisa menentukan jumlah dan letak tombol pada artikel. Cara ini sedikit membutuhkan kemampuan coding php dan javascript karena kita akan mencostumize isi artikel dengan script php dan html. Berikut langkah-langkahnya:
1. Upload atau simpan image tombol hubungi kami di directory server dan catat url nya.
2. Buka directory web wordpress kalian bisa menggunakan filezilla, jika web sudah di upload diserver.
3. Cara file post-template.php di dalam folder wp-includes
4. Kemudian edit post-template.php menggunakan text editor favorite kalian.
5. kemudian cari text return $output; dengan cara tekan ctr+f pade keyboard kalian dan ganti dengan script kode berikut dan simpan:

$btnTlp='<a href="direct link Sms"><img src="link_gambar_tombol_sms" width="183"></a>';
$btnSms='<a href="direct link Tlp"><img src="link_gambar_tombol_tlp" width="183"></a>';
$btnWa='<a href="direct link WA"><img src="link_gambar_tombol_wa" width="183"></a>'; 
$output=str_replace("@btn",$btnWa.$btnSms.$btnTlp,$output); 
return $output;
Keterangan:
Text berwarna merah ganti dengan link direct sms,whatsapp dan telephone yang sebelumnya telah kita buat. Text berwarna hijau ganti dengan url atau directory image yang telah kita upload tadi. Text berwarna biru boleh kalian ganti sesuai keinginan kalian.Text @btn akan kita sisipkan di setiap artikel yang nantinya text tersebut akan otomatis berubah menjadi tombol hubungi kami.
Penjelasan:
variable $output adalah variable data artikel yang akan kita modifikasi sebelum di tampilkan ke pengunjung dengan menggunakan function php str_replace, jadi ketika didalam artikel ada text @btn, text tersebut akan dirubah menjadi kode html untuk menampilkan tombol hubungi kami.
6. Buat sebuah artikel dan sisipkan text @btn atau sesuai text replace yang telah kalian buat sebelumnya.
cara menyisipkan @btn pada artikel

Cara otomatis:
Dengan cara ini, setiap artikel kita akan otomatis disisipi tombol hubungi kami tanpa harus bersusah payah menyisipkannya. Akan tetapi, cara ini akan mengimplemntasi seluruh halaman yang ada pada website. Selain itu, kita juga tidak bisa menentukan jumlah dan letak tombol hubungi kami pada setiap artikel. Langkah-langkahnya hampir sama dengan cara semi otomatis yaitu sebagi berikut:
1. Upload atau simpan image tombol hubungi kami di directory server dan catat url nya.
2. Buka directory web wordpress kalian bisa menggunakan filezilla, jika web sudah di upload diserver.
3. Cara file post-template.php di dalam folder wp-includes
4. Kemudian edit post-template.php menggunakan text editor favorite kalian.
5. kemudian cari text return $output; dengan cara tekan ctr+f pade keyboard kalian dan rubah seperti dengan script kode berikut dan simpan:

$btnTlp='<a href="direct link Sms"><img src="link_gambar_tombol_sms" width="183"></a>';
$btnSms='<a href="direct link Tlp"><img src="link_gambar_tombol_tlp" width="183"></a>';
$btnWa='<a href="direct link WA"><img src="link_gambar_tombol_wa" width="183"></a>'; 
return $output.$btnWa.$btnSms.$btnTlp;
Keterangan:
Text berwarna merah ganti dengan link direct sms,whatsapp dan telephone yang sebelumnya telah kita buat. Text berwarna hijau ganti dengan url atau directory image yang telah kita upload tadi.
Penjelasan:
Dengan script code diatas, data artikel akan ditambahkan tombol hubungi kami di akhir artikel secara otomatis sebelum di tampilkan ke pengunjung.


Kesimpulan:
Dari cara 3 diatas saya sendiri lebih memilih cara semi otomatis, karena kita bisa menentukan jumlah tombol dan letaknya didalam artikel. Namun jika kalian expert dalam koding php mungkin kalian bisa modifikasi koding car otomatis agar bisa muncul di tengah artikel di akhir paragraf.


Oke sobat, itu tadi tutorial singkat tiga cara menyisipkan tombol hubungi kami di dalam artikel pada cms wordpress. Jika ada langkah yang tidak kalian pahami, silahkan tanyakan di kolom komentar semoga saya bisa membantu masalah kalian.
advertisement



0 Komentar untuk " Cara menyisipkan tombol hubungi kami di dalam artikel pada cms wordpress"

Silahkan berkomentar dengan baik dan bijak!