Cara Membuat Corak Tema Blok di WordPress 6.0

WordPress 5.5 memperkenalkan mod blok (juga biasanya dirujuk sebagai "blok") yang membolehkan pengguna membuat dan berkongsi susun atur blok yang telah ditetapkan. Susun atur ini disimpan dalam direktori skema dan mengandungi pelbagai skema yang direka oleh komuniti WordPress. Mod ini menggunakan format salinan mudah tanpa pengetahuan pengekodan, yang sangat menjimatkan masa pengguna.

Walaupun sudah ada banyak artikel mengenai corak, terdapat kekurangan artikel penciptaan corak yang komprehensif dan terkini yang meliputi peningkatan terkini. Artikel ini bertujuan untuk mengisi jurang ini, menonjolkan peningkatan baru-baru ini seperti membuat corak tanpa pendaftaran, dan menyediakan penulis baru dan berpengalaman dengan panduan langkah demi langkah untuk mencipta dan menggunakan corak, terutama dalam topik blok.

Penggunaan mod blok dalam tema blok telah melonjak sejak pelepasan WordPress 5.9 dan dua puluh dua puluh dua (TT2) tema lalai. Saya selalu menjadi peminat besar corak blok dan telah mencipta dan menggunakannya dalam tema blok saya.

WordPress 6.0 menyediakan pengarang dengan tiga peningkatan ciri mod utama:

• Membolehkan mod pendaftaran melalui folder /corak (serupa dengan /bahagian, /templat, dan /gaya).
• Gunakan tema.json untuk mendaftarkan skema dari direktori mod awam.
• Menambah corak yang boleh diberikan kepada pengguna apabila membuat halaman baru.

Dalam video pengenalan "Exploring WordPress 6.0", penghubung produk automattic Ann McCathy menyerlahkan beberapa ciri mod yang dipertingkatkan (bermula pada pukul 15:00) dan membincangkan pelan peningkatan mod masa depan -termasuk mod sebagai elemen seksyen, pilihan untuk memilih mod apabila penciptaan halaman, carian direktoran mod bersepadu, dan banyak lagi.

Prasyarat

Artikel ini mengandaikan bahawa pembaca mempunyai pengetahuan asas mengenai antara muka penyuntingan (FSE) WordPress dan tema blok. Manual pengeditan blok dan laman web penyuntingan di seluruh tapak menyediakan panduan tutorial terkini untuk mempelajari semua ciri FSE, termasuk topik blok dan corak yang dibincangkan dalam artikel ini.

Bahagian 1: Kaedah Evolusi untuk Membuat Corak Blok

Kaedah awal untuk membuat corak blok memerlukan penggunaan API corak blok, yang boleh digunakan sebagai plugin tersuai atau secara langsung didaftarkan dalam fail functions.php untuk dibungkus dengan tema blok. WordPress 6.0 yang baru dikeluarkan memperkenalkan beberapa ciri baru dan dipertingkatkan untuk digunakan dengan corak dan tema, termasuk mod pendaftaran folder /corak modal modal.

Sebagai latar belakang, mari kita mulakan dengan gambaran ringkas tentang bagaimana aliran kerja pendaftaran skema berkembang daripada menggunakan API Skema Daftar untuk dimuat secara langsung tanpa pendaftaran.

Gunakan Contoh Kes 1: Dua Puluh Dua Puluh Satu

Tema dua puluh satu tema (TT1) dan tema blok TT1 (tema kakak TT1) menunjukkan cara mendaftarkan mod blok dalam fungsi tema.php. Dalam topik eksperimen blok TT1, satu fail corak blok tunggal yang mengandungi lapan corak blok ditambah ke fungsi.php sebagai fail inklusi, seperti yang ditunjukkan di bawah.

Anda perlu mendaftarkan corak blok tersuai menggunakan fungsi register_block_pattern, yang menerima dua parameter - tajuk (nama corak) dan atribut (array yang menggambarkan sifat corak).

Berikut adalah contoh corak perenggan "Hello World" yang mudah didaftarkan mengikut artikel pembentuk tema:

 daftar_block_pattern (
    'my-plugin/hello-world',
    Array (
        'Tajuk' => __ ('Hello World', 'My-Plugin'),
        'kandungan' => "\ n<p> Helo Dunia</p> \ n ",
    )
);

