Cara Menggunakan Gutenberg (Editor WordPress)


cara menggunakan blok gutenbergPada tahun 2018, WordPress beralih dari penyuntingnya yang lama dengan yang digelar “Gutenberg”.


Tidak seperti editor lama, pengguna WordPress kini menggunakan editor blok drag-and-drop moden untuk membina dan menyesuaikan laman web, menerbitkan kandungan, dan menjual perkhidmatan dan produk mereka dalam talian.

Sama ada anda pengguna lama yang berusaha memahami editor baru, atau anda yang baru di WordPress, panduan ini akan mengajarkan kepada anda tentang tali. Anda akan belajar:

  • Bagaimana blok Gutenberg berbeza dari editor klasik.
  • Cara menggunakan pembangun blok untuk membuat dan mengedit halaman.
  • Apa yang dilakukan oleh blok Gutenberg.
  • Cara membuka kunci tetapan tambahan dengan bar sisi.
  • Cara menggunakan bar alat agar lebih produktif.

Editor Klasik vs Blok Gutenberg

Peralihan dari editor klasik ke blok Gutenberg adalah lompatan besar untuk WordPress. Mari lihat bagaimana penyuntingnya berkembang.

Penyunting WordPress Klasik

Dari tahun 2003 hingga 2018, WordPress menyediakan penyunting teks asas kepada penggunanya.

Penyunting WordPress-Klasik

Editor WordPress klasik adalah penyunting WYSIWYG khas anda (“apa yang anda lihat adalah apa yang anda dapat”).

Dengan kata lain, anda mengetik kandungan anda ke medan terbuka, memformatnya menggunakan bar alat yang disediakan, dan itu lebih kurang sama seperti teks anda di laman web anda.

Penyunting WordPress-WYSIWYG

Ini adalah antara muka yang cukup sederhana dan yang sering dibiasakan oleh pengguna WordPress selama bertahun-tahun. Tetapi ia mempunyai hadnya.

Sebagai contoh:

Contoh-Halaman-WordPress

Ini adalah bagaimana kandungan akan dipaparkan di laman web setelah diterbitkan. Tetapi anda hanya dapat mengesahkan bahawa semuanya diterjemahkan dengan baik dari editor ke halaman dengan menggunakan fungsi “Pratonton”.

Tidak ada cara untuk menulis kandungan dalam konteks sebenar halaman. Di samping itu, diperlukan keakraban tertentu dengan HTML atau terlalu bergantung pada plugin untuk dapat membina reka bentuk dan susun atur yang lebih maju.

Pada tahun 2018, WordPress berupaya untuk memperbaiki batasan ini dengan melepaskan editor WordPress yang baru (iaitu Gutenberg).

Penyunting Blok Gutenberg

Editor WordPress yang baru adalah penyunting blok drag-and-drop.

Gutenberg

Ini bermaksud bahawa kandungan tidak lagi ditulis dalam satu penyunting utama. Blok individu diletakkan di tempatnya untuk membina kandungan halaman.

Blok Gutenberg

Apabila setiap blok dipilih, ia dilengkapi dengan bar alat yang unik. Ini memungkinkan pengalaman penyuntingan yang lebih ramping dan disesuaikan kerana anda hanya menunjukkan kawalan editorial yang anda perlukan pada masa itu.

Editor Gutenberg juga menjadikannya lebih mudah untuk menambahkan jenis kandungan dan susun atur yang jika tidak terlalu memakan masa atau sukar bagi pemula WordPress untuk melakukannya sendiri.

Lebih banyak-Gutenberg-Block-Contoh

Lebih-lebih lagi, tidak ada permainan meneka lagi. Apa yang anda buat dalam editor blok adalah bagaimana ia muncul di laman web anda. Fon, gaya, dan tata letak semuanya sesuai:

WordPress-Halaman-Contoh-dengan-Gutenberg

Adakah Satu Editor WordPress Lebih Baik daripada Yang Lain?

Adapun yang lebih baik – editor klasik atau Gutenberg – anda harus memikirkannya sendiri.

Walaupun WordPress secara automatik dipasang dengan Gutenberg, pengguna dapat memasang pemalam Classic Editor jika mereka belum bersedia untuk beralih ke penyunting blok.

