วิธีเพิ่มตัวเลือกสไตล์กำหนดเองใน WordPress Post Editor

Post Editor ใน WordPress ตามชื่อหมายถึงการให้แก้ไขโพสต์และเนื้อหา โดยค่าเริ่มต้นไม่ได้อนุญาตให้เพิ่ม CSS Classes กำหนดเอง หากต้องการเพิ่ม CSS styles หรือ classes แบบกำหนดเอง วิธีเดียวคือสลับไปโหมด "Text" และเพิ่มในโค้ด HTML

เนื่องจาก WordPress ปรับแต่งได้มาก มีวิธีทำให้ชีวิตง่ายขึ้นโดยเพิ่มตัวเลือกสไตล์กำหนดเองใน WordPress Post Editor ด้วยตัวเลือกเหล่านี้ คุณสามารถใช้ CSS styles ได้แค่คลิกไม่กี่ครั้ง ไม่ต้องสลับไปโหมด Text หรือจำ CSS classes ทั้งหมดที่ใส่ในโพสต์เพื่อให้ดูสวยขึ้น

มี 2 วิธีเพิ่มตัวเลือกสไตล์กำหนดเองใน WordPress Post Editor วิธีแรกใช้ปลั๊กอินฟรี วิธีที่สองเพิ่มโค้ดสนิปเป็ต ทั้งสองวิธีทำงานคล้ายกัน เลือกวิธีที่สะดวก

หมายเหตุ: ก่อนเริ่ม ขอสมมติว่าคุณรู้ HTML และ CSS พื้นฐาน และเข้าใจสิ่งต่างๆ เช่น CSS classes, block-level elements, HTML elements, attributes ฯลฯ

1. ใช้ปลั๊กอิน (Plugin)

วิธีง่ายที่สุดคือใช้ปลั๊กอินชื่อ TinyMCE Custom Styles

จุดดีของปลั๊กอินนี้คือสร้าง Editor Stylesheet อัตโนมัติที่คุณสามารถเพิ่ม CSS styles กำหนดเองได้ นี่มีประโยชน์มากเมื่อต้องการดูสไตล์ Front-end ที่เกี่ยวกับลิงก์ รูปภาพ ฟอร์ม ปุ่ม ฯลฯ ใช้งานภายใน Post Editor

1. ดาวน์โหลด ติดตั้ง และเปิดใช้งาน TinyMCE Custom Styles เหมือนปลั๊กอิน WordPress ทั่วไป หลังเปิดใช้งาน ไปหน้าตั้งค่าปลั๊กอินที่ "Settings → TinyMCE Custom Styles"
2. ทันทีปลั๊กอินจะแสดงข้อความผิดพลาดขอให้เลือกว่าต้องการวางไฟล์ Editor Stylesheet ที่ไหน ขึ้นกับธีมของคุณ มี 3 ตัวเลือก อ่านละเอียดและเลือกที่เหมาะสม ในกรณีของผมเลือกตัวเลือกที่ 2 เพราะใช้ Genesis Child Theme แบบกำหนดเอง คลิก "Save all Settings"
3. เลื่อนลงและคลิกปุ่ม "Add new style" ตอนนี้ ใส่ชื่อสไตล์ เลือกประเภท (inline, block, หรือ selector) ใส่ค่าประเภท และ CSS class
4. ด้านขวาสุด อย่าลืมเลือกว่าองค์ประกอบเป็น "Wrapper" หรือไม่ หากเลือก ตัวเลือกนี้จะสร้าง Block-level element ใหม่รอบ Block-level element ที่เลือกใน Post Editor
5. หากต้องการ สามารถเพิ่ม CSS styles กำหนดเองโดยตรงโดยคลิก "Add new style" ภายใต้หมวด "CSS Styles" อย่างไรก็ตาม แนะนำให้เพิ่มสไตล์เหล่านั้นในไฟล์ "editor-style.css" ในไดเรกทอรีธีม (หากเลือกตัวเลือกที่ 2 เช่นผมในขั้นตอนที่ 2) ทำให้จัดการง่าย
6. เมื่อเสร็จแล้ว คลิก "Save all settings" ที่ท้ายหน้า
7. เสร็จแล้ว ตั้งแต่ตอนนี้จะเห็นเมนูแบบดรอปดาวน์ใหม่ชื่อ "Formats" ใน Post Editor ในเมนูนั้นจะหาตัวเลือกสไตล์กำหนดเองที่เพิ่งเพิ่ม พร้อมตัวเลือกที่ตั้งค่าไว้ก่อนหน้า ในการใช้งานสไตล์ คลิกที่มัน โค้ด CSS ที่จำเป็นจะถูกเพิ่มเข้า Post Editor อัตโนมัติ มองเห็นโค้ดในโหมด Text
8. หากเพิ่มสไตล์ที่จำเป็นใน editor-style.css แล้ว สไตล์เหล่านั้นจะสะท้อนใน Post Editor เมื่อใช้ตัวเลือกสไตล์จากเมนูแบบดรอปดาวน์

