Xây dựng lại Blog Divi bằng các Shortcode tùy chỉnh

Gần đây tôi đã thiết kế lại blog cho Rev6, một nền tảng thể hình sử dụng WordPress, Divi và Cloudways.

Tôi không sử dụng module Divi Blog tiêu chuẩn. Nó thiếu khả năng kiểm soát cần thiết cho việc định tuyến URL tùy chỉnh và các tính năng thành viên. Thay vào đó, tôi đã xây dựng một hệ thống các shortcode tùy chỉnh trong child theme.

Cách tiếp cận này giữ cho logic nằm trong các tệp PHP có quản lý phiên bản thay vì ẩn nó bên trong cơ sở dữ liệu của trình xây dựng trang (page builder).

Thiết lập này sử dụng các shortcode sau:

  • [rev6_blog_sidebar] để điều hướng và tìm kiếm
  • [rev6_sort_dropdown] để sắp xếp
  • [rev6_post_grid] cho bố cục
  • [rev6_author_bar] cho dòng tên tác giả
  • [rev6_author_bio] cho phần tiểu sử tác giả
  • [rev6_related_posts] để đọc thêm các bài liên quan

Dưới đây là những bài học kỹ thuật tôi rút ra được từ quá trình xây dựng này:

  1. Tránh các mẹo (hacks) CSS grid lười biếng Tôi từng sử dụng "grid-row: 1 / span 999" để làm cho thanh bên (sidebar) trải dài toàn bộ trang. Việc này đã tạo ra hàng nghìn hàng trống và khoảng trắng khổng lồ. Thay vào đó, hãy sử dụng các vùng lưới được đặt tên (named grid areas). Cách này sạch sẽ và an toàn hơn.

  2. Kiểm tra dữ liệu trước khi kiểm tra mã nguồn Tôi đã mất thời gian gỡ lỗi (debug) một phần "bài viết liên quan" không hiển thị. Mã nguồn thì hoàn hảo. Vấn đề nằm ở dữ liệu. Danh mục đó chỉ có duy nhất một bài viết. Mã của tôi đã loại trừ bài viết hiện tại, dẫn đến kết quả bằng không. Hãy luôn xác minh nội dung cơ sở dữ liệu trước khi bạn đi săn lỗi trong các hàm (functions) của mình.

  3. Hiểu rõ sự phân tách giữa tệp tin và cơ sở dữ liệu Khi tôi chuyển từ môi trường staging sang live, bố cục trông rất sai lệch. Tôi đã cố gắng sửa nó bằng CSS nhưng không thành công. Vấn đề là việc import chỉ di chuyển các template, chứ không phải nội dung cơ sở dữ liệu. Những thứ như độ rộng của module và việc gán bài viết nằm trong cơ sở dữ liệu. Nếu bố cục khác biệt sau khi di chuyển, hãy kiểm tra cơ sở dữ liệu, đừng kiểm tra bảng kiểu (stylesheet).

  4. Đừng bao giờ đẩy toàn bộ cơ sở dữ liệu lên production Việc đồng bộ hóa toàn bộ sẽ ghi đè lên dữ liệu thực của người dùng như đơn hàng và đăng ký. Hãy sử dụng các phương thức chuyển dữ liệu có mục tiêu thay vì đẩy lên một cách bừa bãi.

  5. Cache là bước đầu tiên Trên các trang web đã được tối ưu hóa, các công cụ tối ưu hóa CSS thường loại bỏ các style mà chúng cho là không được sử dụng. Nếu các style của bạn trông như chỉ được áp dụng một nửa, hãy xóa cache và tạo lại (regenerate) CSS trước.

Bản thiết kế lại đã chính thức hoạt động. Nó có bố cục biên tập sạch sẽ và hệ thống tác giả tùy chỉnh. Viết code là phần dễ dàng. Chính môi trường làm việc mới mang lại những bài học thực sự.

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