เครื่องมือแก้ไขบทความใน WordPress ตามชื่อของมัน มีไว้เพื่อให้คุณแก้ไขบทความและเนื้อหาได้ โดยค่าเริ่มต้น จะไม่อนุญาตให้คุณเพิ่มในคลาส CSS ที่กำหนดเอง หากคุณต้องการเพิ่มสไตล์หรือคลาส CSS ที่กำหนดเอง วิธีเดียวคือเปลี่ยนไปใช้โหมด "ข้อความ" และเพิ่มลงในโค้ด HTML
เนื่องจาก WordPress สามารถปรับแต่งได้ มีวิธีทำให้ชีวิตของคุณง่ายขึ้นโดยการเพิ่มตัวเลือกรูปแบบที่กำหนดเองลงในตัวแก้ไขบทความของ WordPress คุณสามารถใช้สไตล์ CSS ได้ด้วยการคลิกเพียงไม่กี่ครั้งโดยใช้ตัวเลือกที่กำหนดเอง คุณไม่จำเป็นต้องเปลี่ยนไปใช้โหมดข้อความหรือจำคลาส CSS ทั้งหมดที่รวมอยู่ในโพสต์ของคุณเพื่อทำให้ดูดีขึ้น
คุณสามารถเพิ่มตัวเลือกรูปแบบที่กำหนดเองลงในโปรแกรมแก้ไขบทความของ WordPress ได้หลายวิธี อันแรกคือการใช้ปลั๊กอินฟรี และอันที่สองคือการเพิ่มข้อมูลโค้ด ทั้งสองวิธีทำงานคล้ายกันมาก ดังนั้นให้ทำตามที่คุณสะดวก
หมายเหตุ :ก่อนดำเนินการต่อ ฉันคิดว่าคุณรู้ HTML พื้นฐานและ CSS และสามารถเข้าใจสิ่งต่างๆ เช่น คลาส CSS, องค์ประกอบระดับบล็อก, องค์ประกอบ HTML, คุณลักษณะ ฯลฯ
1. การใช้ปลั๊กอิน
วิธีที่ง่ายที่สุดในการเพิ่มตัวเลือกรูปแบบที่กำหนดเองในตัวแก้ไขบทความของ WordPress คือการใช้ปลั๊กอินที่เรียกว่า TinyMCE Custom Styles
ข้อดีของปลั๊กอินนี้คือ มันสร้างสไตล์ชีตตัวแก้ไขโดยอัตโนมัติ ซึ่งคุณสามารถเพิ่มสไตล์ CSS ที่กำหนดเองได้ สิ่งนี้มีประโยชน์มากเมื่อคุณต้องการดูสไตล์ส่วนหน้าที่เกี่ยวข้องกับลิงก์ รูปภาพ แบบฟอร์ม ปุ่ม ฯลฯ นำไปใช้ในเครื่องมือแก้ไขบทความ
1. ในการเริ่มต้น ดาวน์โหลด ติดตั้ง และเปิดใช้งาน TinyMCE Custom Styles เช่นเดียวกับปลั๊กอิน WordPress อื่นๆ หลังจากเปิดใช้งานแล้ว ให้ไปที่หน้าการตั้งค่าปลั๊กอินโดยไปที่ "การตั้งค่า -> สไตล์ที่กำหนดเองของ TinyMCE"
2. ทันทีที่ค้างคาว ปลั๊กอินจะแสดงข้อความแสดงข้อผิดพลาดที่ขอให้คุณเลือกตำแหน่งที่คุณต้องการวางไฟล์สไตล์ชีตของตัวแก้ไข คุณสามารถเลือกระหว่างสามตัวเลือกทั้งนี้ขึ้นอยู่กับธีมของคุณ อ่านตัวเลือกเหล่านั้นอย่างระมัดระวัง และเลือกตัวเลือกที่เหมาะสมกับคุณ ในกรณีของฉัน ฉันเลือกตัวเลือกที่สองเพราะฉันใช้ธีมลูกของ Genesis แบบกำหนดเอง คลิกที่ปุ่ม “บันทึกการตั้งค่าทั้งหมด” เพื่อบันทึกการเปลี่ยนแปลง
3. เลื่อนลงมาและคลิกที่ปุ่ม "เพิ่มรูปแบบใหม่" ตอนนี้ ป้อนชื่อสไตล์ เลือกประเภท (เช่น อินไลน์ บล็อก หรือตัวเลือก) ป้อนค่าของประเภท แล้วเลือกคลาส CSS
4. ทางด้านขวาสุด อย่าลืมเลือกว่าองค์ประกอบนั้นเป็น "Wrapper" หรือไม่ หากคุณเลือกตัวเลือกนี้ สไตล์จะสร้างองค์ประกอบระดับบล็อกใหม่รอบๆ องค์ประกอบระดับบล็อกที่เลือกในตัวแก้ไขโพสต์
5. หากคุณต้องการคุณสามารถเพิ่มสไตล์ CSS ที่กำหนดเองได้โดยตรงโดยคลิกที่ "เพิ่มสไตล์ใหม่" ที่ปรากฏภายใต้หมวดหมู่ "สไตล์ CSS" อย่างไรก็ตาม เราขอแนะนำให้คุณเพิ่มสไตล์เหล่านั้นในไฟล์ “editor-style.css” ที่อยู่ในไดเร็กทอรีธีมของคุณ (หากคุณเลือกตัวเลือกที่สองเช่นฉันในขั้นตอนที่สอง) ทำให้ง่ายต่อการจัดการ
6. เมื่อเสร็จแล้ว ให้คลิกที่ปุ่ม “บันทึกการตั้งค่าทั้งหมด” ที่ปรากฏที่ส่วนท้ายของหน้า
7. แค่นั้นแหละ จากนี้ไปคุณจะเห็นเมนูดรอปดาวน์ใหม่ที่ชื่อว่า "รูปแบบ" ในตัวแก้ไขบทความ ในเมนูดรอปดาวน์นั้น คุณจะพบตัวเลือกรูปแบบที่กำหนดเองที่เพิ่มเข้ามาใหม่พร้อมกับตัวเลือกอื่นๆ ที่กำหนดค่าไว้ล่วงหน้า ในการใช้สไตล์ เพียงคลิกที่มัน และโค้ด CSS ที่จำเป็นจะถูกเพิ่มไปยังเครื่องมือแก้ไขบทความโดยอัตโนมัติ คุณเห็นรหัสนั้นในโหมดข้อความ
8. หากคุณได้เพิ่มสไตล์ที่จำเป็นลงในไฟล์ editor-style.css สไตล์เหล่านั้นจะปรากฏในตัวแก้ไขบทความเมื่อคุณใช้ตัวเลือกรูปแบบจากเมนูแบบเลื่อนลง
ในอนาคต หากคุณปิดใช้งานหรือลบปลั๊กอิน สไตล์ชีตของตัวแก้ไขจะไม่ถูกลบ อย่างไรก็ตาม คุณไม่สามารถเข้าถึงตัวเลือกที่กำหนดเองในเครื่องมือแก้ไขบทความได้อีกต่อไป
2. วิธีการด้วยตนเอง
หากคุณไม่ชอบใช้ปลั๊กอิน คุณสามารถทำสิ่งเดียวกันได้โดยการเพิ่มข้อมูลโค้ดง่ายๆ ลงในไฟล์ "functions.php" ของคุณ มีสองส่วนในส่วนนี้ ส่วนแรกใช้สำหรับเพิ่มปุ่มลงในแถบเครื่องมือเพื่อแทรกโค้ด CSS และส่วนที่สองคือทำให้รูปแบบ CSS ใช้งานได้ในตัวแก้ไขบทความ
เพิ่มปุ่มสไตล์ CSS ที่กำหนดเองลงในแถบเครื่องมือ
เพิ่มข้อมูลต่อไปนี้ต่อท้ายไฟล์ “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' ); คุณต้องปรับแต่งโค้ดเพื่อแสดงตัวเลือกสไตล์ของคุณ ในโค้ดด้านบนนี้ แต่ละอาร์เรย์จะมีตัวเลือกรูปแบบที่แยกจากกัน ป้อนชื่อสไตล์ของคุณถัดจาก "ชื่อ" ประเภทบล็อกถัดจาก "บล็อก" คลาส CSS ถัดจาก "คลาส" และหากองค์ประกอบนั้นเป็น wrapper ให้พิมพ์ "จริง" ถัดจาก "wrapper" หากไม่ใช่ ให้พิมพ์ “เท็จ”
เมื่อใดก็ตามที่คุณต้องการเพิ่มตัวเลือกรูปแบบใหม่ เพียงแค่ทำซ้ำอาร์เรย์และแก้ไขฟิลด์ ในกรณีของฉัน ฉันใส่อาร์เรย์แรกเพื่อแสดงตัวเลือก "ปุ่มสีน้ำเงิน"
เมื่อคุณปรับแต่งเสร็จแล้ว ให้บันทึกและอัปโหลดไฟล์ “functions.php” ที่แก้ไขแล้วไปยังเซิร์ฟเวอร์ของคุณ
สร้างสไตล์ชีตเอดิเตอร์
สร้างไฟล์ชื่อ "editor-style.css" ตอนนี้ เพิ่มสไตล์ CSS ที่เกี่ยวข้องที่คุณต้องการเห็นในตัวแก้ไขบทความ อย่าลืมว่าคลาส CSS ที่คุณสร้างในไฟล์ “editor-style.css” ควรตรงกับคลาส CSS ในโค้ดตัวเลือกสไตล์ด้านบน
ตอนนี้ เปิดไฟล์ “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
คุณสามารถดูรูปแบบที่ใช้แบบเรียลไทม์ได้
แสดงความคิดเห็นด้านล่างเพื่อแบ่งปันความคิดและประสบการณ์ของคุณเกี่ยวกับการใช้วิธีการด้านบนเพื่อเพิ่มตัวเลือกรูปแบบที่กำหนดเองในตัวแก้ไขบทความของ WordPress