Terdapat pilihan add-on editor lain juga. Elementor dan Pembina Beaver adalah dua alternatif editor drag-and-drop yang lebih popular, Kategori Blok
walaupun sangat sesuai untuk pereka profesional dan pembangun yang perlu membuka lebih banyak ciri.

Buat masa ini, mari kita selami Gutenberg dengan lebih mendalam dan memberi anda idea yang lebih baik mengenai apa yang diharapkan daripada editor drag-and-drop WordPress.

Cara Menggunakan Penyunting Blok Gutenberg

Mari kita tinjau editor blok Gutenberg dengan menyiapkan halaman baru (atau siaran).

Mulakan dengan menu WordPress di sebelah kiri skrin. Sekiranya anda ingin membuat laman web baru, arahkan kursor ke “Halaman” dan pilih “Tambah Baru”. Sekiranya anda ingin membuat catatan blog baru, arahkan kursor ke “Posts” dan pilih “Add New”.

WordPress-Tambah-Baru-Halaman

Tambah Tajuk

Dengan halaman atau siaran baru anda dibuat, beri judul di blok “Tambah Tajuk”:

Gutenberg-Tajuk-Blok

Buat Blok Pertama Anda

Perenggan umumnya merangkumi sebahagian besar kandungan yang kami masukkan di laman web, sebab itulah blok pertama yang diberikan oleh Gutenberg kepada kami selalu menjadi blok Perenggan:

Gutenberg-New-Paragraph-Block

Sekiranya anda ingin memulakan dengan perenggan, tambahkan kursor anda ke blok kosong yang bertuliskan “Mula menulis atau ketik / untuk memilih blok”. Semasa anda menaip, kandungan anda akan memenuhi blok.

Sesuaikan Kandungan dalam Blok

Untuk menyesuaikan gaya perenggan anda, gunakan bar alat yang muncul tepat di atasnya.

Penjajaran

Dengan kebanyakan blok Gutenberg, anda akan dapat mengubah penjajaran kandungan di dalam blok:

Gutenberg-Penjajaran

Kiri adalah lalai. Anda juga boleh memilih untuk menyelaraskan tengah atau menjajarkan kanan kandungan anda.

Memformat

Setiap kali terdapat teks dalam blok, anda boleh memformatnya dengan huruf tebal:

Gutenberg-Paragraph-Bold

Jadikan teks itu miring:

Gutenberg-Paragraph-Italic

Atau tambahkan pautan hiper:

Gutenberg-Paragraph-Link

Sekiranya anda ingin membuka pautan anda di tetingkap penyemak imbas baru, klik anak panah bawah di dalam bar pautan. Setelah selesai membuat perubahan, klik anak panah “Kembali” untuk menyimpan pautan.

Pilihan Gaya Tambahan

Sekiranya anda mengklik anak panah ke bawah di bar alat, anda akan mendapat pilihan penggayaan teks tambahan:

Pilihan Gutenberg-Lebih-Teks

“Kod” menggayakan teks anda seolah-olah ditulis dalam penyunting kod:

Gutenberg-Perenggan-Kod

“Gambar sebaris” membolehkan anda membungkus teks anda di sekitar gambar:

Gutenberg-Paragraph-InlineImage

Seperti yang anda lihat, ini bukan cara yang berkesan untuk memasangkan gambar dan teks di antara satu sama lain di Gutenberg. (Kami akan mengkaji cara lain untuk melakukannya kemudian.)

Pilihan terakhir di sini membolehkan anda menambahkan coretan melalui teks yang diserlahkan:

Gutenberg-Paragraph-Strikethrough

Lebih Banyak Pilihan Sekatan

Butang terakhir di bar alat selalu mendedahkan lebih banyak pilihan blok:

Pilihan Gutenberg-More-Block-

Pilihan ini akan sama tanpa mengira jenis blok yang sedang anda edit.

Mari kita kaji semula perkara ini dengan cepat:

  • Sembunyikan Tetapan Blok: Membuat bar sisi di sebelah kanan hilang.
  • Gandakan: Membuat replika blok ini dengan tepat.
  • Masukkan Sebelum: Menambah blok kosong baru di atas yang satu ini.
  • Masukkan Selepas: Menambah blok kosong baru di bawah yang satu ini.
  • Edit sebagai HTML: Mengubah blok menjadi editor kod jika anda ingin menulis dalam HTML.
  • Tambahkan ke Blok yang Boleh Digunakan Semula: Menyimpan blok sehingga anda dapat menggunakannya semula di tempat lain di laman web ini.
  • Keluarkan Blok: Menghapuskan blok.

