Tahukah Anda bahwa lebih dari separuh pengunjung situs Anda mungkin melihat situs lewat ponsel atau tablet mereka? Panduan ini akan menjelaskan langkah-langkah penting untuk memberikan pengalaman pengguna yang lebih baik di semua ukuran layar, mulai dari memilih tema responsif hingga menyempurnakan konten Anda.
Dalam panduan ini
Ada pertanyaan?
Tanya Asisten AI kamiDengan memilih tema yang ramah perangkat seluler di situs WordPress, Anda dapat memberikan pengalaman pengguna yang lebih baik dan optimal di berbagai perangkat, meningkatkan aksesibilitas, dan secara positif memengaruhi peringkat mesin pencari.
Semua tema yang ditawarkan di WordPress.com bersifat responsif untuk perangkat seluler. Artinya, tema-tema tersebut didesain agar terlihat keren di browser dan desktop seluler.
Jika Anda menggunakan tema pihak ketiga, pastikan tema tersebut diiklankan sebagai tema yang ramah perangkat seluler dan tampil dengan baik saat dibuka di perangkat seluler Anda. Periksa dokumentasi tema untuk melihat pilihan atau pengaturan penyesuaian agar Anda dapat mengontrol tampilan tema pada perangkat seluler.
Setelah memilih tema yang responsif untuk perangkat seluler, Anda mungkin akan mengubah konten asal sesuai dengan keinginan Anda. Ketika mengedit situs di Editor WordPress, Anda perlu memastikan bahwa situs terlihat bagus di semua perangkat.
WordPress tidak menyediakan “editor seluler” khusus. Jika Anda mengubah situs, perubahannya akan ditampilkan di perangkat seluler dan desktop. Selama situs Anda menggunakan tema yang ramah perangkat seluler, tampilan konten akan disesuaikan dengan semua ukuran layar, baik besar maupun kecil. Kemampuan ini disebut sebagai “keresponsifan”.
Anda dapat mengklik ikon Pratinjau di sudut kanan atas editor untuk melihat tampilan situs bagi pengunjung. Pilih Perangkat Seluler atau Tablet untuk melihat perkiraan konten di editor:
Kami menyebutnya perkiraan di sini karena banyak elemen dari tampilan editor yang diinformasikan oleh tema situs. Gaya tema tidak ditampilkan di editor; hanya ditampilkan dengan mempratinjau halaman di tab baru atau melihat situs Anda di browser perangkat. Untuk melihat konten Anda dengan penataan tema yang diterapkan, klik pilihan “Pratinjau di tab baru“.
Setelah mengklik pilihan “Pratinjau di tab baru“, Anda dapat melihat versi seluler menggunakan alat pemeriksa di browser Anda. Untuk menggunakan mode Periksa pada browser Anda untuk mempratinjau tampilan halaman atau pos dalam tampilan seluler:
- Klik ikon Pratinjau di sudut kanan atas editor WordPress.
- Pilih opsi “Pratinjau di tab baru“.
- Klik kanan pada halaman pratinjau lalu klik “Periksa” (Chrome, Firefox, Edge) atau “Periksa Elemen” (Safari).
- Pada mode Periksa browser, klik ikon seluler untuk mengalihkan pratinjaunya ke tampilan seluler.
Setelah memublikasikan perubahan, ada baiknya Anda mengecek situs sebagai pengunjung umum lewat ponsel atau tablet Anda untuk memastikan tampilan situs tersebut sudah sesuai keinginan Anda.
Berikut adalah beberapa tips untuk memaksimalkan keresponsifan desain situs Anda guna memastikan konten ditampilkan dengan baik di perangkat seluler, tablet, dan desktop.
Pada gambar dengan teks bawaan, ada risiko teks tersebut akan terpotong di layar yang lebih kecil, seperti berikut:
Penyebabnya, teks yang dirancang di dalam gambar itu tidak responsif.
Dengan menggunakan editor WordPress, Anda dapat menulis teks di atas gambar. Jika menambahkan teks ke dalam gambar dengan cara ini, teks akan menjadi responsif. Dalam video di bawah ini, kita akan membuat ulang gambar yang sama seperti di atas menggunakan blok Sampul, yang menunjukkan tingkat keresponsifannya di layar yang lebih kecil:
Untuk memaksimalkan tingkat keresponsifan pengubahan ukuran font di halaman Anda, gunakan satuan em atau rem, alih-alih piksel (px). Penggunaan piksel untuk ukuran font pada sebuah halaman akan mengunci ukuran font tersebut pada satu ukuran tertentu. Akibatnya, ukuran font tidak responsif terhadap perubahan ukuran tampilan pada berbagai perangkat. Berbeda dengan piksel, nilai em dan rem adalah satuan ukuran relatif yang mampu mengubah ukuran secara dinamis mengikuti lebar layar pengguna.
Alih-alih menggunakan menu teks untuk tata letak seluler, Anda dapat menyesuaikan blok Navigasi situs untuk menampilkan menu seluler, yang disebut menu overlay (juga dikenal sebagai “menu hamburger” atau “menu kebab”). Dengan fitur ini, header terlihat lebih ringkas, dan menu lebih mudah dilihat serta dioperasikan pada perangkat seluler.
Beberapa blok menyertakan pilihan “tumpuk di perangkat seluler” untuk mengoptimalkan penggunaan ruang pada layar yang lebih kecil. Jika konten ditampilkan bersebelahan pada layar desktop, konten akan berpindah ke bagian bawah pada layar yang lebih kecil sehingga lebih mudah dibaca oleh pengguna perangkat seluler.
Pengaturan “Tumpuk di perangkat seluler” tersedia di blok berikut:
Tombol dan menu akan lebih mudah dibaca pada perangkat yang lebih kecil dengan mengizinkan penataan ke beberapa baris.
Pilihan “Izinkan penataan ke beberapa baris” tersedia di pengaturan tata letak blok berikut:
- Blok Tombol
- Blok Tombol Berbagi
- Blok Navigasi
- Blok Ikon Sosial
- Blok Komentar
- Blok Baris dan Tumpukan
AMP (Accelerated Mobile Pages) adalah kerangka kerja sumber terbuka pihak ketiga yang mendukung pembuatan situs dengan waktu muat hampir seketika di perangkat seluler sehingga menawarkan pengalaman penelusuran yang cepat kepada pengunjung situs. Untuk menambahkan AMP ke situs, Anda dapat menginstal plugin AMP. Untuk situs WordPress.com dengan plugin aktif yang dibuat sebelum 13 Juni 2022, plugin AMP sudah terinstal secara default.
Perlu diingat bahwa penggunaan AMP akan menghilangkan banyak fungsi pada situs Anda (seperti tata letak dan berbagai fitur lainnya) untuk mempercepat waktu muat situs bagi pengunjung perangkat seluler. Sebaiknya, gunakan plugin tersebut hanya jika tema Anda dibuat dengan mempertimbangkan AMP. Semua tema di WordPress.com sudah ramah perangkat seluler, sehingga AMP tidak diperlukan untuk memberikan pengalaman yang optimal bagi pengguna perangkat seluler.
Jika situs Anda mengalami masalah tampilan dan Anda telah menginstal AMP, sebaiknya nonaktifkan plugin AMP untuk memastikan apakah cara tersebut dapat meningkatkan performa situs Anda. Jika melihat pilihan “Tutup versi seluler” di situs yang ingin Anda hapus sepenuhnya, nonaktifkan juga plugin AMP.
Jika situs Anda telah menggunakan AMP untuk sementara waktu, perlu diingat bahwa Google tidak segera memperbarui hasilnya dan akan terus menampilkan halaman AMP selama beberapa waktu setelah Anda menonaktifkannya. Anda mungkin ingin menyiapkan pengalihan halaman setelah menonaktifkan AMP. Mesin pencari akan mengindeks URL halaman AMP, dan akan membutuhkan waktu beberapa saat untuk menghapus URL tersebut dari daftar, yang berarti beberapa pengunjung seluler mungkin akan diarahkan ke halaman error 404.
Ada beberapa plugin pengalihan gratis dan populer yang dapat dipilih. Anda akan menyiapkan Pengalihan 301 dan mungkin memerlukan ekspresi Regex yang serupa dengan /(.*)\/amp. Kami sarankan untuk melakukan pengujian guna memastikan Anda telah menyiapkan pengalihan yang benar dan membaca panduan instruksi plugin pengalihan.
Dukungan 