Selepas pendaftaran, fungsi register_block_pattern () hendaklah dipanggil dari pengendali yang dilampirkan pada cangkuk init, seperti yang diterangkan di bawah.

 fungsi my_plugin_register_my_patterns () {
    register_block_pattern (...);
}

add_action ('init', 'my_plugin_register_my_patterns');

Selepas mendaftarkan mod blok, mereka dapat dilihat dalam editor blok. Dokumentasi yang lebih terperinci boleh didapati dalam pendaftaran mod blok.

Sifat mod blok

Sebagai tambahan kepada tajuk dan sifat kandungan yang diperlukan, Manual Editor Blok juga menyenaraikan sifat mod pilihan berikut:

• Tajuk (diperlukan) : Tajuk yang boleh dibaca manusia untuk corak.
• Kandungan (diperlukan) : Blok tag HTML untuk corak.
• Penerangan (Pilihan) : Teks tersembunyi secara visual yang digunakan untuk menggambarkan corak dalam Inserter. Keterangan adalah pilihan, tetapi sangat disyorkan untuk digunakan apabila tajuk tidak sepenuhnya menggambarkan fungsi mod. Penerangan akan membantu pengguna menemui corak semasa mencari.
• Kategori (Pilihan) : Pelbagai kategori skema berdaftar yang digunakan untuk kumpulan blok skema. Mod blok boleh dipaparkan dalam pelbagai kategori. Kategori mesti didaftarkan secara berasingan untuk digunakan di sini.
• Kata kunci (pilihan) : Membantu pengguna menemui alias atau array kata kunci corak ketika mencari.
• ViewPortWidth (Pilihan) : Menentukan integer lebar yang dijangkakan mod untuk pratonton mod secara proporsional dalam Inserter.
• BlockTypes (pilihan) : pelbagai jenis blok yang diharapkan corak digunakan. Setiap nilai perlu menjadi nama blok yang diisytiharkan.
• Inserter (Pilihan) : Secara lalai, semua mod muncul dalam Inserter. Untuk menyembunyikan mod supaya ia boleh dimasukkan secara programatik, tetapkan Inserter kepada False.

Berikut adalah contoh coretan corak corak rujukan coretan yang diambil dari blog WordPress.

 /*
Nama Plugin: Plugin Contoh Corak Petikan
*/

daftar_block_pattern (
    'my-plugin/my-quote-milik',
     Array (
      'Tajuk' => __ ('Quote with Avatar', 'My-Plugin'),
      'kategori' => array ('teks'),
      'Penerangan' => _x ('Petikan besar dengan avatar ".', 'Deskripsi corak blok', 'my-plugin'),
      'kandungan' => ' <div><div>
<hr>
<div><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174183133237166.jpg" class="lazy" alt=""    style="max-width:90%"  style="max-width:90%"></div>
<blockquote>
<p> "Menyumbang membuatkan saya berasa seperti saya berguna untuk planet ini."</p> <cite>- Anna Wong, <em>Sukarelawan</em></cite>
</blockquote>
<hr>
</div></div> ',
      )
);

Menggunakan corak dalam fail templat

Selepas membuat corak, anda boleh menggunakannya dalam fail template tema menggunakan tag blok berikut:

Satu contoh dari repositori GitHub ini menunjukkan penggunaan slug corak "footer-with-background" dengan awalan "TT2Gopher" dalam tema Blok TT2 Gopher.

Penerima awal tema blok dan pemalam Gutenberg juga mengambil kesempatan daripada corak dalam tema klasik. Twenty Twenty Twenty dan tema Eksell kegemaran saya (di sini adalah laman demo) adalah contoh yang baik untuk menunjukkan cara menambah fungsi skema kepada tema klasik.

Gunakan Contoh Kes 2: Dua puluh dua

Jika topik ini hanya mengandungi sebilangan kecil corak, pembangunan dan penyelenggaraan yang agak mudah untuk dikendalikan. Walau bagaimanapun, jika tema blok mengandungi banyak corak, seperti tema TT2, fail corak.php menjadi sangat besar dan sukar dibaca. Tema TT2 lalai yang dibundel dengan lebih daripada 60 skema, menunjukkan struktur aliran kerja pendaftaran skema refactored yang lebih mudah dibaca dan diselenggara.

