การสร้างเว็บไซต์ทบทวนผลิตภัณฑ์ด้วยความพิเศษ – ตอนที่ 2

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

ในส่วนที่ 1 ของชุดข้อมูลนี้ เราเริ่มต้นเส้นทางในการสร้างไซต์รีวิวผลิตภัณฑ์โดยการตั้งค่าตัวเลือกธีมและการตั้งค่าตัวปรับแต่งธีม

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

นี่คือตัวอย่างคร่าวๆ ของสิ่งที่เรากำลังจะสร้าง

การเตรียมองค์ประกอบการออกแบบ

เนื่องจากเราจะเพิ่มผลิตภัณฑ์ในส่วนนี้ของซีรีส์ คุณจะต้องมีรูปภาพผลิตภัณฑ์ของคุณ สำหรับบทช่วยสอนนี้ ฉันจะมี 4 หมวดหมู่โดยมีผลิตภัณฑ์ 3 รายการในแต่ละหมวดหมู่ ดังนั้นฉันจะใช้รูปภาพทั้งหมด 12 ภาพ ฉันใช้ภาพสต็อกจาก shutterstock ที่มีพื้นหลังสีขาวเพื่อให้ภาพดูสะอาดตายิ่งขึ้น

ในการออกแบบเลย์เอาต์ของโพสต์ เราจะใช้ Visual Builder และ Custom CSS เล็กน้อย

มาเริ่มกันเลย.

การสร้างไซต์รีวิวผลิตภัณฑ์ด้วยความพิเศษ – ตอนที่ 2

สมัครสมาชิกช่อง Youtube ของเรา

การเพิ่มรีวิวผลิตภัณฑ์ครั้งแรกของคุณเป็นโพสต์ใหม่

จากแดชบอร์ด WordPress ให้ไปที่ โพสต์ > เพิ่มใหม่

แต่ละโพสต์จะเป็นบทวิจารณ์ผลิตภัณฑ์ของคุณ ดังนั้นชื่อโพสต์ของคุณควรเป็นชื่อผลิตภัณฑ์ของคุณ เนื่องจากผลิตภัณฑ์ของฉันจะเป็นตัวติดตามฟิตเนส ฉันจะป้อน "Fitness Tracker" เป็นชื่อโพสต์ของฉัน

หมายเหตุ : หากคุณยังไม่ได้ตั้งค่า ตอนนี้เป็นเวลาที่เหมาะสมในการตั้งค่าลิงก์ถาวรของคุณเป็น "ชื่อโพสต์" เพื่อให้ URL ของคุณมีเฉพาะชื่อผลิตภัณฑ์ (แน่นอนว่าคุณต้องการ)

จากนั้นคลิกปุ่ม "ใช้ Divi Builder" จากนั้นคลิกปุ่ม "ใช้ Visual Builder" เพื่อปรับใช้ Visual Builder

จาก Visual Builder ให้แทรกแถวหนึ่งคอลัมน์และเพิ่มโมดูลข้อความลงในคอลัมน์

ในแท็บเนื้อหาของการตั้งค่าโมดูลข้อความ ให้ป้อน html ต่อไปนี้ในกล่องเนื้อหา (ตรวจสอบให้แน่ใจว่าคุณกำลังทำงานในแท็บ "ข้อความ" ไม่ใช่แท็บ "ภาพ"):

<h2 class="subtitle fancy"><span>Product Description</span></h2>

นี้จะทำหน้าที่เป็นคำบรรยาย "แฟนซี" ของเราสำหรับส่วนต่างๆ เราจะจัดรูปแบบด้วย CSS ที่กำหนดเองในภายหลัง

ใต้แท็ก h2 คุณสามารถเพิ่มข้อความคำอธิบายผลิตภัณฑ์ได้ ตอนนี้ฉันกำลังใช้ "lorem ipsum" อยู่

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

<h2 class="subtitle fancy"><span>Pros & Cons</span></h2>

นี่จะเป็นการเริ่มต้นส่วนข้อดีและข้อเสียของการตรวจทานผลิตภัณฑ์ของคุณ

ถัดไป เพิ่มครึ่งแถวครึ่ง (สองคอลัมน์) ใต้แถวก่อนหน้า ในคอลัมน์ด้านซ้าย เพิ่มโมดูลข้อความและใส่ชื่อ h3 ด้วยข้อความ "Pros"

ตอนนี้ทำซ้ำโมดูลข้อความนั้นแล้วลากโมดูลที่ซ้ำกันไปที่คอลัมน์ด้านขวา เปลี่ยนชื่อ h3 ในโมดูลข้อความใหม่เป็น "ข้อเสีย"

เคล็ดลับ : ใน Visual Builder คุณสามารถคลิกที่กล่องข้อความและพิมพ์ชื่อใหม่แทนการเปิดการตั้งค่า

ต่อไป เราจะใช้โมดูลการนำเสนอเพื่อเพิ่มรายการย่อยภายใต้ชื่อข้อดีและข้อเสีย

