วิธีใส่ CSS ให้กับ Gutenberg Editor

ads

วันก่อนเห็นโพสต์ในกลุ่ม WordPress Bangkok ที่พี่เม่นทำเว็บให้ readthecloud.co ด้วย WordPress แล้วใช้ Gutenberg เป็น editor หลัก แล้วสามารถใส่ CSS ให้แสดงเนื้อหาให้เหมือนกันกับหน้าเว็บได้เลย ก็เลยสนใจ…

วันนี้เลยส่งเมสเสจไปถามพี่เม่นเลยว่าทำยังไง พี่เม่นบอก สามารถค้น Gutenberg css ได้เลยครับ และส่งลิ้งก์ตัวอย่างมาให้ เช่น https://rudrastyh.com/gutenberg/css.html ทีนี้ก็เลยคุ้นๆกับที่ค้นอยู่เมื่อคืนครับ https://richtabor.com/add-wordpress-theme-styles-to-gutenberg/ ก็จะทะยอยอ่านไปใช้ แล้วจะค่อยๆแปลมาให้อ่านกันครับ

เราต้องก๊อปปี้ css จากธีมเรามาใส่ใน style-editor.css ด้วย - พี่เม่นเสริมว่า  ต้องเงือกที่เกี่ยวกับตรงนี้ครับ ส่วนใหญ่ก็ฟอนต์ สี ความกว้าง 

อะ มาเริ่มกันที่การเริ่มต้นครับ คือเราจะต้องกำหนดให้ธีมของเราสามารถเพิ่ม CSS ให้กับตัว Gutenberg Editor ให้ได้ก่อน

ให้เข้าไปที่ไฟล์ function.php ของธีมที่กำลังแก้ไขอยู่ครับ แล้วให้ใส่โค้ดแบบที่อยู่ด้านล่างนี้เข้าไป

add_action( ‘after_setup_theme’, ‘theeravat_gutenberg_css’ );function theeravat_gutenberg_css(){   add_theme_support( ‘editor-styles’ ); add_editor_style( ‘style-editor.css’ );   }

ads

ads

ads

ads