بازسازی یک وبلاگ Divi با استفاده از شورت‌کدهای سفارشی

من اخیراً وبلاگ Rev6 را که یک پلتفرم تناسب اندام است، با استفاده از WordPress، Divi و Cloudways بازطراحی کردم.

من از ماژول استاندارد Divi Blog استفاده نکردم. این ماژول فاقد کنترل لازم برای مسیریابی سفارشی URL و ویژگی‌های عضویت است. در عوض، سیستمی از شورت‌کدهای سفارشی را در Child Theme ساختم.

این رویکرد باعث می‌شود منطق برنامه به جای پنهان شدن در پایگاه داده یک صفحه‌ساز، در قالب کدهای PHP نسخه‌گذاری شده باقی بماند.

این تنظیمات از این شورت‌کدها استفاده می‌کند:

  • [rev6_blog_sidebar] برای ناوبری و جستجو
  • [rev6_sort_dropdown] برای مرتب‌سازی
  • [rev6_post_grid] برای چیدمان
  • [rev6_author_bar] برای بخش نویسنده
  • [rev6_author_bio] برای بخش بیوگرافی نویسنده
  • [rev6_related_posts] برای مطالعه بیشتر

در اینجا نکات فنی من از این پروژه آورده شده است:

  1. از ترفندهای تنبلانه CSS grid دوری کنید من زمانی برای اینکه یک سایدبار تمام صفحه را پوشش دهد، از "grid-row: 1 / span 999" استفاده کردم. این کار هزاران ردیف خالی و فضای سفید بسیار زیادی ایجاد کرد. در عوض از named grid areas استفاده کنید. این روش تمیزتر و ایمن‌تر است.

  2. قبل از کد، داده‌های خود را بررسی کنید من زمان زیادی را صرف عیب‌یابی بخش "پست‌های مرتبط" کردم که نمایش داده نمی‌شد. کد بی‌نقص بود، اما مشکل از داده‌ها بود. آن دسته‌بندی فقط یک پست داشت و کد من پست فعلی را مستثنی می‌کرد، بنابراین نتیجه‌ای باقی نمی‌ماند. همیشه قبل از جستجو برای باگ در توابع خود، محتوای پایگاه داده را بررسی کنید.

  3. تفاوت بین فایل‌ها و پایگاه داده را درک کنید وقتی از محیط Staging به محیط Live مهاجرت کردم، چیدمان اشتباه به نظر می‌رسید. سعی کردم با CSS آن را اصلاح کنم، اما موفق نشدم. مشکل این بود که عملیات Import قالب‌ها را جابه‌جا می‌کند، نه محتوای پایگاه داده را. مواردی مانند عرض ماژول‌ها و انتساب پست‌ها در پایگاه داده ذخیره می‌شوند. اگر پس از مهاجرت چیدمان تغییر کرد، به جای استایل‌شیت، پایگاه داده را بررسی کنید.

  4. هرگز یک پایگاه داده کامل را به محیط Production منتقل نکنید یک همگام‌سازی کامل، داده‌های واقعی کاربران مانند سفارش‌ها و ثبت‌نام‌ها را بازنویسی می‌کند. به جای انتقال کلی، از انتقال‌های هدفمند استفاده کنید.

  5. کش (Cache) اولین قدم است در سایت‌های بهینه‌سازی شده، ابزارهای بهینه‌سازی CSS اغلب استایل‌هایی را که فکر می‌کنند استفاده نشده‌اند، حذف می‌کنند. اگر استایل‌های شما ناقص به نظر می‌رسند، ابتدا کش خود را پاک کرده و CSS خود را دوباره تولید (Regenerate) کنید.

بازطراحی اکنون آنلاین است. این طرح دارای یک چیدمان تحریریه تمیز و یک سیستم نویسنده سفارشی است. کدنویسی بخش آسان کار بود؛ محیط پروژه بود که درس‌های واقعی را به همراه داشت.

منبع: https://dev.to/highcenburg/rebuilding-a-divi-blog-with-custom-shortcodes-a-field-report-141g