วิธีแสดงโมดูลความคิดเห็นของ Divi ให้กับผู้ใช้ที่เข้าสู่ระบบเท่านั้น

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

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

วิธีสร้างส่วนความคิดเห็นสำหรับสมาชิกเท่านั้น

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

1. อัปโหลดเทมเพลตโพสต์บล็อกของคุณไปยัง Divi Theme Builder (หรือสร้างเทมเพลตบล็อกของคุณ!)
2. สร้างส่วนความคิดเห็นสำหรับสมาชิกเท่านั้นที่มีโมดูลการเข้าสู่ระบบ
3. เปิดใช้งานเงื่อนไขการแสดงผลสำหรับแถวที่มีโมดูลการเข้าสู่ระบบ
4. เปิดใช้งานเงื่อนไขการแสดงผลสำหรับแถวที่มีโมดูลความคิดเห็น
5. บันทึกและทดสอบเทมเพลตในหน้าต่างที่ไม่ระบุตัวตน

ก่อน: ส่วนความคิดเห็นฟรีสำหรับทุกคน

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

หลัง: ส่วนความคิดเห็นสำหรับสมาชิกเท่านั้น

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

การติดตั้งเทมเพลตโพสต์บล็อก

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

ไปที่ตัวสร้างธีม Divi

หากต้องการอัปโหลดเทมเพลต ให้ไปที่ Divi Theme Builder ในส่วนแบ็กเอนด์ของเว็บไซต์ WordPress ของคุณ

อัปโหลดเทมเพลตเว็บไซต์

จากนั้นที่มุมขวาบน คุณจะเห็นไอคอนพร้อมลูกศร 2 อัน คลิกที่ไอคอน

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

บันทึกการเปลี่ยนแปลงตัวสร้างธีม Divi

เมื่อคุณอัปโหลดไฟล์แล้ว คุณจะสังเกตเห็นเทมเพลตใหม่พร้อมพื้นที่เนื้อหาใหม่ที่กำหนดให้กับโพสต์ทั้งหมด บันทึกการเปลี่ยนแปลง Divi Theme Builder ทันทีที่คุณต้องการให้เปิดใช้งานเทมเพลต

การปรับเปลี่ยนเทมเพลต

เปิดเทมเพลตโพสต์

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

เพิ่มแถวใหม่สำหรับโมดูลการเข้าสู่ระบบ

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

ต่อไป เราจะเพิ่มหนึ่งคอลัมน์ในแถว

เพิ่มโมดูลเข้าสู่ระบบ

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

เพิ่มข้อความในโมดูลการเข้าสู่ระบบ

มาเพิ่มชื่อให้กับโมดูลการเข้าสู่ระบบ นอกจากนี้เรายังจะใช้ชื่อนี้เพื่อขอให้ผู้ใช้เข้าสู่ระบบก่อนที่จะเข้าถึงส่วนความคิดเห็นของเรา

โมดูลเข้าสู่ระบบสไตล์

ตอนนี้ เราจะจัดสไตล์โมดูลการเข้าสู่ระบบที่เพิ่มใหม่ให้ตรงกับการสร้างแบรนด์ของเทมเพลตบล็อก Film Lab

การตั้งค่าพื้นหลังของโมดูลเข้าสู่ระบบ

คลิกที่ไอคอนถังสี สิ่งนี้จะเพิ่มสีเติมทึบ #ff4125 ให้กับพื้นหลังของโมดูล จากนั้น คลิกที่ปุ่มสลับใช้สีพื้นหลัง

พื้นหลัง

• สีพื้นหลัง: #ff4125
• ใช้สีพื้นหลัง: ใช่

จัดแต่งทรงผมฟิลด์

สำหรับฟิลด์ เราจะใช้สีเดียวกันกับส่วนสำหรับพื้นหลังที่มีข้อความสีดำ

ฟิลด์: การจัดรูปแบบพื้นหลังและข้อความ

