ปิดการใช้งาน: ธีมไม่เพิ่มไฟล์สไตล์ชีตชื่อ editor-style.css?

เพื่อนของฉันคนหนึ่งที่อยากทำการตลาดออนไลน์เพิ่งเริ่มเรียนรู้วิธีสร้างเว็บไซต์โดยใช้ WordPress

เปิดใช้งานปลั๊กอินตัวแก้ไข TinyMCE ในการตั้งค่าของปลั๊กอินตัวแก้ไข TinyMCE พบปัญหาดังกล่าว▼

สร้างเมนูสไตล์ CSS

• โหลดสไตล์ CSS ที่ใช้ใน editor-style.css และแทนที่เมนูรูปแบบ
• ปิดใช้งาน: ไฟล์สไตล์ชีตสำหรับ editor-style.css
• ปิดใช้งาน: ไฟล์สไตล์ชีตชื่อ editor-style.css ไม่ได้ถูกเพิ่มโดยธีมของคุณ

หากสถานการณ์ข้างต้นเกิดขึ้น โปรแกรมแก้ไขภาพของ WordPress อาจไม่สามารถแสดงรูปแบบโค้ดที่เราต้องการได้ เช่น:

• blockquote, ก่อน, รหัส...

แก้ไขปัญหา

1. ขออนุญาตeditor-style.cssไฟล์อยู่ในไดเร็กทอรีรากของธีม WordPress หรือไม่
2. คุณใช้ธีมลูก (เด็ก) หรือไม่?

เมื่อเราแก้ไขโพสต์ในแผงควบคุมผู้ดูแลระบบ WordPressการแสดงผลด้านหน้าและด้านหลังเว็บไซต์จะแตกต่างกันเนื่องจากปัญหาเกี่ยวกับสไตล์ CSS…

แต่หลังจาก Wordpress 3.0 ก็มีคุณสมบัติที่ดีมาก:

• นั่นคือ สไตล์ด้านหน้าและด้านหลังสามารถรวมเป็นหนึ่งเดียว ดังนั้นเมื่อ Wordpress แก้ไขบทความในพื้นหลัง ก็จะมีลักษณะเหมือนกับด้านหน้าได้เช่นกัน
• ในทำนองเดียวกัน เราไม่จำเป็นต้องแก้ไขโพสต์ที่แก้ไขในแบ็กเอนด์ของ WordPress อีกต่อไป เนื่องจากจะแสดงแตกต่างจากส่วนหน้า

หากเราเปิดธีมเริ่มต้นของ Wordpress Twenty Eleven เราจะเห็นว่ามีความคิดเห็นและโค้ด html แบบนี้ ▼

//此主题使用editor-style.css为可视化编辑器设置样式，以匹配主题样式
add_editor_style();

• ความคิดเห็นนี้หมายถึงอะไร: ตัวแก้ไขภาพตรงกับสไตล์ตัวแก้ไขธีม-style.css
• ฟังก์ชันนี้ใช้งานง่ายมาก เนื่องจากเป็นฟังก์ชันเริ่มต้นของ WordPress เราเพียงแค่ต้องเปิดใช้งาน

โพสต์ WordPress แสดงรูปแบบข้อความเดียวกันกับส่วนหน้าอย่างไร

ขั้นตอนที่ 1:สร้างไฟล์ editor-style.css

ขั้นตอนที่ 2:เพิ่มโค้ดต่อไปนี้ลงในไฟล์ editor-style.css ▼

@import url('../style.css');

body {
margin: 14px;
max-width: 702px;
}

.post-content {
font-size: 14px;
}

ขั้นตอนที่ 3:คัดลอกไฟล์ editor-style.css ไปยังไดเร็กทอรีหลักของธีม WordPress ของคุณ

ขั้นตอนที่ 4 :เพิ่มโค้ดต่อไปนี้ลงในไฟล์ functions.php ▼

//此主题使用editor-style.css为可视化编辑器设置样式，以匹配主题样式 
add_action( 'after_setup_theme', 'my_theme_setup' );
function my_theme_setup() {
add_editor_style();

// 对于块编辑器
add_theme_support( 'editor-styles' );
}

ขั้นตอนที่ 5:รีเฟรชหน้าแก้ไขโพสต์ WordPress

• ตรวจสอบและยืนยันว่ารูปแบบข้อความที่ด้านหน้าและด้านหลังของ WordPress เหมือนกันหรือไม่?

注意事项

หากธีม WordPress ของคุณไม่ได้เพิ่มสไตล์ CSS ให้กับ "quote tag blockquote" และ "code tag pre/code" คุณต้องเพิ่มโค้ด CSS ที่เกี่ยวข้องลงในไฟล์ style.css ของธีม WordPress

สำหรับรายละเอียด โปรดดูบทแนะนำการสร้างเว็บไซต์ต่อไปนี้ ▼

🔗วิธีใช้ Blockquote? สาธิตผลของแท็ก blockquote ใน HTML

🔗Pre ในสไตล์ CSS คืออะไร? ฟังก์ชั่นของแท็กโค้ดตัดบรรทัดอัตโนมัติใน HTML