Transform Block

Terdapat satu butang lain di bar alat yang perlu anda perhatikan:

Gutenberg-Switch-Blok

Butang ini tidak akan selalu kelihatan seperti ini, jadi ingat bahawa butang pertama membolehkan anda mengubah blok semasa menjadi yang berkaitan.

Sebagai contoh, anda dapat mengubah blok berbasis teks seperti Perenggan menjadi Tajuk, Daftar, atau Petikan. Anda tidak boleh mengubah sesuatu seperti perenggan menjadi gambar atau garis pemisah. Anda memerlukan blok baru untuk itu.

Tambahkan Blok Baru

Untuk menambahkan blok baru ke halaman anda, anda mempunyai sejumlah pilihan.

Masukkan Sebelum / Selepas

Anda sudah melihat pilihan Sisipkan Sebelum / Masukkan Selepas di bar alat blok anda. Itulah satu cara untuk melakukannya.

Sekiranya anda klik dari blok yang ada dan arahkan kursor ke bahagian atasnya, anda akan melihat tanda tambah kecil muncul:

Gutenberg-Tambah-Blok-Salib

Apabila anda mengkliknya, ia akan menunjukkan blok anda:

Gutenberg-Add-Block-Plus-Sign

Pilih yang anda mahu tambahkan blok baru di atas yang anda ada.

Sekiranya anda mengarahkan kursor ke bahagian bawah blok, anda akan melihat tanda tambah yang sama. Satu-satunya perbezaan adalah bahawa ia akan menambah blok baru di bawah yang anda ada.

Gunakan Papan Kekunci Anda

Cara lain untuk menambahkan blok baru adalah dengan menekan kekunci “Return” pada papan kekunci anda:

Gutenberg-Tambah-Blok-Masukkan

Ini akan segera menambah blok perenggan baru ke halaman.

Sekiranya anda ingin menukarnya ke jenis blok yang lain, anda boleh menggunakan tanda tambah di sebelah kiri blok baru:

Gutenberg-Change-New-Block

Atau anda boleh mengetik slash (/) diikuti dengan nama blok yang ingin anda gunakan:

Gutenberg-Change-Block-Slash

Contohnya, jika anda ingin menambahkan gambar, anda akan menaip “/ image”. Pilihan blok akan diisi secara automatik semasa anda menaip nama yang sepadan.

Tambahkan Sekatan Dari Bar Alat

Anda selalu boleh menggunakan ciri tambah blok asas di bar alat:

Gutenberg-Tambah-Blok

Tinjau pilihan atau taipkan nama blok yang anda cari.

Pindahkan Blok

Setelah anda mula membuat blok, anda mungkin memutuskan bahawa anda tidak berpuas hati dengan urutan susunannya. Atau mungkin anda menambah blok di atas ketika sepatutnya di bawah.

Tidak perlu menghapus blok atau memotong-dan-menampal kandungan dari satu blok ke blok yang lain. Penyelesaiannya mudah.

Gutenberg adalah penyunting blok drag-and-drop. Ini bermakna anda boleh memindahkan blok anda ke mana sahaja anda mahu dengan mudah.

Terdapat dua cara untuk melakukan ini.

Gunakan Anak Panah Pindah

Pilihan pertama adalah menggunakan anak panah bergerak di sebelah kiri setiap blok. Arahkan kursor ke blok yang ingin anda pindahkan dan anda akan menemui anak panah atas dan bawah:

Gutenberg-Move-Panah

Sekiranya semua yang anda mahu lakukan ialah memindahkan blok ke atas atau ke bawah sekali, pilihan ini berfungsi dengan baik.

Gutenberg-Moved-Block

Gunakan Drag-and-Drop

Sekiranya anda ingin membuat penyusunan semula blok yang lebih drastik, anda harus menggunakan drag-and-drop.

Ia terletak di tempat yang sama dengan anak panah. Arahkan kursor ke blok yang anda mahu bergerak dan ambil titik-titik yang muncul di tengah. Anda akan melihat kursor anda berubah menjadi tangan apabila anda melakukan:

Gutenberg-Grab-Drag-and-Drop

Semasa memindahkan blok ke bahagian baru halaman, pastikan anda melihat garis gelap muncul sebelum anda menurunkannya:

