Menu

Cara Membuat Website Dua Bahasa Menggunakan Elementor

Cara Membuat Website Dua Bahasa Menggunakan Elementor. Kawan-kawan tentu pernah menemui beberapa website yang menggunakan dua bahasa atau lebih. Dalam artikel ini saya akan berbagi bagaiamana cara membuat website dua bahasa menggunakan Elementor.

Beberapa minggu kemarin saya mendapatkan project untuk membuat website. Klien saya menginginkan untuk membuatnya melalui Elementor. Nah dalam artikel ini Anda membutuhkan:

  1. Elementor
  2. Elementor Pro
  3. Polylang
  4. Polylang Connect for Elementor

Keempat plugin ini yang paling esensial ialah Elementor dan Polylang. Polylang merupakan plugin yang memiliki fungsi untuk membuat website berbasis WordPress menjadi dua bahasa atau lebih. Terlebih lagi Polylang gratis alias tidak berbayar. Polylang for Elementor adalah plugin yang memiliki fungsi untuk menambahkan widget Language Switcher.

Sebagai catatan: Jika Anda menggunakan Woocommerce maka Anda membutuhkan add-on tambahan dari Polylang yaitu Polylang for Woocommerce

Sebagai studi kasus saya menggunakan website milik klien saya. Yang mengiginkan sebuah website dengan Bahasa Jerman dan Bahasa Inggris. Dengan catatan: Bahasa Jerman menjadi Bahasa utama website tersebut.

Instalasi Plugin Yang Dibutuhkan

Langkah pertama Instalasi plugin-plugin yang dibutuhkan. Plugin yang butuh diinstall :

  1. Elementor
  2. Elementor Pro
  3. Polylang
  4. Polylang Connect for Elementor
Cara Membuat Website Dua Bahasa Menggunakan Elementor

Pengenalan Polylang dan Cara Penggunaannya

Letak Polylang bisa ditemukan di Dashboard menggunakan nama Languages. di dalam Menu terdapat beberapa sub-menu yaitu:

  1. Languages
  2. String translations
  3. Setting
  4. Lingotek

1. Languages

Sub-menu languages memiliki fungsi untuk menambahkan bahasa dan mengatur urutan bahasa.

2. String translations

Polylang memungkinkan Anda menerjemahkan string yang dapat Anda tentukan seperti judul situs, tagline, atau judul widget. Selain itu tema dan plugin dapat memungkinkan Anda untuk menerjemahkan.

3. Setting

didalam setting ini terdapat beberapa module:

  1. URL modifications memiliki fungsi untuk mengatur permalink, Anda dapat memilih opsi-opsi yang disediakan oleh Polylang
  2. Detect Browser Languages Module ini memiliki fungsi untuk mengarahkan pengguna secara otomatis, ke Bahasa yang sesuai dengan preferensi Bahasa browser yang digunakan oleh pengguna.
  3. Media mengaktifkan Bahasa dan terjemahan pada media.
  4. Custom post types and Taxonomies Mengaktifkan terjemahan pada CPT (Custom Post Type) dan Custom Taxonomies
  5. WPML compatibility Memberikan kompabilitas kepada WPML (tidak bisa di non-aktifkan)

4. Lingotek

Lingotek merupakan translation management system. Jika Anda ingin menggunakan terjemahan secara otomatis Anda bisa menggunakan fitur ini. Atau Anda dapat hire para professional untuk menerjemahkan bahasa.

Menambahkan dan Mengatur Urutan Bahasa

Menambahkan Bahasa

Setelah mempelajari fungsi sub-menu dan modul. Tambahkan Bahasa yang ingin Anda gunakan di website Anda. Untuk Menambahkan Bahasa buka WordPress Dashboard kemudian Klik menu Languages.

Tambahkan Bahasa Pertama yang inign Anda gunakan. Sebagai contohnya saya menggunakan Bahasa Jerman sebagai bahasa utama website. Klik add new languages kemudian cari bahasa yang ingin Anda gunakan.

Secara otomatis form dibawahnya akan berubah. Mulai dari nama, locale, kode bahasa, dan bendera bahasa akan termuat secara otomatis.

Mengatur Urutan Bahasa

Jangan lupa, untuk mengatur urutan bahasa. Sebagai contoh: Bahasa Jerman sebagai bahasa utama website. Maka input order menjadi 0 (secara default 0).

Kemudian tambahkan Bahasa lagi. Pada bahasa kedua atur urutan order menjadi 1. Begitu pula untuk Bahasa ketiga menjadi 2 dan seterusnya.

