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

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

ในส่วนที่ 1 เราตั้งค่าตัวเลือกธีมและการตั้งค่าเครื่องมือปรับแต่ง ในส่วนที่ 2 เราได้เพิ่มโพสต์และสร้างเค้าโครงโพสต์เพื่อแสดงบทวิจารณ์ผลิตภัณฑ์ของเรา ในส่วนที่ 3 ของซีรีส์นี้ เราได้สร้างเลย์เอาต์หมวดหมู่สองแบบสำหรับไซต์รีวิวผลิตภัณฑ์ของเรา – แบบหนึ่งสำหรับโฮมเพจของเรา และอีกอันสำหรับหน้า "หมวดหมู่ทั้งหมด"

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

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

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

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

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

การสร้างหน้าหมวดหมู่เริ่มต้น

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

ในการปรับแต่งเค้าโครงหมวดหมู่เริ่มต้นของเรา ให้ไปที่แดชบอร์ด wordpress และไปที่พิเศษ > ตัวสร้างหมวดหมู่ จากนั้นวางเมาส์เหนือ "หมวดหมู่เริ่มต้น" แล้วคลิกลิงก์แก้ไข

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

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

บันทึก & ออก

คุณสามารถปล่อยให้ Blog Feed Masonry Module เป็นการตั้งค่าเริ่มต้นได้ เพียงตรวจสอบให้แน่ใจว่าโมดูลหมวดหมู่ใดก็ตามที่คุณเพิ่มในหน้านี้ในอนาคตมีหมวดหมู่ "หมวดหมู่ปัจจุบัน/แท็ก/อนุกรมวิธาน" ที่กำหนดไว้

ตอนนี้เพื่อจัดรูปแบบหน้าหมวดหมู่ของคุณชื่อ h1 คุณต้องเพิ่ม CSS ที่กำหนดเองต่อไปนี้ไปยัง CSS เพิ่มเติมในเครื่องมือปรับแต่งธีม ตรวจสอบให้แน่ใจว่าได้ใส่ไว้ในแบบสอบถามสื่อที่มีความกว้างขั้นต่ำ 980px

.archive h1 {
text-align: center;
font-size: 48px;
line-height: 1.3em;
}

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

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

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

จากแดชบอร์ด WordPress ให้ไปที่ ลักษณะที่ปรากฏ > เมนู แล้วเลือก เมนู เลือกลิงก์ "สร้างเมนูใหม่" ที่ด้านบนของหน้าและป้อนชื่อ "เมนูหมวดหมู่" เป็นชื่อเมนู จากนั้นเลือก “เมนูหลัก” เป็นตำแหน่งที่แสดงภายใต้ส่วนการตั้งค่าเมนู

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

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

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

กลับไปที่เมนูของคุณ เริ่มต้นด้วยรายการเมนูหมวดอิเล็กทรอนิกส์ คลิกเพื่อเปิดตัวเลือกการกำหนดค่า ในกล่อง CSS Classes ให้เพิ่มคลาสชื่อ "green" และสำหรับตัวเลือก Extra Mega Menu ให้เลือก "Mega Menu 3 Featured"

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

สำหรับรายการเมนูหมวดเสื้อผ้า ให้เพิ่มคลาส "สีน้ำเงิน" แล้วเลือกตัวเลือก "เมนูเด่น 3 เมนูเด่น"

สำหรับรายการเมนูหมวดครัว ให้เพิ่มคลาส “สีชมพู” แล้วเลือกตัวเลือก “เมนูเด่น 3 เมนูเด่น”

สำหรับรายการเมนูหมวดสุขภาพและฟิตเนส ให้เพิ่มคลาส "สีม่วง" แล้วเลือกตัวเลือก "เมนูเด่น 3 เมนูเด่น"

รายการเมนู "หมวดหมู่ทั้งหมด" จะแตกต่างออกไปเล็กน้อย ไปข้างหน้าและปล่อยให้กล่องข้อความคลาส CSS ว่างไว้ และสำหรับตัวเลือกเมนูเมก้า ให้เลือก “รายการเมนูเมก้า” เมนูเมก้าประเภทนี้เป็นเมนูเมก้าแบบดั้งเดิมที่สร้างรายการเมนูย่อย เป้าหมายสำหรับลิงก์เมนูเด่นนี้คือการแสดงหมวดหมู่ทั้งหมดพร้อมรายการผลิตภัณฑ์ด้านล่าง

ย้อนกลับและสลับเปิดกล่องหมวดหมู่ และเลือกสี่หมวดหมู่เดียวกัน (อิเล็กทรอนิกส์ เสื้อผ้า ห้องครัว และสุขภาพและฟิตเนส) แล้วเพิ่มลงในเมนู จากนั้นลากแต่ละหมวดหมู่ที่คุณเพิ่งเพิ่มหนึ่งระดับภายใต้รายการเมนูเมกะ "หมวดหมู่ทั้งหมด"

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

เครื่องใช้ไฟฟ้า – สีเขียว
เสื้อผ้า – สีฟ้า
ห้องครัว – สีชมพู
สุขภาพและฟิตเนส – สีม่วง

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

ใช้โปรแกรมแก้ไขรูปภาพเพื่อย่อและครอบตัดรูปภาพแต่ละรูปให้มีความกว้าง 500px และสูง 300px

เพิ่ม/ลากไปยังไลบรารี WordPress Media

กลับไปที่หน้าเมนูใน WordPress Admin

