


Menguruskan WordPress Metadata di Gutenberg menggunakan plugin bar sisi
Apr 20, 2025 am 10:32 AMArtikel ini meneroka menguruskan metadata WordPress dalam editor Gutenberg menggunakan plugin bar sisi. Gutenberg, editor blok WordPress, mewakili jawatan sebagai koleksi blok. Walaupun metadata boleh diuruskan menggunakan blok, artikel ini memberi tumpuan kepada pengurusan sidebar untuk kegunaannya yang kerap. Tutorial ini mengandaikan kebiasaan dengan ReactJs dan Redux, kerana Gutenberg menggunakan teknologi ini.
Inti Gutenberg adalah aplikasi React. Semua elemen editor -tajuk, kawasan kandungan, bar alat, dan bar sisi -adalah komponen React. Keadaan aplikasi disimpan dalam objek JavaScript berpusat ("kedai") yang diuruskan oleh modul data WordPress, yang berkongsi persamaan dengan Redux. Kedai -kedai ini memegang data pos (kandungan, tajuk, kategori) dan maklumat laman web global (kategori, tag, jawatan). Mengubah suai kedai -kedai ini mengemas kini UI Gutenberg dan, setelah menyimpan, API REST WordPress mengemas kini pangkalan data.
Walau bagaimanapun, Gutenberg tidak menguruskan metadata melalui kedai -kedai global ini secara lalai. Walaupun Legacy PHP Metaboxes masih berfungsi, WordPress mengesyorkan untuk memindahkan mereka ke pendekatan JavaScript menggunakan kedai global dan komponen bertindak balas untuk pengalaman bersatu.
Mengakses dan mengubah suai kedai seperti Redux Gutenberg
Untuk mengakses kedai -kedai ini, buka konsol penyemak imbas anda di Editor Gutenberg dan gunakan wp.data
. Sebagai contoh, wp.data.select('core/editor').getBlocks()
mengambil blok dalam jawatan semasa. wp.data.select('core/editor').getEditedPostAttribute('title')
mengambil semula tajuk pos. Untuk menukar data, gunakan wp.data.dispatch()
. Sebagai contoh, wp.data.dispatch('core/editor').editPost({title: 'My new title'})
mengemas kini tajuk pos. Kedai-kedai lain yang berkaitan termasuk core
(Maklumat Laman Web Global) dan core/edit-post
(Editor UI State).
Membuat plugin WordPress untuk bar sisi gutenberg
Untuk menambah komponen sidebar React, buat plugin WordPress. Ini melibatkan menubuhkan folder plugin (misalnya, gutenberg-sidebar
), membuat fail plugin.php
(titik masuk plugin), dan menggunakan npm
untuk menguruskan dependensi JavaScript ( @wordpress/scripts
, @ @wordpress/i18n
@wordpress/edit-post
, @wordpress/components
, @wordpress @wordpress/plugins
@wordpress/data
plugin.php
enqueues bundle JavaScript yang dicipta oleh npm run build
.
Mendaftarkan plugin dan bar sisi gutenberg
Kod JavaScript (dalam src/index.js
) menggunakan registerPlugin
dari @wordpress/plugins
untuk mendaftarkan plugin. PluginSidebar
dan PluginSidebarMoreMenuItem
dari @wordpress/edit-post
Buat bar sisi dan item menu untuk bertukar-tukarnya.
Mengendalikan metadata dalam editor klasik
Tutorial menunjukkan pengurusan metadata dalam editor klasik menggunakan php metaboxes dan fungsi seperti add_meta_box
, get_post_meta
, update_post_meta
, dan wp_verify_nonce
. Pilihan __back_compat_meta_box
menyembunyikan metabox apabila gutenberg aktif.
Menguruskan metadata dengan JavaScript
Untuk menguruskan medan tersuai (misalnya, _myprefix_text_metafield
) di Gutenberg menggunakan JavaScript, daftar medan menggunakan register_meta
dengan show_in_rest: true
, sanitize_callback
, dan auth_callback
untuk membenarkan kemas kini api. Gunakan wp.data.select('core/editor').getEditedPostAttribute('meta')
untuk mengambil semula dan wp.data.dispatch('core/editor').editPost({meta: {_myprefix_text_metafield: 'new value'}})
Membuat komponen React
Komponen React ( PluginMetaFields
) dicipta menggunakan PanelBody
dan TextControl
dari @wordpress/components
. withSelect
dan withDispatch
dari @wordpress/data
Sambungkan komponen ke kedai seperti Redux, membolehkan pengambilan data dan kemas kini. Acara onChange
menghantar kemas kini ke kedai. Akhirnya, komponen ColorPicker
ditambah untuk menunjukkan menggunakan komponen lain dari @wordpress/components
. Kod lengkap boleh didapati di GitHub.
Atas ialah kandungan terperinci Menguruskan WordPress Metadata di Gutenberg menggunakan plugin bar sisi. 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)

Topik panas