Gutenberg-Move-Block

Ini memberi tahu anda bahawa anda memindahkan blok ke ruang yang tersedia. Tanpa garis itu, drag-and-drop tidak akan berjaya.

Padamkan Blok

Sekiranya anda memutuskan untuk membuang blok sama sekali, anda juga mempunyai pilihan untuk ini.

Anda sudah melihatnya. Itu ada di dalam pilihan tambahan blok anda. Cukup klik “Remove Block” dan ia akan dihapuskan.

Anda juga boleh menghapusnya dengan cara lama. Letakkan kursor anda di dalam blok dan gunakan butang “Padam” papan kekunci anda untuk menghapusnya.

Namun, perhatikan bahawa jika itu adalah blok berasaskan teks, anda harus membuang kandungannya terlebih dahulu sebelum dapat menghapusnya dengan cara ini. Untuk apa sahaja – gambar, widget tertanam, dan lain-lain – anda hanya boleh menggunakan kekunci “Padam” anda.

Anda juga boleh menonjolkan blok (dengan menyeret kursor anda ke atasnya) dan kemudian tekan butang “Padam”. Ini berguna jika anda ingin menonjolkan dan menghapus lebih dari satu blok pada satu masa.

Buat Blok yang Boleh Digunakan Semula

Blok yang dapat digunakan kembali sangat berguna ketika anda ingin membuat elemen yang dapat digunakan di seluruh laman web, seperti blok promosi untuk catatan blog anda atau ajakan bertindak.

Gutenberg-Buat-Reusable-Block

Daripada cuba membuat blok di halaman yang perlu diteruskan, buka pilihan blok anda dan klik “Tambahkan ke Blok yang Boleh Digunakan Semula”. Kemudian, beri nama:

Gutenberg-Name-Reusable

Setelah disimpan, anda dapat mengambil dan menggunakannya dengan cara yang sama seperti blok Gutenberg. Anda akan menemuinya dalam kategori baru bernama “Reusable”:

Gutenberg-Reusable-Category

Lawatan Blok Gutenberg

Editor WordPress klasik tidak banyak yang boleh diharapkan dalam membantu pengguna membuat kandungan dan susun atur yang rumit. Blok Gutenberg menghilangkan sekatan jalan itu.

Mari berkenalan dengan blok:

Sekat Kategori

WordPress telah melakukan tugas dengan baik untuk mengatur bloknya ke dalam beberapa kategori.

Blok Biasa

Ini adalah blok biasa anda:

Blok Biasa

Teks asas dan elemen visual yang anda gunakan di halaman akan berada di sini.

Memformat Blok

Ini adalah blok pemformatan anda:

Pemformatan-Blok

Sebilangan besar adalah blok yang mesra pemaju, jadi anda mungkin tidak memerlukannya. Blok kutipan jadual dan tarikan mungkin sangat berguna.

Blok Susun atur

Ini adalah blok susun atur anda:

Susun atur-Blok

Sekiranya anda ingin menambah jeda pada kandungan anda (seperti dengan ruang besar atau garis pemisah) atau elemen khas (seperti butang), anda akan menemui perkara-perkara di sini.

Blok Widget

Ini adalah widget anda:

Widget-Blok

Sebahagian besarnya, ini adalah elemen yang harus masuk ke dalam bar sisi blog anda, tidak muncul di halaman anda. Satu-satunya pengecualian yang anda dapati adalah blok yang dibuat oleh pemalam lain, seperti contoh WPForms ini.

Menyekat Blok

Ini adalah benam anda:

Lekapan-Blok

Anda akan menggunakannya untuk membawa kandungan dari platform lain. Ini bagus untuk menyematkan perkara seperti video YouTube, klip SoundCloud, dan catatan Twitter.

Blok Gutenberg Yang Paling Lazim Digunakan

Seperti yang anda lihat, terdapat puluhan blok Gutenberg yang ada. Yang mengatakan, ada elemen tertentu yang digunakan semua orang untuk membuat halaman atau catatan di WordPress, jadi mulailah dengan mempelajari asasnya:

Sekatan Perenggan

Gunakan blok Perenggan untuk menambahkan teks biasa ke halaman anda.

Sekatan Perenggan

Blok Tajuk

Gunakan blok Tajuk untuk menambahkan tajuk ke halaman anda.