Mengambil topik TT2 sebagai contoh, mari kita bincangkan secara ringkas bagaimana aliran kerja mudah ini berfungsi.

2.1: Kategori mod pendaftaran

Untuk tujuan demonstrasi, saya mencipta subtopik TT2 dan menetapkannya di tapak ujian tempatan saya menggunakan beberapa kandungan maya. Berikutan kaedah TT2, saya mendaftarkan footer-with-background dalam fail corak bloknya dan ditambahkan pada pelbagai kategori skema berikut.

 /**
* Daftar menghalang corak dan kategori.
*/
Fungsi TwentyTwentyTwentyTwo_Register_Block_Patterns () {
    $ block_pattern_categories = array (
        'footer' => array ('label' => __ ('footers', 'twentytwentytwo')),
        'header' => array ('label' => __ ('headers', 'twentytwentytwo')),
        'halaman' => array ('label' => __ ('halaman', 'twentytwentytwo')),
                // ...
    );

    /**
     * Menapis kategori corak blok tema.
     */
    $ block_pattern_categories = apply_filters ('TwentyTwentyTwo_block_Pattern_Categories', $ block_pattern_categories);

    foreach ($ block_pattern_categories sebagai $ name => $ properties) {
        jika (! wp_block_pattern_categories_registry :: get_instance ()-> is_registered ($ name)) {
            register_block_pattern_category ($ nama, $ properties);
        }
    }

    $ block_patterns = array (
        'Footer-lalai',
        'Footer-Dark',
        'footer-with-background',
        // ...
        'Header-lalai',
        'header-besar-gelap',
        'header-small-dark',
        'Tersembunyi-404',
        'burung tersembunyi',
        // ...
    );

    /**
     * Menapis corak blok tema.
     */
    $ block_patterns = apply_filters ('TwentyTwentyTwo_block_patterns', $ block_patterns);

    foreach ($ block_patterns sebagai $ block_pattern) {
        $ corak_file = get_theme_file_path ('/inc/corak/'. $ block_pattern. '.php');

        daftar_block_pattern (
            'Twentytwentytwo/'.
            memerlukan $ corak_file
        );
    }
}
add_action ('init', 'twentytwentytwo_register_block_patterns', 9);

Dalam contoh kod ini, setiap corak yang disenaraikan dalam $ block_patterns = array () dipanggil oleh fungsi foreach (), yang memerlukan fail direktori skema yang mengandungi nama skema yang disenaraikan dalam array, yang akan kami tambahkan dalam langkah seterusnya.

2.2: Tambahkan fail corak ke folder /inc /corak

Seterusnya, kita sepatutnya mempunyai semua fail skema yang disenaraikan dalam $ block_patterns = array (). Berikut adalah contoh fail footer-with-background.php:

 /**
 * Tajuk dan Petikan Gelap Gelap
 */
Arahan kembali (
    'Tajuk' => __ ('Footer dengan latar belakang', 'Twentytwentytwo'),
    'kategori' => array ('footer'),
    'BlockTypes' => Array ('Core/Template-Part/Footer'),
  'kandungan' => '
      <div style="padding-top:var(--wp--custom--spacing--small, 1.25rem);padding-bottom:var(--wp--custom--spacing--small, 1.25rem)">
      <p>'.
      Sprintf (
        / * Penterjemah: Pautan WordPress.
        esc_html __ ('bangga dikuasakan oleh %s', 'dua puluhtwentytwo'),
        ' <a href="'%20.%20esc_url(%20__(%20'https://wordpress.org',%20'twentytwentytwo'%20)%20)%20.%20'" rel="nofollow">WordPress</a> |.
      ). '</p>
      </div>
          ',
);

Mari rujuk corak di bahagian template footer.html:

Ini sama dengan menambah tajuk atau bahagian kaki ke fail templat.

Anda juga boleh menambah corak ke bahagian/footer.html template dengan mengubahnya untuk merujuk slug fail corak tema (footer-with-background):

