Kembali ke Dukungan Memulai Tutorial Situs Multibahasa Sederhana Menggunakan Blok (Tanpa Plugin)

Tutorial Situs Multibahasa Sederhana Menggunakan Blok (Tanpa Plugin)

Editor blok WordPress secara berkelanjutan memberikan peluang baru untuk kustomisasi situs. Pada tutorial ini, kita akan melihat penggunaan blok untuk membuat menu situs dalam dua bahasa, dan pengalih bahasa yang memungkinkan pengunjung untuk mengubah tampilan bahasa situs yang mereka lihat.

Anda dapat melihat demo tentang cara kerjanya di sini:

Catatan dan referensi

  • Pengalih bahasa ini tidak akan menerjemahkan halaman tetapi Anda dapat menampilkan situs dengan dua bahasa atau lebih kepada pengunjung. Anda perlu menerjemahkan halamannya sendiri!
  • Pengalih bahasa ini hanya akan mengalihkan pengguna ke halaman beranda untuk tiap bahasa.
  • Anda juga perlu memperbarui menu jika menambahkan halaman ekstra ke situs.
  • Pengaturan awal memerlukan waktu tetapi setelah selesai, penyetelan dan pembaruan bisa dilakukan dengan cepat.
Referensi dan Informasi Selengkapnya

Tutorial ini memanfaatkan fungsi-fungsi berikut:

Metode

1. Siapkan Halaman dan Slug Halaman
2. Pilih Tata Letak untuk Menu dan Pengalih Bahasa Anda
3. Buat Pengalih Bahasa
4. Tambahkan Menu Navigasi
5. Simpan Menu dan Pengalih Bahasa Baru Anda
6. Menu dengan Bahasa Kedua
7. Tambahkan Menu Baru Anda ke Halaman Lainnya
8. Tambahkan Lebih Banyak Halaman

1. Penyiapan Halaman dan Slug Halaman

Untuk meningkatkan efektivitas tutorial ini, kami menyarankan Anda untuk menggunakan salah satu tema yang kompatibel dengan Editor Blok kami, yang tersedia di sini.

Buka Situs Saya > Situs > Halaman. Mulailah dengan membuat satu halaman beranda untuk tiap bahasa yang ditampilkan di situs. Anda belum perlu menambahkan banyak konten; judul halaman cukup untuk sekarang.

Publikasikan tiap halaman untuk melakukan pembaruan, lalu ubah Slug Halaman tiap halaman sehingga merujuk ke bahasanya. Pada contoh ini, halaman beranda dengan Bahasa Prancis berjudul Accueil, disertai dengan slug halaman /fr/:

Tetapkan halaman beranda dengan bahasa yang Anda inginkan sebagai halaman depan statis untuk situs Anda. Ini memastikan pengunjung situs untuk melihat situs dalam satu bahasa terlebih dahulu, dan dapat beralih ke bahasa yang lain.

Setelah memiliki semua halaman beranda yang diperlukan, buat beberapa halaman konten untuk bahasa lainnya. Anda masih belum perlu menambahkan konten. Untuk sekarang, Anda cukup memposkan halaman berisi judul saja.

Saat membuat halaman ini, tetapkan sebagai Halaman Turunan dari halaman beranda bahasa pilihan Anda, menggunakan bagian Atribut Halaman:

Gambar: Menunjukkan judul halaman, dan bagian Atribut Halaman tempat menentukan halaman induk.
Contoh – ikhtisar struktur halaman
Pada contoh berikut, kami memiliki dua halaman beranda dalam dua bahasa: Bahasa Inggris dan Bahasa Prancis. Masing-masing memiliki dua halaman turunan – Tentang dan Kontak untuk bahasa Inggris, dan A Propos dan Contact untuk bahasa Prancis.
Gambar: Ikhtisar struktur halaman induk dan turunan.
2. Pilih Tata Letak untuk Menu dan Pengalih Bahasa Anda

Di Situs Saya > Situs > Halaman, klik pada judul halaman beranda bahasa utama Anda untuk membukanya di editor WordPress.

Di bawah judul halaman pada editor, tambahkan Blok Kolom, lalu pilih tata letak dua kolom. Jika Anda berubah pikiran untuk tata letak yang dipilih, jangan khawatir karena Anda bisa mengubahnya di pengaturan blok. Lihat panduan Blok Kolom untuk informasi lengkap cara melakukannya.

Kami sarankan untuk menggunakan tata letak dengan porsi satu kolom lebih besar dan satu kolom lebih kecil. Kolom yang lebih kecil akan memuat pengalih bahasa dan kolom yang lebih besar akan memuat menu Anda.

