วิธีใส่รหัสสี Divi Blog Posts โดยผู้แต่ง

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

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

ทำไมคุณควรพิจารณาการเข้ารหัสสีโพสต์บล็อก Divi ของคุณ

ก่อนที่เราจะไปไกลกว่านี้ เรามาทำความเข้าใจว่าเราหมายถึงอะไรโดยการเขียนโค้ดสีให้กับโพสต์ในบล็อก Divi ของคุณ ในส่วนถัดไป เราจะสอนวิธีกำหนดสีให้กับนักเขียนแต่ละคนซึ่งจะปรากฏเป็นพื้นหลังสำหรับโพสต์ของพวกเขาเอง ในตัวอย่างนี้ ฉันกำหนดโพสต์ของตัวเอง (ในฐานะผู้เขียน1 ) เป็นสีฟ้าอ่อนที่ ชวนให้นึกถึง :

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

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

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

วิธีใส่รหัสสี Divi Blog Posts โดยผู้แต่ง (ใน 2 ขั้นตอน)

ตอนนี้เราได้ครอบคลุมทฤษฎีแล้ว ได้เวลาย้ายไปที่วิธีการสีจริง ๆ แล้วรหัสสี Divi บล็อกโพสต์ การเปิดใช้งานคุณลักษณะนี้ใช้เวลาเพียงสองขั้นตอน แต่มีข้อควรพิจารณาบางอย่างเพื่อให้ก่อนที่จะเริ่ม

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

สุดท้าย คุณจะต้องใช้ไคลเอนต์ FTP สำหรับขั้นตอนที่หนึ่ง เราจะใช้ FileZilla แต่ถ้ามีเครื่องมืออื่นที่คุณต้องการก็ลงมือเลย

ขั้นตอนที่ #1: เพิ่มข้อมูลโค้ดลงในไฟล์ functions.php ของธีมลูกของคุณ

ในการดำเนินการนี้ คุณจะต้องเปิดไคลเอ็นต์ FTP และลงชื่อเข้าใช้เซิร์ฟเวอร์ของไซต์ จากนั้นไปที่ไดเร็กทอรี public_html / wp-content/themes/ จากนั้นค้นหาโฟลเดอร์ของธีมลูกของคุณ โปรดทราบว่า public_html หรือโฟลเดอร์ รูท อาจมีชื่อ www หรือตามโดเมนของไซต์ของคุณ ทั้งนี้ขึ้นอยู่กับโฮสต์ของคุณ:

เมื่อคุณพบโฟลเดอร์ของธีมลูกแล้ว ให้เปิดและค้นหาไฟล์ functions.php ภายใน ตอนนี้ให้คลิกขวาที่มันแล้วกดตัวเลือกที่อ่าน View/Edit :

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

ถัดไป เพิ่มข้อมูลโค้ด PHP ต่อไปนี้หลังบรรทัด // END ENQUEUE PARENT ACTION :

function et_set_author_class( $classes ) {$classes[] = 'author-' . strtolower( str_replace( ' ', '-', get_the_author() ) );

return $classes;}

add_filter( 'post_class', 'et_set_author_class' );

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

ขั้นตอนที่ #2: ระบุสีสำหรับผู้แต่งแต่ละคนโดยใช้ตัวเลือก CSS ที่กำหนดเองของ Divi

ตอนนี้ฟังก์ชันใหม่ของเราพร้อมแล้ว ขั้นตอนต่อไปคือการกำหนดสีสำหรับผู้แต่งแต่ละคน Divi ช่วยให้คุณทำสิ่งนี้ได้ด้วยคุณสมบัติ CSS ที่กำหนดเอง เนื่องจากโค้ดใดๆ ที่คุณเพิ่มจะมีผลกับธีมทั้งหมดของคุณ หากต้องการค้นหา ให้ไปที่แดชบอร์ด WordPress และไปที่แท็บ Divi > Theme Options จากนั้นเลื่อนลงไปที่ช่อง Custom CSS ที่ส่วนท้ายของหน้า:

คุณจะต้องเพิ่มบรรทัดใหม่ของ CSS ในช่องนี้สำหรับผู้แต่งแต่ละคน ตัวอย่างเช่น หากคุณมีผู้เขียนที่มีชื่อผู้ใช้ Author1 คุณจะกำหนดสีเฉพาะสำหรับพวกเขาได้ดังนี้:

.author-author1 {background-color: #C1F3FA !important;}

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

มาดูตัวอย่างสุดท้ายกัน ในที่นี้ เราจะกำหนดสีต่างๆ ให้กับผู้เขียนสองคน นี่คือรหัสที่เราเพิ่มลงในฟิลด์ CSS ที่กำหนดเองของ Divi:

.author-author1 {background-color: #C1F3FA !important;}

.author-author2 {background-color: #F9FCB8 !important;}

นี่คือสิ่งที่ดูเหมือนจากส่วนหน้า:

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

บทสรุป

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

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

1. แก้ไขไฟล์ functions.php ของธีมลูกของคุณ
2. ระบุสีสำหรับผู้แต่งแต่ละคนโดยใช้ตัวเลือก CSS ที่กำหนดเองของ Divi

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

ภาพขนาดย่อของบทความโดย RaZZers / shutterstock.com