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

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

ลองดูโปรแกรมแก้ไขภาพ WordPress ของคุณ มีตัวเลือกมาตรฐานบางอย่างสำหรับการจัดรูปแบบและจัดแต่งทรงผมเนื้อหาของคุณ แต่ไม่มากนักในแง่ของการปรับแต่งเพื่อให้โพสต์และหน้าเว็บของคุณดูแปลกไปหน่อย.


WordPress บรรณาธิการ

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

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

มาดูวิธีเพิ่มสไตล์ที่กำหนดเองในโปรแกรมแก้ไขภาพ WordPress.

เพิ่มสไตล์ที่กำหนดเองให้กับ WordPress Visual Editor โดยการเพิ่มรหัส

ตัวเลือกแรกนี้ต้องการให้คุณรู้เพียงเล็กน้อยเกี่ยวกับวิธีการรวมและแก้ไข CSS แต่ฉันจะให้คุณเรียนรู้พื้นฐานเพื่อให้คุณสามารถใช้ความรู้นี้ในอนาคต นี่เป็นตัวเลือกที่ดีถ้าคุณไม่ต้องการที่จะชั่งน้ำหนักเว็บไซต์ของคุณด้วยปลั๊กอิน.

ประเด็นนี้คือการเพิ่มเมนูแบบเลื่อนลงใหม่ซึ่งรวมถึงสไตล์ที่กำหนดเองในโปรแกรมแก้ไขภาพ WordPress ของคุณซึ่งช่วยให้คุณสามารถเลือกองค์ประกอบในโปรแกรมแก้ไขของคุณแล้วนำสไตล์ที่กำหนดเองไปใช้ หากคุณกำลังพัฒนาธีมใหม่ให้ค้นหาของคุณ functions.php ไฟล์และวางรหัสด้านล่างลงในไฟล์นั้นหรือหากคุณกำลังทำงานกับชุดรูปแบบที่มีอยู่แล้ววางรหัสนี้ในไฟล์ฟังก์ชั่นของชุดรูปแบบเด็ก.

ฟังก์ชั่น myprefix_mce_buttons_1 (ปุ่ม $) {
array_unshift (ปุ่ม $, 'styleselect');
ส่งคืนปุ่ม $;
}

add_filter ('mce_buttons_1', 'myprefix_mce_buttons_1');

กลับไปที่เครื่องมือแก้ไขในหนึ่งในบทความ WordPress ของคุณและตอนนี้คุณควรเห็นปุ่ม“ รูปแบบใหม่” ในแถวบนสุดของเครื่องมือแก้ไข โปรดสังเกตว่าเราเชื่อมต่อกับ“ mce_buttons_1 ได้อย่างไร? สิ่งนี้วางปุ่มเมนูรูปแบบในแถวแรกของตัวแก้ไข mce คุณสามารถใช้ตัวกรอง“ mce_buttons_2” เพื่อวางไว้ในแถวที่สองหรือ“ mce_buttons_3” เพื่อวางไว้ในแถวที่ 3.

ดังนั้นเมื่อคุณเปิดใช้งานรายการเมนูแล้วก็ถึงเวลาเพิ่มสไตล์ที่กำหนดเองเพื่อใช้ภายในโพสต์ของคุณ นำรหัสที่แสดงด้านล่างและวางลงในของคุณ functions.php ไฟล์ที่จะเพิ่ม 2 รูปแบบใหม่ให้กับรายการแบบหล่นลง – “ปุ่มธีม” และ “ไฮไลท์”.

/ **
* เพิ่มสไตล์ที่กำหนดเองลงในดร็อปดาวน์รูปแบบ mce
* * * *
* @url https://codex.wordpress.org/TinyMCE_Custom_Styles
* * * *
* /
ฟังก์ชั่น myprefix_add_format_styles ($ init_array) {
$ style_formats = array (
// เด็กแต่ละอาร์เรย์เป็นรูปแบบที่มีการตั้งค่าของตัวเอง - เพิ่มมากเท่าที่คุณต้องการ
array (
'title' => __ ('ปุ่มธีม', 'text-domain'), // หัวเรื่องสำหรับดรอปดาวน์
'selector' => 'a', // Element เพื่อกำหนดเป้าหมายในเครื่องมือแก้ไข
'classes' => 'theme-button' // ชื่อคลาสที่ใช้สำหรับ CSS
),
array (
'title' => __ ('Highlight', 'text-domain'), // หัวเรื่องสำหรับดรอปดาวน์
'inline' => 'span', // ล้อมรอบเนื้อหาที่เลือก
'classes' => 'text-highlight' // ชื่อคลาสที่ใช้สำหรับ CSS
),
);
$ init_array ['style_formats'] = json_encode ($ style_formats);
ส่งคืน $ init_array;
}
add_filter ('tiny_mce_before_init', 'myprefix_add_format_styles');

