Panduan Langkah demi Langkah untuk Pembuat Gutenberg untuk WordPress

Panduan Langkah demi Langkah untuk Pembuat Gutenberg untuk WordPress

Saya pikir Anda akan setuju ketika saya mengatakan: Seluruh bisnis Gutenberg ini membingungkan.


Pertama, apakah editor blok baru sulit digunakan atau apa? Maksud saya, Anda tidak tahu ke mana semua alat favorit Anda pergi. Sekarang, Anda mungkin perlu waktu lebih lama untuk membuat posting, benar?

Mungkin menambahkan tautan (afiliasi atau yang lain) memberi Anda satu lekukan kurva, dan Anda merasa kecewa. Mungkin Anda mengalami masalah saat menambahkan gambar di sebelah teks Anda.

Mungkin Anda mencoba menambahkan beberapa kolom, dan beberapa hal tidak berjalan seperti yang diharapkan. Jika bukan itu masalahnya, mungkin Anda tidak dapat menambahkan file PDF dengan mudah, atau Anda melihat pesan “Pembaruan Gagal” yang ditakuti secara parah.

Yah, jangan khawatir lagi; Saya berada di posisi Anda yang tepat belum lama ini, tetapi sekarang saya merasa Gutenberg senang digunakan. Ada kurva belajar, ya, tetapi pada akhir posting hari ini, Anda akan memikirkan Gutenberg secara berbeda.

Apa itu Editor Gutenberg?

editor wordpress gutenberg

Anda sedang melihat Gutenberg, editor blok WordPress default

Jika Anda menggunakan WordPress 5.0 dan di atasnya, Anda harus menemukan editor WordPress yang baru dan mengkilap, yang dikenal sebagai Gutenberg.

Dan seperti banyak pengguna lain, Anda ingin menggunakan editor revolusioner, tetapi Anda ragu karena Gutenberg rumit.

Atau mungkin ketika Anda pertama kali bertemu Gutenberg, berbagai hal tidak berhasil. Lagipula, pengembang dulu dan sekarang masih membuat tema dan plugin yang kompatibel dengan editor blok.

Jadi, Anda dengan cepat kembali ke Editor Klasik, yang, BTW, tidak apa-apa dengan kami. Ingatlah bahwa WordPress tidak akan mendukung Editor Klasik setelah 2022. Plus, Anda kehilangan semua kelebihan yang ditawarkan Gutenberg.

Dalam hal fungsionalitas, Editor Klasik dan Gutenberg melakukan hal yang sama; Anda tahu, kedua alat membantu Anda membuat konten tanpa coding.

Namun, kami sangat terbiasa dengan editor WYSIWYG lama yang kami temukan beradaptasi dengan Gutenberg UI baru agak asing, jika tidak benar-benar membingungkan. Setidaknya itulah yang saya pikirkan.

Tapi, apa sebenarnya Gutenberg?

Gutenberg adalah editor WordPress default baru. Ini tidak seperti editor visual / teks tradisional; Gutenberg menggunakan blok konten sama seperti banyak pembuat halaman modern.

Itu dikirimkan dengan fitur yang lebih intuitif daripada Editor Klasik, yang berarti Anda dapat membuat konten kaya-media dengan cepat. Sekarang, Anda dapat menyiapkan tata letak yang luar biasa dengan cepat apakah Anda bekerja dengan posting atau halaman WordPress.

Dan dengan beberapa add-on, Gutenberg dapat bersaing dengan pembuat halaman WordPress seperti Brizy, Elementor, dan Divi..

Satu-satunya kelemahan adalah pembangun halaman sering menawarkan lebih banyak fitur karena mereka terutama pembangun halaman! Pada saat yang sama, Gutenberg masih sangat muda, dan Anda hanya bisa mengharapkan editor blok tumbuh pesat..

Dalam posting hari ini, kita akan bersenang-senang membuat posting WordPress dengan editor Gutenberg. Saya bertujuan untuk mencakup setiap detail kecil dan fitur sehingga Anda dapat menggunakan Gutenberg untuk membuat konten seperti pro.

Apakah kamu siap? Jika demikian, mari kita buat posting WordPress itu.

Cara Membuat Posting WordPress Dengan Gutenberg

Jika Anda menjalankan situs web WordPress, Anda mungkin membuat lebih banyak posting daripada halaman. Di bagian berikut, kami membuat posting WordPress di Gutenberg dari awal. Saya harap Anda akan bersenang-senang seperti yang saya lakukan ketika menguji Gutenberg.

Itu keluar dari jalan, arahkan ke Posting> Tambah Baru seperti yang kita sorot pada screenshot di bawah ini.