Atur Blok Kolom menjadi lebar atau lebar penuh:

Gambar: Menunjukkan perataan lebar untuk blok kolom
3. Buat Pengalih Bahasa

Ada dua metode untuk menampilkan pengalih bahasa Anda – Anda bisa mengetik nama bahasanya, atau menggunakan gambar pada baris untuk menampilkan bendera.

Catatan: Kami tidak menyarankan penggunaan bendera sebagai representasi bahasa karena dua alasan:
1. Lebih sulit diakses pengunjung yang mungkin tidak bisa melihat gambar bendera
2. Dapat menyebabkan kebingungan akibat kesalahpahaman pengunjung terkait bendera dan bahasa – tidak semua orang memiliki tingkat pemahaman yang sama!
Agar lebih jelas, kami menyarankan Anda menggunakan metode tautan teks (metode 1 atau 2).

Metode 1 – tautan teks pada Blok Navigasi
Sekarang Anda harus memiliki dua kolom untuk konten. Klik pada kolom yang lebih kecil lalu sisipkan Blok Navigasi:
Gambar: menunjukkan Blok Navigasi pada daftar blok.
Pilih Buat dari semua halaman teratas untuk menerapkan halaman beranda bahasa induk ke blok Anda secara otomatis.

Anda kemudian dapat mengubah teks tiap item agar menampilkan namanya dalam bahasa yang sesuai (atau versi singkatan.):
Gif animasi: Mengubah teks tiap tautan pada blok navigasi.
Metode 2 – tautan teks pada Blok Paragraf
Sekarang Anda harus memiliki dua kolom untuk konten. Klik pada kolom yang lebih kecil lalu tambahkan Blok Paragraf:
Gambar: Menunjukkan pemilihan Blok Paragraf pada daftar blok.

Ketik nama bahasa dengan format yang Anda inginkan, misalnya “EN” dan “FR”, atau “Bahasa Inggris” dan “Bahasa Prancis”.

Sorot tiap nama bahasa, lalu klik tombol Masukkan Hyperlink untuk menautkan nama bahasa tersebut dengan halaman berandanya. Contoh:

Gif animasi: menyorot satu bagian teks dan mengaturnya sebagai tautan ke halaman situs
Menggunakan singkatan bahasa:
Gif animasi: menyorot satu bagian teks dan mengaturnya sebagai tautan ke halaman situs
Metode 3 – gambar pada baris
Sekarang Anda harus memiliki dua kolom untuk konten. Klik pada kolom yang lebih kecil lalu tambahkan Blok Paragraf:
Gambar: menunjukkan pemilihan Blok Paragraf pada daftar blok.
Jika ada gambar bendera bahasa yang ingin digunakan, Anda bisa menggunakan fungsi gambar pada baris (tersedia di Pilihan Lainnya) untuk memasukkan dan menautkannya:
Gambar: menu Pilihan Lainnya pada Blok Paragraf, dengan Gambar pada Baris disorot
Ketik satu spasi di blok paragraf Anda untuk mengaktifkan bilah peralatan blok dan menampilkan menu Pilihan Lainnya. Ketika memilih Gambar pada Baris, kotak pustaka media/unggah akan terbuka secara otomatis. Unggah atau pilih bendera Anda. Untuk informasi selengkapnya mengenai pengunggahan atau pemilihan gambar, silakan lihat dokumen ini.

Ketika gambar ditambahkan, Anda bisa mengeklik gambar untuk mengatur ulang ukurannya:
Gif animasi: Pilih gambar pada baris Anda dan pemilih ukuran akan muncul.
Kemudian, Anda bisa mengubah gambar menjadi tautan, dengan cara yang sama saat membuat tautan teks:
Gif animasi: Klik gambar pada baris untuk memilihnya, kemudian klik tombol 'tautan'. Lalu Anda bisa memilih halaman yang ingin ditautkan.
Ulangi proses ini untuk bendera bahasa kedua.
4. Tambahkan Menu Navigasi untuk Halaman Anda dengan Bahasa Pertama

Di kolom yang lebih besar, tambahkan Blok Navigasi. Klik kolom yang kosong untuk membuka menu blok, cari Navigasi atau buka bagian Elemen Tata Letak:

Gambar: menunjukkan subbagian Elemen Tata Letak pada daftar Blok, dengan blok Navigasi berada di sisi blok kanan atas bagian tersebut.

Bloknya akan muncul dengan dua pilihan – pilih Buat kosong. Anda akan melihat blok siap digunakan untuk menambahkan halaman:

