Panduan Saya untuk Editor Visual Gutenberg WordPress [WITH PICTURES]


Jadi, pernahkah Anda mendengar tentang Gutenberg, editor visual WordPress baru untuk editor HTML biasa?

Jika tidak, Anda akan segera memilikinya karena ketika WordPress versi 5.0 dirilis, Gutenberg akan menggantikan editor saat ini.

Gutenberg lebih dari sekadar pembaruan desain estetika.

Fokus saat ini mungkin pada pembuatan konten, tetapi tujuan utamanya adalah agar Gutenberg menawarkan penyesuaian situs web lengkap dan bersaing dengan pembuat halaman yang hebat.

Akhirnya, Anda akan dapat membangun seluruh situs web Anda menggunakan Gutenberg.

Apakah Gutenberg baik untukmu?

Ini adalah saat-saat yang sangat menyenangkan untuk menjadi seorang blogger WordPress.

Artikel ini akan memberi Anda tutorial Gutenberg yang sangat sederhana yang akan memberi Anda beberapa dasar untuk memulai dan menunjukkan kepada Anda apa yang baik dan buruk saat ini dengan editor baru.

Jika Anda tidak sabar menunggu Gutenberg memblokir test drive, Anda dapat mengunduhnya sekarang.

Cara mengunduh Gutenberg

Buka dasbor Anda di WordPress dan kemudian pergi ke

  1. Tambahan
  2. Pilih “Tambah Baru”
  3. Cari Editor Visual Gutenberg
  4. Pilih “Unduh” dan kemudian aktifkan plugin.

Sekarang Anda memiliki Gutenberg

Jadi mari kita kumpulkan artikel dari Panduan Gutenberg dan tunjukkan apa yang bisa dan tidak bisa Anda lakukan dengan Gutenberg dan semoga mengungkapkan beberapa tip dan trik di sepanjang jalan.

Panduan Memulai Gutenberg Anda – Memblokir Pengantar

Gutenberg memiliki perasaan yang sangat membangun halaman saat Anda pertama kali masuk ke pembuatan konten.

Setiap item yang Anda tambahkan ke halaman atau posting sekarang disebut “Blokir”

Blok Gutenberg memungkinkan Anda membuat tata letak yang lebih kompleks daripada yang diizinkan di lingkungan editor WordPress saat ini

Anda dapat memiliki blok untuk:

  • Dokumen
  • Gambar
  • Video
  • Widget (ya, Anda dapat menambahkan widget bilah sisi yang sama pada halaman dan kiriman)
  • Meja
  • dll.

Ini adalah apa yang Anda lihat ketika Anda memulai posting atau halaman baru.

Editor visual/HTML yang kita semua kenal sekarang menyukai antarmuka yang sangat minimalis.

Panduan Memulai Sederhana Gutenberg Saya: Cara Memulai

Jadi mari kita mulai dengan tutorial Gutenberg sederhana saya

Saya membuat tutorial lengkap yang Anda baca ini menggunakan Gutenberg, dan seperti yang disebutkan di atas, ini pertama kalinya saya menggunakan lingkungan pengeditan baru.

Kemudian Anda akan segera menemukan dengan saya apa yang saya suka tentang blok Gutenberg dan apa yang saya benci. Saya juga akan menyampaikan tip dan trik yang Anda temukan di sepanjang jalan, jadi pastikan untuk mengikutinya.

Dan saya akan memperbarui posting ini juga, jadi pastikan untuk menandai atau menautkan ke kami sehingga Anda dapat dengan mudah menemukan jalan kembali.

Ayo mulai

Jadi ketika Anda disajikan dengan layar judul di atas, jangan ragu untuk menambahkan judul Anda untuk posting Anda,

Saya akan menggunakan judul sementara “Memulai Gutenberg”

Kemudian tambahkan intro awal Anda ke artikel Anda di blok teks seperti yang ditunjukkan pada gambar di bawah.

Panduan Memulai Sederhana Gutenberg Saya - Blok

Tambahkan gambar ke Gutenberg

Setelah menulis intro, saya ingin menambahkan gambar ke gambar, dalam hal ini, tangkapan layar yang Anda lihat di atas.

Ada tiga metode untuk menambahkan gambar.

  1. Anda dapat menambahkan gambar Anda melalui bilah alat yang diakses dengan mengklik tombol plus + dan kemudian memilih blok gambar.
  2. Anda juga dapat menambahkan gambar menggunakan tombol pintasan yang terletak di bawah kotak teks Anda.
  3. Dan tentu saja Anda dapat menambahkan kode sumber. Dengan mengubah editor blok menjadi kode.

