Kunci untuk mewujudkan blok Gutenberg adalah untuk memahami struktur asasnya dan betul menghubungkan sumber depan dan belakang. 1. Sediakan persekitaran pembangunan: Pasang WordPress, Node.js dan @WordPress/skrip tempatan; 2. Gunakan PHP untuk mendaftarkan blok dan tentukan logik penyuntingan dan paparan blok dalam JavaScript; 3. Membina fail JS melalui NPM untuk membuat perubahan berkuatkuasa; 4. Periksa sama ada laluan dan ikon adalah betul apabila menghadapi masalah atau menggunakan masa nyata mendengar untuk membina untuk mengelakkan kompilasi manual berulang. Berikutan langkah -langkah ini, blok Gutenberg yang mudah boleh dilaksanakan langkah demi langkah.
Mewujudkan blok Gutenberg yang mudah tidak begitu sukar, terutamanya jika anda sudah biasa dengan proses pembangunan asas WordPress. Gutenberg adalah editor baru WordPress, yang menganjurkan kandungan melalui "blok", setiap blok adalah unit kandungan bebas. Jika anda ingin menyesuaikan blok anda sendiri, anda boleh bermula dari yang paling asas dan melaksanakan langkah demi langkah.
Berikut adalah beberapa langkah praktikal dan cadangan untuk membantu anda memulakan dengan cepat.
Penyediaan: Sediakan persekitaran pembangunan
Sebelum anda mula menulis kod, pastikan anda mempunyai persekitaran WordPress yang sesuai untuk pembangunan. Anda boleh menggunakan alat pembangunan tempatan seperti tempatan atau Xampp untuk membina tapak ujian.
- Pasang versi terbaru WordPress
- Pasang Node.js dan NPM (untuk membina fail JavaScript)
- Pasang pakej
@wordpress/scripts
, yang merupakan set alat skrip yang disyorkan rasmi
Anda boleh memasang kebergantungan yang diperlukan melalui arahan berikut:
Pemasangan NPM--Save-Dev @WordPress/Skrip
Kemudian, buat direktori dalam tema atau plugin anda untuk menyimpan kod blok, seperti /blocks/my-first-block/
.
Buat Struktur Asas: Blok Daftar dan Edit Komponen
Blok Gutenberg biasanya terdiri daripada dua bahagian: PHP digunakan untuk mendaftarkan blok , dan JavaScript digunakan untuk menentukan penampilan dan tingkah laku blok .
Seksyen PHP (Blok Pendaftaran)
Tambahkan kod berikut ke fail functions.php
tema anda, atau muatkannya dalam plugin:
fungsi daftar_my_first_block () { WP_REGISTER_SCRIPT ( 'blok saya-pertama', get_template_directory_uri (). '/blocks/my-first-block/build/index.js', Array ('WP-blocks', 'WP-Element') ); daftar_block_type ('my-plugin/first-block', array ( 'editor_script' => 'my-first-block', )); } add_action ('init', 'register_my_first_block');
Kod ini memberitahu WordPress di mana skrip JS untuk blok ini dan mendaftarkan jenis blok baru.
Bahagian JavaScript (Blok Definisi)
Tulis kandungan berikut di /blocks/my-first-block/src/index.js
:
const {registublocktype} = wp.blocks; const {richText} = wp.editor; DaftarBlockType ('my-plugin/first-block', { Tajuk: 'Blok Pertama Saya', Ikon: 'Smiley', Kategori: 'biasa', edit: () => { Kembali ( <Richtext tagName = "P" Pemegang tempat = "Masukkan beberapa teks ..." /> ); }, simpan: () => { kembali <richText.Content tagName = "p" value = "Ini adalah teks statik" />; }, });
Dengan cara ini anda membuat blok yang dapat anda lihat dalam editor.
Bina dan Jalankan: Menyusun fail JS dengan NPM
Blok Gutenberg memerlukan JavaScript untuk disusun menjadi format yang dapat dikenali oleh penyemak imbas. Anda boleh menggunakan alat skrip yang disediakan oleh WordPress untuk mengautomasikan proses ini.
Buat fail package.json
dalam direktori root projek dan tambahkan konfigurasi berikut:
{ "Nama": "blok saya-pertama", "Versi": "1.0.0", "Skrip": { "Bina": "WP-Cripts membina ./blocks/my-first-block/src/index.js" } }
Kemudian jalankan:
NPM Run Build
Selepas setiap kali anda mengubah suai fail JS, anda mesti menjalankan semula perintah build
untuk membuat perubahan berkuatkuasa.
Petua dan Soalan Lazim
Ikon tidak dapat dipaparkan? Anda boleh menggunakan nama ikon dalam dashicons WordPress .
Blok tidak dipaparkan? Semak sama ada JS menyusun dengan jayanya dan sama ada laluan pendaftaran PHP adalah betul.
Tidak mahu menyusun secara manual setiap masa? Anda boleh menambah -parameter
--watch
untuk mendengar perubahan fail dalam masa nyata dan membina secara automatik:NPX WP-Cripts Build ./blocks/my-first-block/src/index.js --Watch
Pada dasarnya itu sahaja. Kunci untuk mewujudkan blok Gutenberg dari awal adalah untuk memahami struktur asas blok dan bagaimana untuk menghubungkan sumber depan dan belakang. Walaupun nampaknya agak rumit, anda dapat dengan cepat memahami dengan hanya mengambil langkah demi langkah.
Atas ialah kandungan terperinci Cara Membuat Blok Gutenberg Mudah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undress AI Tool
Gambar buka pakaian secara percuma

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Clothoff.io
Penyingkiran pakaian AI

Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Cara yang paling berkesan untuk mengelakkan spam komen adalah untuk mengenal pasti dan memintasnya secara automatik melalui cara programatik. 1. Menggunakan mekanisme kod pengesahan (seperti Googler Captcha atau HCaptcha) untuk membezakan secara berkesan antara manusia dan robot, terutama yang sesuai untuk laman web awam; 2. Tetapkan bidang tersembunyi (teknologi honeypot), dan gunakan robot untuk mengisi ciri -ciri secara automatik untuk mengenal pasti komen spam tanpa menjejaskan pengalaman pengguna; 3. Semak senarai hitam Kata Kunci Kandungan Komen, maklumat spam penapis melalui pemadanan kata yang sensitif, dan perhatikan untuk mengelakkan salah faham; 4. Hakim kekerapan dan sumber IP komen, hadkan bilangan penyerahan per unit masa dan buat senarai hitam; 5. Gunakan perkhidmatan anti-spam pihak ketiga (seperti Akismet, CloudFlare) untuk meningkatkan ketepatan pengenalan. Boleh berdasarkan laman web

