Mode Malam
| Mode Tampilan
Penulis : admin

Home » Programming » Cara menyisipkan tombol hubungi kami di dalam artikel pada cms wordpress
Cara menyisipkan tombol hubungi kami di dalam artikel pada cms wordpress

Cara menyisipkan tombol hubungi kami di dalam artikel pada cms 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.

advertisement

Untuk lebih jelas kalian bisa lihat gambar di bawah ini.

Cara menyisipkan tombol hubungi kami di dalam artikel pada cms wordpress

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 :

  1. Nomor telephone yang akan di gunakan untuk menerima panggilan dari pengunjung.
  2. 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:

  1. WhatsApp: https://api.whatsapp.com/send?phone=+62857861930**&text=hallo%20deretcode
  2. Sms: sms:+62857861930**?body=hallo%20deretcode
  3. 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 menyisipkan tombol hubungi kami di dalam artikel pada cms wordpress
  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 direct link * ganti dengan link direct sms,whatsapp dan telephone yang sebelumnya telah kita buat. Text link_gambar_* ganti dengan url atau directory image yang telah kita upload tadi. Text @btn 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 tombol hubungi kami di dalam artikel pada cms wordpress

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 direct link * ganti dengan link direct sms,whatsapp dan telephone yang sebelumnya telah kita buat. Text link_gambar_* 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

 

Tags: #wordpress #php #internetmarketing
Bagikan :

Komentar:

Silahkan berkomentar dengan baik dan bijak!

Name * :
Email :
Website :
Comment :


This website uses cookies to ensure you get the best experience on our website

learn more