Cara menggunakan editor blok WordPress

Dalam posting ini, saya mengajari Anda cara menggunakan editor blok WordPress, yang telah disertakan dalam pembaruan WordPress sejak 2018 dan tetap ada di sini. Anda juga akan mendengarnya disebut editor Gutenberg.

Sejak rilis WordPress 5.0, ada opsi dalam editor teks WordPress untuk 'CONVERT TO BLOCKS', ditemukan dengan mengklik tiga titik vertikal, seperti di bawah ini.

Haruskah Anda mengonversi ke blok?

Jika Anda telah menggunakan editor teks WordPress pihak ketiga, mungkin ada komplikasi. Saya tidak menutupi mereka di posting ini. Silakan cari tahu lebih banyak dari seorang profesional tentang mengonversi dan melangkah dengan hati-hati.

Untuk orang lain – saya tidak bertanggung jawab – selalu membuat cadangan situs web/blog sebelum mengonversi halaman menjadi blokir.

Sudah dikonversi? Lewati bagian ini.

Bagi Anda yang telah menggunakan editor klasik dan memiliki tata letak halaman yang sederhana – saya dapat merekomendasikan blok WordPress.

Setelah Anda terbiasa dengan editor blok WordPress, itu intuitif.

Menekan CONVERT TO BLOCKS tidak akan mengonversi seluruh situs web/blog menjadi blokir. Hanya halaman atau posting yang sedang Anda kerjakan.

Apa yang terjadi ketika saya mengonversi ke blok?

Mengonversi halaman memasukkan setiap judul, paragraf, potongan kode dan gambar ke dalam blok individualnya sendiri.

Anda akan segera terbiasa, jika Anda baru saja mengonversi.

Blok memungkinkan Anda untuk dengan mudah menambahkan paragraf, kolom, tabel, gambar, widget, posting dan kategori terbaru.

Serta widget seperti posting terbaru, kalender, arsip posting, kategori, ikon sosial, dan umpan RSS.

Blok WordPress memudahkan untuk menambahkan hampir semua hal yang diinginkan oleh pemilik situs web. Ini benar-benar nyaman.

Satu blok mewakili satu item, jadi juga lebih mudah untuk mengubah urutan halaman. Kami akan membahasnya nanti.

Lihat situs web WordPress di tab baru

Saat mengedit, hal pertama yang saya lakukan adalah membuka bagian situs yang menghadap publik di tab browser baru. Saya kemudian membuat area admin (ujung belakang) terlihat di satu tab, dan area publik (ujung depan) terlihat di tab lainnya. Dengan begitu saya bisa beralih di antara keduanya.

Cara termudah untuk membuka front end situs WordPress Anda di tab baru adalah;

• Di area admin – arahkan kursor ke ikon rumah, kiri atas layar.
• Dari menu tarik-turun, KLIK KANAN pada 'Kunjungi Situs'.
• Klik "Buka tautan di tab baru".

catatan Mungkin ada variasi kata tergantung pada browser yang Anda gunakan.

Dua tab browser sekarang terbuka, artinya Anda dapat beralih di antara keduanya.

Lanjutkan mengedit halaman WordPress dalam satu tab, menggunakan area admin.

Di sisi lain, Anda akan melihat ujung depan situs web Anda. Ini adalah cara memeriksa setiap perubahan yang Anda buat.

Saat Anda mengedit dan menyimpannya, Anda dapat mengarahkan tab ke ujung depan situs. Tekan tombol F5 untuk menyegarkan halaman – ini meminta browser untuk menampilkan versi yang diperbarui.

Judul dan tautan permanen WordPress h1

Mari kita lihat dulu judul dan permalinknya.

Judul h1 adalah blok pertama di bagian atas halaman. Ini adalah satu-satunya blok yang tidak dapat digerakkan dan itu untuk alasan yang baik.

Semua halaman dan postingan harus memiliki heading h1 di awal agar mesin pencari dan manusia memahami apa yang terkandung di halaman tersebut. Ini adalah faktor SEO.

Gunakan mouse Anda untuk mengklik di dalam blok judul. Untuk mengubah judul sorot teks judul dan mulai mengetik. Sederhana.