ในคอลัมน์ด้านซ้าย ใต้โมดูลข้อความ "Pros" ให้เพิ่มโมดูล Blurb ในแท็บเนื้อหาของการตั้งค่า Blurb ให้เพิ่มบรรทัดข้อความ (ตอนนี้ฉันกำลังใช้ข้อความจำลอง) ในกล่องเนื้อหา

จากนั้นเลื่อนลงและเลือก "ใช้ไอคอน" ในกล่องไอคอนที่ปรากฏขึ้น ให้เลือกสัญลักษณ์บวก

คลิกไปที่แท็บออกแบบและอัปเดตสิ่งต่อไปนี้:

สีไอคอน: #ffffff

ไอคอนวงกลม: ใช่

วงกลม สี: #5bd999

ตำแหน่งรูปภาพ/ไอคอน: ซ้าย

บันทึกการตั้งค่า

ทำซ้ำ (หรือคัดลอก) ที่ประกาศโมดูลแล้วลาก (หรือวาง) ไว้ใต้โมดูลข้อความ "ข้อเสีย" จากนั้นอัปเดตแท็บการออกแบบการตั้งค่า Blurb ด้วยสีวงกลมต่อไปนี้: #e6567a

บันทึกการตั้งค่า

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

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

พื้นหลังของคอลัมน์ 1: #f8f8f8

พื้นหลังของคอลัมน์ 2: #f8f8f8

ภายใต้ แท็บ Design ให้อัปเดตสิ่งต่อไปนี้:

ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่

ความกว้างของรางน้ำ: 1

ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่

ช่องว่างภายในคอลัมน์ 1: 20px (บน), 20px (ขวา), 20px (ล่าง), 20px (ซ้าย)

ช่องว่างภายในคอลัมน์ 2: 20px (บน), 20px (ขวา), 20px (ล่าง), 20px (ซ้าย)

ใต้ แท็บ Advanced ให้เพิ่ม CSS ที่กำหนดเองต่อไปนี้ลงในช่องข้อความของ Column 1 Main Element :

 border-top: 10px solid #5bd999; 

เพิ่ม CSS ต่อไปนี้ลง ใน กล่องข้อความ องค์ประกอบหลักของคอลัมน์ 2 :

 border-top: 10px solid #e6567a; 

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

บันทึกการตั้งค่า

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

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

ตอนนี้คลิกที่การตั้งค่า Blurb สำหรับโมดูลการนำเสนอครั้งแรกในคอลัมน์ด้านซ้าย

ใต้ แท็บเนื้อหา ให้เปลี่ยนไอคอนเป็นเครื่องหมายถูก

ใต้ แท็บ Design ให้เปลี่ยนสี Circle เป็น #222222

บันทึกการตั้งค่า

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

ตอนนี้ไปที่การ ตั้งค่าแถว และแทนที่ CSS ที่กำหนดเองทั้งในกล่องข้อความ องค์ประกอบหลักคอลัมน์ 1 และกล่องข้อความ องค์ประกอบหลัก ของ คอลัมน์ 2 ดังต่อไปนี้:

border-top: 10px solid #222222;

บันทึกการตั้งค่า

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

ภายใต้แท็บเนื้อหา…

ข้อความปุ่ม: ซื้อเลย

URL ของปุ่ม: [ป้อน URL] (ส่วนใหญ่อาจเป็นลิงก์พันธมิตรไปยังเว็บไซต์บุคคลที่สาม)

URL เปิด: ในแท็บใหม่

ภายใต้แท็บออกแบบ...

การจัดตำแหน่งปุ่ม: กึ่งกลาง

สีข้อความ: Dark

ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่

ขนาดข้อความของปุ่ม: 30px

สีข้อความของปุ่ม: #222222

สีข้อความโฮเวอร์ของปุ่ม: #5bd999

สีพื้นหลังของปุ่มโฮเวอร์: #ffffff

สีเส้นขอบของปุ่มโฮเวอร์: #5bd999

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

การเพิ่มบทวิจารณ์ในโพสต์ของคุณ

เลื่อนลงไปที่ด้านล่างของหน้าแก้ไขโพสต์และค้นหาช่องที่ชื่อว่า “Review Box Contents”

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

หากต้องการเพิ่มรีวิวของคุณ ให้อัปเดตเนื้อหาในกล่องรีวิวดังนี้:

ชื่อช่องรีวิว: [ป้อนชื่อสำหรับช่องรีวิว] (ฉันแนะนำ "รีวิวผลิตภัณฑ์" หรือ "รีวิวบรรณาธิการ")

สรุป: [ป้อนสรุป]

ชื่อสรุป: [ป้อนชื่อสำหรับสรุป] (ฉันแค่ใช้ "สรุป" เพื่อให้เข้าใจง่าย)

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

รายละเอียด #0

ชื่อเรื่อง: การออกแบบ

คะแนน: 85%

รายละเอียด #1

ชื่อเรื่อง: Performance

คะแนน: 90%

รายละเอียด #2

ชื่อเรื่อง: Battery Life

คะแนน: 70%

รายละเอียด #3

ชื่อเรื่อง: คุณสมบัติ

คะแนน: 85%

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