membuat pos baru di gutenberg

Melakukan hal itu akan mengarahkan Anda langsung ke editor Gutenberg yang ditunjukkan di bawah ini.

editor wordpress gutenberg

Cukup rapi, ya? Sekarang, mari kita menyingsingkan lengan baju itu dan turun ke bisnis.

Menambahkan Judul

menambahkan judul baru di gutenberg

Anda tidak dapat menulis pos tanpa judul yang jelas. Hal baiknya adalah Gutenberg membuatnya sangat mudah untuk menambahkan judul.

Blok pertama yang Anda lihat adalah Judul di bagian atas dokumen seperti yang kita detailkan pada gambar di atas. Untuk membuat judul untuk posting Anda, ketikkan di dalam blokir. Sesederhana A, B, C.

Perlu mengedit permalink? Anda dapat dengan mudah melakukannya di Judul blokir dengan mengklik Edit tombol seperti yang ditunjukkan di bawah ini.

sunting pos permalink di gutenberg

Setelah menambahkan judul Anda, tekan tombol MEMASUKKAN untuk memulai baris baru. Oh ya, Gutenberg mempertahankan navigasi asli yang Anda sukai di editor WordPress klasik.

Menambahkan Paragraf Baru

blok paragraf baru di gutenberg

Memukul MEMASUKKAN kunci menciptakan yang baru Gugus kalimat blok, seperti yang ditunjukkan di atas. Sebelum Anda mengetikkan teks apa pun, blok menyajikan beberapa opsi. Lihat gambar bernomor di bawah ini untuk lebih jelasnya.

opsi blok paragraf baru gutenberg

Catatan. Kamu bisa:

  1. Konversi blok paragraf baru menjadi blok lain, mis., Gambar, heading, sampul, galeri, WooCommerce, form, dll..
  2. Gunakan pintasan untuk mengubah blok paragraf menjadi blok gambar
  3. Ubah blok paragraf menjadi blok heading, mis., H2, H3, dan H4
  4. Ubah blok paragraf menjadi blok gambar sampul

Untuk tujuan ilustrasi, saya akan memesan paragraf pertama untuk pengantar posting. Setelah Anda menambahkan beberapa teks, bilah alat pemformatan muncul seperti yang ditunjukkan di bawah ini.

bilah alat pemformatan paragraf gutenberg

Berkat bilah alat pemformatan, Anda dapat:

  • Gabungkan paragraf menjadi sebuah ayat, kutipan, judul, daftar, kode, dan teks yang telah diformat sebelumnya
  • Mencolok, Cetak miring, dicoret, dan menggarisbawahi kandungan
  • Sejajarkan teks kiri, kanan, tengah dan justifikasi
  • Tambahkan tautan yang juga bisa dibuka di tab baru
  • Masukkan gambar sebaris (ya, itu ada!)
  • Sembunyikan pengaturan blokir
  • Gandakan blok
  • Masukkan blok sebelum atau setelah blok saat ini (dalam kasus kami, itulah paragraf pertama, jadi tidak menambahkan apa pun sebelumnya, hanya setelah.) Anda dapat menambahkan blok gambar sampul sebelum paragraf pertama jika Anda menginginkannya karena terlihat sangat baik
  • Edit blok sebagai HTML
  • Tambahkan blok saat ini ke blok yang dapat digunakan kembali sehingga Anda dapat menggunakannya di pos lain
  • Hapus blok seluruhnya

Anda selanjutnya dapat menyesuaikan blok paragraf dengan opsi yang tersedia di menu Blok tab ditemukan di menu sidebar seperti yang ditunjukkan di bawah ini.

opsi sidebar gutenberg untuk blok paragraf

Beberapa catatan tentang gambar di atas:

  1. Memilih Blok tab di sini untuk melihat semua opsi dan pengaturan blokir
  2. Pilih ukuran font dan aktifkan Drop Cap di sini
  3. Tambahkan warna latar belakang ke paragraf Anda. Saya mengaturnya menjadi biru untuk tujuan ilustrasi. Anda juga dapat menyesuaikan warna teks. Dalam kedua kasus, Anda dapat menambahkan warna khusus tanpa batas
  4. Anda dapat menambahkan kelas CSS khusus di sini, artinya Anda dapat menambahkan gaya CSS tambahan ke blok Anda
  5. Latar belakang biru dan Drop Cap sudah diterapkan di editor Gutenberg

Tab Dokumen di Bilah Sisi

Ada tab lain di menu bilah sisi; itu Dokumen tab seperti yang ditunjukkan di bawah ini.

