Buat penampilan editor blok WordPress selaras dengan reka bentuk front-end!

Sebagai pengguna WordPress, adakah anda sering perlu membuka dua tab pada masa yang sama untuk penyuntingan artikel? Satu tab menunjukkan editor Blok Gutenberg baru, dan pratonton lain kesan depan artikel untuk memastikan bahawa rendering akhir tidak salah?

Gaya tema WordPress hanya menjejaskan hujung depan laman web, dan editor backend biasanya sangat berbeza dari hujung depan. Tetapi ini tidak boleh ditukar! Dengan lembaran gaya tersuai, anda boleh membuat cermin editor WordPress kelihatan hampir sempurna.

Ini hanya memerlukan dua langkah mudah:

1. Tambah beberapa baris kod PHP ke fail functions.php tema untuk memaklumkan editor untuk memuatkan lembaran gaya tersuai.
2. Buat dan konfigurasikan lembaran gaya tersuai ini.

Mari mulakan!

Langkah 1: Ubah suai fail functions.php

Sekiranya anda menggunakan tema WordPress yang tidak dibangunkan, sangat disyorkan bahawa anda membuat sub-tema sebelum membuat sebarang pengubahsuaian kepada tema utama.

Buka fail functions.php tema.php (biasanya terletak di direktori root folder tema) dan tambahkan kod berikut pada akhir fail:

 // Gutenberg Custom Stylesheet add_theme_support ('editor-styles');
add_editor_style ('editor-style.css'); // pastikan jalan betul menunjuk ke fail stylesheet

Kod ini memberitahu WordPress bahawa anda menyokong menggunakan stylesheets tersuai untuk bekerja dengan Gutenberg dan menentukan lokasi fail stylesheet ( editor-style.css ).

Langkah 2: Tulis Gaya CSS

Sekarang, kami memasuki proses penulisan CSS.

Oleh kerana pelbagai tema WordPress, adalah mustahil untuk menulis lembaran gaya yang berfungsi untuk semua tema. Contoh berikut adalah berdasarkan topik yang digunakan oleh laman web saya dan diharapkan dapat membantu anda memahami cara membina helaian gaya untuk laman web anda. Pada akhir artikel, templat akan disediakan untuk membantu anda memulakan dengan cepat.

Buat fail baru bernama editor-style.css dan letakkan di direktori root tema (atau direktori tema kanak-kanak).

Gaya CSS editor blok sedikit berbeza daripada CSS standard. Sebagai contoh, kod berikut tidak dapat menggunakan saiz teks dengan betul dalam artikel:

 H2 {
  saiz font: 1.75EM;
}

Untuk menetapkan gaya dengan betul, anda perlu mencari blok dalam editor blok. Ini bermaksud<h2></h2> Unsur .rich-text.block-editor-rich-text__editable unsur perlu dijangkiti menggunakan kelas.

 h2.rich-text.block-editor-rich-text__edable {
  saiz font: 1.75EM;
}

Saya telah membuat fail CSS asas yang mengikuti corak ini untuk gaya elemen editor blok biasa. Anda boleh mendapatkan fail dari GitHub dan menggantikan gaya untuk memadankan tema anda.

Saya tidak akan memperluaskan proses membina stylesheet secara terperinci di sini, tetapi template harus memberi anda idea yang jelas. Titik permulaan yang baik adalah untuk menyalin elemen dari lembaran gaya depan anda, tetapi anda mungkin perlu menukar beberapa kelas elemen supaya ia memohon kepada tetingkap editor Blok.

Jika ragu -ragu, gunakan alat pemaju penyemak imbas untuk memeriksa unsur -unsur dan menentukan nama kelas yang sepadan. Templat untuk pautan di atas harus meliputi kebanyakan elemen.

Paparan kesan

Pertama, mari kita lihat editor WordPress tanpa lembaran gaya tersuai:

Kemudian, bandingkan laman web ujian saya:

Perbezaan antara keduanya adalah penting, bukan? Tapak ujian saya menggunakan banyak kecerunan, fon tersuai, gaya butang, dan blok rujukan, dan bekas bukan persegi mudah.

Suka atau tidak, anda akan bersetuju bahawa ini adalah perbezaan besar dari UI Editor Gutenberg lalai. Inilah sebabnya saya perlu membuka halaman tab secara berasingan untuk melihat pratonton artikel.

Sekarang, mari muat gaya tersuai dan lihat kesannya:

Lihat! UI editor kini kelihatan hampir sama dengan hujung depan laman web saya. Lebar kandungan, fon, warna dan pelbagai elemen selaras dengan hujung depan. Saya juga mempunyai latar belakang yang sama seperti tajuk artikel!

Ini bermakna - tidak lagi perlu pratonton dalam tab lain. Bukankah itu sejuk?

Menjaga editor WordPress selaras dengan penampilan depan dapat meningkatkan kecekapan. Bagi saya, kerap menukar tab untuk melihat kesan front-end apabila mengedit artikel akan mengganggu pemikiran saya, jadi saya lebih suka mengelakkannya.

Semoga langkah -langkah di atas dapat membantu anda mencapai kesan yang sama!

Atas ialah kandungan terperinci Mendapatkan Editor Blok WordPress untuk kelihatan seperti reka bentuk akhir depan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!