วิธีสร้างหน้าแผนผังเว็บไซต์ HTML แบบไดนามิกใน Divi

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

ในบทช่วยสอนนี้ เราจะแสดงวิธีสร้างเค้าโครงหน้าแผนผังเว็บไซต์ HTML แบบไดนามิกใน Divi โดยใช้การผสมผสานระหว่าง Divi Design และปลั๊กอิน WP Sitemap Page การตั้งค่าทำได้ง่ายมากและผลลัพธ์ก็มีประสิทธิภาพอย่างน่าประหลาดใจ

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

แอบมอง

ดาวน์โหลดเค้าโครงหน้าแผนผังเว็บไซต์ HTML ฟรี

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

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

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

ดาวน์โหลด

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

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

ในการนำเข้าเลย์เอาต์ไปยังเพจของคุณ เพียงแตกไฟล์ zip แล้วลากไฟล์ JSON ไปที่ Divi Builder

หมายเหตุ: เลย์เอาต์นี้ใช้รหัสย่อที่ใช้กับปลั๊กอิน WP Sitemap Page หากคุณไม่มีปลั๊กอินที่ทำงานอยู่บนไซต์ของคุณ คุณจะไม่เห็นเนื้อหาภายในโมดูล

สิ่งที่คุณต้องการสำหรับบทช่วยสอนนี้

สำหรับบทช่วยสอนนี้ คุณจะต้องมีสิ่งต่อไปนี้:

1. ธีม Divi
2. เนื้อหาของเวิร์ดเพรส ในการสร้างเนื้อหาหน้าแผนผังไซต์ HTML คุณจะต้องมีหน้า โพสต์ หมวดหมู่ ผลิตภัณฑ์ ฯลฯ บนไซต์ของคุณ
3. ปลั๊กอินหน้าแผนผังเว็บไซต์ WP สามารถเข้าถึงได้จากแดชบอร์ดของ WordPress ซึ่งเราจะแสดงวิธีการดำเนินการด้านล่าง

ไปกวดวิชากันเถอะ

ความแตกต่างระหว่างแผนผังเว็บไซต์ XML และ HTML

หากคุณยังใหม่ต่อแผนผังเว็บไซต์ โดยทั่วไปแล้วจะมีอยู่สองประเภท – XML และ HTML แผนผังไซต์ XML สร้างขึ้นโดยเฉพาะเพื่อให้เครื่องมือค้นหามีแผนที่โดยละเอียดของไซต์ของคุณ ส่วนใหญ่ แผนผังไซต์ XML มีอยู่อย่างเคร่งครัดสำหรับเครื่องมือค้นหาเช่น Google เพื่อให้ง่ายต่อการรวบรวมข้อมูลไซต์ของคุณ ซึ่งจะช่วยเพิ่มอันดับของคุณ ดังนั้น ไซต์ XML จึงไม่เหมาะสำหรับผู้ใช้ นี่คือที่มาของแผนผังไซต์ HTML แผนผังไซต์ HTML เป็น HTML จริงในตัว (และ PHP เนื่องจากเราใช้ Divi และ WordPress) บนหน้าแผนผังไซต์จริงบนเว็บไซต์ของคุณ แนวคิดคือการสร้างรายการเนื้อหาเว็บไซต์ที่เกี่ยวข้องทั้งหมดอย่างเป็นระเบียบ (โพสต์ หน้า ผลิตภัณฑ์ หมวดหมู่ ฯลฯ) สำหรับผู้ใช้ในที่เดียว โดยพื้นฐานแล้ว หน้าแผนผังเว็บไซต์ HTML เปรียบเสมือนเมนูเด่นสำหรับทั้งเว็บไซต์ของคุณ

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับแผนผังเว็บไซต์ (เช่น วิธีสร้างแผนผังเว็บไซต์ XML ใน WordPress) โปรดดูโพสต์เกี่ยวกับวิธีสร้างแผนผังเว็บไซต์สำหรับเว็บไซต์ WordPress ของคุณ

การตั้งค่าปลั๊กอิน

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

ในการดาวน์โหลดปลั๊กอิน ให้ไปที่แดชบอร์ดของ WordPress และไปที่ปลั๊กอิน > เพิ่มใหม่ จากนั้นค้นหาปลั๊กอินหน้าแผนผังเว็บไซต์ wp โดยใช้แถบค้นหา จากนั้นติดตั้งและเปิดใช้งานปลั๊กอิน

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

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

การสร้างหน้าแผนผังเว็บไซต์ HTML ใน Divi

เมื่อติดตั้งปลั๊กอินแล้ว เราก็พร้อมที่จะเริ่มออกแบบเค้าโครงหน้าแผนผังเว็บไซต์ใน Divi