Heading-Block

Ini membolehkan anda memperkenalkan topik baru di halaman sambil menjadikan kandungan anda lebih mudah dibaca. Butang H2, H3, dan H4 memungkinkan anda membuat hierarki pada tajuk halaman juga.

Blok Senarai

Gunakan blok Daftar untuk menambahkan senarai bertanda atau bernomor ke halaman:

Senarai-Sekat

Ini juga berguna untuk meningkatkan kebolehbacaan.

Sekatan Gambar

Gunakan blok Imej untuk menambahkan gambar ke halaman anda.

Sekatan Imej

Anda boleh memuat naik gambar dari pemacu anda atau memilih gambar yang sudah ada di perpustakaan media anda.

Sekatan Video

Gunakan blok Video untuk membenamkan gambar di halaman anda.

Sekatan Video

Anda boleh memuat naik fail video, memilihnya dari pustaka anda, atau menariknya dari pautan.

Kerana video memerlukan banyak ruang, pilihan terbaik adalah menyimpan fail anda ke platform perkongsian video seperti Vimeo atau YouTube. Kemudian, masukkan dengan pautan.

Anda tidak akan menggunakan blok Video untuk ini. Sebaliknya, cari benang yang sesuai.

YouTube mempunyai satu:

Benamkan YouTube

Seperti juga Vimeo:

Vimeo-Benamkan

Anda harus melakukan perkara yang sama untuk setiap fail audio (seperti podcast atau trek suara) yang ingin anda tambahkan ke halaman. Sama ada gunakan blok Audio atau embed yang sesuai (seperti untuk Spotify) untuk melakukan ini.

Sekatan Butang

Gunakan blok butang untuk mengarahkan pengunjung atau pembaca anda untuk mengambil tindakan:

Sekatan Butang

Ini mungkin mengarahkan mereka ke: “Jadwalkan Sekarang”, “Daftar”, “Baca Lagi”, dll.

Blok Media dan Teks

Seperti disebutkan sebelumnya, pilihan gambar sebaris dalam blok perenggan adalah cara yang tidak efisien untuk menggabungkan teks dan gambar. Sebaliknya, gunakan blok Media dan Teks untuk melakukan ini:

Sekatan Media-dan-Teks

Blok Tiang

Cara lain untuk meletakkan dua blok yang berbeza (dari jenis yang sama atau berbeza) di sebelah satu sama lain adalah dengan menggunakan blok Lajur:

Lajur-Blok

Untuk menambahkan lajur tambahan ke kanan atau kiri, arahkan kursor ke blok di dalam lajur dan tekan tanda tambah. Sama seperti menambahkan blok baru, hanya ini yang akan menambahkannya secara melintang.

Blok Penyematan Media Sosial

Daripada menggunakan kod benam dari media sosial untuk meletakkan catatan di halaman anda, tambahkan pautan ke siaran di sini:

Media Sosial-Benamkan

Terdapat blok penyematan untuk Facebook, Twitter, dan Instagram, jadi cari blok Benamkan yang sesuai dengan catatan media sosial anda.

Blok Klasik

Blok klasik membolehkan anda terus membuat kandungan di WordPress menggunakan editor klasik:

Blok Gutenberg-Classic

Blok klasik juga dimainkan setiap kali laman web beralih dari editor klasik ke editor Gutenberg. Gutenberg tidak akan secara automatik berusaha mengubah teks anda menjadi bloknya sendiri. Itu hanya memasukkannya ke antara muka editor klasik.

Sekiranya anda ingin menukar blok klasik anda menjadi blok Gutenberg, pergi ke “Lebih banyak Pilihan” dan pilih “Tukar ke Blok”:

Gutenberg-Convert-Blocks

Ia akan melakukan yang terbaik untuk menukar setiap elemen dalam editor anda ke blok yang sesuai:

Blok Gutenberg-Convertted

Ingatlah untuk menyemak blok yang dikeluarkan untuk sebarang kesalahan sebelum anda menyimpan perubahan anda.

Blok Pemalam WordPress

Sebilangan besar plugin popular yang digunakan oleh pengguna WordPress serasi dengan Gutenberg. Dalam beberapa kes, plugin ini telah membuat blok khas yang muncul di editor anda.

Contohnya, jika anda menggunakan pemalam borang kenalan seperti WPForms, anda harus mencari blok yang sesuai untuknya:

Blok WPForms

Cukup buat borang anda di plugin dan cari di dropdown yang disediakan di sini. Tidak perlu lagi mencari dan menampal kod pendek borang anda.

Yoast, pemalam SEO yang popular, adalah satu lagi yang menambah blok baru ke Gutenberg:

Blok Yoast

WooCommerce, Penyelesaian eCommerce WordPress, telah melakukan perkara yang sama:

WooCommerce-Blok

Terdapat juga plugin Gutenberg “utama” yang menambah sekumpulan blok baru untuk pembangun anda, seperti Addons Terbaik untuk Gutenberg:

Ultimate-Addons-Gutenberg

Jenis pemalam ini memperluas fungsi pembina blok anda. Sekiranya anda membina laman web yang memerlukan elemen khas – seperti Peta Google, blok testimoni, atau fungsi eCommerce – anda boleh menambahkannya ke Gutenberg dengan pemalam seperti ini.

Gambaran Keseluruhan Paparan Sisi Dokumen dan Blok

Sekarang setelah anda menurunkan editor blok, mari kita mengalihkan perhatian kita ke dokumen dan menyekat bar sisi.

Apabila kursor anda berada di blok tajuk atau di suatu tempat di halaman yang tidak ada blok, bar sisi akan menunjukkan tetapan Dokumen:

Sidebar Dokumen

Ini membolehkan anda mengawal perkara seperti status dan penampilan halaman.

Berikut adalah perkara utama yang perlu anda ketahui:

Status dan Penglihatan

Status-dan-PenglihatanDi panel ini, anda dapat menyesuaikan siapa yang mungkin melihat halaman (Umum, Swasta, atau dilindungi Kata Laluan) serta kapan ia diterbitkan (jika tidak segera). Sekiranya anda mahu memadam halaman sepenuhnya. Anda juga boleh melakukannya di sini.

PermalinkGunakan panel ini untuk menukar slug (bahagian pengenal URL). Contohnya:

https://mywebsite.com/pembangun blok-gutenberg /

Gambar PilihanGambar yang dipaparkan adalah gambar kecil yang dilihat orang ketika catatan blog anda muncul di umpan blog utama anda. Itu juga yang digunakan platform media sosial semasa menunjukkan pratonton pautan anda.

Kategori

KategoriIni hanya tersedia untuk catatan blog. Gunakan ini untuk mengatur topik anda.

Teg

TegIni adalah tetapan lain yang hanya tersedia untuk catatan blog. Gunakan ini untuk menambahkan kata kunci yang muncul dalam catatan anda dan membantu pembaca mencari kandungan mengenai topik yang berkaitan.

Apabila kursor anda diletakkan di dalam mana-mana blok di halaman anda (kecuali tajuk), bar sisi akan beralih ke editor blok:

Sekatan-Sidebar

Bar sisi ini memberi anda pilihan penyuntingan tambahan untuk blok anda jika anda menginginkannya. Bar sisi blok akan berubah berdasarkan jenis blok yang sedang anda kerjakan.

Sebagai contoh, bar sisi perenggan menunjukkan pilihan penyuntingan untuk:

Perenggan-Blok-Sidebar

Anda boleh menyesuaikan ukuran teks anda serta warna teks atau latar belakang blok. Sekiranya anda tahu bagaimana menggunakan kelas CSS, anda dapat menyesuaikan tampilan blok dengan lebih lanjut menggunakan “Tetapan Lanjutan”.

Bar sisi gambar, sebaliknya, memberi anda tetapan berikut:

Image-Block-Sidebar

Anda dapat menambahkan teks alt ke gambar (penting untuk SEO), mengubah ukuran gambar, dan menghubungkan gambar ke laman web.

Beberapa blok tidak menawarkan tetapan tambahan di bar sisi seperti penyisipan Twitter:

Twitter-Block-Sidebar

Satu-satunya perkara yang boleh anda lakukan ialah membuat kelas CSS tersuai di bawah “Tetapan Lanjutan”.

Intinya: jika anda merasa tidak dapat mengedit blok anda sepenuhnya dengan bar alat blok, periksa bar sisi untuk pilihan tambahan.

Apa yang Perlu Dilakukan Dengan Bar Alat

Bahagian terakhir editor yang perlu anda kenali ialah bar alat yang terletak di bahagian atasnya:

Bar Alat Gutenberg