Sekarang jika kita mengakses Inserter mod editor blok, kita boleh menggunakan "footer dengan latar belakang".

Tangkapan skrin berikut menunjukkan corak footer yang baru dibuat dengan latar belakang di hujung depan.

Sekarang corak telah menjadi sebahagian daripada tema blok, yang kebanyakannya dibundel dalam tema blok -seperti Quadrat, Seedet, Mayland, Zoologist, ahli geologi -mengikuti aliran kerja di atas. Ini adalah contoh folder Tema Quadrat /Inc /Corak yang mengandungi fail pendaftaran corak blok dan satu siri fail yang mengandungi sumber kandungan dan tajuk corak yang diperlukan dalam fungsi kembali ().

Bahagian 2: Buat dan beban corak tanpa pendaftaran

Sila ambil perhatian bahawa ciri ini memerlukan WordPress 6.0 atau Gutenberg plug-in 13.0 atau lebih tinggi untuk dipasang di laman web anda.

Ciri WordPress 6.0 baru ini membolehkan mod pendaftaran fail dan folder standard, membawa konvensyen yang serupa dengan /bahagian, /templat, dan /gaya.

Proses ini, seperti yang diterangkan dalam artikel ini, melibatkan tiga langkah berikut:

• Buat folder corak dalam direktori akar tema
• Tambahkan Tajuk Corak Gaya Plugin
• Kandungan sumber mod

Tag tajuk corak biasa yang diperoleh dari artikel adalah seperti berikut:

  php /**
* Tajuk: Tajuk Corak
* Slug: ruang nama/slug
* Penerangan: Penerangan mesra manusia.
* Lebar Viewport: 1024
* Kategori: koma, dipisahkan, nilai
* Kata kunci: koma, dipisahkan, nilai
* Jenis blok: koma, dipisahkan, nilai
* Inserter: Ya | tidak
*/
??>

Seperti yang disebutkan dalam bahagian sebelumnya, hanya tajuk dan medan slug yang diperlukan dan bidang lain adalah pilihan.

Merujuk kepada contoh-contoh dalam topik yang baru diterbitkan, saya refactored pendaftaran skema dalam topik demo Blok TT2 Gopher yang disediakan dalam artikel sebelumnya mengenai Trik CSS.

Dalam langkah-langkah berikut, mari kita meneroka cara refactor corak footer-with-background.php yang didaftarkan dengan PHP dan digunakan dalam template footer.html.

2.1: Buat folder A /Corak dalam direktori akar tema

Langkah pertama adalah untuk membuat folder A /Corak dalam direktori akar tema TT2 Gopher, dan gerakkan fail corak footer-with-background.php ke folder /corak folder dan refactornya.

2.2: Tambahkan data skema ke tajuk fail

Seterusnya, buat bidang pendaftaran tajuk skema berikut.

  php /**
* Tajuk: Footer dengan latar belakang
* Slug: TT2GOPHER/FOOTER-WITH-BACKGOTRY
* Kategori: TT2GOPHER-FOOTER
* Lebar Viewport: 1280
* Jenis blok: teras/bahagian/footer
* Inserter: Ya
*/
??>

Fail skema mempunyai medan tajuk teratas yang ditulis sebagai komen PHP. diikuti dengan kandungan blok yang ditulis dalam format HTML.

2.3: Tambahkan kandungan skema ke fail

Untuk bahagian kandungan, mari salin coretan kod dalam petikan tunggal (contohnya, '...'), mulakan dengan bahagian kandungan kaki-dengan-belakang, dan ganti:

    <div style="padding-top:35px;padding-bottom:30px">
    <p>Dikuasakan oleh WordPress |</p>
    </div>

Coretan kod lengkap corak/footer-with-background.php boleh dilihat pada GitHub.

Perhatikan bahawa /inc /corak dan corak blok.php adalah tambahan , tidak diperlukan dalam WordPress 6.0 dan hanya dimasukkan untuk tujuan demonstrasi.

2.4: Corak rujukan slug dalam templat

Menambah corak footer-with-background.php dari template footer-with-background.php di atas ke template footer.html adalah sama seperti yang diterangkan dalam bahagian sebelumnya (Bahagian 1, 2.2).

