Blok WordPress: Panduan Mendalam
Diterbitkan: 2021-10-02Blok WordPress adalah komponen utama dari sistem pengeditan Gutenberg drag-and-drop WordPress untuk situs web.
Cara termudah untuk belajar menggunakan blok adalah melalui praktik langsung, tetapi memahami apa itu blok dan apa yang dapat mereka lakukan untuk Anda dapat membuat pembuatan halaman Anda lebih efisien dan bahkan menyenangkan.
Baik Anda baru dalam membuat situs WordPress atau ingin mengembangkan beberapa keterampilan lanjutan, panduan ini akan mengajarkan Anda lebih banyak tentang apa itu blok, blok apa yang umum digunakan orang, cara menggunakannya, dan informasi lain yang dapat meningkatkan situs Anda.
Pelajari lebih lanjut: Desain Situs Web WordPress: Cara Membuat Situs Web WordPress dari Awal
Apa itu Blok WordPress?
Blok WordPress adalah elemen teks, media, atau kode khusus yang dapat Anda tambahkan ke posting blog atau halaman situs web menggunakan sistem pengeditan Gutenberg WordPress.
Kebanyakan orang fokus menggunakannya untuk blog, tetapi berfungsi dengan baik untuk sebagian besar halaman lain di banyak situs web.
Blok WordPress ada untuk menyederhanakan pembuatan posting dan halaman yang terlihat bagus untuk pembaca dengan menghilangkan kebutuhan untuk mengkodekan setiap elemen secara manual. Sebagai gantinya, Anda dapat menarik dan mengatur ulang setiap blok untuk menyesuaikan tampilan halaman Anda.
Setiap blok secara fungsional merupakan elemen mandiri pada halaman, jadi mengubah satu blok tidak akan mengubah blok lainnya.
Ini bukan satu-satunya sistem pengeditan tipe blok di pasar. Beberapa layanan pesaing, seperti Ghost, juga memiliki editor tangguh yang dapat Anda gunakan untuk membuat situs web.
Namun, Ghost sebagian besar adalah platform blogging, dan editornya berfokus pada hal itu, sementara editor WordPress juga membantu untuk membuat halaman non-blog di situs web Anda.
Blok ini juga berbeda dari Drupal, sistem manajemen konten lainnya.
Drupal berfokus pada blok yang dapat muncul di beberapa bagian situs web, sedangkan WordPress berfokus pada bagian individual dari satu halaman.
Anda dapat menduplikasi konten dengan cukup mudah, tetapi blok itu sendiri tidak ditautkan dan tidak semuanya akan berubah saat Anda mengeditnya.
Pelajari lebih lanjut: Desain Halaman Arahan: 10 Halaman Arahan Inspiratif dengan Konversi Tinggi
Sejarah Gutenberg
Gutenberg adalah editor WordPress saat ini.
Awalnya diluncurkan pada tahun 2018, ini berkembang sejak saat itu menjadi sistem yang lebih matang yang mampu memberikan pengeditan yang cepat dan kuat untuk halaman web dan posting blog.
Itu masih belum selesai karena pengembang ingin menggunakannya untuk mengedit situs penuh, tetapi sekarang memiliki lebih banyak fitur secara signifikan daripada saat diluncurkan.
Gutenberg ada karena banyak pengguna WordPress ingin memiliki cara blog yang lebih bersih dan sederhana tanpa mengedit kode agar semuanya terlihat bagus.
Di sini, penting untuk dipahami bahwa WordPress menarik banyak pengguna biasa, banyak di antaranya memiliki sedikit pengetahuan pengkodean.
Ini adalah perbedaan tajam dari tahun-tahun awal internet ketika Anda bahkan tidak akan memiliki situs web kecuali Anda memiliki pengetahuan pengkodean yang relatif maju untuk saat itu. Dengan kata lain, WordPress ingin mendukung pasar kasual, di mana proses klik-dan-seret lebih masuk akal.
Pertimbangan kedua untuk Gutenberg adalah bagaimana dan di mana orang-orang membuat blog.
Beberapa pemilik situs web menggunakan sistem text-to-speech alih-alih menulis sesuatu secara manual, sementara sistem pengeditan drag-and-drop membuatnya lebih mudah untuk membuat situs web di ponsel cerdas, tablet, dan perangkat lain.
Namun, beberapa orang masih lebih suka sistem pengeditan yang lama. Itu tidak mengejutkan karena masih menawarkan kontrol dan dukungan yang jauh lebih besar bagi pengguna yang mampu mengelola kodenya.
Gutenberg adalah editor yang hebat , tetapi karena kebutuhan, ia membatasi beberapa hal yang dapat dilakukan pengguna. Tidak ada yang sefleksibel pengkodean murni, tetapi Gutenberg lebih cepat dan lebih mudah untuk sebagian besar kebutuhan.
Pelajari lebih lanjut: Pengoptimalan Tingkat Konversi: Panduan Lengkap
Beralih Antara Editor Klasik dan Blok
WordPress tahu bahwa fleksibilitas biasanya lebih baik daripada memaksa semua orang untuk menggunakan satu sistem, dan itulah mengapa Anda dapat beralih antara sistem pengeditan klasik dan blok.
Dalam kebanyakan kasus, Anda harus menjadi administrator situs untuk beralih di antara tampilan pengeditan.
Namun, setelah Anda masuk dengan akun yang benar, Anda dapat mengubah editor di setiap halaman saat Anda memodifikasinya dengan mengeklik tombol di bagian atas layar.
Ini semua yang perlu diketahui sebagian besar pengguna, tetapi Anda dapat menyesuaikan lebih lanjut.
Banyak plugin WordPress memungkinkan Anda membuat halaman dengan antarmuka drag-and-drop seperti Gutenberg tetapi Anda mungkin lebih suka. Mereka biasanya juga menawarkan pilihan pengeditan yang tidak dimiliki Gutenberg.
Plugin seperti Divi builder, SeedProd, dan Elementor yang populer dan mudah digunakan menawarkan sistem pengeditan di luar blok yang disediakan Gutenberg.
Plugin ini biasanya berisi alat pengubahan ukuran, komponen multi-bagian, dan templat yang disempurnakan yang semakin mengurangi proses pembuatan halaman.
Plugin eksternal sangat membantu untuk halaman non-blog, di situlah Gutenberg sering gagal. Itu dapat melakukan banyak halaman itu, tetapi belum dengan fleksibilitas yang sama seperti sistem lain dulu.
Pelajari lebih lanjut: Peta Perjalanan Pelanggan: Praktik Terbaik + Template Siap
Cara Menonaktifkan Gutenberg
Bisakah Anda menonaktifkan Gutenberg untuk pengguna tertentu? Bisakah itu dinonaktifkan sepenuhnya?
Jawaban untuk keduanya adalah ya. Ada beberapa cara untuk menonaktifkan Gutenberg jika Anda tidak ingin menggunakannya di situs Anda.
Nonaktifkan Gutenberg dengan Memasang Plugin
Metode pertama, dan bagi sebagian besar pengguna yang terbaik, adalah menggunakan plugin Editor Klasik. Ini adalah plugin resmi dari tim WordPress, dengan jutaan instalasi aktif di situs.
Editor Klasik memungkinkan Anda untuk mengatur editor default untuk setiap pengguna, memungkinkan pengguna untuk memilih editor, dan dilengkapi dengan beberapa fitur tambahan untuk mempermudah.
Ini tidak menonaktifkan Gutenberg secara teknis seperti menyembunyikannya, tetapi hasil praktisnya sama. Atau, dalam arti lain, menginstal Editor Klasik adalah bijaksana karena memungkinkan Anda menggunakan editor mana pun yang Anda inginkan, dan itu lebih baik daripada terjebak dengan satu editor sepanjang waktu.
Alternatif berbasis komunitas menggunakan plugin Nonaktifkan Gutenberg, yang tidak sepopuler Editor Klasik tetapi tidak bergantung pada dukungan resmi.
Ini adalah cara langsung dan praktis untuk menonaktifkan Gutenberg sepenuhnya atau menonaktifkannya untuk halaman, jenis posting, peran, atau tema tertentu di situs.
Untuk menginstal salah satu plugin, langkah-langkahnya sederhana:
- Masuk ke antarmuka WordPress Anda
- Di sebelah kiri, pilih 'Plugin'
- Pada layar Plugin yang diperluas, pilih 'Baru'
- Di kolom pencarian di atas, ketik nama plugin yang Anda inginkan
- Pilih plugin yang Anda inginkan dari hasil dan klik tombol 'Instal Sekarang'
- Setelah selesai, klik 'Aktifkan Plugin'
Nonaktifkan Gutenberg dengan Mengedit functions.php
Terakhir, Anda dapat memodifikasi file functions.php di situs Anda untuk menonaktifkan berbagai hal secara langsung.
Namun, ini dapat merusak situs Anda jika Anda melakukannya dengan tidak benar, jadi kami tidak menyarankan ini untuk pengguna biasa. Memasang salah satu plugin yang tercantum di atas lebih sederhana dan mudah dibalik.

