สร้างพอร์ทัลลูกค้าด้วย WordPress

Sep 15, 2025

วิธีการ

(เครดิตภาพ: นักออกแบบเว็บไซต์)

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

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

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

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

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

ดาวน์โหลดไฟล์ สำหรับการกวดวิชานี้

วิธีเปลี่ยน WordPress เป็นตัวสร้างภาพ

01. ติดตั้งสำเนาสดของ WordPress

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

02. ลบปลั๊กอินเริ่มต้น

หากปลั๊กอินเริ่มต้นใด ๆ มาพร้อมกับสำเนาของ WordPress ให้ลบสิ่งเหล่านั้น ปลั๊กอินที่จำเป็นสำหรับการกวดวิชานี้คือ "ฟิลด์ที่กำหนดเองขั้นสูง" และ "แบบกำหนดเองโพสต์ UI" "ตัวแก้ไขคลาสสิก" ได้รับการติดตั้งแล้ว

03. เพิ่มประเภทโพสต์ที่กำหนดเอง

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

04. อินเตอร์เฟสโพสต์ที่กำหนดเองเพิ่ม / แก้ไขที่กำหนดเอง

Build a client portal with WordPress: The add/edit custom post type interface — เพิ่มทั้งฉลากเอกพจน์และพหูพจน์ (เครดิตภาพ: นักออกแบบเว็บไซต์)

เพิ่มพหูพจน์ "ลูกค้า" และ "ลูกค้า" และเอกพจน์ "ลูกค้า" เนื่องจากจะปรากฏในเมนู WordPress Admin การใช้อักษรตัวพิมพ์ใหญ่เป็นที่ยอมรับในฟิลด์เหล่านี้ซึ่งจะทำให้เมนู WordPress Tidier

05. สร้าง Slug ใหม่ที่กำหนดเอง

Build a client portal with WordPress: Create a custom rewrite slug — ใช้ Slug Rewrite ที่กำหนดเองเพื่อประสบการณ์การใช้งานที่ดีขึ้น (เครดิตภาพ: นักออกแบบเว็บไซต์)

การใช้คำนำหน้าสำหรับ Slug ประเภทโพสต์จะหมายถึงลูกค้าที่เพิ่มในพอร์ทัลจะถูกสร้างขึ้นด้วยลิงค์ที่ดูเหมือนว่า "/ tu_customer / example-company" สิ่งนี้ดูไม่เป็นระเบียบเรียบร้อยและ Slug Rewrite ที่กำหนดเองถูกใช้เพื่อปรับปรุงสิ่งนี้ การตั้งค่า Rewrite Slug เป็น "ลูกค้า" อนุญาตให้พิมพ์ประเภทที่กำหนดเองเป็น / ลูกค้า / ตัวอย่างของ บริษัท

06. เพิ่มการสนับสนุนสำหรับฟิลด์ที่กำหนดเอง

Build a client portal with WordPress: Add support for custom fields — ทำเครื่องหมายตัวเลือก "ฟิลด์ที่กำหนดเอง" และส่งการเปลี่ยนแปลง (เครดิตภาพ: นักออกแบบเว็บไซต์)

ตัวเลือกสุดท้ายที่เปิดใช้งานสำหรับประเภทโพสต์ที่กำหนดเองคือ "รองรับ & GT; ฟิลด์ที่กำหนดเอง" ซึ่งพบใกล้ด้านล่างของหน้า ทำเครื่องหมายนี้แล้ว "เพิ่มโพสต์ประเภท" ที่ด้านล่างของหน้า สิ่งนี้ส่งการเปลี่ยนแปลงและลงทะเบียนประเภทโพสต์

07. เพิ่มฟิลด์ที่กำหนดเอง

Build a client portal with WordPress: Add custom fields — ตอนนี้คุณต้องเพิ่มฟิลด์ที่กำหนดเองไปยังโพสต์ประเภทใหม่ของคุณ (เครดิตภาพ: นักออกแบบเว็บไซต์)

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

08. ตั้งค่าฟิลด์

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

Generate CSS — จองตั๋วของคุณเพื่อสร้าง CSS ทันทีเพื่อประหยัด 50 ปอนด์ (เครดิตรูปภาพ: เก็ตตี้ / อนาคต)