Sekarang, jika kita melihat tapak di bahagian footer tapak di editor blok atau dalam penyemak imbas, bahagian footer dipaparkan.

Kategori Corak dan Pendaftaran Jenis (Pilihan)

Untuk mengklasifikasikan corak blok, anda harus mendaftarkan kategori dan jenis skema dalam fail functions.php topik.

Mari kita pertimbangkan contoh mendaftarkan kategori corak blok dari topik TT2 Gopher.

Selepas pendaftaran, mod akan dipaparkan dalam Sisipan Mod bersama -sama dengan mod lalai teras. Untuk menambah tag kategori khusus topik dalam corak Inserter, kita harus mengubah suai coretan kod sebelumnya dengan menambahkan ruang nama topik:

 /**
* Daftar menghalang kategori, dan jenis.
*/

fungsi tt2gopher_register_block_pattern_categories () {

$ block_pattern_categories = array (
  'tt2gopher -header' => array ('label' => __ ('tt2 gopher - headers', 'tt2gopher'),
  'tt2gopher -footer' => array ('label' => __ ('tt2 gopher - footers', 'tt2gopher')),
  'tt2gopher -page' => array ('label' => __ ('tt2 gopher - page', 'tt2gopher')),
  // ...
);

/**
* Menapis kategori corak blok tema.
*/
$ block_pattern_categories = apply_filters ('tt2gopher_block_pattern_categories', $ block_pattern_categories);

foreach ($ block_pattern_categories sebagai $ name => $ properties) {
  jika (! wp_block_pattern_categories_registry :: get_instance ()-> is_registered ($ name)) {
    register_block_pattern_category ($ nama, $ properties);
  }
}
add_action ('init', 'tt2gopher_register_block_pattern_categories', 9);

mod footer-with-background dipaparkan dalam pratontonnya (jika dipilih) dengan mod Inserter:

Proses ini sangat memudahkan proses membuat dan memaparkan corak blok dalam tema blok. Ia boleh didapati di WordPress 6.0 tanpa memerlukan pemalam Gutenberg.

Topik contoh tanpa pendaftaran mod

Penerima awal telah mula menggunakan ciri ini dalam tema blok mereka. Beberapa contoh topik yang disediakan dalam direktori topik yang boleh memuat corak tanpa pendaftaran ditunjukkan di bawah:

• Archeo - 12 mod
• Loket - 13 mod
• Jauh - 11 mod
• Skatepark - 10 mod
• Stewart - 17 mod
• Livro - 16 mod
• Avant-garde-14 mod

Bahagian 3: Membuat dan Menggunakan Corak dengan Kod Rendah

Katalog Skema Rasmi mengandungi reka bentuk kreatif yang disumbangkan oleh komuniti dan boleh disalin dan disesuaikan seperti yang diperlukan untuk membuat kandungan. Menggunakan corak dalam editor blok tidak pernah menjadi lebih mudah!

Mana -mana corak dari direktori yang semakin meningkat juga boleh ditambah ke tema blok dengan hanya "salinan dan tampal" atau termasuk mereka dalam fail tema.json dengan merujuk slug corak direktori. Seterusnya, saya akan menerangkan secara ringkas bagaimana untuk melaksanakannya dengan mudah dengan kod yang sangat terhad.

Tambah dan sesuaikan skema dari direktori skema

3.1: Salin mod dari direktori ke halaman

Di sini saya menggunakan FirstWebGeek untuk corak bahagian footer dari direktori skema. Mod salin dengan memilih butang Mod Salin dan tampal terus ke halaman baru.

3.2: Buat penyesuaian yang diperlukan

Saya hanya membuat beberapa perubahan pada warna fon dan latar belakang butang. Kemudian salin keseluruhan kod dari editor kod ke papan klip.

Jika anda baru menggunakan editor kod, pergi ke pilihan (dengan tiga titik, sudut kanan atas), klik butang Editor Kod, dan salin keseluruhan kod dari sini.

3.3: Buat fail baru dalam folder /corak

Pertama, mari kita buat fail baru /patterns/footer-pattern-test.php dan tambahkan bahagian tajuk skema yang diperlukan. Kemudian tampal keseluruhan kod (langkah 3, di atas). Corak diklasifikasikan di kawasan footer (baris 5), dan kita boleh melihat corak yang baru ditambah dalam sisipan corak.

  php /**
 * Tajuk: Corak Footer dari Perpustakaan Corak
 * Slug: TT2GOPHER/FOOTER-PATTERN-TEST
 * Kategori: TT2GOPHER-FOOTER
 * Lebar Viewport: 1280
 * Jenis Blok: Bahagian Teras/Templat/Footer
 * Inserter: Ya
 */
??><div style="padding-top:100px;padding-right:30px;padding-bottom:70px;padding-left:30px">
<div>
<div>
<h2 style="font-style:normal;font-weight:700;text-transform:uppercase">lorem</h2>



<p style="font-size:16px">Salah satu manfaat utama menggunakan Lorem Ipsum ialah ia dapat dengan mudah dihasilkan, dan ia mengambil tekanan dari pereka untuk membuat teks yang bermakna.</p>



<ul></ul>
</div>



<div>
<h4 style="font-size:30px;font-style:normal;font-weight:700;text-transform:capitalize">Hubungi kami</h4>



<p style="font-size:16px;line-height:1.2">123 bd lorem, ipsum<br><br> 123-456-7890</p>



<p style="font-size:16px;line-height:1">[dilindungi e -mel]</p>



<p style="font-size:16px;line-height:1">Waktu pembukaan: 10:00 - 18:00</p>
</div>



<div>
<h4 style="font-size:30px;font-style:normal;font-weight:700;text-transform:capitalize">Surat berita</h4>



<p style="font-size:16px">Lorem Ipsum Dolor Sit Amet, Consistetur Ut Buruh et Dolore Magna Aliqua Ipsum Dolor SIT</p>


</div>
</div>
</div>

3.4: Lihat mod baru di Inserter

Untuk melihat mod footer yang baru ditambah dari perpustakaan corak, pergi ke mana -mana jawatan atau halaman dan pilih ikon sisipan (tanda biru plus di sudut kiri atas) dan pilih kategori TT2 Gopher - Footer. Mod yang baru ditambah muncul di panel kiri, serta mod footer lain dan pratonton mereka ke kanan (jika dipilih):

Daftar mod secara langsung dalam fail tema.json

Dalam WordPress 6.0, anda boleh menggunakan sintaks berikut untuk mendaftarkan sebarang skema yang diperlukan dari direktori skema dalam fail tema.json. Nota pembangunan 6.0 menyatakan bahawa "medan corak adalah pelbagai [ skema slug ] dalam direktori skema. Slug corak boleh diekstrak dari [URL] dalam satu skema tunggal dalam direktori skema."

 {
    "Versi": 2,
    "Corak": ["pendek teks", "corak-slug"]
}

Video ciri WordPress 6.0 pendek ini menunjukkan cara mendaftarkan corak dalam folder /corak (pada 3:53) dan bagaimana untuk mendaftarkan corak dalam direktori mod dalam fail tema.json (pada 3:13).

Mod berdaftar kemudiannya boleh digunakan dalam kotak carian masuk mod, dan kemudian ia boleh digunakan seperti perpustakaan mod terikat tema.

 {
  "Versi": 2,
  "Corak": ["Footer-From-Directory", "Footer-Section-Design-With-3-Column-Description-Social-Media-Contact-and-Newsletter"]
}

Dalam contoh ini, corak slug slug footer-reka bentuk-dengan-3-column-deskripsi-social-media-contact-and-newsletter dari contoh terdahulu didaftarkan melalui tema.json.

Model Corak Penciptaan Halaman

Sebagai sebahagian daripada program binaan menggunakan corak, WordPress 6.0 menyediakan pengarang tema dengan pilihan modal modal untuk menambah mod susun atur halaman untuk menyekat topik, yang membolehkan pengguna tapak memilih mod susun atur halaman (mis., Mengenai halaman, halaman kenalan, halaman pasukan, dll.) Apabila membuat halaman. Berikut adalah contoh yang diambil dari arahan pembangunan:

 daftar_block_pattern (
    'my-plugin/kira-kira halaman',
    Array (
        'Tajuk' => __ ('Mengenai Page', 'My-Plugin'),
        'BlockTypes' => Array ('Core/Post-Content'),
        'kandungan' => '
        <p>Tulis halaman mengenai halaman di sini, jangan ragu untuk menggunakan mana -mana blok</p>
        ',
    )
);

Ciri ini kini terhad kepada jenis pos halaman dan tidak berkenaan dengan "jenis pos pos".

Anda juga boleh melumpuhkan modaliti mod penciptaan halaman sepenuhnya dengan mengeluarkan jenis blok pasca kandungan untuk semua mod. Kod sampel sampel disediakan di sini.

Anda boleh mengikuti dan mengambil bahagian dalam perbincangan di GitHub, dan pautan perbincangan disenaraikan di bahagian Sumber di bawah.

Bina halaman menggunakan direktori skema

Sama seperti pembina halaman, anda juga boleh menggunakan corak dalam direktori untuk membuat susun atur pos atau halaman yang dikehendaki. Pasukan Gutenberghub mencipta aplikasi pembina halaman dalam talian eksperimen (video pengenalan) menggunakan skema dalam direktori skema. Kod dari aplikasi kemudiannya boleh disalin dan disisipkan ke dalam laman web ini, yang sangat memudahkan proses membina susun atur halaman kompleks tanpa pengekodan.

Dalam video pendek ini, Jamie Marsland menunjukkan (pada 1:30) bagaimana menggunakan aplikasi untuk menggunakan bahagian halaman yang diperlukan dalam direktori untuk membuat susun atur keseluruhan halaman yang serupa dengan pembina halaman.

Meringkaskan

Mod membolehkan pengguna mencipta susun atur kandungan yang biasa digunakan (mis., Hero Hero, panggilan ke tindakan, dll.) Di mana -mana halaman dan mengurangkan halangan kepada ketidakupayaan sebelum ini untuk membentangkan kandungan gaya tanpa kemahiran pengekodan. Sama seperti plugin dan direktori tema, direktori skema baru memberi pengguna pilihan untuk memilih pelbagai skema dari direktori skema dan menulis dan memaparkan kandungan dalam gaya.

Malah, mod blok akan mengubah segala -galanya, yang tidak diragukan lagi merupakan ciri transformatif dalam medan tema WordPress. Apabila potensi penuh kerja "menggunakan corak binaan" tersedia, ini akan mengubah cara kami merancang tema blok dan membuat kandungan yang indah walaupun dengan pengetahuan rendah kod. Bagi banyak pereka kreatif, katalog corak juga boleh menyediakan cara yang sesuai untuk menunjukkan kreativiti mereka.

sumber

WordPress 6.0

• Panduan Domain WordPress 6.0 (WordPress Core)
• Terokai WordPress 6.0: Variasi Gaya, Blok Kunci UI, Menulis Penambahbaikan-Video 22-Minut (Anne McCarthy)
• Ciri WordPress 6.0 dalam 4 Minit (Dave Smith)
• Baru di WordPress 6.0: Blok Baru, Pertukaran Gaya, Penyuntingan Templat, API Webfonts, dan banyak lagi (Kinsta)

Buat corak

• Pengenalan kepada Mod Blok (disunting di laman web)
• Video Pengenalan Mod Blok, 14 Minit (Belajar WordPress)
• Mod Blok (Manual Editor Blok)
• Oleh itu, anda mahu membuat corak blok? (Blog WordPress)
• Cara Membuat dan Kongsi Mod Blok Kod Rendah di WordPress (GoDaddy)

Peningkatan Mod (GitHub)

• Gunakan Bangunan Corak #38529
• Corak sebagai elemen seksyen #39281
• Tambah: Pilihan untuk memilih mod apabila penciptaan halaman. #40034
• Mod blok yang digunakan untuk penciptaan halaman. #38787
• Ditambah: Pilihan Mula Halaman (Templat dan Corak) #39147

Catatan blog

• Mod Gutenberg: Masa Depan Bangunan Halaman di WordPress (Rich Tabor)
• Mempercepat Bangunan Tapak WordPress Menggunakan Mod Blok (Godaddy)
• Mod blok akan mengubah segala -galanya (WP Tavern)

Atas ialah kandungan terperinci Cara Membuat Corak Tema Blok di WordPress 6.0. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!