กำหนดหมวดหมู่ให้กับโพสต์ของคุณ

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

นี่คือรายละเอียดของผลิตภัณฑ์และหมวดหมู่ที่ฉันใช้:

• เสื้อผ้า
  • รองเท้า
  • นาฬิกา
  • ถุงเท้าสุดเท่
• ครัว
  • มีดทำครัว
  • มิกเซอร์
  • เขียง
• สุขภาพและฟิตเนส
  • ตัวติดตามฟิตเนส
  • น้ำหนัก
  • ลู่วิ่ง
• อิเล็กทรอนิกส์
  • กล้อง
  • หูฟัง
  • คอมพิวเตอร์แล็ปท็อป

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

โพสต์เด่น (อนุญาตให้ดึงผลิตภัณฑ์เป็นโพสต์เด่นในโมดูลหมวดหมู่บางประเภทได้)

ซ่อนกล่องผู้เขียน

สุดท้าย เพิ่มรูปภาพเด่นของคุณ ตรวจสอบให้แน่ใจว่ากว้างอย่างน้อย 1280 px เนื่องจากเราจะใช้เลย์เอาต์ 0ne-column แบบเต็มความกว้างสำหรับรูปภาพเด่น

เผยแพร่โพสต์ของคุณ

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

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

การเพิ่ม CSS ที่กำหนดเอง

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

/****************************
comment box background
*****************************/
#comment-wrap {
    padding: 75px 40px;
	background: #fff;
	border-radius: 3px;
	box-shadow: -1px 0 2px 0 rgba(0,0,0,0.12), 1px 0 2px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);
}
@media (min-width: 980px) {
/***************************
Post Header Size
****************************/
h1.entry-title {
    font-size: 48px;
}

/***************************
Fancy Subtitle
****************************/
.subtitle {
  margin: 1em 0 !important;
font-size: 48px;
}
.fancy {
  text-align: center;
  padding-bottom: 0px;
}
.fancy span {
  display: inline-block;
  position: relative; 
  line-height: 1.3em; 
}
.fancy span:before,
.fancy span:after {
  content: "";
  position: absolute;
  height: 5px;
  border-bottom: 4px solid #333;
  border-top: 4px solid #333;
  top: 40%;
  width: 100%;
  max-width: 200px;
}
.fancy span:before {
  right: 100%;
  margin-right: 15px;
}
.fancy span:after {
  left: 100%;
  margin-left: 15px;
}

/***************************
Star Rating and Social Icons Style
****************************/
.post-footer .rating-stars .rating-star {
width: 50px;
height: 50px;
}

.et_extra_layout .et_pb_column .module-head h1, .module-head .module-filter {
font-size: 28px;
}

.post-footer .rating-stars #rate-title, .post-footer .social-icons .share-title  {   
	display: block;
    font-size: 20px;
}

.post-footer .rating-stars, .post-footer .social-icons {
width: 100%;
margin: 0 auto;
padding: 30px 0;
}

.post-footer .social-icons {
border-bottom: 4px solid #dddddd;
}
}

/***************************
Mobile Adjustments
****************************/
@media (max-width: 980px) {
.subtitle {
font-size: 30px;
text-align: center;
}
}

บันทึกและเผยแพร่

ทีนี้มาดูผลลัพธ์ของเรากัน

ระบบการให้คะแนนของผู้ใช้

สังเกตว่าที่ด้านล่างของโพสต์คุณมีระบบปันส่วนดาวของผู้ใช้

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

คะแนนโดยรวมของผู้ใช้จะแสดงในข้อมูลเมตาในข้อความที่ตัดตอนมา

คุณสามารถเลือกที่จะปิดใช้งานคุณลักษณะนี้ได้ตลอดเวลาในกล่องการตั้งค่าพิเศษ

แค่นั้นแหละ. ฉันหวังว่าคุณจะสนุกกับส่วนที่ 2 ของซีรีส์นี้

กำลังจะเกิดขึ้น: การสร้างเลย์เอาต์หมวดหมู่เพื่อแสดงผลิตภัณฑ์ของคุณ

ในส่วนที่ 3 ฉันจะแสดงวิธีสร้างเค้าโครงหมวดหมู่สำหรับหน้าแรกและหน้าหมวดหมู่ทั้งหมด ตรวจสอบให้แน่ใจว่าคุณใช้เทมเพลตโพสต์ใหม่ของคุณเพื่อเพิ่มผลิตภัณฑ์อย่างน้อย 3 รายการสำหรับแต่ละหมวดหมู่ 4 หมวดหมู่เพื่อเตรียมพร้อมสำหรับส่วนที่ 3 ของซีรีส์ คุณจะต้องใช้สิ่งเหล่านั้นเพื่อเติมโมดูลหมวดหมู่ที่จะแสดงผลิตภัณฑ์ของคุณ

นี่คือสิ่งที่คุณสามารถสร้างได้ในตอนที่ 3:

อย่าลังเลที่จะส่งคำถามหรือความคิดเห็นด้านล่าง ฉันหวังว่าจะได้ยินจากคุณ.