Tambahkan tautan untuk tiap halaman dengan bahasa pertama Anda. Klik tombol Tambah Blok (tombol “+” warna hitam) di sebelah kanan blok navigasi untuk menambahkan tautan tambahan:

5. Simpan Menu dan Pengalih Bahasa Baru Anda

Gunakan tombol Navigasi Blok di atas editor untuk menentukan kolom Anda:

Gif animasi: Menggunakan Navigasi Blok untuk menentukan blok kolom yang memuat menu navigasi dan pengalih bahasa.

Gunakan Bilah Peralatan Blok Kolom untuk menampilkan lebih banyak pilihan, lalu pilih Tambahkan ke blok pakai ulang:

Gambar: menunjukkan Bilah Peralatan Blok dan pilihan Tambahkan ke blok pakai ulang.

Beri nama blok pakai ulang baru Anda agar mudah dikenali, seperti Menu – Bahasa Inggris. Anda bisa mempelajari selengkapnya tentang cara kerja Blok Pakai Ulang di panduan ini.

Jangan lupa Perbarui halaman Anda untuk menerapkan perubahan ke halaman. Selamat, pembuatan menu pertama dan pengalih bahasa Anda telah selesai!

6. Menu dengan Bahasa Kedua

Untuk membuat menu dengan bahasa kedua, Anda dapat mengikuti langkah 1-5, atau bisa menggunakan pintasan:

Buka salah satu halaman dengan bahasa kedua Anda di editor WordPress. Klik tombol Tambahkan Blok (tombol “+” warna hitam) untuk menambahkan blok baru ke halaman. Pada daftar blok, gulir langsung ke bagian paling bawah untuk melihat kategori blok pakai ulang, tempat menu Anda disimpan. Anda juga dapat menggunakan kotak pencarian untuk menemukannya.

Gif animasi: menggunakan menu blok untuk mencari blok pakai ulang.

Setelah blok menu ditambahkan ke halaman tersebut, gunakan menu Pilihan Lainnya untuk Mengubah ke Blok Reguler:

Gambar: Menunjukkan menu Pilihan Lainnya dan pilihan Ubah ke Blok Reguler.

Setelah blok tersebut muncul sebagai blok reguler alih-alih blok pakai ulang, Anda bisa memperbarui Blok Navigasi agar menautkan halaman dengan bahasa kedua.

Metode 1 – hapus lalu tambahkan ulang Blok Navigasi baru
Pilih Blok Navigasi menggunakan Navigator Blok:
Gambar: Menunjukkan navigator blok dan cara untuk memilih blok
Hapus semua Blok Navigasi:
Gambar: Menunjukkan menu Pilihan Lainnya pada Blok Navigasi, dan pilihan Hapus Blok
Kemudian ikuti langkah 4 di atas untuk menambahkan ulang Blok Navigasi baru untuk bahasa kedua Anda
Metode 2 – ubah item navigasi
Klik pada item yang ingin Anda ubah. Klik tombol ‘tautan’ untuk membuka informasi tautan lalu klik tombol Ubah. Kemudian Anda bisa mengetik dan memilih halaman yang diinginkan. Harap perhatikan, Anda juga akan perlu mengubah teks tautan secara manual:

Gif animasi: mengubah item Blok Navigasi

Ketika Anda melakukan perubahan, simpan blok kolom baru ini sebagai Blok Pakai Ulang baru seperti padalangkah 5di atas, lalu beri nama baru yang menunjukkan bahwa blok tersebut adalah menu dengan bahasa kedua Anda.

Jangan lupa Perbarui halaman Anda untuk menerapkan perubahan ke halaman. Selamat, pembuatan menu kedua dan pengalih bahasa Anda telah selesai!

7. Tambahkan Menu Baru Anda ke Halaman Lainnya

Menu dan pengalih bahasa Anda telah siap. Sekarang Anda bisa menambahkan menu dua bahasa ke halaman lainnya, seperti yang dijelaskan pada langkah 6 di atas. Perhatikan: setelah blok pakai ulang disimpan, Anda bisa menambahkannya ke halaman lain tanpa perlu mengubahnya ke blok reguler.

8. Tambahkan Lebih Banyak Halaman

Apakah Anda sudah membuat halaman lain untuk masing-masing bahasa, dan perlu menambahkannya ke menu? Jangan khawatir, Anda bisa menyunting blok pakai ulang, dan akan diterapkan ke setiap halaman yang memuat blok tersebut. Detail selengkapnya tersedia di sini.

Copied to clipboard!