Apabila membangunkan blok gutenberg, kaedah aset enqueue yang betul termasuk: 1. Gunakan daftar_block_type untuk menentukan laluan editor_script, editor_style dan gaya; 2. Daftar sumber melalui wp_register_script dan wp_register_style dalam fungsi.php atau plug-in, dan tetapkan kebergantungan dan versi yang betul; 3. Konfigurasikan alat binaan untuk mengeluarkan format modul yang sesuai dan pastikan laluan itu konsisten; 4. Kawalan logik pemuatan gaya depan melalui add_theme_support atau enqueue_block_assets untuk memastikan logik pemuatan gaya front-end dipastikan.

Kunci untuk menambah peraturan penulisan semula tersuai di WordPress adalah dengan menggunakan fungsi add_rewrite_rule dan pastikan peraturan berkuatkuasa dengan betul. 1. Gunakan add_rewrite_rule untuk mendaftarkan peraturan, formatnya adalah add_rewrite_rule ($ regex, $ redirect, $ selepas), di mana $ regex adalah url yang sepadan dengan ungkapan biasa, $ redirect menentukan pertanyaan sebenar, dan $ selepas mengawal lokasi peraturan; 2. Pembolehubah pertanyaan tersuai perlu ditambah melalui add_filter; 3. Selepas pengubahsuaian, tetapan pautan tetap mesti disegarkan semula; 4. Adalah disyorkan untuk meletakkan peraturan di 'atas' untuk mengelakkan konflik; 5. Anda boleh menggunakan pemalam untuk melihat peraturan semasa untuk kemudahan