Bidang permalink ditemukan dalam pengaturan Dokumen di sisi kanan, lihat gambar di bawah. Label WordPress' untuk nama halaman adalah 'URL Slug'.

Hati-hati saat mengedit permalinks – Saya telah menyertakan peringatan di bagian bawah posting ini.

Tambahkan blok WordPress

Tekan ikon Plus +, kiri atas untuk memulai.

Jelajahi perpustakaan blok – ada begitu banyak pilihan yang tersedia di sini.

Ada dua cara lagi untuk menambahkan blok ke halaman WordPress.

Jika Anda berada dalam aliran kreatif, tambahkan blok dengan menekan kembali.

Cara ketiga dilakukan dengan mengarahkan kursor ke blok – ikon Plus + muncul.

Pada saat penulisan, ini sangat membingungkan – arahkan kursor ke bagian tengah bawah blok yang tepat agar ikon muncul.

Tekan ikon dan pilih gaya blok. Blok baru akan muncul di bawah ikon plus.

Paragraf WordPress menggunakan blok

Blok paragraf akan sering menjadi elemen paling umum dari halaman atau posting WordPress. Tambahkan blok paragraf dan mulailah mengetik.

Tekan kembali untuk membuat blok paragraf baru dan lanjutkan mengetik.

Untuk membuat alur kerja lebih cepat, blok paragraf dapat diubah menjadi gaya lain.

Dengan kursor di blok paragraf baru ketik a / (garis miring). Pintasan ini ke daftar kemungkinan jenis blok.

Atau, ubah blok menggunakan bilah alat. Pada blok yang dipilih, bilah alat muncul, kiri atas.

Di bilah alat untuk paragraf terdapat opsi untuk mengubah 'tipe atau gaya blok' atau memformat teks:

Ubah blok paragraf WordPress

Gunakan tombol 'ubah tipe atau gaya blok' untuk mengubah blok paragraf. Transformasi terbatas pada blok sejenis. Yaitu Paragraf tidak dapat diubah menjadi tabel, tetapi dapat diubah menjadi judul.

Mari kita ubah paragraf menjadi header, misalnya.

Panah, pada gambar di bawah, menunjuk ke ikon yang mewakili sebuah PARAGRAF. Ini adalah bagaimana Anda tahu blok adalah sebuah paragraf.

Klik ikon untuk mengubah paragraf.

Tekan KEPALA.

Ikon paragraf berubah menjadi H dan Anda dapat melihat H2 di sebelahnya.

H1 tidak dapat dipilih – H1 hanya boleh digunakan untuk judul halaman.

Blok tersebut sekarang menjadi blok heading.

Pilih H3 atau H4 dengan menekan tombol H2 memilih dari menu.

Gunakan heading sebagai hierarki dalam halaman dan postingan. Gunakan H2 untuk membagi halaman menjadi bagian yang mudah dibaca. Gunakan H3 untuk membaginya.

Memformat paragraf dan judul

Memformat teks hanya berarti menambahkan gaya tertentu ke dalamnya.

Pada judul atau blok paragraf, sorot teks yang ingin Anda format.

Bilah alat muncul secara ajaib, di kiri atas blok. Di sinilah Anda akan menemukan opsi untuk membuat teks menjadi tebal , miring , atau menambahkan hyperlink teks.

Masih dimungkinkan untuk menggunakan pintasan keyboard – sorot teks dan gunakan:

• Kontrol-b untuk huruf tebal
• Control-i untuk huruf miring.
• Control-u akan menggarisbawahi teks.

Pengguna Mac – gunakan tombol perintah alih-alih tombol kontrol.

Kunjungi pintasan keyboard WordPress untuk daftar yang bermanfaat.

Perhatikan bahwa ada panah bawah pada toolbar; menu tarik-turun untuk 'kontrol teks kaya lainnya'. Dua gaya lain ditemukan di sini – coret dan warna teks .

Hati-hati dengan warna teks – tema akan mengatur tampilan situs web. Lebih sedikit warna dalam skema perusahaan membuat situs web terlihat profesional. Gunakan warna teks dengan hemat.

