Divi: ธีม WordPress ที่ดีที่สุดของเวลาทั้งหมด!

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

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

stylesinwpeditor

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

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

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

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

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

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

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

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

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

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

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

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

สร้างเว็บไซต์ของคุณอย่างง่ายดายด้วย Elementor

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

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

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

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

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

กฎของสไตล์ CSS

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

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

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

คุณต้องการขายผลิตภัณฑ์ของคุณบนอินเทอร์เน็ตหรือไม่?

ดาวน์โหลด WooCommerce ฟรี ปลั๊กอินอีคอมเมิร์ซที่ดีที่สุดในการขายผลิตภัณฑ์ทางกายภาพและดิจิทัลของคุณบน WordPress และสร้างร้านค้าออนไลน์ของคุณได้อย่างง่ายดาย เหมาะสำหรับผู้เริ่มต้น

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

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

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

วิธีนี้ต้องการให้คุณเพิ่มรหัสลงในไฟล์ WordPress ของคุณด้วยตนเอง หากนี่เป็นครั้งแรกที่คุณทำแล้วลองดูบทแนะนำของเราเกี่ยวกับวิธีเพิ่มปลั๊กอิน 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 เพิ่มของสไตล์ส่วนตัว

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

หากธีมของคุณไม่มีไฟล์สไตล์ชีตคุณสามารถสร้างได้ตลอดเวลา เพียงสร้างไฟล์ 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 ตอนนี้คุณสามารถปรับแต่งตามที่คุณคิดว่าถูกต้องได้แล้ว

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

7 หุ้น
หุ้น6
ทวีต
Enregistrer1