Robots.txt adalah penting untuk SEO laman web WordPress, dan boleh membimbing enjin carian untuk merangkak tingkah laku, mengelakkan kandungan pendua dan meningkatkan kecekapan. 1. Laluan sistem blok seperti /wp-admin /dan /wp-termasuk /, tetapi elakkan secara tidak sengaja menyekat /muat naik /direktori; 2. Tambah laluan sitemap seperti sitemap: https://yourdomain.com/sitemap.xml untuk membantu enjin carian dengan cepat menemui peta tapak; 3. Had / halaman / dan URL dengan parameter untuk mengurangkan sisa crawler, tetapi berhati -hati untuk tidak menyekat halaman arkib penting; 4. Elakkan kesilapan biasa seperti secara tidak sengaja menyekat seluruh tapak, pemalam cache yang mempengaruhi kemas kini, dan mengabaikan pemadanan terminal mudah alih dan subdomain.

WordPressRequiresatleastPhp7.4, everusing8.0orhigherisRecommendedforbetterperpormanceandsecurity.olderversionsLike5.6areoutdated, tidak disokong, danposesecurityrisks.usingupdatedphpimprovessecurity, enhanceProveSbloon, danSporureScatmance

Untuk memperkenalkan fail gaya dengan betul dalam tema atau plugin WordPress, anda harus menggunakan fungsi WP_ENQUEUE_STYLE (). 1. Gunakan wp_enqueue_style () untuk mendaftar dan memuatkan fail CSS. Struktur asas ialah WP_ENQUEUE_STYLE ($ mengendalikan, $ src, $ deps, $ ver, $ media), di mana $ mengendalikan adalah pengenal unik, $ SRC adalah URL fail CSS, $ DEPS adalah gaya ketergantungan, $ ver adalah nombor versi, dan media adalah jenis media; 2. Dengan meletakkan operasi enqueue dalam fail functions.php dan menggunakan wp_enqueue_script

InspectorControls adalah komponen yang digunakan dalam pembangunan Gutenberg untuk menambah kawalan tersuai di bar sisi kanan. 1. Ia tergolong dalam pakej @WordPress/Block-Editor. 2. Ia sering digunakan dengan panel, TextControl dan komponen lain. 3. Apabila menggunakannya, anda perlu memperkenalkan dan munasabah meletakkan jenis kawalan seperti kotak teks, pilihan pull-down, suis, slider dan pemilih warna dalam edit.js. 4. Perhatikan tetapan kumpulan, pastikan mereka mudah, menyokong pengantarabangsaan dan mengoptimumkan prestasi.

Ia tidak rumit untuk menambah tajuk tindak balas keselamatan di WordPress, dan boleh dilaksanakan melalui konfigurasi pelayan, pemalam keselamatan, atau CDN. 1. Tambahkan maklumat header seperti option X-Content-Type-Options, X-Frame-Options, dan lain-lain melalui fail konfigurasi Apache atau Nginx; 2. Gunakan pemalam seperti WordFence dan ithemessecurity untuk memudahkan tetapan; 3. Gunakan fungsi terbina dalam platform CDN seperti CloudFlare untuk mengkonfigurasi maklumat header global. Selepas konfigurasi, anda harus menggunakan SecurityHeaders.com atau Chromedevtools untuk menguji dan mengesahkan untuk memastikan ketepatan dan mendapatkan sekurang-kurangnya skor A-level, sambil memberi perhatian kepada sandaran dan pemahaman yang diaktifkan