paragraf blok tab dokumen sidebar

Di sini, catatan untuk gambar di atas:

  1. Klik di sini untuk beralih ke Dokumen tab
  2. Di sini Anda dapat menjadwalkan posting, mengatur visibilitas ke salah satu Pribadi atau Publik, atur pos ke Tinjauan tertunda status, pilih format posting dan buat posting tempel
  3. Bagian ini memungkinkan Anda untuk mengedit permalink Anda
  4. Anda dapat memilih atau membuat kategori baru di sini
  5. Tambahkan tag ke posting Anda
  6. Tetapkan gambar unggulan
  7. Buat kutipan manual
  8. Izinkan komentar, pingback, dan trackback

Seperti yang Anda lihat, Anda memiliki banyak opsi untuk merancang blok paragraf (dan seluruh posting) mana pun yang Anda inginkan. Ngomong-ngomong, blok yang berbeda datang dengan pengaturan yang berbeda karena kita akan belajar dalam satu menit.

Setelah paragraf pertama, tekan tombol MEMASUKKAN kembali untuk membuat baris baru (atau blok paragraf). Sekarang, mari kita tambahkan gambar di bawah paragraf pertama.

Menambahkan Gambar di Gutenberg

menambahkan gambar baru di gutenberg

Mereka mengatakan sebuah gambar berbicara ribuan kata, dan sebuah posting blog tanpa gambar, well, menjemukan. Untuk menambahkan gambar di posting WordPress Anda menggunakan Gutenberg, Anda memiliki beberapa opsi.

Ketika Anda menekan tombol MEMASUKKAN beberapa saat yang lalu, Anda memicu blok paragraf baru. Melihat Gutenberg bersifat intuitif, Anda dapat menambahkan gambar dengan mengeklik ikon plus (+), gambar, atau sampul saat kami menyorot pada gambar di bawah.

menambahkan gambar baru di editor gutenberg

Beberapa catatan:

  1. Anda dapat menambahkan gambar melalui ikon plus (+)
  2. Di sini, Anda dapat menambahkan gambar dengan mudah
  3. Opsi ini memungkinkan Anda untuk menambahkan penutup gambar (Ini biasanya lebih besar dari foto lain. Plus, Anda dapat menambahkan teks pada gambar sampul, BTW)

Silakan dan klik salah satu ikon plus (+). Selanjutnya, klik tombol Gambar tab, seperti yang ditunjukkan di bawah ini.

menambahkan gambar di gutenberg

Mengklik Gambar tab memuat Gambar blok ditunjukkan pada gambar di bawah.

blok gambar gutenberg

Itu Gambar blok memungkinkan Anda untuk mengunggah gambar atau menambahkannya dari URL atau perpustakaan media. Dalam prosesnya, Anda dapat menambahkan teks alternatif (penting untuk SEO), teks, dan deskripsi melalui pengaturan layar media, atau Blok bilah samping seperti yang ditunjukkan pada gambar berikut.

Pengaturan media yang biasa …

pengaturan media wordpress

… Dan Gambar blokir pengaturan.

pengaturan blok gambar gutenberg

Apakah Anda belajar sesuatu di sini hari ini? Saya berharap begitu. Mari kita lanjutkan.

Setelah menambahkan gambar Anda, Gutenberg menambahkan blok paragraf baru tepat di bawahnya. Anda dapat menambahkan apa pun yang Anda inginkan, tetapi untuk tujuan ilustrasi, saya menambahkan beberapa teks dan kemudian tombol di bawahnya.

Cara Menambahkan File yang Dapat Diunduh, mis. PDF, Gambar, Video, dll

Gutenberg membuatnya sangat mudah untuk menambahkan file yang dapat diunduh ke posting atau halaman WordPress Anda.

Dalam yang baru Gugus kalimat blokir, klik ikon tambah (+), navigasikan ke Blok Umum dan tekan tombol Mengajukan tab seperti yang kita sorot di bawah ini.

menambahkan file yang dapat diunduh di gutenberg

Melakukannya meluncurkan blok berikut:

blokir file gutenberg

Dari Mengajukan blok, Anda dapat mengunggah file baru atau menambahkannya dari perpustakaan media Anda. Setelah menambahkan file Anda, Gutenberg menambahkan imut Unduh tombol secara otomatis seperti yang terlihat pada gambar di bawah ini.

menambahkan file di gutenberg

Anda dapat bermain-main dengan opsi. Misalnya, Anda dapat mengedit / menghapus “Daftar Periksa Gutenberg PDF gratis“Judul serta Unduh tombol. Anda dapat menambahkan kelas CSS ke blok dan gaya itu sesuai keinginan Anda.