'Kode sebaris' dan 'gambar sebaris' juga ditemukan dalam menu ini.

Setiap 'sebaris' akan diposisikan di dalam baris teks yang Anda ketik. Berguna untuk potongan kode dan mungkin ikon, tetapi gambar yang lebih besar akan terlihat aneh menurut saya.

Pengaturan paragraf

Pilih blok paragraf untuk melihat opsi di sisi kanan layar WordPress.

Ubah ukuran teks Anda di sini.

Sangat bagus jika memiliki strapline yang ingin Anda tampilkan.

Ada juga kemampuan untuk mengubah warna seluruh paragraf. Saya akan memperingatkan agar tidak terlalu gila dengan opsi ini.

Lebih banyak opsi transformasi untuk paragraf

Opsi transformasi lain untuk blok paragraf adalah:

• sebuah daftar,
• blok yang telah diformat sebelumnya,
• kutipan,
• sebuah ayat
• atau kelompok.

Daftar

Daftar adalah label WordPress untuk poin-poin – sangat berguna untuk membantu item menonjol di halaman web. Ada dua jenis daftar yang tersedia:

• Daftar terurut (OL) – secara opsional diurutkan berdasarkan angka romawi, desimal, atau huruf.
• Daftar tidak berurutan (UL) – poin-poin bergaya.

Sama seperti paragraf, daftar dapat diformat. Ada juga opsi untuk membuat indentasi daftar, sehingga sub-daftar dapat dibuat di dalam daftar.

Kami belum pernah melihat blok 'preformatted' atau 'verse' di WordPress, jadi saya akan menjelaskan sedikit tentang jenis blok tersebut.

Blok yang telah diformat sebelumnya di WordPress

Blok yang telah diformat memungkinkan pengguna WordPress untuk mengetik teks persis seperti yang mereka inginkan, mempertahankan jeda baris dan indentasi.

Saya tidak sepenuhnya jelas untuk apa ini digunakan saat ini. Seseorang mencerahkan saya.

Di blok paragraf kosong, ketik /preformatted lalu tekan enter untuk membuat blok preformatted.

Atau gunakan bilah alat seperti yang dibahas di atas.

Ayat

WordPress mengatakan bahwa blok ayat sangat ideal untuk menambahkan puisi ke situs Anda, dengan nama yang tepat.

Pengguna yang lebih mahir dapat menambahkan CSS ke blok verse, sehingga membuat penataan blok verse menjadi mudah.

 Mawar berwarna merah , 
Bunga violet berwarna biru.

Tombol di editor blok WordPress

Editor blok WordPress memungkinkan editor untuk membuat tombol yang dipesan lebih dahulu.

Mereka adalah tombol sederhana dengan gaya terbatas, tidak ada yang terlalu cerdik tentang mereka. Menurut pendapat saya, WordPress telah membuat keputusan yang tepat – menjaga semuanya tetap bersih adalah pilihan yang lebih baik.

Untuk menambahkan tombol, gunakan ikon 'Tambahkan blok', dan pilih 'Tombol'.

Mulai mengetik teks tombol langsung.

Sekarang, ada dua bagian pada 'blok tombol', yang bisa membingungkan.

Sebuah tombol terdapat di dalam blok eksternal. Klik tombol, lalu klik tepat di luar tombol, di ruang putih untuk melihat apa yang saya maksud.

Pindahkan atau seret tombol menggunakan blok yang berisi. Tombol dapat disejajarkan di dalamnya.

Klik ON tombol dan itu bisa ditata – warna, teks, batas. Ini juga tempat Anda akan menautkan tombol.

Masuk akal?

Pilih tombol – lebih banyak opsi gaya tersedia di sisi kanan WordPress.

Penataan gaya dapat ditambahkan ke teks tombol, seperti paragraf. Hati-hati menautkan teks.

Saya telah menemukan bahwa WordPress memberikan kemampuan untuk menautkan TEKS tombol (melalui bilah alat tombol, seperti paragraf) atau menautkan seluruh tombol melalui opsi di sebelah kanan. Sedikit membingungkan.

Pilihan terbaik di sini adalah menautkan seluruh tombol.