Jika Anda ingin menonaktifkan Gutenberg tanpa plugin dan Anda seorang pemula dalam kode WordPress, Anda dapat mengikuti langkah-langkah ini. Metode ini menonaktifkannya untuk semua pengguna.
- Masuk ke antarmuka WordPress Anda (Anda harus menjadi administrator)
- Temukan 'Tampilan' di bilah sisi kiri dan arahkan kursor ke atasnya
- Pilih 'Editor Tema'
- Dalam daftar file di sebelah kanan, pilih 'functions.php'
- Buat salinan file functions.php Anda sebelumnya sebagai cadangan sehingga Anda dapat memulihkannya jika ada yang tidak beres
- Saat editor muncul, salin yang berikut ini dan rekatkan ke dalam file: add_filter( 'use_block_editor_for_post', '__return_false' );
- Klik tombol Perbarui File di bawah ini
Pelajari lebih lanjut: Penjelasan Peta Panas + Cara Membuat Peta Panas Situs Web
Jenis Umum Blok WordPress
Berikut adalah jenis blok paling umum yang tersedia di editor WordPress dasar.
Sebelum Gutenberg, kebanyakan orang mengkodekan blok-blok ini secara langsung, atau dengan alat pemformatan teks dan gambar dari editor teks kaya, dan mengatur ulang kode seperlunya untuk menyesuaikan tata letak pada halaman.
Gugus kalimat
Ini adalah blok yang paling banyak digunakan orang daripada yang lain. Seperti namanya, ini berfokus pada konten tertulis.
Editor teks mengubah setiap paragraf menjadi blok sehingga Anda dapat memindahkan dan mengatur ulang setelah menulisnya.
Gambar
Blok penyematan gambar menampung satu grafik yang dapat Anda pindahkan di sekitar halaman.
Ini datang dengan berbagai opsi perataan, termasuk mengubah ukuran gambar atau bahkan menjadi lebar penuh, melampaui batas biasa dari sebuah tema.
Blok paragraf dan gambar bersama-sama sudah cukup untuk membuat halaman web dasar, jadi semua yang lain pada akhirnya hanya ada di sana untuk mengulangi dan meningkatkan elemen-elemen ini, mengikuti prinsip hierarki visual dasar.
Judul
Blok judul menahan teks berukuran besar untuk membagi halaman menjadi beberapa bagian dan memudahkan pengguna menemukan konten. Editor memungkinkan Anda untuk menyesuaikan ukuran judul, pemformatan, hyperlink, dan elemen lainnya sesuai kebutuhan.
WordPress mendukung hingga 6 level heading, termasuk h1 untuk judul halaman, tetapi kebanyakan orang jarang melampaui h4.
Galeri
Blok galeri adalah versi lanjutan dari blok gambar dasar dan memungkinkan Anda menambahkan banyak gambar dalam tata letak yang telah ditentukan.
Editor saat ini mendukung maksimal delapan kolom untuk gambar, ditambah opsi pengubahan ukuran, penautan, dan pemformatan lain untuk halaman.
Daftar
Blok daftar membuat daftar bernomor atau berpoin.
Ini pada dasarnya hanyalah sebuah aplikasi dari blok paragraf, tetapi memisahkan daftar ke dalam komponennya sendiri membuatnya lebih mudah untuk menghindari modifikasi pemformatan secara tidak sengaja.
Mengutip
Blok kutipan adalah blok paragraf yang diformat khusus yang membantu menyebutkan sesuatu yang sangat penting.
Kebanyakan orang menggunakan ini untuk kutipan oleh orang tertentu, tetapi Anda juga dapat menggunakannya untuk memberikan komentar atau menyoroti informasi penting.
audio
Blok audio relatif jarang di situs web, tetapi WordPress masih mendukungnya.
Ini memungkinkan Anda untuk menambahkan file audio apa pun yang Anda miliki, termasuk fitur seperti memutar audio secara otomatis atau mengulangnya.
Ingatlah bahwa sebagian besar pengguna tidak menyukai audio yang diputar secara otomatis kecuali mereka menginginkan hal itu terjadi, jadi cobalah untuk tidak mengejutkan pengunjung dengan suara yang tidak terduga.
Menutupi
Blok penutup adalah elemen pemformatan yang lebih canggih. Blok ini memungkinkan Anda memilih gambar atau video, dan terkadang teks, yang dapat Anda overlay di halaman Anda.
Media ini dapat melayang di latar belakang, berulang, dan sebaliknya berfungsi sebagai penarik perhatian instan.
WordPress mendukung tidak adanya transparansi pada overlay, atau transparansi penuh, tetapi merekomendasikan jumlah yang moderat untuk memastikan teks Anda mudah dibaca.
Mengajukan
Blok file memungkinkan Anda memberikan tautan langsung ke file di situs web Anda sehingga pengunjung dapat mengunduhnya.
Anda dapat mengunggah hampir semua jenis file ke situs Anda, tetapi penyedia hosting Anda mungkin memiliki pertanyaan jika Anda mencoba mengunggah sesuatu yang terlalu besar atau mendapatkan terlalu banyak unduhan untuk paket Anda.
Ini adalah contoh yang baik dari keterkaitan pengembangan web.
Anda mungkin tidak akan melanggar batas jika Anda hanya mengizinkan orang mengunduh file teks dasar, tetapi berbicaralah dengan host situs web Anda sebelum menambahkan file lain. Mereka dapat memberi tahu Anda apa yang diperbolehkan dalam rencana Anda atau menyarankan alternatif sesuai kebutuhan.
Video
Blok video memungkinkan Anda menambahkan konten multimedia ke situs Anda, dengan mengunggahnya secara langsung atau menautkan konten di situs lain.
File video cenderung sangat besar, jadi Anda biasanya memerlukan paket hosting yang bagus jika ingin memiliki file di situs Anda.
Hosting secara eksternal, seperti melalui YouTube dan menggunakan sematan YouTube, jauh lebih mudah. Gutenberg secara otomatis mengonversi beberapa tautan video ke jenis blok berbeda yang sesuai.
Cara Menggunakan Blok WordPress
Ada beberapa cara untuk menambahkan blok di editor Gutenberg. Anda dapat menambahkannya langsung dari bilah ikon atas, atau dengan mengklik tombol penyisip.
Tombol ini terlihat seperti lingkaran dengan plus di dalamnya dan memungkinkan Anda mengklik jenis blok yang akan ditambahkan.
Setelah blok berada di halaman, Anda dapat memindahkannya ke atas dan ke bawah dengan mengklik panah di sisi kiri blok. Atau, Anda dapat mengklik kisi enam titik dan menahan tombol mouse Anda, lalu seret blok ke tempat yang Anda inginkan.
Untuk mengedit blok, cukup klik pada ruangnya. Ini akan secara otomatis membuka informasi blok dan membiarkan Anda menyesuaikan komponen seperlunya.
Anda dapat menggunakan fungsi yang sama untuk mengubah jenis blok. Panah di panel kontrol dapat digunakan untuk memperluas atau menutup bagian editor, sedangkan tombol X memungkinkan Anda menutup editor blok dan fokus pada hal lain.
Perbedaan Antara Blok dan Widget WordPress
Blok terutama adalah konten halaman web, termasuk teks dan media seperti gambar dan audio. Jadi, apa itu widget WordPress, dan apa bedanya dengan blok?
Widget WordPress, sebaliknya, adalah konten yang dapat Anda letakkan di area khusus seperti sidebar dan footer. Editor Gutenberg sebagian besar menghindari area ini, meskipun Anda dapat memasukkan hal-hal seperti widget di konten utama Anda dengan menambahkan blok kode.
Antarmuka blok biasanya berada di sisi kanan layar saat editor halaman terbuka. Editor widget tersedia melalui area Appearance > Customizer dan melalui menu admin.
Widget biasanya muncul di setiap halaman situs web, jadi Anda tidak dapat mengeditnya dari tempat yang sama saat Anda mengedit blok.
Membuat Template Blok WordPress yang Dapat Digunakan Kembali
WordPress memungkinkan Anda membuat templat blok yang dapat digunakan kembali.
Ini berguna untuk memiliki branding dan desain yang konsisten di situs Anda tanpa membuat ulang tata letak yang tepat setiap saat. Ini sangat berguna jika Anda menggunakan perangkat lunak seperti Vectornator atau Adobe Illustrator untuk membuat grafik dan tata letak vektor tingkat lanjut.
Membuat template itu sendiri sederhana. Yang perlu Anda lakukan adalah memilih blok, klik tiga titik di bilah alat yang muncul, lalu klik Tambahkan ke Blok yang Dapat Digunakan Kembali.
Dari sana, Anda dapat mengganti namanya menjadi sesuatu yang mudah diingat dan kembali mengerjakan halaman.
Blokir template menyederhanakan hal-hal seperti logo, tombol khusus yang dibuat dalam perangkat lunak desain grafis, elemen desain, dan apa pun yang digunakan dalam pencitraan merek situs web.
Template akan memungkinkan elemen untuk ditambahkan dengan mudah di mana pun Anda inginkan tanpa harus mengulang elemen atau tata letak branding tertentu setiap kali Anda ingin menggunakannya.
Pikiran Terakhir tentang Blok WordPress
Meskipun blok WordPress tidak ideal untuk semua orang, blok tersebut merupakan titik awal yang kuat untuk membuat halaman dan mengatur konten dengan cara yang intuitif dan ramah pengguna.
Namun, hanya membaca tentang blok tidak cukup untuk menguasai penggunaannya.
Sebagai gantinya, buka situs WordPress Anda sekarang dan mulailah bermain-main di satu halaman. Dengan mendapatkan beberapa praktik langsung, Anda akan dapat menguasai penggunaannya dan mulai membuat tata letak lanjutan di situs Anda.
Sama seperti mengendarai sepeda, blok WordPress sulit dilupakan begitu Anda mempelajarinya dan dapat membantu Anda membuat hampir semua desain halaman standar.