Menambahkan Kutipan di Gutenberg

Selanjutnya, mari kita tambahkan penawaran karena mereka menarik, menarik, dan membantu Anda untuk mengarahkan poin. Di baris baru, klik tanda tambah (+), navigasikan ke Blok Umum dan tekan tombol Mengutip tab seperti yang ditunjukkan di bawah ini.

menambahkan kutipan di gutenberg

Melakukan hal itu menambah Mengutip blokir dalam posting Anda saat kami menyoroti dalam screengrab di bawah ini.

pengaturan blok kutipan gutenberg

Perhatikan pengaturan blok kutipan di sidebar kanan di atas?

Untuk menambahkan kutipan Anda, ketikkan di dalam blokir. Inilah hasil saya.

kutipan gutenberg

Terlihat luar biasa, benar?

Menambahkan Embed Media di Gutenberg

Gutenberg hadir dengan beberapa blok untuk menyematkan video dan media lain dari 30+ situs seperti YouTube, Vimeo, Facebook, SoundCloud, WordPress, Slideshare, dan sebagainya..

Untuk menyematkan konten, klik ikon plus (+), navigasikan ke Sematan, dan pilih situsnya. Misalnya, saya ingin YouTube, seperti yang ditunjukkan di bawah ini.

embed youtube gutenberg

Selanjutnya, salin-tempel URL video YouTube dan klik tautan Menanamkan tombol seperti yang ditunjukkan pada gambar di bawah ini.

gutenberg youtube embed block

Segera setelah Anda menekan tombol Menanamkan tombol, Gutenberg menutupi tautan menjadi video secara otomatis seperti yang kami sorot di bawah.

video youtube tertanam di gutenberg

Berlayar mulus sepanjang jalan. Sekarang, mari kita tambahkan tombol mandiri yang sempurna untuk membuat ajakan bertindak (CTA).

Cara Menambahkan Tombol di Gutenberg

Anda tidak akan kesulitan menambah blok pada saat ini. Cukup klik tanda tambah (+), dan pilih blokir Anda. Itu tidak bisa lebih mudah dari itu.

Jadi, bagaimana kita menambahkan tombol?

Di baris baru (atau blokir), klik ikon plus (+), navigasikan ke Elemen Tata Letak dan klik Tombol tab seperti yang ditunjukkan di bawah ini.

menambahkan tombol di editor gutenberg

Melakukan hal itu menuntun Anda ke Internet Tombol blok seperti yang kita detailkan di bawah.

menambahkan tombol di editor gutenberg

Seperti yang dapat Anda lihat dari gambar di atas, Anda dapat mengedit teks tombol dan menambahkan tautan. Selain itu, Anda dapat menyesuaikan tombol melalui menu bilah sisi di sebelah kanan layar.

Setelah beberapa klik, inilah yang saya dapat.

contoh tombol gutenberg

Omong-omong, jika Anda menggunakan kombinasi warna yang sulit dibaca pada tombol Anda, Gutenberg akan segera memberi tahu Anda. Bagusnya?

Cara Menambahkan Kolom di Gutenberg

Dengan tombol cantik di tempatnya, mari kita tambahkan beberapa kolom. Saya akan menambahkan dua kolom, jadi ikuti dengan cermat.

Inilah yang harus dilakukan. Klik ikon plus (+), navigasikan ke Elemen Tata Letak dan klik Kolom tab seperti yang terlihat pada gambar di bawah ini.

kolom tab editor Gutenberg

Gutenberg menambahkan dua kolom secara default. Lihat gambar di bawah, dan ingat, saya sudah menambahkan konten ke dalam kolom.

kolom gutenberg di editor wordpress

Yang membuat saya:

frontend kolom gutenberg

Tidak buruk untuk beberapa detik kerja. Tetapi mungkin Anda tidak ingin membuat kolom. Mungkin Anda ingin menampilkan gambar di sebelah beberapa teks.

Apakah ada blok untuk itu? Ya ada!

Cara Menambahkan Gambar di sebelah Teks di Gutenberg

Apakah Anda ingin menambahkan gambar di sebelah beberapa teks? Jika demikian, Anda akan menyukai bagian berikut.

Seperti biasa, klik ikon plus (+), navigasikan ke Elemen Tata Letak dan klik Media & Teks seperti yang ditunjukkan di bawah ini.

blok gutenberg media dan teks

Anda harus melihat Media & Teks blok, seperti yang ditunjukkan di bawah ini.

blok media dan teks di gutenberg