Untuk melakukan itu pilih tombol dengan mengkliknya, lihat opsi Blokir di sisi kanan? Gulir sepenuhnya ke bawah dan masukkan tautan Anda ke bidang Tautan rel.

Saya menyarankan untuk tidak mengaktifkan opsi 'buka tab baru', karena mesin pencari lebih suka pengguna membuat keputusan untuk membuka tab baru.

Pada contoh tombol di atas, saya telah menambahkan ikon Font Awesome dengan menyalin kode HTML dari Font Awesome:

 <i class="fas fa-arrow-right"></i>

Untuk memasukkannya ke tombol Anda, pilih tombol, tekan 3 titik vertikal di ujung bilah alat dan pilih 'Edit sebagai HTML'. Tempelkan kode HTML sebelum tag penutup </a>.

Ikon ini hanya tersedia jika Font Awesome diinstal.

Kelompok blok

Blok grup memungkinkan editor untuk menambahkan lebih dari satu blok di dalamnya, sehingga grup dapat dipindahkan, diduplikasi, atau digunakan kembali secara keseluruhan.

Berguna untuk tata letak. Atau untuk menyatukan judul dan paragraf agar halaman tidak menjadi campur aduk.

Namun, saya menemukan GROUPS sedikit membuat frustrasi, karena mereka sepertinya menghilang begitu saja! Saya percaya ini adalah bug di WordPress.

Gandakan blok WordPress

Atau, saat Anda berada di blok, gunakan pintasan CONTROL-SHIFT-D (COMMAND-SHIFT-D di Mac).

Gunakan kembali blok WordPress

Fitur hebat lainnya tentang blok WordPress adalah opsi BLOK DAPAT DIGUNAKAN KEMBALI.

Gaya yang Anda buat untuk blok dapat disimpan dan digunakan lagi. Ini mengurangi kebutuhan untuk membuat ulang setiap item di seluruh situs.

Klik pada blok mana saja untuk menampilkan bilah alat, lalu klik 3 titik vertikal di sebelah kanan. Di sini Anda akan menemukan item menu berlabel ' Tambahkan ke Blok yang Dapat Digunakan Kembali '.

Blok yang dapat digunakan kembali yang disimpan ditemukan di dalam pustaka blok di bawah tab 'Dapat digunakan kembali'. Temukan saja dan tambahkan seperti blok lainnya. Berguna.

Blok yang dapat digunakan kembali dapat dikelola, jadi Anda tidak memiliki terlalu banyak kelebihan dalam koleksi.

Pastikan untuk menyimpan pekerjaan Anda. Kemudian, pada postingan atau halaman mana pun, lihat di bagian atas layar, Anda akan melihat tombol PREVIEW dan UPDATE serta ikon roda gigi.

Di akhir bilah itu Anda akan menemukan 3 titik vertikal, klik untuk melihat daftar. Di bagian bawah adalah opsi untuk 'Kelola semua blok yang dapat digunakan kembali'.

Kelola blok yang dapat digunakan kembali dengan cara yang mirip dengan posting – klik pada nama untuk mengeditnya.

Mengedit blok yang dapat digunakan kembali TIDAK akan mengubah gaya blok yang sudah ada di situs.

Cara menyeret blok WordPress

Sejak pembaruan ke WordPress 5.5, opsi seret tidak jelas.

Anda harus memilih blok, lalu klik dan tahan panah atas-bawah.

Saat Anda menyeret blok, area akan disorot dengan warna biru yang menunjukkan di mana blok akan dijatuhkan setelah mouse dilepaskan.

Saya harap ini membantu Anda untuk mulai mengedit WordPress menggunakan editor blok WordPress. Masih banyak lagi yang harus saya bahas, jadi silakan lihat posting saya yang lain di:

• Cara menambahkan gambar ke WordPress.
• Tautkan gambar di WordPress.
• Judul dan paragraf di WordPress.
• Hyperlink di WordPress.
• Memformat di WordPress.
• Cara menambahkan PDF ke WordPress (dan menautkannya).

Banyak untuk melanjutkan! Beri tahu saya bagaimana Anda melanjutkan.