Ini mungkin kelihatan tidak lebih dari tempat menyimpan butang “Pratonton” dan “Terbitkan”, tetapi masih banyak lagi yang anda dapat dan semestinya gunakan bar alat untuk.

Mari kita tinjau perkara penting:

Blok

Butang pertama di bar alat adalah, di mana anda boleh mengakses blok baru:

Gutenberg-Toolbar-Blok

Buat asal / Buat semula

Dua butang seterusnya membolehkan anda membuat asal (anak panah menunjuk ke kiri) atau mengulangi (anak panah menunjuk ke kanan) perubahan terakhir yang anda buat ke halaman:

Gutenberg-Toolbar-Buat asal

Maklumat Halaman

Bagi anda yang ingin membuat halaman yang mudah dilihat oleh pengunjung anda, butang “i” (info) memberi anda gambaran keseluruhan kandungan anda:

Maklumat Bar Gutenberg-Toolbar

Anda akan melihat:

  • Berapa banyak perkataan yang anda tulis.
  • Berapa banyak tajuk yang ada, dengan perincian tajuk di bawahnya.
  • Berapa banyak perenggan yang ada.
  • Berapa banyak blok yang telah anda gunakan.

Jumlah kata dan tajuk adalah maklumat yang paling penting untuk ditumpukan di sini.

Struktur Halaman

Bahagian bar bar seterusnya menunjukkan setiap blok yang telah anda gunakan untuk membuat halaman anda:

Gutenberg-Blok-Navigasi

Gunakan ini untuk menatal seketika ke blok yang ingin anda kerjakan. Ini berguna untuk mengedit kandungan pada halaman dan catatan yang lebih panjang.

Simpan Tetapan

Anda akan menggunakan tiga butang pertama ini dengan setiap halaman atau catatan yang anda buat:

Tetapan Jimat-Gutenberg

Gunakan “Simpan Draf” untuk menyimpan perubahan anda secara peribadi semasa mengerjakan halaman.

Gunakan “Pratonton” untuk melihat halaman di laman web anda.

Gunakan “Terbitkan” untuk mendorong halaman anda ke laman web langsung. Setelah halaman diterbitkan, butang ini akan berubah menjadi “Update”. Gunakan ini untuk menyimpan dan memasukkan versi baru halaman anda ke laman web.

Tetapan

Apabila ikon gear (tetapan) diklik, ia menyembunyikan atau menunjukkan bar sisi Gutenberg. Seperti yang kelihatan semasa dilumpuhkan:

Gutenberg-Toolbar-Tetapan-Dilumpuhkan

Ini seperti apa apabila diaktifkan:

Gutenberg-Toolbar-Tetapan-Diaktifkan

Lebih Banyak Pilihan

Butang terakhir di bar alat mendedahkan pilihan dan alat tambahan. Gunakan ini jika anda ingin memperibadikan ruang kerja Gutenberg anda.

Gutenberg-Toolbar-Lebih Banyak Pilihan

Pandangan

Kumpulan pilihan pertama yang berkaitan dengan “Lihat”:

Paparan Bar Alat Gutenberg

“Bar Alat Atas” menggerakkan bar alat dari blok anda dan menempelkannya ke bahagian atas skrin:

Bar Alat Atas-Gutenberg

Pilihan penyuntingan masih berubah berdasarkan blok yang telah anda pilih. Satu-satunya perbezaan adalah bahawa ia hanya terletak di bahagian atas halaman sekarang.

“Mod Sorotan” memudar blok yang tidak digunakan:

Mod Gutenberg-Spotlight

Sekiranya anda mahukan bantuan yang memfokuskan pada satu blok pada satu masa, ini adalah alat yang berguna untuk membolehkannya.

“Mod Skrin Penuh” adalah mod penulisan bebas gangguan Gutenberg:

Mod Gutenberg-Skrin Penuh

Ia membuang menu WordPress di bahagian atas dan kiri serta bar sisi Gutenberg di sebelah kanan.

Mod Penyunting

Kumpulan pilihan seterusnya adalah untuk mod editor.

Gutenberg-Pilihan-Penyunting

Secara lalai, Gutenberg menempatkan pengguna ke dalam “Visual Editor”.

Sekiranya anda lebih suka menulis halaman anda dalam HTML, anda boleh beralih ke “Code Editor”:

Gutenberg-Code-Editor