สร้างเพจใหม่

ในการเริ่มต้น ให้สร้างหน้าใหม่ ตั้งชื่อว่า "แผนผังเว็บไซต์" จากนั้นคลิก "ใช้ Divi Builder"

การเพิ่มเลย์เอาต์ที่สร้างไว้ล่วงหน้าให้กับเพจ

คุณจะได้รับการต้อนรับด้วยสามตัวเลือกสำหรับวิธีที่คุณต้องการสร้างเพจของคุณ เลือก “เลือกเค้าโครงที่สร้างไว้ล่วงหน้า”

จากนั้นค้นหาและค้นหา Magazine Layout Pack และคลิกเพื่อใช้เค้าโครงหน้าหมวดหมู่

การลบองค์ประกอบที่ไม่จำเป็น

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

จากนั้นเพิ่มส่วนปกติใหม่ด้านล่างส่วนบน

การเพิ่มแถว #1 สำหรับการแสดงเพจ

สำหรับแถวแรกของเรา เราจะเพิ่มเนื้อหาหน้าแผนผังเว็บไซต์แบบ HTML ที่จะแสดงหน้าทั้งหมดบนเว็บไซต์ เริ่มต้นด้วยการเพิ่มแถวหนึ่งคอลัมน์

การเพิ่มโมดูลข้อความไปยังหน้าที่แสดง

ภายในแถว เพิ่มโมดูลข้อความใหม่

จากนั้นวางข้อมูลต่อไปนี้ในกล่องเนื้อหาใต้แท็บข้อความ:

<h2>Pages</h2>

[wp_sitemap_page only="page" display_title="false"]

การตั้งค่าการออกแบบข้อความ

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

• แบบอักษรของข้อความ: มอนต์เซอร์รัต
• น้ำหนักแบบอักษรของข้อความ: ตัวหนา

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

• ลิงค์สีข้อความ: #333333

จากนั้นเลือกแท็บการตั้งค่ารายการแบบไม่เรียงลำดับและอัปเดตรายการต่อไปนี้:

• สีข้อความของรายการที่ไม่เรียงลำดับ: #c5e0dc
• Unordered List Style Type: สี่เหลี่ยม
• ตำแหน่งสไตล์รายการที่ไม่เรียงลำดับ: ภายใน
• Unordered รายการเยื้อง: 5vw

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

อัปเดตสไตล์หัวเรื่อง 2 ดังนี้:

• หัวข้อ 2 แบบอักษร: มอนต์เซอร์รัต
• ส่วนหัว 2 น้ำหนักแบบอักษร: ตัวหนา
• หัวเรื่อง 2 ขนาดข้อความ: 3vw (เดสก์ท็อป), 38px (แท็บเล็ต)

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

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

• คลาส CSS: รายการคอลัมน์

การตั้งค่าแถว

อัปเดตการตั้งค่าแถวดังนี้:

• ระยะขอบ: 5vw ด้านล่าง

• กล่องเงา: ดูภาพหน้าจอ
• กล่องเงาตำแหน่งแนวนอน: -5vw
• ตำแหน่งแนวตั้งเงาของกล่อง: 0px
• สีเงา: #c5e0dc

การเพิ่มแถว #2 สำหรับแสดงกระทู้และหมวดหมู่

ทำซ้ำแถวเพื่อสร้างใหม่

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

อัปเดตโมดูลข้อความด้วยรหัสย่อเพื่อแสดงหมวดหมู่

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

<h2>Categories</h2>

[wp_sitemap_page only="category" display_title="false"]

รหัสย่อนี้จะแสดงหมวดหมู่ของโพสต์แบบไดนามิก

โมดูลข้อความซ้ำเพื่อแสดงหัวข้อแยกสำหรับโพสต์ตามหมวดหมู่

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

<h2>Posts by Category</h2>

ทำซ้ำโมดูลข้อความและอัปเดตเนื้อหาด้วยรหัสย่อเพื่อแสดงรายการโพสต์ตามหมวดหมู่

เราจะใส่ชื่อในโมดูลข้อความแยกต่างหากจากรหัสย่อเพื่อเหตุผลในการออกแบบ

ทำซ้ำโมดูลข้อความที่คุณเพิ่งทำซ้ำอีกครั้ง

จากนั้นอัปเดตเนื้อหาของโมดูลข้อความที่ซ้ำกันใหม่ด้วยรหัสย่อใหม่ดังนี้:

[wp_sitemap_page only="post" display_category_title_wording="false" display_title="false"]

อัปเดตการออกแบบเนื้อหารหัสย่อด้วย Divi

