إعادة بناء مدونة Divi باستخدام اختصارات (shortcodes) مخصصة

قمت مؤخرًا بإعادة تصميم المدونة الخاصة بـ Rev6، وهي منصة للياقة البدنية تستخدم WordPress وDivi وCloudways.

لم أستخدم وحدة Divi Blog القياسية؛ فهي تفتقر إلى التحكم اللازم لتوجيه الروابط (URL routing) المخصص وميزات العضوية. بدلاً من ذلك، قمت ببناء نظام من الاختصارات (shortcodes) المخصصة في القالب الفرعي (child theme).

يحافظ هذا النهج على المنطق البرمجي في ملفات PHP خاضعة للإصدارات (versioned) بدلاً من إخفائه داخل قاعدة بيانات أداة بناء الصفحات (page builder).

يستخدم الإعداد هذه الاختصارات:

  • [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. تحقق من بياناتك قبل الكود الخاص بك قضيت وقتاً في تصحيح أخطاء (debugging) قسم "المقالات ذات الصلة" الذي لم يكن يظهر. كان الكود مثالياً، لكن المشكلة كانت في البيانات؛ حيث كانت الفئة تحتوي على منشور واحد فقط. وبما أن الكود الخاص بي يستبعد المنشور الحالي، فقد كانت النتيجة صفراً. تحقق دائماً من محتوى قاعدة البيانات قبل البحث عن الأخطاء في دوالك (functions).

  3. افهم الفرق بين الملفات وقاعدة البيانات عندما قمت بالانتقال من بيئة الاختبار (staging) إلى الموقع المباشر (live)، بدا التخطيط خاطئاً. حاولت إصلاحه باستخدام CSS ولكن دون جدوى. كانت المشكلة هي أن عمليات الاستيراد (imports) تنقل القوالب (templates) وليس محتوى قاعدة البيانات. أشياء مثل عرض الوحدات (module widths) وتعيينات المنشورات تُخزن في قاعدة البيانات. إذا اختلف التخطيط بعد عملية النقل، فابحث في قاعدة البيانات وليس في ملف التنسيق (stylesheet).

  4. لا تقم أبداً برفع قاعدة بيانات كاملة إلى بيئة الإنتاج (production) فالمزامنة الكاملة تمسح بيانات المستخدمين الحقيقية مثل الطلبات والتسجيلات. استخدم عمليات نقل مستهدفة بدلاً من الرفع الشامل.

  5. التخزين المؤقت (Cache) هو الخطوة صفر في المواقع المحسنة، غالباً ما تقوم أدوات تحسين CSS بحذف التنسيقات التي تعتقد أنها غير مستخدمة. إذا بدت التنسيقات مطبقة بشكل جزئي، فقم بمسح التخزين المؤقت وإعادة إنشاء ملف CSS الخاص بك أولاً.

التصميم الجديد متاح الآن، ويتميز بتخطيط تحريري نظيف ونظام كاتب مخصص. كان الكود هو الجزء السهل، أما البيئة البرمجية فهي التي قدمت الدروس الحقيقية.

المصدر: https://dev.to/highcenburg/rebuilding-a-divi-blog-with-custom-shortcodes-a-field-report-141g