Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress

Cara Mempersiapkan Situs Anda untuk WordPress Gutenberg

by
Length:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Krestiyani Putri (you can also view the original English article)

Gutenberg akan segera hadir di WordPress. Apakah situs web Anda sudah siap? Meskipun kami masih tidak tahu persis apa bentuknya, sistem konten baru ini akan ditambahkan ke inti WordPress di masa depan. Mari kita lihat dampak potensial yang dapat terjadi di situs Anda, dan cara-cara yang dapat Anda tentukan dan perbaiki, area masalah sebelumnya.

Apa itu Gutenberg?

Gutenberg adalah proyek WordPress yang bertujuan untuk memberi pengguna lebih banyak fleksibilitas dalam desain konten mereka. Pada dasarnya, proyek ini bertujuan untuk mengganti editor saat ini, yang sebagian besar berfungsi sebagai pengolah kata, dengan antarmuka yang lebih visual dan terstruktur Saat ini, Gutenberg adalah sebuah plugin, dan itu memberi pengguna kemampuan untuk memodifikasi konten mereka sama dengan bagaimana Visual Composer atau editor drag-and-drop lainnya melakukannya — meskipun dengan cara yang disederhanakan dan sangat intuitif.

Jika Anda ingin mempelajari lebih lanjut tentang apa Gutenberg secara spesifik, lihat posting saya sebelumnya "What is WordPress Gutenberg?"

Potongan-potongan Situs Anda

Gutenberg adalah usaha besar dan kemungkinan akan menyentuh sejumlah besar titik akhir dalam situs web Anda. Ini adalah tiga area yang akan kami gali untuk masalah:

  • Tema Anda: Gutenberg hadir dengan rangkaian gaya sendiri untuk konten. Apakah tema Anda kompatibel? Bagaimana kelihatannya dengan Gutenberg aktif?

  • Plugin Anda: Mungkin saja Gutenberg dapat berinteraksi dengan plugin Anda yang lain dengan cara yang tidak terduga. Kita akan melihat apa yang mungkin terjadi, dan apa yang harus dilakukan tentang masalah apa pun yang muncul.

  • Konten Anda: Gutenberg akan memengaruhi cara konten Anda ditampilkan. Kami akan memeriksa bagaimana hal itu dapat mengubah tampilan halaman Anda, dan membahas beberapa kemungkinan perbaikan jika Anda mengalami masalah.

Menyiapkan Area Pengujian

Sebelum memulai, ada baiknya untuk menyiapkan area pengujian tempat Anda dapat bereksperimen dengan Gutenberg tanpa melanggar situs langsung Anda. Idealnya, Anda harus mengatur area pengujian Anda sendiri atau membuat salinan lokal situs Anda. Untuk lebih lanjut tentang cara melakukan salah satu dari tugas tersebut, lihat tutorial berikut:

Jika tidak ada yang memungkinkan, Anda dapat melakukan pengujian langsung di situs Anda. Perhatikan bahwa ini dapat berisiko, karena kami akan mengaktifkan dan menonaktifkan sejumlah bagian dari situs Anda. Jika Anda melakukan pengujian secara langsung, pastikan untuk membuat cadangan situs Anda sebelum memulai.

Setelah Anda tahu di mana Anda akan menguji, buka direktori plugin dan temukan Gutenberg. Setelah terinstal dan diaktifkan, baca terus.

Letakkan Tema Anda Melalui Paces-nya

Sekarang setelah Anda memasang Gutenberg, mari kita lihat bagian pertama situs Anda yang mungkin terpengaruh: temanya. Jika sudah ada masalah besar pada titik ini, seperti kesalahan atau masalah basis data dengan admin WordPress, lompat ke bagian Apa yang Harus Dilakukan Ketika Ada Terlalu Banyak Masalah.

Karena Gutenberg berinteraksi terutama dengan konten situs, kami hanya perlu menguji sekumpulan hal yang sempit — untungnya bagi kami.

Yang pertama adalah bahwa Gutenberg dilengkapi dengan style sheet dan set style sendiri. Periksa setiap jenis dan template halaman yang digunakan di situs Anda untuk memastikan bahwa mereka masih muncul dengan tepat. Fokus utama di sini adalah menjadi elemen di dalam area konten utama dari halaman Anda — terutama konten dan blok gambar. Jika Anda melihat ada masalah, kemungkinan gaya Gutenberg lebih diutamakan daripada situs Anda.

Untuk memperbaiki ini, Anda harus mengidentifikasi dari mana masalah itu berasal. Biasanya, ini akan menjadi pemilih CSS yang difokuskan pada elemen HTML, atau bisa menjadi prioritas gaya Gutenberg di kelas Anda sendiri. Apapun masalahnya, cobalah untuk mengidentifikasi di mana kesalahan itu terjadi. Selanjutnya, tentukan mengapa gaya Gutenberg menimpa milik Anda, dan perbaiki kode Anda untuk memungkinkannya didahulukan.

Cobalah untuk membuat koreksi dalam tema Anda sendiri (atau lebih baik lagi, dalam tema anak atau area tertentu untuk CSS dalam tema Anda), daripada mengubah Gutenberg. Jika Anda mengubah salah satu file di Gutenberg secara langsung, kemungkinan akan ditimpa ketika plugin diperbarui.

