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

stylesinwpeditor

Remarque: บทช่วยสอนนี้ต้องการความรู้พื้นฐานของ CSS

เมื่อ คุณจะ ต้องเพิ่มสไตล์ที่กำหนดเองใน WordPress Visual Editor หรือไม่?

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

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

สิ่งนี้จะช่วยคุณประหยัดเวลาได้มาก และยังช่วยให้คุณใช้สไตล์เดียวกันได้ทุกที่บน เว็บไซต์เว็บ.

ที่สำคัญคุณสามารถแก้ไขหรืออัปเดตสไตล์ได้โดยไม่ต้องแก้ไขบทความในเว็บไซต์ของคุณ

ตอนนี้เราจะค้นพบวิธีการทำสิ่งนี้บน WordPress

วิธีการ 1: เพิ่มสไตล์ที่กำหนดเองด้วยปลั๊กอิน

สิ่งแรกที่คุณต้องทำคือติดตั้งและเปิดใช้งานปลั๊กอิน " ลักษณะ TinyMCE กำหนดเอง ". สำหรับรายละเอียดเพิ่มเติม ดูคำแนะนำทีละขั้นตอนเกี่ยวกับวิธีการติดตั้ง a WordPress ปลั๊กอิน.

หลังจากเปิดใช้งานคุณต้องไปที่ " การตั้งค่า> การตั้งค่า»สไตล์ที่กำหนดเองของ TinyMCE เพื่อกำหนดค่าการตั้งค่าปลั๊กอิน

การควบคุมของปลั๊กอิน TinyMCE

ปลั๊กอินช่วยให้คุณเลือกตำแหน่งของไฟล์สไตล์ชีต มันสามารถใช้ธีมหรือสไตล์ธีมลูกของคุณ หรือคุณสามารถเลือกตำแหน่งที่กำหนดเองได้

หลังจากนั้นคุณต้องคลิกที่ปุ่ม " บันทึกการตั้งค่าทั้งหมด เพื่อจัดเก็บการตั้งค่าของคุณ

ตอนนี้คุณสามารถเพิ่มสไตล์ที่คุณกำหนดเองได้ คุณต้องเลื่อนไปที่ส่วนสไตล์และคลิกที่ปุ่ม เพิ่มรูปแบบใหม่ '

ก่อนอื่นคุณต้องป้อนชื่อสำหรับสไตล์ ชื่อนี้จะแสดงในเมนูแบบเลื่อนลง จากนั้นคุณต้องกำหนด ไม่ว่าจะเป็นแถวบล็อกหรือองค์ประกอบการเลือก

หลังจากนั้นให้เพิ่มคลาส CSS จากนั้นเพิ่มกฎ CSS ของคุณตามที่แสดงในภาพหน้าจอด้านล่าง

กฎของสไตล์ CSS

เมื่อคุณเพิ่มสไตล์ CSS แล้วเพียงคลิกที่ปุ่ม“ บันทึกการตั้งค่าทั้งหมด” เพื่อบันทึกการเปลี่ยนแปลงของคุณ

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

รูปแบบการปรับแต่งแก้ไข-WordPress

เพียงเลือกข้อความในตัวแก้ไขจากนั้นเลือกรูปแบบที่คุณกำหนดเองจากเมนูแบบเลื่อนลงเพื่อนำไปใช้

ตอนนี้คุณสามารถดูตัวอย่างบทความของคุณเพื่อดูว่าสไตล์ที่คุณกำหนดเองนั้นถูกต้องหรือไม่

วิธีการ 2: เพิ่มสไตล์ให้กับ Visual Editor ด้วยตนเอง

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

ขั้นตอนที่ 1: เพิ่มสไตล์ที่กำหนดเองจากเมนูแบบเลื่อนลงของ WordPress Visual Editor

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

คุณต้องเพิ่มรหัสต่อไปนี้ไปยังแฟ้ม functions.php ของคุณหรือบนปลั๊กอินของคุณ

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

ขั้นตอนที่ 2: วิธีเพิ่มตัวเลือกในเมนูแบบเลื่อนลง

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

สำหรับบทช่วยสอนนี้ เราจะเพิ่มสไตล์ที่กำหนดเองสามแบบเพื่อสร้าง เนื้อหา บล็อกและปุ่ม