• สีพื้นหลังของฟิลด์: #eae9e4
• สีข้อความของฟิลด์: #000000
• สีพื้นหลังโฟกัสของฟิลด์: #eae9e4
• ฟิลด์โฟกัสสีข้อความ: #000000

เราจะให้ขอบสนามและไม่มีมุมโค้งมน สิ่งนี้จะเลียนแบบสไตล์ของโมดูลความคิดเห็น

ฟิลด์: การจัดรูปแบบพื้นหลังและข้อความ

• มุมโค้งมนของฟิลด์: 0
• ลักษณะเส้นขอบของฟิลด์: ทั้งหมด
• ความกว้างของเส้นขอบของฟิลด์: 1px
• สีเส้นขอบของฟิลด์: #000000
• รูปแบบเส้นขอบของฟิลด์: ทึบ

การจัดรูปแบบชื่อเรื่อง

ชื่อจะใช้แบบอักษรเดียวกับที่ใช้ทั่วทั้งเทมเพลตและจะเป็นสีขาว

ข้อความชื่อเรื่อง

• ข้อความหัวเรื่อง: H2
• แบบอักษรของชื่อเรื่อง: Mulish
• สีข้อความของชื่อเรื่อง: #ffffff

โปรดสังเกตว่าเราเพิ่มขนาดที่ปรับเปลี่ยนตามอุปกรณ์เพื่อให้ชื่อเรื่องดูดีบนหน้าจอขนาดต่างๆ

ข้อความชื่อเรื่อง: ขนาดตัวอักษร

• ขนาดตัวอักษรข้อความชื่อเรื่อง (เดสก์ท็อป): 64px
• ขนาดตัวอักษรข้อความชื่อเรื่อง (แท็บเล็ต): 48px
• ขนาดตัวอักษรของข้อความชื่อเรื่อง (มือถือ): 48px

จัดสไตล์ปุ่ม

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

นำทางไปยังแท็บออกแบบ เลื่อนลงไปที่แท็บปุ่ม คลิกขวาที่แท็บปุ่ม แล้วคลิก คัดลอกลักษณะปุ่ม

หลังจากนั้น ออกจากโมดูลความคิดเห็น เข้าสู่โมดูลการเข้าสู่ระบบโดยคลิกที่ไอคอนรูปเฟือง

คลิกแท็บออกแบบ อีกครั้งแล้ว เลื่อนลงไปที่แท็บปุ่ม จากนั้น คลิกขวาและเลือก Paste Button Styles เอาล่ะ! ปุ่มนี้ดูใกล้กับปุ่มภายในโมดูลความคิดเห็น

ตอนนี้ปุ่มของโมดูลการเข้าสู่ระบบของเราตรงกับสไตล์ของปุ่มโมดูลความคิดเห็นอย่างใกล้ชิด เย้ พวกเรา!

ใช้เงื่อนไขการแสดงผลกับแถวโมดูลการเข้าสู่ระบบ

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

คลิกแท็บขั้นสูง ภายในการตั้งค่าแถว จากนั้น คลิกแท็บเงื่อนไข จากนั้น คลิกที่ไอคอนเครื่องหมายบวก

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

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

เงื่อนไขการแสดงผล

• แสดงเฉพาะในกรณีที่: ผู้ใช้ออกจากระบบ
• เปิดใช้งานเงื่อนไข: ใช่

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

การเปิดใช้งานเงื่อนไขการแสดงผลสำหรับส่วนความคิดเห็นสำหรับสมาชิกใหม่เท่านั้น

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

เช่นเดียวกับแถวที่มีโมดูลการเข้าสู่ระบบ เมื่ออยู่ใน Row Settings เราจะ คลิกที่แท็บ Advanced จากนั้น คลิกแท็บ Conditions แล้ว กดไอคอนบวก เพื่อเพิ่ม Display Condition ของเรา

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

ส่วนความคิดเห็นเฉพาะสมาชิกที่เสร็จแล้วเท่านั้น

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

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

สรุปแล้ว

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