Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. WordPress
Code

Tampilan Awal di WordPress Gutenberg

by
Difficulty:BeginnerLength:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by Kang Abbad (you can also view the original English article)

Antarmuka pengeditan Gutenberg yang baru adalah perubahan besar ke WordPress 5 yang datang tahun ini, dan ini akan mempengaruhi pengembang plugin WordPress, tema desainer, dan pembuat website.

Di video ini saya akan menunjukkan kepada anda bagaimana cara mengatur Gutenberg sebagai plugin di situs milik anda dan bagaimana cara memulai menggunakan editor Gutenberg untuk membuat konten.

Ikuti terus dan anda akan mendapatkan pengalaman di beberapa fitur baru dari Gutenberg secara-langsung.

Tampilan awal di WordPress Gutenberg

Pengenalan WordPress Gutenberg

Sebuah titik awal yang baik untuk mempelajari tentang Gutenberg ada di Gutenberg page in the WordPress Codex. Disitu anda akan diberikan sebuah gambaran dari tentang apa Gutenberg dan juga memberitahu anda bagaimana anda bisa membantu memperbaikinya dan membangun masa depannya. Anda bisa melakukan itu dengan mengirim umpan balik melalui feedback questionnaire, yang juga dapat anda gunakan untuk meminta dukungan.

Anda juga dapat melihat persyaratan pengujian untuk menguji Gutenberg. Alasan penting untuk mengikuti persyaratan ini adalah agar semua orang menguji dengan cara yang konsisten, membantu tim yang mengembangkan Gutenberg untuk membuatnya semakin baik sebisa mungkin.

Gutenberg belum menjadi bagian dari inti WordPress, tetapi akan ada dalam rilis mendatang. Ingatlah bahwa itu mungkin akan berubah untuk sementara waktu—sebagiannya karena umpan balik itu, dan sebagiannya karena pekerjaan yang masih berjalan untuk membuatnya sebaik mungkin. Tetapi untuk sementara waktu, mari melihat bagaimana anda bisa mendapatkan Gutenberg di situs anda sekarang dan memberi anda gambaran singkat tentang seperti apa bentuknya.

Bagaimana Cara Menginstal Plugin Gutenberg

Cara anda bisa mendapatkan Gutenberg sekarang adalah melalui sebuah plugin. Jadi pasang dengan cara biasa — menuju Plugins > Tambah Baru, cari "Gutenberg", dan ketika anda menemukannya, klik Pasang Sekarang dan Aktifkan.

Sekarang anda telah memasang pluginnya, editor Gutenberg akan aktif di situs anda.

Bagaimana Editor Gutenberg Bekerja

Saya akan membuka postingan yang sudah ada di situs saya untuk menunjukkan seperti apa tampilan laman pengeditan di Gutenberg.

Editing a post in the Gutenberg editor

Anda bisa melihat bahwa ini terlihat sangat berbeda dari yang dulu. Ketika saya mengarahkan sesuatu, ikon muncul dengan 3 titik di sisi kanan, menunjukkan kepada saya bahwa setiap elemen di konten saya telah menjadi sebuah blok.

Jika saya klik di sebuah blok, saya mendapatkan sesuatu yang terlihat sedikit lebih akrab—itu terlihat seperti wastafel dapur tua di editor klasik. Tetapi anda bisa melihat bahwa anda belum mendapatkan tab untuk tampilan kode dan tampilan normal di bagian atas.

Kitchen sink editing options

Di sebelah kanan, saya memiliki perangkat yang sedikit berbeda dari apa yang dulu merupakan metabox, yang dulu terlihat sangat terpisah di editor lama. Ini lebih terlihat seperti Customizer Jadi jika anda telah bekerja dengan Customizer di WordPress, tata letak ini akan terlihat akrab bagi anda. Anda bisa meng-klik di setiap heading untuk memperluas bagian yang sesuai. Secara keseluruhan, ini membuat segalanya menjadi sedikit lebih rapi dan mengurangi kebutuhan untuk menggulir halaman.

Bagaimana Cara Menambahkan dan Memindahkan Blok

Anda bisa menambah lebih banyak blok dengan meng-klik ikon plus di kiri bawah, dan sebuah menu muncul menunjukkan kepada anda opsi yang berbeda.

Add a block

Jika anda seorang pengguna WordPress berpengalaman—dan terutama anda adalah seorang pengembang WordPress—anda mungkin akan mengangkat tangan dengan ketakuan di sini. Tetapi saya bisa melihat bagaimana bagi pengguna yang kurang berpengalaman dan orang-orang yang lebih berpikiran visual, ini akan membuat segalanya tampak jauh lebih mudah.

Gutenberg juga membuatnya menjadi sangat mudah bagi anda untuk memindahkan sesuatu. Jadi saya akan membuat blok paragraf dari beberapa konten yang ada di postingan saya. Ketika saya menyelesaikan itu, kemudian saya bisa memilih blok saya dan menggerakkannya ke atas dan ke bawah dengan mengklik panah di sebelah kiri.

Moving blocks

Ini memberikan keluwesan bagi anda ketika ingin memindahkan sesuatu di situs anda dan berurusan dengan sesuatu secara visual.

Bekerja Dengan Daftar dan Kode di Gutenberg

Terdapat tipe blok lainnya. Sebuah daftar, contohnya, menjadi sebuah blok semua dengan sendirinya.

Saya akan memulai dengan membagi konten saya ke blok dengan meng-klik ikon kontrol dan memilih Konversi ke blok dari menu yang muncul.

Convert to blocks

Gutenberg kemudian memisahkan heading saya dan paragraphs individu, dan itu juga membuat blok terpisah untuk setiap daftar. Jadi ini sangat cepat dan mudah untuk konversi postingan anda yang sudah ada ke konten yang sesuai dengan Gutenberg.

Anda akan ingat pada saat di awal, Saya mengatakan bahwa tidak ada tab di atas untuk tampilan teks dan tampilan kode. Daripada itu, anda bisa mengerjakan di kode untuk sebuah blok tersendiri. Jadi jika saya klik di atas ikon kontrol di kanan, saya dapat memilih edit sebagai HTML. Maka ini akan menampilkan blok dalam tampilan kode, dan saya dapat mengedit kode di blok tertentu.

Editing code in a block

Jika anda sama seperti yang saya lakukan dan anda harus menggali lebih dalam kode di balik postingan panjang, itu bisa benar-benar membingungkan mencoba menemukan sedikit teks yang telah anda kerjakan, jadi ini membuatnya jauh lebih mudah untuk bekerja dengan potongan kode tertentu.

Jadi, blok benar-benar menjadikan Gutenberg seperti itu, dan saya harap ini memberi anda sedikit rasa untuk blok dan bagaimana mereka bekerja. Sebuah blok pada dasarnya setara dengan elemen dalam HTML anda. Jika anda melihat keluaran markup untuk berkas anda, anda akan melihat bahwa masing-masing berada pada level yang sama. Jadi anda memiliki headings, paragraphs, dan lists, dan mereka semua berada di tingkatan yang sama di dalam HTML anda.

Anda juga dapat membagi dan menggabungkan blok menggunakan menu kontrol yang sama yang muncul dari ikon dengan tiga titik, dan juga ada sebuah Undo button di atas, yang sangat membantu. dan dengan daftar, anda bisa dengan mudah beralih di antara berbagai tingkatan indentasi, atau di antara daftar bullet dan nomer, hanya dengan menggunakan menu di atas yang relevan.

Indenting a list

Pengaturan Blok

Sekarang saya telah mengonversi konten saya menjadi blok individual, saya juga bisa meng-klik Blok di sidebar di kanan dan merubah pengaturan di setiap block.

Changing block settings

Anda juga bisa menampilkan dan menyembunyikan pengaturan toolbar dengan meng-klik kontrol menu di sebelah blok dan memilih Tampilkan Pengaturan Lanjutan atau Sembunyikan Pengaturan Lanjutan. Jika anda menyembunyikannya, anda akan mendapatkan pengalaman editing yang bagus dan bersih.

Hiding settings

Kesimpulan

Jadi itu memberi anda sebuah tinjauan tentang hal-hal utama yang dapat anda lakukan dengan blok di Gutenberg. Anda bisa menambahkan blok, mengubah tipe suatu blok, dan anda bisa meng-edit kode yang mendasari. Anda dapat menggandakan blok, anda dapat menggabungkannya, anda dapat memisahkannya, dan anda dapat memindahkan di dalam dokumen anda.

Saya belum pernah menggunakan Gutenberg di pengaturan saya secara langsung, tetapi menjalankannya untuk kursus ini telah membuat saya sangat bersemangat tentang bagaimana Gutenberg bekerja dan bagaimana itu dapat membantu saya mengedit konten saya sendiri di situs WordPress saya.

Saya harap Gutenberg akan sangat membantu anda, dan saya harap anda menikmati panduan singkat tentang fitur-fitur utamanya.

Belajar WordPress

Pelajari bagaimana cara menggunakan WordPress atau terjebak masalah dan pelajari pengembangan WordPress dengan panduan lengkap kami. Semua kursus di panduan ini gratis untuk dilihat dengan berlangganan di Envato Elements. Untuk biaya rendah bulanan, anda mendapatkan akses tak terbatas ke library kami yang berkembang dengan lebih dari 1.000 video kursus dan industry-leading eBooks di Envato Tuts+.

Ditambah anda sekarang dapat mengunduh sepuasnya dari Envato Elements library yang besar dengan 500.000+ creative assets. Membuat dengan font unik, foto, grafik, dan template, dan berikan proyek yang lebih baik lebih cepat.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.