Selanjutnya, unggah gambar / video / media Anda atau tambahkan satu dari perpustakaan media. Setelah itu, tambahkan teks Anda di sebelah media, seperti yang ditunjukkan pada gambar di bawah ini.

Saya bermain – main dengan Media & Teks memblokir, dan saya datang dengan yang berikut ini. Pikiran Anda; Saya berhasil menekan tombol di sana juga ��

blok media dan teks dalam aksi penuh

Oh, itu back-end! Mari saya tunjukkan front-end. Sini:

blok teks media di gutenberg

Terlihat sangat profesional, bukan? Anda tentu dapat membayangkan berapa banyak yang dapat Anda capai dengan editor Gutenberg.

Blok Gutenberg Pihak Ketiga

Pengembang WordPress tertarik untuk membuat tema dan plugin yang kompatibel dengan editor Gutenberg. Beberapa contoh termasuk WooCommerce, Jetpack, dan Yoast SEO.

Misalnya, Anda dapat menambahkan blok WooCommerce ke dalam posting WordPress Anda. Pertama, Anda harus menginstal dan mengaktifkan WooCommerce.

Selanjutnya, di baris baru, klik ikon plus (+), navigasikan ke WooCommerce dan pilih blok mana yang Anda inginkan seperti yang ditunjukkan di bawah ini.

blok gutenberg woocommerce

Tahukah Anda apa artinya ini? Ini berarti Anda dapat membuat rich-media dan posting dan halaman hebat dalam hitungan menit.

Blok Terkemuka Lainnya

Kami sudah memiliki lebih dari 2.000 kata, dan jika kami teruskan ini, kami akhirnya akan menulis seluruh eBuku. Doa saya adalah Anda sekarang dapat menggunakan Gutenberg tanpa cegukan.

Yang keluar dari jalan, di sini adalah daftar dari blok lain yang tersedia.

  • Widget – Anda dapat menambahkan konten dari widget Anda ke dalam posting blog
  • Kode pendek – Anda masih dapat menggunakan kode pendek WordPress asli
  • Klasik – Blok hebat yang menampung konten lama Anda
  • Lebih – Blok itu sebelumnya dikenal sebagai Baca lebih banyak menandai
  • Istirahat Halaman, Pemisah, Spacer
  • HTML Khusus, Pullquote, Tabel
  • Galeri dan Audio / video HTML5
  • Dan masih banyak lagi tergantung pada tema dan plugin yang Anda gunakan

Ke samping: Membuat halaman WordPress mirip dengan membuat posting, simpan untuk beberapa menit perbedaan, jadi kami tidak akan membahasnya hari ini.

Gutenberg Hacks & Pintasan Keyboard Cepat

Gutenberg hadir dengan beberapa peretasan dan pintasan keyboard yang membuatnya lebih mudah. Misalnya, jika Anda mengetik “/” di dalam blok paragraf, itu memunculkan daftar blok.

Anda bahkan dapat memilih blok tertentu dengan mengetikkan judul blok setelah garis miring terbalik (/), mis., Mengetik “/ gambar” menampilkan blok gambar di antara blok-blok terkait gambar lainnya. Lihat gambar di bawah untuk detail lebih lanjut.

pintas backlash gutenberg

Pintasan keyboard: Untuk melihat semua cara pintas yang tersedia tekan SHIFT + ALT + H di Windows dan OPT + CTRL + H di Mac.

Di bagian atas dokumen, Anda dapat melihat struktur dokumen dengan mengklik ikon (i), seperti yang ditunjukkan di bawah ini.

struktur dokumen gutenberg

Bagus. Luar biasa mulus.

Oh, dan omong-omong, kesalahan “Pembaruan Gagal” biasanya terjadi karena koneksi internet yang goyah ��


Antara Anda dan saya, Gutenberg adalah editor konten yang luar biasa. Asalkan Anda bersedia mempelajari tali; Anda dapat menuai banyak dari editor WordPress di masa depan.

Gutenberg masih relatif muda, dan Anda dapat mengharapkannya tumbuh dalam hal kegunaan dan fungsionalitas. Ini akan menjadi kekuatan serius yang harus diperhitungkan dalam beberapa hari mendatang. Pembuat halaman lebih berhati-hati, atau mereka akan kehabisan bisnis ��

Kami berharap panduan langkah demi langkah kami untuk editor Gutenberg membantu Anda memasukkan berbagai hal ke dalam perspektif. Kami yakin Anda sekarang dapat menggunakan editor blokir untuk membuat konten seperti pro.

Silakan bagikan kekhawatiran, pemikiran, dan pertanyaan Anda di bagian komentar di bawah ini.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map