เนื่องจากรหัสย่อนี้มีรายการที่ซ้อนกัน เราจึงจำเป็นต้องเพิ่มประสิทธิภาพให้แตกต่างออกไปเล็กน้อย คลิกแท็บการออกแบบและอัปเดตสิ่งต่อไปนี้:

• ตำแหน่งสไตล์รายการที่ไม่เรียงลำดับ: ภายนอก
• เยื้องรายการที่ไม่เรียงลำดับ: 0px

• ระยะขอบ: 0px เหลือ
• แพดดิ้ง: 3.2vw เหลือ

จากนั้นแทนที่คลาส CSS ด้วยสิ่งต่อไปนี้:

• CSS Class: flex-columns

การเพิ่มแถว #3 สำหรับผลิตภัณฑ์

ในแถวที่สามและแถวสุดท้ายนี้ เราจะเพิ่มเนื้อหาหน้าแผนผังไซต์ HTML ที่แสดงหมวดหมู่ผลิตภัณฑ์และผลิตภัณฑ์ทั้งหมด

แถวที่ซ้ำกัน #1

ในการเริ่มต้น ให้ทำซ้ำแถวบนสุด (แถวที่แสดงหน้า)

อัปเดตการตั้งค่าโมดูลข้อความเพื่อแสดงหมวดหมู่ผลิตภัณฑ์

จากนั้นอัปเดตการตั้งค่าข้อความของรายการที่ซ้ำกันด้วยเนื้อหาต่อไปนี้:

<h2>Product Categories</h2>

[wp_sitemap_page only="product_cat" display_title="false"]

รหัสย่อนี้จะแสดงหมวดหมู่สินค้า

โมดูลข้อความซ้ำเพื่อแสดงผลิตภัณฑ์

ถัดไป ทำซ้ำโมดูลข้อความที่เพิ่งสร้างขึ้น

จากนั้นอัปเดตการตั้งค่าข้อความที่ซ้ำกันด้วยเนื้อหาต่อไปนี้:

<h2>Products</h2>

[wp_sitemap_page only="product" display_title="false"]

รหัสย่อนี้จะแสดงผลิตภัณฑ์ทั้งหมดทั่วทั้งไซต์

อัปเดตสีเงาของกล่องแถว

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

• Shadow Color: #ffc077

อัปเดตส่วนหัวของหน้า

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

ผลลัพธ์จนถึงตอนนี้

นี่คือผลลัพธ์จนถึงตอนนี้

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

การเพิ่มหลายคอลัมน์ในเนื้อหาของหน้าแผนผังเว็บไซต์ด้วย CSS ที่กำหนดเอง

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

ขั้นแรก เพิ่มโมดูลโค้ดที่ด้านล่างของหน้า (ไม่ว่าที่ไหน)

จากนั้นวางโค้ด CSS ต่อไปนี้ลงในกล่องโค้ด:

<style>
@media all and (min-width: 767px) {
  
  .flex-columns .wsp-posts-list {
    display:flex;
    flex-wrap: wrap;
  }
  .flex-columns .wsp-posts-list>li>ul {
    width: 300px;
    padding: 2% 10% 10% 5%;
  }
  .column-list .wsp-container {
    column-count: 3;
  }
  
}
</style>

ข้อมูลโค้ด CSS นี้ใช้กับแท็บเล็ตขนาดใหญ่ขึ้นไปเท่านั้น โค้ดกำหนดเป้าหมายโมดูลข้อความด้วยคลาส CSS ที่เราเพิ่มเข้าไปก่อนหน้านี้ สำหรับโมดูลข้อความที่มีคลาส "flex-columns" รหัสย่อที่สร้างโพสต์ตามหมวดหมู่จะถูกแบ่งออกเป็นคอลัมน์ที่มีความกว้าง 300px โมดูลข้อความที่มีคลาส "รายการคอลัมน์" จะแบ่งเนื้อหาหน้าแผนผังเว็บไซต์รหัสย่อออกเป็นสามคอลัมน์

ผลสุดท้าย

เช็คผลสุดท้าย!

วิธีอื่นๆ ในการเพิ่มเนื้อหาแผนผังเว็บไซต์

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

ใช้วิดเจ็ต WordPress

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

ใช้โมดูลบล็อก Divi

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

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

จากนั้นเราสามารถซ่อนองค์ประกอบทั้งหมดยกเว้นลิงก์/ชื่อผลิตภัณฑ์

เราสามารถทำเช่นเดียวกันกับเพจได้เช่นกัน เพียงเลือกหน้าสำหรับประเภทโพสต์

รหัสย่อสินค้า

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

ความคิดสุดท้าย

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

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!