ในตัวอย่างนี้ ลิงก์หมวดหมู่บนสุดในเมนูเมกะของฉันคือ “อิเล็กทรอนิกส์” คลิกลูกศรทางด้านขวาของรายการ "อิเล็กทรอนิกส์" ในกล่อง Navigation Label ให้เพิ่มรูปภาพที่คุณต้องการโดยใช้แท็ก html img ก่อนข้อความ "Electronics" โดยตรง แท็กรูปภาพควรมีลักษณะดังนี้:

<img src="Insert Image Url" width="100%" />

หากต้องการค้นหา URL ของรูปภาพ ให้ไปที่ Media → Library คลิกรูปภาพที่คุณต้องการเพิ่ม ในหน้าจอป๊อปอัปรายละเอียดไฟล์แนบ ให้ค้นหา URL ในส่วนทางด้านขวา ไฮไลต์ จากนั้นใช้ ctrl+c เพื่อคัดลอกไปยังคลิปบอร์ดของคุณ

กลับไปที่การกำหนดค่ารายการเมนู "อิเล็กทรอนิกส์" ในหน้าเมนูและแทนที่ข้อความ "แทรก URL รูปภาพ" โดยวาง URL ของรูปภาพของคุณโดยใช้ ctrl+v

ทำซ้ำขั้นตอนเดียวกันสำหรับรายการเมนูหมวดหมู่ถัดไป 3 รายการ

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

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

บันทึกเมนู

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

ไปที่ Theme Customizer > CSS เพิ่มเติม และป้อน CSS ต่อไปนี้:

/****************************
style menu
*****************************/

#et-menu li.green a:hover, #et-menu li.current-menu-item.green a {
color: #5bd999 !important;
}

li.green a:before {
background-color: #5bd999 !important;
}

#et-menu li.pink a:hover, #et-menu li.current-menu-item.pink a {
color: #e6567a !important;
}

li.pink a:before {
background-color: #e6567a !important;
}

#et-menu li.blue a:hover, #et-menu li.current-menu-item.blue a{
color: #00c0e4 !important;
}

li.blue a:before {
background-color: #00c0e4 !important;
}

#et-menu li.purple a:hover, #et-menu li.current-menu-item.purple a{
color: #7658f8 !important;
}

li.purple a:before {
background-color: #7658f8 !important;
}

/***************************
increase height of line under nav links on hover
****************************/
#et-navigation>ul>li>a:before {
height: 8px;
}

บันทึกและเผยแพร่การตั้งค่าของคุณ

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

การสร้างส่วนท้าย

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

ก่อนอื่นเราต้องไปที่ Theme Customizer > Footer Settings จากนั้นคลิกเค้าโครงและเลือกเค้าโครง 2 คอลัมน์

ย้อนกลับและเลือก Typography และอัปเดตสิ่งต่อไปนี้:

ขนาดข้อความหัวเรื่อง: 32
ขนาดข้อความเนื้อหา/ลิงก์: 16
สีข้อความวิดเจ็ต: rgba(255,255,255,0.6)
สีของลิงก์วิดเจ็ต: #ffffff
สีของหัวเรื่องวิดเจ็ต: #ffffff

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

กลับไปที่เมนูหลักของเครื่องมือปรับแต่งธีมและเลือกวิดเจ็ต จากนั้นเลือก Footer Sidebar Left และคลิกปุ่มเพื่อเพิ่ม Widget เลือกวิดเจ็ตพิเศษ – รีวิวล่าสุด

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

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

/****************************
footer
*****************************/
#footer .et_pb_widget li {
border-bottom: none;
color: #fff;
}
.et_pb_widget.widget_et_recent_reviews .review-breakdowns .score-bar-bg {
background: rgba(255,255,255,.1);
}

บันทึกและเผยแพร่การตั้งค่าตัวปรับแต่งธีมและไปที่ส่วนท้ายของคุณ

แค่นั้นแหละ. คุณทำส่วนที่ 4 เสร็จเรียบร้อยแล้วและเสร็จสิ้นซีรีส์ในการสร้างไซต์รีวิวผลิตภัณฑ์โดยใช้ Extra

CSS ขั้นสุดท้าย

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

.et_pb_extra_module, .posts-blog-feed-module.masonry .hentry {
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);
border-top: 10px solid;
}

/****************************
style menu
*****************************/

#et-menu li.green a:hover, #et-menu li.current-menu-item.green a {
color: #5bd999 !important;
}

li.green a:before {
background-color: #5bd999 !important;
}

#et-menu li.pink a:hover, #et-menu li.current-menu-item.pink a {
color: #e6567a !important;
}

li.pink a:before {
background-color: #e6567a !important;
}

#et-menu li.blue a:hover, #et-menu li.current-menu-item.blue a{
color: #00c0e4 !important;
}

li.blue a:before {
background-color: #00c0e4 !important;
}

#et-menu li.purple a:hover, #et-menu li.current-menu-item.purple a{
color: #7658f8 !important;
}

li.purple a:before {
background-color: #7658f8 !important;
}

/***************************
increase height of line under nav links on hover
****************************/
#et-navigation>ul>li>a:before {
height: 8px;
}

/****************************
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) {

.join-cta {
display: block;
text-align: center;
border: 3px solid #333;
color: #333;
padding: 20px 15px;
text-transform: uppercase;
font-weight: 600;
font-size: 30px;
}

/***************************
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;
}
}

/****************************
footer
*****************************/
#footer .et_pb_widget li {
border-bottom: none;
color: #fff;
}

.et_pb_widget.widget_et_recent_reviews .review-breakdowns .score-bar-bg {
background: rgba(255,255,255,.1);
}

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

ห่อ

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

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

ฉันหวังว่าจะได้ยินจากคุณ.