CSS Blok halaman yang diberikan kerana pelayar melihat CSS dalam talian dan luaran sebagai sumber utama secara lalai, terutamanya dengan stylesheet yang diimport, header sejumlah besar CSS sebaris, dan gaya pertanyaan media yang tidak dapat dioptimumkan. 1. Ekstrak CSS kritikal dan membenamkannya ke HTML; 2. Kelewatan memuatkan CSS bukan kritikal melalui JavaScript; 3. Gunakan atribut media untuk mengoptimumkan pemuatan seperti gaya cetak; 4. Memampatkan dan menggabungkan CSS untuk mengurangkan permintaan. Adalah disyorkan untuk menggunakan alat untuk mengekstrak CSS utama, menggabungkan REL = "Preload" pemuatan asynchronous, dan menggunakan media yang ditangguhkan dengan munasabah untuk mengelakkan pemisahan yang berlebihan dan kawalan skrip kompleks.

AutoPrefixer adalah alat yang secara automatik menambah awalan vendor ke atribut CSS berdasarkan skop penyemak imbas sasaran. 1. Ia menyelesaikan masalah mengekalkan awalan secara manual dengan kesilapan; 2. Bekerja melalui borang pemalam postcss, menghuraikan CSS, menganalisis atribut yang perlu diawali, dan menjana kod mengikut konfigurasi; 3. Langkah-langkah penggunaan termasuk memasang pemalam, menetapkan senarai pelayar, dan membolehkan mereka dalam proses membina; 4. Nota termasuk tidak menambah awalan secara manual, menyimpan kemas kini konfigurasi, awalan tidak semua atribut, dan disyorkan untuk menggunakannya dengan preprocessor.

Function-gradient () functionIncsscreatesculculargradientsthatrotatecolorstopsaroundroentroint.1.ISIISIDEALFORPIECHARTS, Progressindicators, Colorwheels, andDecorativeBackgrounds.2.itworksByDefiningColorStopsatSpecificles, OpsticalStarting

TOCREATESTICKYHEADERSANDFOOTERSWITHCSS, USEPOSISI: STICKYFORHEADERSWITHOPVARUEANDZ-INDEX, MemastikanParentContainersdon'Trestrictit.1.ForstickyHeaders: SetPosition: Sticky, atas: 0, Z-index, dan BEBERKOORSICHISTORS.2.FORTOORSTICE: FORBORTORSIS.2.FORTORSICHORORS.

Skop sifat adat CSS bergantung kepada konteks perisytiharan mereka, pembolehubah global biasanya ditakrifkan dalam: akar, manakala pembolehubah tempatan ditakrifkan dalam pemilih khusus untuk komponen dan pengasingan gaya. Sebagai contoh, pembolehubah yang ditakrifkan dalam kelas .card hanya tersedia untuk unsur -unsur yang sepadan dengan kelas dan anak -anak mereka. Amalan terbaik termasuk: 1. Penggunaan: Root untuk menentukan pembolehubah global seperti warna topik; 2. Tentukan pembolehubah tempatan di dalam komponen untuk melaksanakan enkapsulasi; 3. Elakkan berulang kali mengisytiharkan pemboleh ubah yang sama; 4. Beri perhatian kepada masalah liputan yang mungkin disebabkan oleh kekhususan pemilih. Di samping itu, pembolehubah CSS adalah sensitif kes dan harus ditakrifkan sebelum digunakan untuk mengelakkan kesilapan. Jika pemboleh ubah tidak ditentukan atau rujukan gagal, nilai sandaran atau nilai awal lalai akan digunakan. Debug boleh dilakukan melalui pemaju penyemak imbas

Thfrunitincssgriddistributesavailablespaceproportionally.1.itworksbydividingspaceBasedOnthesumoffrvalues, mis., 1fr2frgivesone-thirdandtwo-thirds.2.itenablesflexiBlelayouts, evercomeShonShonShon.3SoSheShon.3.

Mudah alih-firstcssdesignrequiressettingtheViewportmetatag, menggunakan pelindung, stylingfromsmallscreensup, optimizingtypographyandtouchtargets.first, addtocontrolscaling.second, use%, eM, orreminsteadofpixelflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflex

Ya, anda boleh menggunakan Flexbox dalam item CSSGRID. Pendekatan khusus adalah untuk terlebih dahulu membahagikan struktur halaman dengan grid dan menetapkan subkontainer ke dalam sel grid sebagai bekas flex untuk mencapai penjajaran dan susunan yang lebih baik; Sebagai contoh, sarang div dengan paparan: gaya flex dalam html; Manfaat untuk melakukan ini termasuk susun atur hierarki, reka bentuk responsif yang lebih mudah, dan pembangunan komponen yang lebih mesra; Perlu diperhatikan bahawa atribut paparan hanya mempengaruhi elemen kanak -kanak langsung, mengelakkan bersarang yang berlebihan, dan menganggap isu keserasian pelayar lama.