Panduan Memulai Sederhana Gutenberg Saya - Gambar

Setelah menambahkan gambar Anda, Anda dapat mengkliknya untuk menampilkan opsi perataan.

Anda dapat meratakan kiri, memindahkan gambar ke tengah atau ke kanan.

Ada juga opsi untuk mengedit gambar Anda melalui perpustakaan media, dan di sinilah masalah dengan Gutenberg dimulai.

Sepengetahuan saya, ketika Anda mengedit gambar melalui perpustakaan media, Anda mengedit gambar seperti yang muncul di halaman lampiran atau dengan kata lain di mana gambar itu disimpan. (Koreksi saya jika saya salah dalam hal ini)

Halaman lampiran adalah halaman konten yang sangat tipis, pada dasarnya hanya gambar dan tidak ada yang lain, dan untuk alasan SEO, halaman lampiran buruk untuk SEO ketika Google mengumumkannya.

SEO Yoast baru-baru ini memiliki masalah dengan file-file terlampir Itu ternyata menjadi masalah SEO utama bagi beberapa pengguna.

Saat bekerja membuat artikel dengan Gutenberg, saya masih tidak dapat menemukan cara untuk menambahkan atribut teks alternatif atau judul gambar selain kembali ke kode sumber untuk menambahkan HTML yang diperlukan atau kembali ke editor stok kamus.

Teman-teman kami di WPBeginner menjelaskan perbedaan antara Teks Alt Gambar dan Judul Gambar dengan artikel luar biasa berjudul:

Tambahkan deskripsi dan tag alt adalah fitur pengeditan gambar yang tersedia dengan klik tombol di editor gambar asli.

Ini bukan kabar baik untuk optimasi gambar SEO.

Saat ini juga tidak ada cara mudah yang dapat Anda temukan untuk melampirkan tautan ke gambar, sehingga dapat diklik.

Misalnya, jika Anda ingin menambahkan spanduk, Anda perlu menambahkan spanduk sebagai blok gambar seperti yang ditunjukkan di atas, lalu kembali ke kode sumber dan tambahkan URL sebagai kode HTML.

Tambahkan kutipan dan tautan

Seperti yang Anda lihat di atas, saya menautkan ke sumber daya (WPBeginner) dalam kutipan blok.

Blok kutipan sangat bagus untuk memecah blok teks yang besar sehingga membuat artikel lebih mudah dibaca.

Mereka menyediakan elemen visual yang bagus untuk artikel.

Inilah cara saya melakukannya:

  1. Klik tombol + untuk membuka area blok.
  2. Pilih kutipan blok
  3. Tambahkan teks kutipan Anda
  4. Tambahkan tautan jika perlu

Tambahkan kutipan sederhana saya Panduan Memulai Gutenberg

Anda akan melihat jika Anda seorang pengamat bahwa contoh tangkapan layar blockquote di atas berbeda dari blockquote sebenarnya yang ditampilkan dalam posting ini.

Kutipan terakhir memiliki teks jangkar berjudul h3 terlampir untuk alasan SEO.

Untuk menambahkan tag h3, Anda harus kembali ke kode sumber mentah dan menerapkan tag h3 ke teks jangkar kutipan blok.

Seperti yang Anda lihat pada tangkapan layar di atas, ada tombol berlabel pintasan H (judul), tetapi mengklik ini akan membuka blok baru untuk menerapkan judul.

Saat ini Anda tidak dapat menerapkan judul dalam blok anggaran.

Jika Anda membuat blog teks, Anda juga tidak dapat menambahkan judul di tengah blok teks, Anda perlu membuat blok teks baru sehingga Anda dapat menambahkan judul di awal blok baru dan kemudian melanjutkan menulis artikel Anda .

Semua tautan yang Anda tambahkan secara default adalah tautan peregangan dan saat ini tidak ada cara untuk mencegahnya melanjutkan tanpa menambahkan atribut jangan lacak sebagai kode.

Anda diberi opsi untuk membuka tautan di jendela baru dengan menambahkan tautan.

Menambahkan blok konten yang disematkan ke Gutenberg

Untuk menambahkan konten yang disematkan ke postingan, klik area blokir dan gulir ke bawah ke Sematan. Kemudian Anda akan melihat layar blok di bawah ini

Panduan Memulai Sederhana Gutenberg Saya - Opsi Sisipkan