คุณสามารถเปลี่ยนชื่อเพื่อแสดงชื่อที่แตกต่างกันในเมนูแบบเลื่อนลงเพิ่ม / ลบรายการจากอาเรย์และอื่น ๆ คุณสามารถแก้ไขอะไรก็ได้ในรหัสนี้เพื่อเปิดเผยสไตล์การจัดรูปแบบที่คุณกำหนดเองอย่าลืมตรวจสอบ WordPress Codex สำหรับคำอธิบายเชิงลึกเพิ่มเติมเกี่ยวกับพารามิเตอร์ที่ยอมรับและค่าส่งคืน.

ตอนนี้คุณมีสไตล์ใหม่แล้วคุณสามารถเน้นเนื้อหาในโปรแกรมแก้ไขของคุณและใช้สไตล์ได้ สังเกตว่ารูปแบบ“ ปุ่มธีม” มีพารามิเตอร์ตัวเลือกอย่างไร ซึ่งหมายความว่าสไตล์สามารถใช้ได้กับตัวเลือกเฉพาะนั้นเท่านั้น (ในกรณีนี้คือแท็ก“ a” หรือ“ ลิงค์”) รูปแบบที่สองที่เราเพิ่ม“ ไฮไลต์” ไม่มีพารามิเตอร์ตัวเลือก แต่เป็นพารามิเตอร์“ อินไลน์” ซึ่งบอกให้ใช้สไตล์กับข้อความใด ๆ ที่คุณเน้นไว้ในตัวแก้ไขของคุณและล้อมรอบด้วยชื่อคลาสที่ไม่ซ้ำกันของคุณ คุณสามารถดูตัวอย่างจากธีม WordPress รวมของเราเกี่ยวกับวิธีการที่เราใช้รูปแบบเพื่อให้ผู้ใช้สามารถนำรายการตรวจสอบไปใช้กับหัวข้อย่อยในเครื่องมือแก้ไขได้อย่างง่ายดาย.

ตรวจสอบรายชื่อ

ดังนั้นตอนนี้คุณสามารถใช้รูปแบบที่กำหนดเองของคุณได้ แต่รูปแบบเหล่านั้นจะไม่แตกต่างกันไปจนกว่าคุณจะเพิ่ม CSS ที่กำหนดเองลงในไซต์ของคุณเพื่อจัดรูปแบบ คุณควรค้นหาสไตล์ชีทสำหรับธีมของคุณ (หากสร้างของคุณเอง) หรือธีมลูกและวางโค้ด CSS ต่อไปนี้ในไฟล์.

.ชุดรูปแบบปุ่ม {
จอแสดงผล: บล็อกแบบอินไลน์;
การขยาย: 10 15px;
สี: #fff;
พื้นหลัง: # 1796c6;
การตกแต่งข้อความ: ไม่มี;
}
.theme-button: โฮเวอร์ {
การตกแต่งข้อความ: ไม่มี;
ความทึบ: 0.8;
}
.ข้อความที่เน้นสี
พื้นหลัง: # FFFF00;
}

ตอนนี้มันจะเพิ่มสไตล์ให้กับฟอร์แมทใหม่ของคุณสำหรับ front-end ดังนั้นเมื่อนำไปใช้คุณจะเห็นมันสด เย้! แต่จะดีหรือไม่ที่เห็นสไตล์ของคุณในเครื่องมือแก้ไขจริง ๆ เมื่อมีการใช้งาน ในการทำเช่นนี้คุณจะต้องใช้ประโยชน์จากฟังก์ชั่น “แก้ไขสไตล์ชีท” ใน WordPress หากคุณกำลังสร้างชุดรูปแบบของคุณเองคุณจะต้องสร้างไฟล์ css ใหม่ในชุดรูปแบบของคุณที่ชื่อว่า “editor-style.css” (คุณสามารถตั้งชื่อสิ่งที่คุณต้องการเพียงให้แน่ใจว่าได้แก้ไขตัวอย่างด้านล่าง) ด้วย CSS ที่กำหนดเอง เพิ่มสำหรับรูปแบบของคุณแล้วเพิ่มฟังก์ชั่นด้านล่างเพื่อโหลดในแบ็กเอนด์.

ฟังก์ชั่น myprefix_theme_add_editor_styles () {
add_editor_style ('editor-style.css');
}
add_action ('init', 'myprefix_theme_add_editor_styles');

หากคุณกำลังทำงานกับชุดรูปแบบของคนอื่นคุณจะต้องเพิ่มสิ่งนี้ในชุดรูปแบบลูกของคุณเพียงแค่ให้ชื่อที่ไม่ซ้ำกันเพื่อให้มันไม่ขัดแย้งกับชุดรูปแบบของคุณหรือถ้าชุดรูปแบบหลักของคุณมีไฟล์ CSS สำหรับ เครื่องมือแก้ไขที่คุณสามารถคัดลอกและวางในธีมลูกของคุณ (โดยไม่ต้องเพิ่มโค้ด PHP ด้านบน) จากนั้นเพิ่ม CSS ใหม่ของคุณเพราะ WordPress จะตรวจสอบธีมลูกก่อนที่จะโหลดไฟล์ CSS บรรณาธิการของธีมหลักและถ้ามันอยู่มันจะ โหลดจากธีมลูกแทน.