Dengan cara yang sama, Anda akan ingin memberi admin area Anda sekali lagi untuk masalah styling apa pun. Opsi tema dan bagian yang diimplementasikan khusus lainnya yang dihasilkan oleh tema Anda tampaknya menjadi penyebab terbesar sejauh ini. Setelah Anda mengidentifikasi masalah styling di area ini, Anda biasanya dapat memperbaikinya dengan mengubah atau membuat tema anak dan menyesuaikan CSS di sana.

Apakah Plugin Anda Bekerja?

Setelah tema Anda habis, selanjutnya adalah plugin situs Anda. Secara khusus, perhatikan plugin apa pun yang menyediakan shortcode yang Anda gunakan dalam konten Anda (misalnya Bentuk Gravitasi), plugin yang memengaruhi penampilan konten Anda (misalnya plugins aksesibilitas yang memengaruhi ukuran teks), dan plugin yang secara langsung memasukkan elemen ke halaman Anda (seperti Advanced Custom Fields).

Melihat Shortcode

Untuk mengaudit area ini, pertama-tama kumpulkan daftar kode pendek apa pun yang mungkin Anda gunakan, bersama dengan halaman mana mereka berada. Dengan daftar Anda di tangan, kunjungi masing-masing halaman ini untuk melihat apakah mereka berkinerja sebaga Jika Anda mengalami masalah styling apa pun, kemungkinan besar Anda mengalami masalah yang sama seperti di atas dan perlu menyesuaikan kembali gaya Anda.

Namun, jika Anda mendapatkan kode pendek yang ditakuti — yaitu bahwa laman Anda menampilkan [shortcode] alih-alih melakukan apa yang seharusnya — ada solusi lain. Dalam hal ini, Anda dapat melihat blok tempat shortcode berada dan mengonfirmasi bahwa itu tidak dianggap sebagai teks (mencari dan menghapus tag yang tidak diinginkan di sekitar shortcode). Jika masalah masih berlanjut, memindahkan kode pendek ke jenis blok yang lebih tepat harus mengembalikan semuanya dan berjalan.

Penampilan Konten

Masalah ini muncul dari masalah yang sama yang telah kami bahas sebelumnya: penggantian gaya. Identifikasi elemen yang terpengaruh dan perbaiki CSS.

Penciptaan Elemen

Area terakhir yang akan kita cari untuk masalah yang saling bertentangan menyangkut penciptaan elemen. Setiap plugin yang memasukkan elemen HTML ke dalam suatu halaman tanpa menggunakan shortcode dicurigai di sini — misalnya, ketika PHP menarik dalam bidang khusus dari plugin Custom Field Canggih.

Slip-up paling umum dengan penciptaan elemen berkisar di sekitar blok yang tidak cocok. Karena Gutenberg menyediakan gayanya sendiri, ada kemungkinan jika elemen Anda dibuat di dalam blok yang tidak disengaja, elemen tersebut mungkin salah. Perbaikan untuk ini adalah memastikan kode Anda menambahkan elemen ke blok di mana Anda menginginkannya.

Apakah Konten Anda Muncul sebagai Diperlukan?

Ini tidak seserius masalah lain yang telah kita diskusikan, tetapi mungkin ada beberapa komplikasi dengan bagaimana konten Anda ditampilkan. Sebagian besar masalah ini akan berasal dari perubahan gaya minor atau cara penyusunan blok. Untuk memperbaiki ini, Anda harus bermain-main dengan sistem blok sampai Anda mendapatkan halaman Anda bagaimana Anda menginginkannya.

Apa yang Harus Dilakukan Ketika Ada Terlalu Banyak Masalah

Apakah Anda mengalami masalah yang tidak bisa Anda pecahkan dengan saran di artikel ini? Jangan panik! Masih ada beberapa waktu sebelum Gutenberg menyentuh WordPress Core.

Pertama, catat apa kesalahannya dan langkah apa yang menyebabkan kesalahan. Semakin banyak informasi yang dapat Anda kumpulkan, semakin baik. Berikan semua informasi ini kepada tim Gutenberg. Dengan keberuntungan, mereka akan dapat menentukan masalah dan memperbaikinya dalam rilis mendatang.

Jika Anda bekerja di situs pementasan, maka pada titik ini, itulah yang dapat Anda lakukan untuk saat ini. Lanjutkan untuk memeriksa catatan rilis untuk melihat apakah masalah Anda terpecahkan, atau mungkin berupaya memecahkannya sendiri.

Jika Anda bekerja di situs langsung Anda, menonaktifkan Gutenberg akan mengembalikan semuanya menjadi normal. Jika tidak, maka sekarang saatnya untuk kembali ke cadangan yang Anda buat!

Keberuntungan di Instal Anda!

Gutenberg bertujuan untuk menjadi perubahan besar pada lingkungan WordPress, yang terlihat untuk mengubah konten menjadi lebih baik. Sebelum menabrak cabang utama, pastikan untuk memeriksa apakah situs Anda akan berfungsi dengan perubahan baru. Jika Anda memiliki masalah selain yang tercantum di sini, solusi yang lebih baik, atau koreksi untuk apa pun dalam artikel ini, silakan tinggalkan komentar di bawah ini!

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.