Membangun Kembali Blog Divi dengan Shortcode Kustom

Baru-baru ini saya mendesain ulang blog untuk Rev6, sebuah platform kebugaran yang menggunakan WordPress, Divi, dan Cloudways.

Saya tidak menggunakan modul Divi Blog standar. Modul tersebut kurang memiliki kontrol yang diperlukan untuk perutean URL kustom dan fitur keanggotaan. Sebagai gantinya, saya membangun sistem shortcode kustom di dalam child theme.

Pendekatan ini menjaga logika tetap berada dalam PHP yang terversi, alih-alih menyembunyikannya di dalam database page builder.

Pengaturan ini menggunakan shortcode berikut:

  • [rev6_blog_sidebar] untuk navigasi dan pencarian
  • [rev6_sort_dropdown] untuk pengurutan
  • [rev6_post_grid] untuk tata letak
  • [rev6_author_bar] untuk baris penulis (byline)
  • [rev6_author_bio] untuk bagian penulis
  • [rev6_related_posts] untuk bacaan lainnya

Berikut adalah pelajaran teknis saya dari proses pembangunan ini:

  1. Hindari hack CSS grid yang malas Saya pernah menggunakan "grid-row: 1 / span 999" untuk membuat sidebar membentang di seluruh halaman. Hal ini menciptakan ribuan baris kosong dan ruang kosong (whitespace) yang masif. Gunakan named grid areas sebagai gantinya. Ini lebih bersih dan lebih aman.

  2. Periksa data Anda sebelum memeriksa kode Anda Saya menghabiskan waktu untuk men-debug bagian "related posts" yang tidak muncul. Kodenya sudah sempurna. Masalahnya ada pada datanya. Kategori tersebut hanya memiliki satu postingan. Kode saya mengecualikan postingan saat ini, sehingga menyisakan nol hasil. Selalu verifikasi konten database Anda sebelum Anda mencari bug dalam fungsi Anda.

  3. Pahami perbedaan antara file dan database Saat saya melakukan migrasi dari staging ke live, tata letaknya terlihat salah. Saya mencoba memperbaikinya dengan CSS, tetapi gagal. Masalahnya adalah impor memindahkan template, bukan konten database. Hal-hal seperti lebar modul dan penugasan postingan tersimpan di dalam database. Jika tata letak berbeda setelah migrasi, periksalah database, bukan stylesheet.

  4. Jangan pernah mendorong (push) database lengkap ke produksi Sinkronisasi penuh akan menimpa data pengguna asli seperti pesanan dan registrasi. Gunakan transfer yang ditargetkan alih-alih melakukan push secara menyeluruh.

  5. Cache adalah langkah nol Pada situs yang dioptimalkan, alat optimasi CSS sering kali menghapus gaya yang mereka anggap tidak digunakan. Jika gaya Anda tampak hanya terpasang sebagian, bersihkan cache Anda dan buat ulang (regenerate) CSS Anda terlebih dahulu.

Desain ulang ini sudah live. Fiturnya mencakup tata letak editorial yang bersih dan sistem penulis kustom. Kodenya adalah bagian yang mudah. Lingkungan kerjanya memberikan pelajaran yang sebenarnya.

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