การสร้าง Divi Blog ใหม่ด้วย Custom Shortcodes

เมื่อเร็วๆ นี้ ผมได้ออกแบบบล็อกใหม่ให้กับ Rev6 ซึ่งเป็นแพลตฟอร์มฟิตเนสที่ใช้ WordPress, Divi และ Cloudways

ผมไม่ได้ใช้โมดูล Divi Blog มาตรฐาน เพราะมันขาดการควบคุมที่จำเป็นสำหรับการทำ custom URL routing และฟีเจอร์สมาชิก (membership) แต่ผมเลือกสร้างระบบ custom shortcodes ขึ้นมาใน child theme แทน

วิธีนี้ช่วยให้เก็บ logic ไว้ใน PHP ที่มีการทำ versioning แทนที่จะซ่อนมันไว้ในฐานข้อมูลของ page builder

การตั้งค่านี้ใช้ shortcodes ดังนี้:

  • [rev6_blog_sidebar] สำหรับการนำทาง (navigation) และการค้นหา
  • [rev6_sort_dropdown] สำหรับการจัดเรียง (sorting)
  • [rev6_post_grid] สำหรับเลย์เอาต์ (layout)
  • [rev6_author_bar] สำหรับชื่อผู้เขียน (byline)
  • [rev6_author_bio] สำหรับส่วนข้อมูลผู้เขียน
  • [rev6_related_posts] สำหรับบทความที่เกี่ยวข้อง

นี่คือสิ่งที่ผมได้เรียนรู้ในเชิงเทคนิคจากการสร้างครั้งนี้:

  1. หลีกเลี่ยงการใช้ CSS grid hacks แบบมักง่าย ผมเคยใช้ "grid-row: 1 / span 999" เพื่อทำให้ sidebar ครอบคลุมทั้งหน้า แต่มันกลับสร้างแถวว่างๆ ขึ้นมาเป็นพันแถวและทำให้เกิดช่องว่าง (whitespace) มหาศาล ให้ใช้ named grid areas แทน ซึ่งสะอาดและปลอดภัยกว่า

  2. ตรวจสอบข้อมูลก่อนตรวจสอบโค้ด ผมเสียเวลาไปกับการ debug ส่วน "related posts" ที่ไม่ยอมแสดงผล ทั้งที่โค้ดนั้นสมบูรณ์แบบมาก แต่ปัญหาจริงๆ คือข้อมูล เพราะหมวดหมู่นั้นมีโพสต์เพียงโพสต์เดียว และโค้ดของผมได้ยกเว้นโพสต์ปัจจุบันออกไป ทำให้ไม่เหลือผลลัพธ์เลย ดังนั้นควรตรวจสอบเนื้อหาในฐานข้อมูลก่อนที่จะไล่หาบั๊กในฟังก์ชันเสมอ

  3. เข้าใจความแตกต่างระหว่างไฟล์และฐานข้อมูล เมื่อผมย้ายจาก staging ไปยัง live เลย์เอาต์กลับดูผิดเพี้ยน ผมพยายามแก้ด้วย CSS แต่ก็ไม่สำเร็จ ปัญหาก็คือการ import จะย้ายเฉพาะ template แต่ไม่ได้ย้ายเนื้อหาในฐานข้อมูล สิ่งต่างๆ เช่น ความกว้างของโมดูลและการกำหนดโพสต์จะถูกเก็บไว้ในฐานข้อมูล หากเลย์เอาต์เปลี่ยนไปหลังการย้าย ให้ไปดูที่ฐานข้อมูล ไม่ใช่ที่ stylesheet

  4. อย่าดันฐานข้อมูลทั้งหมดขึ้น production เด็ดขาด การ sync ทั้งหมดจะไปเขียนทับข้อมูลจริงของผู้ใช้ เช่น คำสั่งซื้อและการลงทะเบียน ให้ใช้การโอนย้ายเฉพาะส่วนที่จำเป็นแทนการ push แบบเหมาเข่ง

  5. Cache คือขั้นตอนแรกสุด ในเว็บไซต์ที่ผ่านการปรับแต่งมาอย่างดี เครื่องมือปรับแต่ง CSS มักจะตัดสไตล์ที่มันคิดว่าไม่ได้ใช้งานออกไป หากสไตล์ของคุณดูเหมือนแสดงผลไม่สมบูรณ์ ให้ลองล้าง cache และ regenerate CSS ดูก่อน

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

Source: https://dev.to/highcenburg/rebuilding-a-divi-blog-with-custom-shortcodes-a-field-report-141g