Pengaturan Polylang

Setelah melakukan instalasi bahasa. Navigasikan ke WordPress Dashboard > Languages > Setting.

Pada module Custom Post Types. Klik seluruh Custom Post Type agar Anda dapat melakukan penerjemahan ke header, footer, custom post type. Jika Anda tidak memiliki Custom Post Type yang perlu Anda klik adalah My Templates

Menerapkan dan Mengatur Bahasa di Halaman

Setelah Anda melakukan instalasi bahasa dan melakukan pengaturan untuk Polylang. Akan muncul notifikasi di atas yang menyarankan Anda untuk mengatur Halaman Utama Anda. Anda bisa mengabaikannya atau langsung klik notifikasi tersebut kemudian Anda akan diarahkan menuju edit halaman utama.

Ketika Anda masuk ke editor pada bar kanan (right bar) Anda akan menemukan opsi baru yaitu languages. Terapkan bahasa apa yang Anda gunakan saat ini untuk website Anda. Contoh saya menggunakan Bahasa Jerman (Deutsch). Kemudian Klik Update.

Jika Anda ingin menambahkan terjemahan klik tombol + yang berada dibawah Translations

Setelah Anda klik tombol + Anda akan diarahkan menuju ke pembuatan halaman baru. Tapi tenang, Polylang akan secara otomatis menduplikasi halaman baru ini secara otomatis. Masukkan Judul Kemudian Publish.

Mengganti Bahasanya klik edit with Elementor kemudian ganti dengan Bahasa kedua yang Anda pilih.

Mengatur Bahasa pada halaman, post, custom post type

Ketika Anda menavigasikan ke halaman, post, maupun custom post type. Anda akan menemukan kolom baru yaitu beberapa bahasa. Ada tanda cawang, plus dan kosong. Untuk penjelasannya:

  1. Tanpa Simbol Bahasa belum diatur
  2. Tanda Cawang Bahasa sudah diatur
  3. Tanda Plus Anda belum menambahkan bahasa pertama, kedua atau ketiga

Sama halnya dengan menambahkan Bahasa jika masih belum menemukan Tanpa Simbol Anda harus klik salah satu page/post/custom post type kemudian gunakan cara yang sebelumnya saya beri untuk mengatur bahasa.

Jika Anda ingin menambahkan bahasa. Klik Tombol Plus + untuk menambahkan halaman bahasa tertentu

Menambahkan Language Switcher pada Elementor

Menambahkan Menu sesuai Bahasa

Setelah mengatur tiap halaman dan post, Tambahkan Language Switcher. Apa itu Language Switcher? Language Switcher ini digunakan pengguna untuk mengganti Bahasa sesuai kemauan pengguna.

Pertama buka WordPress Dashboard > Appereance > Menus

Kemudian buat dua Menu:

  1. Untuk Bahasa utama
  2. Untuk Bahasa Kedua dan seterusnya

Ketika di menu Anda akan menemukan opsi baru dibawah ini:

Sebagai Contoh: Menu Header Jerman (DE) untuk Bahasa Jerman. Maka terapkan Primary Menu Deutsch. Kemudian Buat Menu baru untuk Bahasa lainnya dan terapkan Primary Menunya agar tampil pada halaman tertentu.

Membuat Header dan Language Switcher

Navigasikan ke WordPress Dashboard > Templates > Theme Builder

Kemudian Klik Header dan tambahkan header baru. Ketika membuat header Anda akan menemukan widget baru di Elementor yaitu Polylang Switcher. Kemudian masukkan widget ke dalam header Anda.

Atur gaya mulai tata letak switcher dan juga ukuran switcher. Setelah itu save header dan apply display condition ke entire site. Refresh Halaman website Anda. Sekarang website Anda menjadi website dua bahasa atau lebih (Multi Language).

Terimakasih, jika ada pertanyaan sertakan di kolom komentar.

2 comments on “Cara Membuat Website Dua Bahasa Menggunakan Elementor”

  1. Mau tanya om, switch languange nya berlaku juga kah untuk content/isi post?

    Bisa gak dalam 1 post kontennya di input 2 bahasa? jadi klien bisa pakai jasa tranlator dan input sendiri konten bahsa lain di blog mereka. jadi klien gak perlu buka elementor, cukup di ui post/cpt aja

Leave a Reply

Your email address will not be published. Required fields are marked *

menu-circlecross-circle linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram