Cara Membuat Pola Blok WordPress Untuk Mempercepat Pembuatan Situs Web

Pola blok akan menjadi masalah besar bagi semua pengguna WordPress dan dalam posting ini, saya akan menunjukkan kepada Anda cara membuat pola blok Anda sendiri.

 add_action( 'init', function() { register_pattern( 'NAME', [ 'title' => __( 'TITLE' ), 'content' => 'PATTERN' ] ); } );

Dua hari yang lalu, saya mengeluarkan sebuah video dan saya memperkenalkan konsep ini yang akan segera hadir di WordPress yang disebut pola blog. Ini semacam eksperimental sekarang, dan itu adalah sesuatu yang sangat saya sukai. Dan saya pikir jika Anda memikirkan potensi pola blok, maka Anda dapat melihat potensinya, untuk membantu Anda mengirimkan situs web lebih cepat jika Anda memiliki klien, untuk memungkinkan mereka berbuat lebih banyak dengan klien mereka. situs web.

Jadi saya akan menunjukkan kepada Anda. Tepatnya cara membuat pola blok di video ini. Sekarang kita akan melakukan beberapa hal yang sedikit di sisi teknisi, dan saya tahu ini adalah saluran WordPress untuk non-teknisi, jadi saya akan mencoba membuatnya sesederhana mungkin, tetapi Anda akan benar-benar melihat pada akhirnya betapa sederhananya membuat salah satu pola blok ini.

Jadi mari kita pergi ke depan dan melihatnya. Jadi, inilah halaman di mana ia berbicara tentang rilis baru fitur ini dalam pembuatannya. Mampu hanya orang biasa untuk membuat pola blok. Jadi ketika saya gulir ke bawah, itu memberikan jenis template untuk itu. Jadi semua yang terlibat di dalamnya adalah menciptakan sesuatu yang disebut fungsi kustom.

Tapi jangan khawatir, saya akan membuatnya sangat mudah untuk dilakukan semua orang, tapi di sinilah potongan kecil kode itu berada. Sekarang saya akan memiliki link dalam deskripsi video di bawah. Ini akan membawa Anda ke situs web saya. Anda juga akan mendapatkan instruksi tertulis tentang cara melakukannya. Cuplikan kecil kode ini yang dapat Anda salin dan tempel ke situs web Anda sendiri.

Oke, inilah yang akan kita butuhkan. Ini adalah fitur baru untuk Gutenberg dan Anda perlu menginstal plugin Gutenberg yang diaktifkan, jadi Anda akan memerlukan versi minimum 7.8 dan inilah yang baru-baru ini keluar. Sekarang, apa yang akan terjadi mungkin dalam empat hingga enam bulan, mungkin pada akhir musim panas 2020 ini akan disertakan di WordPress secara default, tetapi untuk saat ini, Anda perlu, jika Anda ingin mencobanya. , Anda perlu menginstal plugin Gutenberg.

Hal berikutnya yang dapat Anda lakukan, dan ini opsional, jika Anda tidak tahu cara menambahkan fungsi kustom ke tema anak, dan saya bahkan tidak menggunakan tema anak lagi, Anda mungkin ingin menggunakan plugin gratis ini, dan ini adalah salah satu plugin gratis terbaik. Yang pernah saya temui, dan itu disebut cuplikan kode. Dan ini akan memungkinkan kita untuk menambahkan fungsi kustom ini dan cara yang sangat mudah digunakan, cara yang mudah dikelola.

Oke? Jadi Anda akan membutuhkan itu. Dan ini opsional. Ini adalah plugin gratis yang disebut blok irama. Dan yang dilakukannya adalah menambahkan banyak fungsi pembuat halaman ke Gutenberg. Ini cukup rapi dalam apa yang memungkinkan Anda lakukan. Anda dapat menarik dan mengubah ukuran kolom. Ada banyak elemen yang menambahkan banyak fungsi pembuat halaman itu, tetapi untuk Gutenberg, dan ini adalah plugin yang sepenuhnya gratis.

Oke. Sekarang mari kita lompat ke situs web saya. Jadi inilah sebuah situs web. Semuanya sudah diatur sekarang. Dan jika Anda tidak tahu cara memasang plugin, seseorang menjadi sangat marah kepada saya beberapa hari yang lalu karena tidak menunjukkan cara memasang plugin dan video. Anda pergi ke plugin, Anda mengklik tambahkan baru, dan kemudian di sini Anda melakukan pencarian untuk nama plugin itu, dan kemudian Anda mengklik.

Unduh, atau saya minta maaf, Anda mengklik instal sekarang dan kemudian Anda mengaktifkannya. Ini adalah proses yang sangat sederhana. Jadi saya akan mengklik plugin yang saya instal, dan Anda dapat melihat saya telah menginstal Gutenberg dan ini adalah blok irama opsional, dan ini adalah cuplikan kodenya. Jadi saya akan melanjutkan dan mengaktifkan cuplikan kode dan Anda dapat melihatnya sekarang diaktifkan di sini.

Jadi, lanjutkan dan klik pada cuplikan kode dan Anda akan melihat beberapa yang menyertainya. Dan inilah sakelar sakelar ini dan sakelar itu diaktifkan. Semuanya dimatikan dan Anda sebenarnya tidak perlu menyimpan yang ini secara default. Anda cukup mengklik di sini dan Anda dapat menghapus semuanya, tetapi saya telah melanjutkan dan menambahkan satu di sini yang disebut templat pola blok.

Jadi apa yang akan Anda lakukan. Klik add new, dan Anda dapat memberi nama template pola blok ini dalam potongan kecil kode yang saya tunjukkan di sini, tapi saya akan memberi Anda versi modifikasi dari ini di situs web saya. Anda hanya akan menyalin dan menempelkannya di sini, dan kemudian Anda akan mengklik simpan perubahan.

Anda tidak akan mengklik simpan dan aktifkan, Anda akan mengklik untuk menyimpan perubahan, dan saya akan menunjukkan alasannya sebentar lagi. Oke. Jadi sekarang yang ingin Anda lakukan adalah membuat pola blok ini. Dan pola blok hanyalah bagian yang disimpan. Jadi jika Anda menggunakan pembuat halaman, sekarang Anda tahu bahwa Anda dapat menyimpan bagian dan beberapa di antaranya datang dengan bagian yang telah dirancang sebelumnya, tetapi pengalaman pengguna, menurut saya jauh lebih baik di Gutenberg.

Jadi yang ingin Anda lakukan adalah membuka halaman. Dan klik tambahkan baru, dan Anda ingin memberi nama ini. Um, sebenarnya biarkan aku menyingkirkan tur ini. Anda akan ingin memberi nama pola blok ini, dan di sinilah kita akan membuat pola blok ini. Sekarang, saya tidak akan membuat pola blok sekarang.

Saya akan menunjukkan kepada Anda salah satu yang telah saya buat, dan itu . Disini. Jadi inilah pola blok yang saya buat. Anda bisa melihatnya di bagian ini. Ini memiliki latar belakang berwarna-warni. Saya memiliki judul, beberapa subjudul dan beberapa tombol di sini, dan saya memasukkan video. Jadi saya akan membuat ini pola blok saya sehingga saya bisa hanya dengan dua klik mouse, menambahkan ini ke mana saja di situs web saya.

Jadi yang akan saya lakukan adalah klik di kanan atas, ada tiga titik ini. Mereka agak sulit dilihat, dan ketika Anda mengkliknya, ada opsi ini di sini yang mengatakan editor kode. Jadi Anda akan ingin mengklik editor kode, dan kemudian itu menunjukkan kepada Anda semua kode yang terlibat dengan membuat blog itu menjadi pola blog pola blok.

Oke? Jadi Anda akan mengklik di sini dan kemudian Anda akan mengklik kontrol a atau perintah a di komputer Anda untuk menyorot semuanya. Dan mereka tahun baru. Letakkan di papan klip Anda. Jadi saya akan melakukannya mengontrol C. jadi sekarang ada di clipboard saya. Jadi sekarang apa yang akan saya lakukan adalah saya akan keluar dari sini. Sebenarnya, jika Anda ingin keluar dari tampilan ini, ada X kecil di sini yang mengatakan keluar dari editor kode, dan sekarang ini akan menunjukkan kepada saya seperti biasanya di sini.

Oke. Jadi Anda bisa menyimpan ini sebagai draf jika Anda mau, tetapi Anda tidak akan membutuhkan ini. Ini hanya untuk Anda untuk membuat pola blok ini, dan Anda bisa membuat pola blok apa saja, dan itu tidak harus berupa satu blok barang. Ini bisa berupa keseluruhan template untuk posting blog, misalnya. Oke, jadi sekarang saya akan mengklik di mana ada cara untuk mengeluarkan saya dari editor blok.

Sekarang saya akan kembali ke cuplikan kode. Jadi di sinilah saya membuat template pola blok itu. Saya akan mengklik kloning, dan sekarang dia membuat kloningnya, dan saya akan mengklik judulnya untuk mulai mengeditnya. Jadi untuk judul, saya akan mengubah ini menjadi judul yang masuk akal untuk mengelolanya.

Jadi bagi saya, saya hanya akan menyebutkannya. Seorang pahlawan dengan video. Jadi sekarang saya tahu apa ini ketika saya melihat daftar di masa depan. Oke, jadi ada beberapa hal di sini yang perlu Anda edit. Tiga hal. Ini sangat sederhana. Yang pertama adalah nama. Jadi ini bisa berupa nama apa saja, harus huruf kecil semua, tanpa spasi atau karakter funky.

Jadi saya akan melanjutkan dan memasukkan nama sekarang. Anda dapat melihat saya menamakannya pahlawan dengan video. Selanjutnya, di sini Anda perlu memasukkan judul. Jadi kita mengganti judul kata ini, dan inilah yang akan ditampilkan. Anda sedang melihat daftar pola blog, blok, bukan pola blok blog. Dan jika Anda perhatikan, Anda bisa, ini adalah nama yang ramah, sehingga dapat memiliki spasi.

Uh, saya tidak akan memasukkan karakter funky di sana saja. Spasi baik-baik saja. Jadi itulah yang akan ditampilkan dalam daftar ini a dan selanjutnya di sini di mana dikatakan pola a. Anda hanya akan menempelkan apa yang baru saja Anda salin di clipboard Anda. Sekarang saya ingin Anda mencatat satu hal. Untuk masing-masing ini. Saya meninggalkan tanda kutip kecil di bagian depan dan belakang.

Anda melihat bahwa ada apostrof yang harus ada di sana. Jika Anda tidak sengaja menghapusnya, pasang kembali. Oke. Kami hanya berubah. Kami hanya mengganti placeholder teks. Jadi untuk di sini, saya tidak ingin mengganti semuanya. Saya hanya ingin mengganti pola kata, jadi saya akan menyorotnya dan kemudian saya akan menempelkan apa yang saya salin.

Dan itu dia. Jadi sekarang saya akan menggulir ke bawah dan kali ini saya akan mengklik simpan perubahan dan aktifkan. Dan sekarang seharusnya dikatakan snippet diperbarui dan diaktifkan. Dan ketika saya mengklik semua cuplikan, Anda bisa melihat sekarang pahlawan yang satu ini dengan video dihidupkan. Jadi di masa depan untuk pola blok tambahan, saya ingin pergi ke tempat yang dikatakan templat pola blok dan klik klon dan buat templat pola blok itu seperti itu.

Dengan begitu saya selalu memiliki template di sana. Sekarang, jika Anda sudah tahu dan Anda memiliki cara sendiri untuk menambahkan fungsi kustom, Anda tidak perlu potongan kode dan, dan semua hal semacam ini, Anda bisa meletakkannya di tempat yang Anda inginkan. Ini hanya cara yang jauh lebih mudah untuk mengelolanya jika Anda bertanya kepada saya. Oke, jadi sekarang saya akan pergi ke halaman di klik saya tambahkan baru, dan jika Anda ingin melihatnya.

Pola blok. Eh, di sini adalah ikon untuk itu. Dan ketika Anda mengarahkan kursor ke atasnya, dikatakan pola blok. Dan ketika saya mengkliknya, Anda melihat beberapa pola blok yang sedang dicoba sekarang. Tetapi ketika Anda menggulir ke bawah, Anda akan melihat pola blok yang saya buat. Dan yang benar-benar rapi adalah ia menghasilkan pratinjau thumbnail.

Dan ia melakukan ini secara dinamis. Anda memiliki alat pembuatan halaman yang bahkan tidak melakukan ini. Eh, dan itu membuatnya jauh lebih mudah untuk mengelola pola blok Anda. Jadi, dan Anda dapat melihat di sini dikatakan pahlawan dengan template. Sekarang jika saya ingin menggunakan ini di mana saja di situs web saya, cukup dengan satu klik mouse. Dan kemudian itu dia. Dan semua yang harus saya lakukan pada saat itu untuk mulai mengubah beberapa teks, mengubah tautan ke tombol.

Saya bisa klik di sini dan saya bisa mengubah videonya. Jadi. Begitulah cara Anda membuat pola blok. Sekarang ini adalah masalah besar, saya pikir karena apa yang akan terjadi adalah sebuah tema. Pengembang dan pembuat plugin, mereka akan dapat membuat pola blok ini untuk Anda, jadi akan jauh lebih cepat, lebih cepat, dan lebih mudah untuk membangun situs web menggunakan alat pembuat blok asli yang sudah disertakan WordPress.

Tidak ada yang bisa dibeli, tidak ada kode yang mengasapi. Tidak ada satu pun dari hal-hal ini, dan. Apa yang membawanya lebih jauh. Anda dapat melihat betapa mudahnya bagi Anda untuk membuat pola blok Anda sendiri, dan sangat mudah untuk melihatnya dalam daftar. Klik pada tombol dan itu akan dimasukkan ke sana. Jadi sekarang Anda bisa memikirkan betapa lebih mudahnya membangun situs web ketika Anda memiliki perpustakaan pola blok Anda sendiri.

Jadi, jika Anda membuat situs web untuk klien dan Anda tidak ingin menggunakan pembuat halaman. Anda hanya ingin menggunakan pembuat blok bawaan. Anda dapat membuat perpustakaan pola Anda sendiri. Anda melihat betapa mudahnya. Aku bisa melakukan itu. Anda bisa melakukannya. Eh, Anda bisa membuat perpustakaan pola blok Anda sendiri yang bisa Anda pindahkan dari satu situs ke situs lainnya, dan Anda bisa menunjukkan kepada klien Anda bagaimana mereka bisa membangunnya.

Sekarang, ini bukan hanya untuk halaman, ini untuk posting, dan tidak terbatas hanya pada satu bagian yang Anda lihat. Pada dasarnya apa pun yang dapat Anda buat di halaman. Anda dapat membuat pola blok. Jadi jika Anda menggunakan pembuat blok hanya untuk posting blog, dan ada elemen tertentu yang ingin Anda gunakan berulang kali dalam posting blog untuk meningkatkan tata letak posting blog, Anda dapat membuat pola blok untuk dia.

Dan itu sangat mudah. Satu klik, dan Anda dapat menggunakannya. Bahkan, seluruh template posting blog. Jadi, jika ada formula yang Anda ikuti untuk bagian dari posting blog, Anda dapat membuat seluruh posting blog menjadi template blok. Satu klik itu diterapkan dan kemudian yang harus Anda lakukan hanyalah mengarahkan, mengklik, dan mengedit.

Jadi hal terakhir sebelum kita menyimpulkan di sini, ini adalah konsep baru dan sesuatu untuk dipikirkan selama beberapa bulan ke depan. Bereksperimenlah dengan sekarang. Ini tidak cukup Yeti, Yeti. Ini belum siap untuk prime time karena jika Anda perhatikan, um, satu-satunya negatif yang saya lihat adalah ketika Anda melihat blog. Lihat di sana aku pergi lagi.

Jika Anda melihat pola blok, itu hanya daftar artikel yang lebih tinggi di mana Anda harus menggulir, jadi mereka perlu meningkatkan proses pengkategorian dan pengorganisasian. Mungkin mereka memiliki semacam antarmuka untuk membuatnya lebih visual dan mudah digunakan. Jika Anda akan memiliki 50 blok yang berbeda.

Pola. Jadi mereka hanya perlu meningkatkan itu. Dan beberapa sintaks pada kode mungkin sedikit berubah. Siapa yang tahu kapan ini akhirnya keluar. Tetapi inti dari video ini hanya untuk menunjukkan kepada Anda apa yang akan segera mungkin terjadi sehingga Anda dapat memulainya. Memikirkan bagaimana hal itu dapat diterapkan pada alur kerja Anda dan apa yang Anda lakukan sebagai pembuat situs web.

Bagaimanapun, itu saja yang saya miliki untuk Anda di posting ini. Saya harap Anda akan menghargai pandangan lanjutan ke masa depan WordPress seperti ini, dan jika Anda menghargai video ini atau menemukan beberapa nilai, pertimbangkan untuk memberikan jempol dan bagikan video ini sehingga orang dapat melihat apa yang akan terjadi.