Cara Menulis Artikel di Gutenberg WordPress 2020

WordPress telah memperbaharui antarmuka post editornya dengan block editor. Versi terbaru editor WordPress ini memungkinkan Anda menambahkan gambar, tabel, heading, list & numbering, kutipan, dll.

Masalahnya, belum semua pengguna WordPress nyaman dengan perubahan ini. Entah apakah disebabkan oleh penggunaannya yang sulit atau karena lebih memilih postingan yang simpel saja.

Nah, untuk menengahi kedua masalah diatas, dalam artikel panduan menulis artikel di WordPress 2020 ini akan menjelaskan 7 fitur utama Block Editor WordPress yang sering digunakan dan cara menggunakannya.

Berkenalan dengan Block Editor WordPress

WordPress mulai menggunakan Block Editor sejak versi 5.0. Jika text editor classic lebih mirip dengan Word atau Google Docs, Block Editor atau Gutenberg ini lebih simple dan tidak banyak menu dan icon yang ditampilkan.

Meski terkesan simple dan bebas gangguan, masalah baru muncul: Bagi pengguna yang terbiasa menulis dengan bantuan editor klasik yang serba jelas letak menunya, akan kesulitan dengan block editor yang memiliki tampilan simpel ini.

Q: Mengapa disebut Block Editor?
A: Karena konten yang Anda tambahkan dalam sebuah artikel akan dikelompokkan dalam blok-blok tertentu.

Kelebihan dan Kekurangan Block Editor

Kelebihan mengedit dengan block editor antara lain:

  1. Anda bisa mengubah tampilan artikel dengan mudah
  2. Banyak pilihan tampilan yang menarik
  3. Tidak perlu menggunakan shortcode lagi untuk menampilkan fitur tertentu
  4. Tampilan editor-nya simpel

Kekurangan block editor:

  1. Sedikit membingungkan, karena icon/menu editornya tersembunyi
  2. Banyak template/theme yang tidak kompatibel dengan Gutenberg

Bagian-bagian Utama Block Editor Guttenberg

Menu Header

Header menu Guttenberg memiliki fungsi sebagai berikut:

  1. Tombol menuju postingan-postingan lama di situs Anda
  2. [+] Add block: menu untuk menambahkan block baru pada postingan Anda
  3. Select tools: Mengubah kursor menjadi mode edit atau select
  4. Redo dan Undo: Mengembalikan editan pada kondisi sebelumnya
  5. Block navigation
  6. Content Structure (!): Berisi info jumlah kata, paragraf, block, dan heading dalam artikel Anda

Block Editor

Anda bisa menuliskan judul dan mulai menambahkan tulisan dan ilustrasi pada block editor.

Ada banyak hal yang bisa Anda lakukan di block/text editor di atas. Anda bisa mengetikkan judul dan menulis paragraf pertama artikel Anda. Namun, Gutenberg menyediakan lebih dari sekedar menulis dan menambah gambar. Fitur-fitur utama dan krusial dari Gutenberg akan dibahas pada section selanjutnya.

Document/Block Properties

Menulis Artikel SEO Friendly dengan Gutenberg

Memberi Header Pada Artikel dengan Guttenberg

  1. Ketikkan kalimat heading Anda
  2. Block seluruh kalimat tersebut dan klik icon paragraf pada menu bar
  3. Klik “Transform to Heading”
  4. Pilih tingkatan heading yang Anda inginkan, done!

Mengetik dan Mengubah Jenis dan Warna Font Paragraf

  1. Klik tombol “Add Block” pada bagian tengah block aktif yang sudah Anda edit
  2. Klik icon “Paragraph”
  3. Ketikkan apapun yang Anda mau
  1. Block area/text yang akan Anda edit
  2. Klik menu Typography di sidebar menu “Block” dan ubah ukuran font sesuai kebutuhan Anda
  3. Di bawa opsi Typography, Anda bisa mengubah warna latar belakang block dan font sesuai selera dan kebutuhan
  4. Jika diperlukan, Anda juga bisa menambahkan animasi tulisan pada block paragraf tadi

Menambahkan Anchored-text/Link Pada Artikel

Menambah anchored-text link adalah kebutuhan SEO artikel yang Anda tulis. Caranya 11:12 dengan menambahkan link seperti biasa:

  1. Block kata atau kalimat yang ingin Anda beri outbound/inbound link
  2. Klik icon “Anchor” pada menu bar dan ketikkan link target
  3. Klik toggle “open in a new tab”
  4. Tekan icon enter pada editor atau Enter keyboard Anda

Cara Menambahkan Gambar dan Animasi Pada Artikel

  1. Klik button “Add block”
  2. Cari tipe block “Image” dan klik iconnya
  3. Pada block yang aktif, klik tombol “upload” atau “Media Library”. Opsi upload akan mengarahkan Anda pada file manager PC yang Anda gunakan. Silahkan cari file gambar yang ingin Anda gunakan
  4. Opsi “Media Library” akan mengarahkan pada file-file gambar yang telah Anda upload sebelumnya
  5. Atur ukuran dan tambahkan alt-text pada sidebar menu Block Properties (sidebar sebelah kanan monitor PC Anda)

Cara Memasukkan Kode Pada Artikel

Opsi ini bisa Anda gunakan jika Anda sering membuat tutorial coding atau tweaking blog, dll.

Contohnya seperti ini:

<h2>Mikrobiom Manusia</h2>
  1. Klik button “Add Block”
  2. Cari tipe block code dengan mengetikkan “/code” pada search bar
  3. Setelah block “Code” aktif, tempelkan kode yang ingin Anda masukkan
  4. Jangan lupa klik tombol “Safe Draft”

Cara Membuat Kutipan/Quote Pada Artikel

Block Quote atau kutipan cocok untuk Anda yang suka menulis resensi buku. Berikut cara menambahkan block quote dengan Gutenberg:

  1. Klik tombol “Add Block”, cari block Quote dengan mengetikkan “/quote”
  2. Ketikkan kutipan yang ingin Anda pasang dan pengarangnya
  3. Atur ukuran dan tampilan kutipan tersebut pada Sidebar Block Properties.
Mengatur tampilan quote di Gutenberg

Cara Menambahkan Tabel Pada Artikel

  1. Arahkan kursor pada area yang ingin Anda beri tabel
  2. Klik button [+] atau Add Block, search table
  3. Klik icon Table dan masukkan jumlah kolom serta baris sesuai kebutuhan
  4. Klik tombol “Create”
  5. Atur tampilan sesuai keinginan Anda pada Sidebar “Block”
  6. Masukkan data pada tabel tersebut

Keterangan:

  1. Jumlah kolom
  2. Jumlah baris
  3. Tombol untuk membuat tabel sesuai pengaturan jumlah kolom dan baris

Cara mengatur tampilan

  1. Mengatur tampilan: tabel dengan shading dan border
  2. Tabel dengan ukuran tetap atau berubah sesuai isi yang diketik
  3. Aktifkan untuk menambahkan header pada tabel
  4. Aktifkan untuk menambahkan footer pada tabel
  5. Menu untuk mengubah warna shading tabel

Cara Menambahkan List dan Numbering


Referensi

How to Use the New WordPress Block Editor (Gutenberg Tutorial)

How to Use the New WordPress Block Editor – Your WordPress Gutenberg Guide

Leave a Comment