สร้างพอร์ทัลไคลเอ็นต์ด้วย WordPress

เนื้อหา

• 01. ติดตั้ง WordPress ใหม่
• 02. ลบปลั๊กอินเริ่มต้น
• 03. เพิ่มประเภทโพสต์ที่กำหนดเอง
• 04. เพิ่ม / แก้ไขอินเทอร์เฟซประเภทโพสต์ที่กำหนดเอง
• 05. สร้างกระสุนเขียนซ้ำแบบกำหนดเอง
• 06. เพิ่มการสนับสนุนสำหรับฟิลด์ที่กำหนดเอง
• 07. เพิ่มช่องที่กำหนดเอง
• 08. ตั้งค่าสนาม
• 09. สร้างไฟล์เทมเพลต WordPress
• 10. สร้างเค้าโครงโพสต์เดียวแบบเต็มความกว้าง
• 11. เริ่มลูปและสร้างเนื้อหา
• 12. ใช้ PHP เพื่อเรียกค่าแบบไดนามิก
• 13. ทำการทดสอบลูกค้าด้วยข้อมูลจำลอง
• 14. จัดการข้อผิดพลาดสำหรับข้อมูลที่ขาดหายไป
• 15. จัดระเบียบอินเทอร์เฟซ
• 16. แยกออกจากแผนผังเว็บไซต์

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

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

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

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

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

ดาวน์โหลดไฟล์ สำหรับบทช่วยสอนนี้

• วิธีเปลี่ยน WordPress ให้เป็นเครื่องมือสร้างภาพ

01. ติดตั้ง WordPress ใหม่

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

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

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

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

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

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

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

05. สร้างกระสุนเขียนซ้ำแบบกำหนดเอง

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

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

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

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

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

08. ตั้งค่าสนาม

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

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

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

10. สร้างเค้าโครงโพสต์เดียวแบบเต็มความกว้าง

เปิดไฟล์ single-tu_customer.php และเพิ่มฟังก์ชัน get_header และ get_footer WordPress ระหว่างฟังก์ชันเหล่านั้นให้สร้างเค้าโครงแบบเต็มความกว้างเพื่อเก็บเนื้อหาที่ใช้ได้กับธีมของคุณ

? php get_header ();?> div id = "single-wrapper"> div id = "content" tabindex = "- 1"> div> div id = "primary"> id = "main"> -! เนื้อหา -> / main> / div> / div>! - .row -> / div>! - #content -> / div>! - # single-wrapper ->? php get_footer () ;?>

11. เริ่มลูปและสร้างเนื้อหา

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

id หลัก = "main">? php while (have_posts ()): the_post (); ?> var13 -> div> div> div> เนื้อหา / div> div> เนื้อหา / div> div> เนื้อหา / div> / div> / div>? php ในขณะเดียวกัน; // สิ้นสุดลูป ?> var13 -> / main>! - # หลัก ->

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

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

div> div> h5> สรุป / h5> p> นี่คือเอกสารย่อต้นฉบับของคุณ / p> a href = "? php the_field ('brief');?> var13 ->" target = "none"> เปิด / a > / div> / div>

13. ทำการทดสอบลูกค้าด้วยข้อมูลจำลอง

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

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

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

? php if (get_field ('field_name')):?> var13 -> แสดงเมื่อ field_name มีค่า? php else: // field_name ส่งคืนเป็นเท็จ?> var13 -> แสดงเมื่อไม่มีฟิลด์? php endif ; // สิ้นสุด if field_name logic?> var13 ->

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

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

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

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

meta name = "robots" content = "noindex, nofollow" /> User-agent: * Disallow: / customers /

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