คุณจะต้องเพิ่มรหัสต่อไปนี้ในไฟล์ "functions.php" ของ functions.php ของคุณหรือปลั๊กอินเฉพาะ

/ * * ฟังก์ชันเรียกกลับเพื่อกรองการตั้งค่า MCE * / ฟังก์ชัน my_mce_before_init_insert_formats ($ init_array) {// กำหนดอาร์เรย์ style_formats $ style_formats = array (/ * * ลูกอาร์เรย์แต่ละตัวเป็นรูปแบบที่มีการตั้งค่าของตัวเอง * สังเกตว่าแต่ละอาร์เรย์มีหัวเรื่อง , บล็อก, คลาสและอาร์กิวเมนต์ของ Wrapper * Title คือป้ายกำกับที่จะมองเห็นได้ในเมนู Formats * Block กำหนดว่าจะเป็น span, div, selector หรือ inline style * Classes อนุญาตให้คุณกำหนดคลาส CSS * Wrapper ว่าจะหรือไม่ เพิ่มองค์ประกอบระดับบล็อกใหม่รอบ ๆ องค์ประกอบที่เลือก * / array ('title' => 'Content Block', 'block' => 'span', 'class' => 'content-block', 'wrapper' => true,), array ('title' => 'Blue Button', 'block' => 'span', 'class' => 'blue-button', 'wrapper' => true,), array ('title' => 'ปุ่มสีแดง', 'บล็อก' => 'span', 'คลาส' => 'ปุ่มสีแดง', 'wrapper' => จริง,),); // แทรกอาร์เรย์ JSON ENCODED ลงใน 'style_formats' $ init_array ['style_formats'] = json_encode ($ style_formats); ส่งคืน $ init_array; } // แนบการโทรกลับไปที่ 'tiny_mce_before_init' add_filter ('tiny_mce_before_init', 'my_mce_before_init_insert_formats');

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

อย่างไรก็ตามการเลือกของพวกเขาจะไม่สร้างความแตกต่างใด ๆ กับโปรแกรมแก้ไขภาพของ WordPress

ขั้นตอน 3: เพิ่มสไตล์ CSS

ตอนนี้ขั้นตอนสุดท้ายคือการเพิ่มกฎสไตล์ CSS สำหรับสไตล์ที่คุณกำหนดเอง

คุณจะต้องเพิ่ม CSS นี้ในไฟล์ style.css ของธีมของคุณหรือของธีมลูก

.content-block {เส้นขอบ: 1px solid #eee; ช่องว่างภายใน: 3px; พื้นหลัง: #ccc; ความกว้างสูงสุด: 250px; ลอย: ขวา; จัดข้อความ: ศูนย์; } .content-block: หลัง {clear: both; } .blue-button {background-color: # 33bdef; -moz-border-radius: 6px; -webkit ชายแดนรัศมี: 6px; เส้นขอบรัศมี: 6px; เส้นขอบ: 1px ทึบ # 057fd0; แสดง: อินไลน์บล็อก; เคอร์เซอร์: จุด; สี: #ffffff; ช่องว่างภายใน: 6px 24px; ตกแต่งข้อความ: ไม่มี; }. red-button {background-color: # bc3315; -moz-border-radius: 6px; -webkit ชายแดนรัศมี: 6px; เส้นขอบรัศมี: 6px; เส้นขอบ: 1px ทึบ # 942911; แสดง: อินไลน์บล็อก; เคอร์เซอร์: จุด; สี: #ffffff; ช่องว่างภายใน: 6px 24px; ตกแต่งข้อความ: ไม่มี; }

ภาพรวมของปุ่ม TinyMCE เพิ่มของสไตล์ส่วนตัว

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

หากธีมของคุณไม่มีไฟล์สไตล์ชีตคุณสามารถสร้างได้ตลอดเวลา เพียงสร้างไฟล์ CSS ใหม่และตั้งชื่อว่า " กำหนดเองบรรณาธิการ style.css '

คุณต้องอัปโหลดไฟล์นี้ไปยังไดเร็กทอรีรากของธีมของคุณจากนั้นเพิ่มโค้ดนี้ในไฟล์ "functions.php" ของธีมของคุณ

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

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

อย่าลังเลที่จะแชร์บทช่วยสอนนี้กับเพื่อน ๆ ของคุณบนเครือข่ายโซเชียลที่คุณชื่นชอบ