Klik pada jenis tatahan yang ingin Anda gunakan. Kotak tautan disediakan untuk menambahkan kode Anda.

Saya memilih opsi YouTube Karena sebagian besar itulah yang akan Anda gunakan saat membuat konten hanya untuk menunjukkan kepada Anda proses menambahkan video.

Tambahkan Video Youtube Memulai Sederhana Saya ke Gutenberg

Cukup tambahkan URL ke video Anda YouTube dan Anda akan memiliki fungsi video di posting Anda.

Jadi apa pendapat kita tentang WordPress Gutenberg?

Gutenberg akan menakut-nakuti beberapa blogger di siang hari. Tetapi semakin saya menggunakan sistem blok, semakin saya menyukainya.

Saya baru-baru ini menggunakan situs manajemen konten Wakelet untuk membuat posting blog yang sangat sederhana untuk membuat cadangan situs Infobunny saya dan apa yang Anda perhatikan ketika Anda menggunakan Wakelet adalah Anda dapat membuat blog dengan cara yang sangat mirip, halaman yang Anda buat dengan blok Gutenberg.

Dengan bangun Anda dapat menambahkan teks, video, tautan otoritas untuk menilai konten, gambar, dan bahkan PDF Anda.

Cukup tambahkan semuanya sebagai posting individual ke Wakelet dan kemudian atur ulang seperlunya untuk membuat posting lengkap Anda dan ini pada dasarnya adalah cara kerja Guttenberg Lock.

Berikut ini contoh dari salah satu blog Wakelet saya: Seberapa penting pengikut media sosial?

Jika Anda terbiasa menggunakan pembuat halaman Saat membuat posting dan halaman, Anda seharusnya tidak kesulitan menggunakan Gutenberg.

Gutenberg tidak benar-benar menjadi pembuat halaman, karena tidak dapat menarik dan melepaskan blok bersama dengan fitur lain yang hilang yang ditawarkan pembuat halaman profesional.

Panduan Gutenberg - Editor Gambar Baru Solitaireess (DENGAN GAMBAR)

Sejujurnya, saya suka editor HTML gaya lama, tapi itu karena saya sudah terbiasa.

Mudah-mudahan, kita akan diberikan pilihan untuk mengklik antara Gutenberg dan editor HTML saat ini WYSIWYG, dan dapat mengakses kedua sistem akan memberikan webmaster yang terbaik dari kedua dunia.

Dengan membaca tentang Gutenberg, saya mengerti bahwa editor reguler akan tersedia sebagai add-on.

Tutorial Gutenberg ini dibuat untuk memberi saya gambaran tentang cara kerja Gutenberg.

Saya ingin bersiap-siap untuk peluncuran tak terelakkan dari sistem blok baru ketika WordPress 5.0 mendarat.

Dan beginilah cara Anda mempelajari sistem baru hanya dengan lompatan pertama.

Gutenberg dirancang untuk membuat pembuatan konten menjadi mudah.

Dan saya yakin itu akan untuk pembuat konten sederhana. Tetapi bagi mereka yang ingin melakukan sedikit lebih banyak, akan ada kurva belajar yang lebih besar dan pasti akan ada beberapa solusi untuk pecinta SEO mereka.

Optimalisasi gambar SEO saat ini menjadi masalah.

Semoga ketika Gutenberg muncul dengan proses optimasi gambar akan jauh lebih mudah.

Dan jika tim pengembang Gutenberg tidak memberikan solusi yang lebih baik, saya yakin tidak akan ada pengembang pihak ketiga yang bersedia memberikan beberapa solusi utilitas blok yang sangat keren.

Satu pertanyaan besar yang saya miliki adalah “Apakah halaman dan postingan Gutenberg kompatibel dengan AMP – Halaman Seluler yang Dipercepat?

Atau fungsionalitas yang lebih kompleks akan ditambahkan demi kecepatan.

Itu saja untuk saat ini.

Saya harap Anda menemukan tutorial Gutenberg sederhana saya bermanfaat dan mengambil beberapa tips di sepanjang jalan.

Apakah Anda siap untuk Gutengerg?

Apakah Anda memiliki tip Gutenberg yang ingin Anda tambahkan ke posting ini atau menawarkan solusi untuk masalah yang dijelaskan?

Beri tahu saya di bagian komentar di bawah.

Pastikan untuk berlangganan komentar sehingga Anda akan diberi tahu ketika Anda membalas

Salam

ARTIKEL TERKAIT

Pos terkait

Back to top button