Walau bagaimanapun, cara yang lebih berkesan dan lebih bersih untuk mengedit blok anda dalam HTML adalah dengan mengatasinya secara individu (kerana anda mungkin tidak perlu mengedit keseluruhan kod halaman).

Anda boleh mengakses editor kod di bawah “Edit sebagai HTML”:

Gutenberg-Edit-HTML

Ini akan menukar blok ke HTML:

Blok Gutenberg-HTML

Edit mengikut kesesuaian anda. Sekiranya anda ingin menukarnya kembali ke mod visual, buka pilihan blok dan pilih “Edit secara visual”:

Gutenberg-Edit-Secara visual

Alat

Gutenberg juga dilengkapi dengan sekumpulan alat yang membolehkan anda menyempurnakan pengalaman anda dalam penyunting:

Alat Gutenberg

Alat pertama adalah “Block Manager”:

Pengurus Blok Gutenberg

Tidak seperti alat navigasi blok yang kami lihat sebelumnya, alat ini membolehkan anda mematikan blok yang tidak anda gunakan. Dengan begitu, ketika tiba waktunya untuk mencari blok baru, Anda tidak perlu menyaring blok yang tidak akan pernah Anda gunakan.

“Urus Blok yang Boleh Digunakan Semula” akan membawa anda ke editor blok yang boleh digunakan semula:

Gutenberg-Reusable-Blocks

Di sinilah blok simpanan anda akan disimpan. Untuk mengedit salinan induk blok (atau buat yang baru sama sekali), lakukan di sini.

Walaupun Gutenberg sudah tentu menjadikannya lebih mudah untuk membuat kandungan di WordPress, beberapa tindakan boleh membosankan. Dengan menggunakan “Pintasan” Gutenberg, anda dapat melakukan perkara seperti membatalkan pengeditan terakhir anda, menduplikasi blok, mencetak teks yang disorot, dan menyimpan perubahan anda hanya dengan papan kekunci anda.

Papan Kekunci-Papan Kekunci Gutenberg

Semua pilihan “Salin Kandungan” adalah menyerlahkan dan menyalin semua blok di halaman. Gunakan ini untuk membuat halaman baru yang serupa dengan kandungan dan reka bentuk. Cukup pergi ke Halaman> Tambah Baru dan kemudian tampal blok anda ke halaman kosong.

Pilihan terakhir di sini dipanggil “Pilihan”. Walau bagaimanapun, apa yang sebenarnya dilakukan adalah membolehkan anda menyahaktifkan bahagian tetapan dokumen tertentu di bar sisi:

Pilihan Gutenberg-Sidebar

Sekali lagi, jika anda mendapati ada bahagian editor yang tidak anda gunakan (seperti Atribut Halaman), lumpuhkannya di sini supaya mereka tidak mengalihkan perhatian dari elemen yang perlu anda gunakan.

Pembalut

Kerana WordPress telah menggunakan editor yang sama sejak Hari 1, ada beberapa reaksi semasa Gutenberg pertama kali diperkenalkan.

Tetapi jika anda melihat pertandingan drag-and-drop berkumpul di sekitar WordPress (Wix, Shopify, Squarespace, dll.), Sudah waktunya untuk perubahan.

Evolusi editor ini telah membuahkan hasil, membolehkan WordPress melayani pengguna di semua peringkat. Para penggunanya kini memperoleh keuntungan berikut yang terdapat dalam membina laman web dengan penyunting blok:

  • Pandangan editor yang diperibadikan yang menjadikan anda lebih produktif.
  • Lebih mudah untuk membuat dan menyesuaikan kandungan.
  • Penciptaan kandungan yang lebih maju tanpa pengetahuan teknikal yang diperlukan sebelumnya.
  • Blok yang boleh digunakan semula mempercepat reka bentuk dan memastikan konsistensi di seluruh laman web.
  • Lebih mudah untuk menambahkan dan mengkonfigurasi elemen penukaran (seperti butang dan borang ajakan bertindak).
  • Plugin dan tema yang popular sesuai dengan Gutenberg.
  • Masa lebih pantas untuk dilancarkan.

Bermula pada tahun 2022, editor klasik tidak lagi tersedia. Jadi, sekarang adalah masa yang tepat untuk mengetahui bagaimana anda akan menjadikan Gutenberg berfungsi untuk anda.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me