09. สร้างไฟล์เทมเพลต WordPress

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

10. สร้างเค้าโครงโพสต์แบบเต็มความกว้างเต็มรูปแบบ

Build a client portal with WordPress: Create a full-width single post layout — ทำเค้าโครงเต็มความกว้างสำหรับเนื้อหาของคุณ (เครดิตภาพ: นักออกแบบเว็บไซต์)

เปิดไฟล์ Single-Tu_Customer.php และเพิ่มฟังก์ชั่น Get_Header และ Get_footer WordPress ระหว่างฟังก์ชั่นเหล่านั้นสร้างเลย์เอาต์ความกว้างเต็มรูปแบบเพื่อเก็บเนื้อหาที่ทำงานกับชุดรูปแบบของคุณ

 & lt; php get_header ();? & gt;
& lt; div class = "wrapper" id = "wrapper เดี่ยว" & gt;
& lt; div class = "คอนเทนเนอร์" id = "เนื้อหา" tabindex = "- 1" & gt;
& lt; div class = "แถว" & gt;
& lt; div class = "col-md content-area" id = "หลัก" & gt;
& lt; class หลัก = "site-main" id = "หลัก" & gt; & lt; -! เนื้อหา - & gt; & lt; / main & gt;
& lt; / div & gt;
& lt; / div & gt; & lt; - .row - & gt;
& lt; / div & gt; & lt; - #content - & gt;
& lt; / div & gt; & lt; - # wrapper เดี่ยว - & gt;
& lt; php get_footer ();? & gt;

11. เริ่มวนซ้ำและสร้างเนื้อหา

Build a client portal with WordPress: Start the loop and create the content — ใช้ตัวยึดตำแหน่งเพื่อจัดวางเนื้อหาของคุณ (เครดิตภาพ: นักออกแบบเว็บไซต์)

ภายใน & lt; หลัก & gt; องค์ประกอบโทร _post และสร้างองค์ประกอบคอนเทนเนอร์เพื่อเก็บข้อมูล ใช้ข้อมูลตัวแทนเพื่อรับแนวคิดของเลย์เอาต์และเริ่มมีสไตล์องค์ประกอบ องค์ประกอบของการ์ดจะเป็นการ์ด Bootstrap พร้อมส่วนหัวคำอธิบายและลิงค์

 & lt; class หลัก = "site-main" id = "หลัก" & gt;
& lt; php ในขณะที่ (have_posts ()): the_post (); & & gt;
& lt; div class = "คอนเทนเนอร์" & gt;
& lt; div class = "แถว" & gt;
& lt; div class = "col-sm-4" & gt; เนื้อหา & lt; / div & gt;
& lt; div class = "col-sm-4" & gt; เนื้อหา & lt; / div & gt;
& lt; div class = "col-sm-4" & gt; เนื้อหา & lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt;? PHP ในขณะที่; // สิ้นสุดของลูป & & gt;
& lt; / main & gt; & lt; - #main - & gt;

12. ใช้ PHP เพื่อโทรในค่าแบบไดนามิก

การใช้ฟังก์ชั่น "The_field" ฟังก์ชั่นที่มาพร้อมกับปลั๊กอินฟิลด์ที่กำหนดเองขั้นสูงเนื้อหาแบบไดนามิกจากฟิลด์ที่กำหนดเองจะถูกป้อนลงในเทมเพลตลูกค้า 'field_name' คือค่าที่ป้อนในขั้นตอนที่ 3

 & lt; div class = "card text-center" & gt;
& lt; div class = "การ์ดร่างกาย" & gt;
& lt; h5 class = "การ์ดชื่อ" & gt; ย่อ & lt; / h5 & gt;
& lt; p class = "text-text" & gt; นี่คือเอกสารสั้น ๆ ของคุณและ lt; / p & gt;
& lt; a href = "& lt;? php the_field ('ย่อ');? & gt;" Target = "None" Class = "BTN BTN-Primary" & GT; Open & Lt; / A & GT;
& lt; / div & gt;
& lt; / div & gt;