ในอนาคตหากปิดใช้งานหรือลบปลั๊กอิน Editor Stylesheet จะไม่ถูกลบ แต่จะเข้าถึงตัวเลือกกำหนดเองใน Post Editor ไม่ได้อีกต่อไป

2. วิธี Manual (เพิ่มโค้ดด้วยตนเอง)

หากไม่ชอบใช้ปลั๊กอิน สามารถทำได้เหมือนกันโดยเพิ่มโค้ดสนิปเป็ตง่ายๆ ในไฟล์ "functions.php" มี 2 ส่วน: ส่วนหนึ่งสำหรับเพิ่มปุ่มใน Toolbar เพื่อแทรกโค้ด CSS และอีกส่วนทำให้ CSS style ทำงานใน Post Editor

เพิ่มปุ่ม Custom CSS Style ใน Toolbar

เพิ่มโค้ดต่อไปนี้ท้ายไฟล์ "functions.php" โค้ดนี้จริงๆ มาจาก WordPress เอง

// Callback function to insert 'styleselect' into the $buttons array
function my_mce_buttons_2( $buttons ) {
    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}
// Register our callback to the appropriate filter
add_filter( 'mce_buttons_2', 'my_mce_buttons_2' );

// Callback function to filter the MCE settings
function my_mce_before_init_insert_formats( $init_array ) {
    // Define the style_formats array
    $style_formats = array(
        // Each array child is a format with it's own settings
        array(
            'title' => '.translation',
            'block' => 'blockquote',
            'classes' => 'translation',
            'wrapper' => true,
        ),
        array(
            'title' => '⇠.rtl',
            'block' => 'blockquote',
            'classes' => 'rtl',
            'wrapper' => true,
        ),
        array(
            'title' => '.ltr⇢',
            'block' => 'blockquote',
            'classes' => 'ltr',
            'wrapper' => true,
        ),
    );
    // Insert the array, JSON ENCODED, into 'style_formats'
    $init_array['style_formats'] = json_encode( $style_formats );
    return $init_array;
}
// Attach callback to 'tiny_mce_before_init'
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );

ต้องปรับโค้ดให้สะท้อนตัวเลือกสไตล์ของคุณ ในโค้ดข้างต้น แต่ละอาร์เรย์คือตัวเลือกสไตล์แยกกัน ใส่ชื่อสไตล์ถัดจาก "title" ประเภทบล็อกถัดจาก "block" CSS class ถัดจาก "classes" และหากองค์ประกอบเป็น Wrapper พิมพ์ "true" ถัดจาก "wrapper" หากไม่ใช่ พิมพ์ "false"

เมื่อต้องการเพิ่มตัวเลือกสไตล์ใหม่ เพียงคัดลอกอาร์เรย์และแก้ไขฟิลด์ ในกรณีของผม ผมใส่อาร์เรย์แรกให้สะท้อนตัวเลือก "Blue Button" ของผม

เมื่อปรับแต่งเสร็จ บันทึกและอัปโหลด "functions.php" ที่แก้ไขแล้วขึ้นเซิร์ฟเวอร์

สร้าง Editor Stylesheet

สร้างไฟล์ชื่อ "editor-style.css" เพิ่ม CSS styles ที่เกี่ยวข้องที่ต้องการเห็นใน Post Editor อย่าลืมว่า CSS classes ที่สร้างใน "editor-style.css" ควรตรงกับ CSS classes ในโค้ดตัวเลือกสไตล์ข้างต้น

เปิด "functions.php" ของธีม และเพิ่มโค้ดต่อไปนี้

// Add custom editor stylesheet
function mte_add_editor_styles() {
    add_editor_style( 'editor-style.css' );
}
add_action( 'init', 'mte_add_editor_styles' );

อัปโหลดทั้ง "editor-style.css" และ "functions.php" ขึ้นเซิร์ฟเวอร์ นี่คือทั้งหมดที่ต้องทำ ตั้งแต่ตอนนี้สามารถใช้ตัวเลือกสไตล์กำหนดเองจาก WordPress Post Editor ได้

สามารถเห็นสไตล์ที่ใช้งานแบบเรียลไทม์

แสดงความคิดเห็นและประสบการณ์เกี่ยวกับวิธีการเพิ่มตัวเลือกสไตล์กำหนดเองใน WordPress Post Editor ด้านล่างได้เลย