เพิ่มสไตล์ที่กำหนดเองให้กับ WordPress Visual Editor ด้วยปลั๊กอินที่ดี

หากคุณไม่มีเวลาเล่นด้วยรหัสหรือคุณไม่สามารถเข้าใจได้ว่าตัวเองมีข่าวดี มีปลั๊กอินที่ให้คุณทำตามที่เราเพิ่งทำไปโดยไม่ต้องใช้รหัส.

ปลั๊กอินสไตล์ที่กำหนดเอง TinyMCE

เพียงค้นหาติดตั้งและเปิดใช้งาน ปลั๊กอินสไตล์ที่กำหนดเองของ TinyMCE และเปิดใช้งานได้บนเว็บไซต์ WordPress ของคุณ.

การตั้งค่าสไตล์ที่กำหนดเองของ TinyMCE

ไปที่ การตั้งค่า> รูปแบบ TinyMCE ที่ด้านซ้ายของแดชบอร์ด WordPress ของคุณ นี่คือที่ที่คุณแก้ไขการตั้งค่าสำหรับปลั๊กอิน.

การตั้งค่าสไตล์ที่กำหนดเองของ TinyMCE

ปลั๊กอินช่วยให้คุณสามารถเลือกสไตล์ชีทของคุณหรือตำแหน่งที่คุณต้องการวาง ขอแนะนำให้คุณสร้างไดเรกทอรีที่กำหนดเองใหม่ เลือกตัวเลือกที่สามและตั้งชื่อไดเรกทอรีของคุณจากนั้นเลื่อนหน้าลงเพื่อคลิกของคุณ บันทึกการตั้งค่า ตัวเลือกก่อนดำเนินการต่อในขั้นตอนถัดไป.

สไตล์ที่กำหนดเอง TinyMCE เพิ่มใหม่

เมื่อคุณบันทึกการตั้งค่าให้เลื่อนลงเพื่อเลือกปุ่มเพิ่มสไตล์ใหม่.

ตัวเลือกสไตล์ที่กำหนดเอง TinyMCE

นี่คือที่ที่คุณกำหนดสิ่งที่คุณต้องการให้ลักษณะที่กำหนดเองของคุณมีลักษณะ โดยพื้นฐานแล้วมันเป็นโปรแกรมแก้ไขบนเว็บที่สร้างโค้ด CSS ให้คุณ พิมพ์ชื่อเรื่องสำหรับสิ่งที่คุณต้องการแสดงในเมนูแบบเลื่อนลง เลือกว่าคุณต้องการตัวเลือกแบบอินไลน์หรือบล็อก รู้สึกอิสระที่จะใช้ภาพหน้าจอด้านบนเพื่อเติมคลาส CSS และสไตล์หรือสร้างของคุณเองขึ้นอยู่กับสิ่งที่คุณวางแผนที่จะใช้เมนูแบบเลื่อนลงสำหรับ เมื่อเสร็จแล้วคลิกที่บันทึกการตั้งค่าที่ด้านล่างของหน้า.

รูปแบบสไตล์ที่กำหนดเองของ TinyMCE

ตอนนี้ถึงเวลาที่จะดูว่าสไตล์ที่กำหนดเองใหม่มีลักษณะอย่างไรในตัวแก้ไขของคุณ เปิดโพสต์หรือหน้าใหม่และค้นหาเมนูดร็อปดาวน์รูปแบบทางด้านซ้ายมือของโปรแกรมแก้ไขภาพ มันแสดงให้เห็นในบรรทัดที่สอง เมื่อคุณคลิกที่เมนูแบบเลื่อนลงมันจะเปิดเผยสไตล์ใหม่ที่คุณเพิ่งสร้างขึ้น.

รูปแบบสไตล์ที่กำหนดเองของ TinyMCE ที่ใช้งานอยู่

คลิกที่ปุ่มตัวเลือก Big Blue หรืออะไรก็ตามที่คุณสร้างขึ้นเพื่อดูมันปรากฏในตัวแก้ไขของคุณ หากต้องการใช้งานเพียงเน้นข้อความที่คุณต้องการจัดรูปแบบจากนั้นคลิกที่ตัวเลือกของคุณและ voila!

ข้อสรุป

นั่นคือทั้งหมดที่สำหรับตอนนี้! คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับวิธีใช้สไตล์ลิสต์ใหม่ได้ตลอดเวลาโดยดูที่ หน้า codex ของ WordPress ทุ่มเทให้กับหัวข้อนี้.

แจ้งให้เราทราบในส่วนความคิดเห็นหากคุณมีคำถามเกี่ยวกับวิธีเพิ่มสไตล์ที่กำหนดเองในโปรแกรมแก้ไขภาพ WordPress และอย่าลังเลที่จะแบ่งปันสไตล์ที่ผิดปกติใด ๆ ที่คุณสร้างขึ้นเพื่อทำให้ไซต์ของคุณดูดีขึ้นกว่าเดิม!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map