13. ทำให้ลูกค้าทดสอบด้วยข้อมูลหุ่นบางอย่าง

Build a client portal with WordPress: Make a test customer with some dummy data — ไปที่แดชบอร์ด WordPress เพื่อสร้างลูกค้าจำลอง (เครดิตภาพ: นักออกแบบเว็บไซต์)

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

14. จัดการข้อผิดพลาดสำหรับข้อมูลที่ขาดหายไป

Build a client portal with WordPress: Handle errors for any missing data — ตรวจสอบให้แน่ใจว่ามีความชัดเจนเมื่อเอกสารไม่พร้อมใช้งาน (เครดิตภาพ: นักออกแบบเว็บไซต์)

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

 & lt; php if (get_field ('field_name')): & gt;
แสดงเมื่อ field_name มีค่า
& lt; php else: // field_name ส่งคืนเท็จ? & gt;
แสดงเมื่อไม่มีฟิลด์
& lt; php endif; // สิ้นสุดถ้า field_name ตรรกะ? & gt;

15. จัดระเบียบอินเตอร์เฟส

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

16. แยกออกจากแผนผังไซต์

ไม่ควรพบโพสต์แบบกำหนดเองในผลลัพธ์ของเครื่องมือค้นหา ประเภทการโพสต์จะต้องถูกแยกออกจากแผนผังไซต์ของเว็บไซต์ไม่ว่าจะผ่านปลั๊กอิน SEO หรือด้วยตนเองโดยใช้แท็ก Meta และ Robots.txt

 & lt; meta name = "หุ่นยนต์" เนื้อหา = "noindex, nofollow" / & gt;
ผู้ใช้เอเจนต์: *
ไม่อนุญาต: / ลูกค้า /

ต้องการออกแบบเว็บไซต์ใหม่หรือไม่ ใช้งานที่ยอดเยี่ยม สร้างเว็บไซต์ เพื่อให้กระบวนการง่ายสุด ๆ

บทความที่เกี่ยวข้อง:

บริการโฮสติ้ง WordPress ที่ดีที่สุดในปี 2019
13 เครื่องมือที่ยอดเยี่ยมสำหรับการขว้างไปยังลูกค้า
เว็บไซต์ WordPress: 14 ตัวอย่างที่ยอดเยี่ยม

สร้างพอร์ทัลลูกค้าด้วย WordPress

01. ติดตั้งสำเนาสดของ WordPress

02. ลบปลั๊กอินเริ่มต้น

03. เพิ่มประเภทโพสต์ที่กำหนดเอง

04. อินเตอร์เฟสโพสต์ที่กำหนดเองเพิ่ม / แก้ไขที่กำหนดเอง

05. สร้าง Slug ใหม่ที่กำหนดเอง

06. เพิ่มการสนับสนุนสำหรับฟิลด์ที่กำหนดเอง

07. เพิ่มฟิลด์ที่กำหนดเอง

08. ตั้งค่าฟิลด์

09. สร้างไฟล์เทมเพลต WordPress

10. สร้างเค้าโครงโพสต์แบบเต็มความกว้างเต็มรูปแบบ

11. เริ่มวนซ้ำและสร้างเนื้อหา

12. ใช้ PHP เพื่อโทรในค่าแบบไดนามิก

13. ทำให้ลูกค้าทดสอบด้วยข้อมูลหุ่นบางอย่าง

14. จัดการข้อผิดพลาดสำหรับข้อมูลที่ขาดหายไป

15. จัดระเบียบอินเตอร์เฟส

16. แยกออกจากแผนผังไซต์

วิธีการ - บทความยอดนิยม

สร้างแปรงตัวอักษรของคุณเองใน Illustrator

วิธีการวาดตัวละครในปากกาและหมึก

วิธีเปลี่ยนวันในตอนกลางคืนใน Photoshop

พัฒนาทักษะศิลปะแนวคิดของคุณใน Photoshop

สร้างพื้นผิวที่น่ากลัวด้วยเทคนิคสื่อผสม

ต้นไม้กระจายที่มี v-ray

วิธีการบรรลุแสงที่ดีขึ้นด้วย V-ray

สร้าง Sensational Sunsets ใน Photoshop

หมวดหมู่