تصميم المواقع في وردبريس ليس عملية سهلة، خصوصا مع عدد محررات الصفحات المتوفرة ما بين مدفوعة مثل بريكس وديفي وإلمنتور وما بين مجانية كنسخة إلمنتور المجانية ومحرر وردبريس الأصلي غوتينتبرغ، فالمبتدأ يحتار ورغم أن إليمنتور هو الخيار الشائع فهو ليس الأفضل كونه بطيء ومليئ بالميزات التي لا تحتاجها وكوده معقد جدا ومكتظ، لذا يعود الكثير لإختيار محرر وردبريس الأصلي وتدعيمه بمكاتب المكونات.

ولعرض الإشكال في مسألة البطأ وأهمية نظافة الكود هذا عنوان h2 تم وضعه في صفحة باستخدام محرر غوتينبرغ:

<h2 class="wp-block-heading">حالات شائعة في اختراقات ووردبريس</h2>

وهذا عنوان في إلمنتور:

<div class="elementor-element elementor-element-dc71011 elementor-widget elementor-widget-heading" data-id="dc71011" data-element_type="widget" data-widget_type="heading.default">
  <div class="elementor-widget-container">
    <style>/*! elementor - v3.18.0 - 06-12-2023 */
     .elementor-heading-title{padding:0;margin:0;line-height:1}.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a{color:inherit;font-size:inherit;line-height:inherit}.elementor-widget-heading .elementor-heading-title.elementor-size-small{font-size:15px}.elementor-widget-heading .elementor-heading-title.elementor-size-medium{font-size:19px}.elementor-widget-heading .elementor-heading-title.elementor-size-large{font-size:29px}.elementor-widget-heading .elementor-heading-title.elementor-size-xl{font-size:39px}.elementor-widget-heading .elementor-heading-title.elementor-size-xxl{font-size:59px}</style>
       <h2 class="elementor-heading-title elementor-size-default">حالات شائعة في اختراقات ووردبريس</h2>
  </div>
</div>

إذا فنظافة الكود وخفة المحرر مهمة جدا في جودة الموقع، ولكي لا نشطح بعيدا عن الموضوع لنعد لنقاش محرر غوتينبرغ وكيفية توظيفه في صناعة مواقع خفيفة وإحترافية:

محرر غوتينبرع

محرر غوتينبرغ نظيف ومجاني ومدعوم من الشركة الأم يعمل بنظام ال blocks أي المكونات بالمعنى الحرفي الطوب، ويمكن بناء أي موقع من هذه الطوبات التي تشكل المحتوى مثل العناوين والنصوص والمجموعات والأزرار والصور لكنه للأسف بطيء التطوير ومحدود وكل من جربه يعرف أنه يفتقر لميزات تتوفر في المحررات الأخرى مثل التحرير على أساس حجم الشاشة media queries مما يدع تصميم الموقع في الهاتف متروكا للصدفة وخيارت إظهار وإخفاء المحتوى عبر الشروط البرمجية كحجم الشاشة أو نوع الجهاز.

كيف نعالج نقوصات غوتينبيرغ؟

هناك طريقان إما بمكتبة مكونات مدفوعة أو بمكونات مجانية وبما أن المقال عن المجانية فأسردها:

ثيم المكونات block theme

تعد ثيمات المكونات الشكل الجديد لثيمات وردبريس على غرار الثيمات الكلاسيكية وأوضح فرق هو أن الثيمات الكلاسيكية تستخدم المخصص القديم بينما تستخدم الحديثة المحرر العالمي وتحرير الموقع الكامل وتوفير الأنماط الجاهزة للإسخدام.

Ollie

أولي Ollie من أفضل الثيمات المجانية المتوفرة في متجر وردبريس ولا حاجة للقلق بشأن دعمه للعربية فهو لا يضيف أي مكونات مخصصة ويستخدم المكونات الأساسية المعربة أصلا وخاصيته الأفضل هي عدد الأنماط المتوفرة فيه فهو يوفر أكثر من 70 نمطا جاهزا وبعض الصفحات المبنية قابلة للسحب والإفلات مما يسهل إنجاز المواقع بسرعة خصوصا إن لم تكن مصمما. ومؤخرا قد أضاف ollie menu مجانا مما جعل عمل الهيدر الكبير سهلا جدا.

الإضافات Plugins

شروط الظهور للمكون Block Visibility

هذه أفضل إضافة لإعدادت الظهور والإخفاء لأي عنصر في وردبريس بل حتى أفضل مما توفره أي مكتبة مكونات مدفوعة، سابقا كانت مدفوعة وتبرع بها صاحبها للمجتمع وهي لا تتطلب وضع مكون إضافي بل تقوم بتوسيع خصائص المكونات الأساسية في المحرر لجعلك تظهر أو تخفي العنصر والمكونات التي بداخله بناءا على شروط معينة والأمر واسع جدا حيث يمكنها إخفائها على أغلب شروط php، هناك من قام بعمل نظام كورسات وطلاب مصغر من خلالها فقط!

Social Sharing Block مكون المشاركة على التواصل

بالرغم من أن وردبريس يحتوي على مكون يسمح لك بوضع أيقونات التواصل وروابطها بشكل يدوي فهو لا يوفر أيقونات لمشاركة المقال المعين على مواقع التواصل ولكن الحل بسيط فهذه الإضافة توفر المكون هذا مع إعدادات شبيهة بإعدادت مكون التواصل الأصلي جدا وهي خفيفة إذا لا تستخدم جافا-سكربت.

مكون الأيقون Icon block

يوفر مكون الأيقون ميزة ناقصة من محرر غوتينبيرغ أيضا ولكن هذه المرة بشكل أفضل من المكاتب المدفوعة أيضا فهي توفر خصائص كثيرة منها لصق الكود مباشرة أو تحرير كود ال svg أو الإختيار من مكتبة أيقونات وردبريس أو رفع الأيكون الخاص.

Twentig صندوق الأدوات لثيمات المكونات

لا توفر هذه الأداة مكونات إضافية إنما مثل إضافة الظهور والخفاء توسع خيارات مكونات محرر غوتينبرغ الأساسية مما يجعلها خفيفة وسهلة بحيث لا يتغير نمط العمل عليك، تقوم هذه الأداة بتوفير كلاسات-أصناف CSS جاهزة لتحسين شكل الأقسام للهاتف أو تغيير أحجام المكونات بناءا على حجم الشاشة يعني أنها توفر framework إطار عمل صغير ل CSS. كما أن الإضافة توفر مئات الانماط الإضافية في حال لو لم تكفي أنماط ollie.

أداة سحب الحقول المخصصة Meta Field Block

مؤخرا قد أضاف وردبريس هذه الخاصية بشكل محدود لمحرر غوتينبرغ لكني لم أتمكن من استخدامها بشكل صحيح داخل المحرر العالمي، فقط في الصفحات ولم أتمكن من معرفة إذا ما كانت تدعم السحب من حقول الصور وبإختصار فالحقول المخصصة هي حقول نصية او صورية تضيفها في قالب المقال أو البوست المخصص وتقوم بتعبئة بياناتها من المحرر وهدف هذه الإضافة سحب البيانات هذه وعرضها في المكون الذي تحب وهي تقوم بالأمر بشكل مقبول مع ذلك لا أنصح بها إذ أنك يمكنك ببساطة استخدام block binding api لو كنت عارفا ب html ولو بشكل أساسي.

أدوات تطوير مهمة

والآن سأعرج على إضافات لا تتعلق بالمحرر لكنها مهمة لكونها مجانية وستأخذ مواقعك لمستوى آخر وتوفر خصائص لن يوفرها أي محرر مدفوع حاليا بذاته.

ٍSecure Custom fields

لا بد أن يكون هذا جزءًا أساسيًا من وردبريس ولكنه حاليا إضافة. نعم، لقد تم نسخ هذه الإضافة من إضافة سابقة تدعى ACF بطريقة غير نزيهة تمامًا، وبغض النظر عن الجدل الدائر حلوها، فإنها توفر الآن جميع الميزات المدفوعة في تلك اللإضافة القديمة مجانًا ولم يعد هناك داعي كمستخدم للإعتماد على غيرها أو شراء تلك النسخة.

ولكن ما الذي تفعله؟

تخيل أن موقع وردبريس الخاص بك يشبه دفتر ملاحظات. كل صفحة أو منشور تكتبه يحتوي بالفعل على الأساسيات:

  • العنوان
  • المحتوى

ولكن في بعض الأحيان قد تريد إضافة تفاصيل صغيرة إضافية لا تتناسب مع النص العادي. وهنا يأتي دور الحقول المخصصة. قد يكون لديك صفحة عن فيلم.

عادةً ما ستكتب:

”هذا الفيلم رائع…“

ولكن ماذا لو أردت تخزين أشياء مثل:

  • التقييم: 8/10
  • المخرج: نولان
  • سنة الإصدار: 2010

بدلاً من دمج ذلك في النص، يمكنك تخزينها كحقول مخصصة.

ما هو الحقل المخصص؟ الحقل المخصص هو ببساطة:

تسمية (اسم) + قيمة (بيانات)، مثل هذا:

التقييم → 8

المخرج → نولان

السنة → 2010

FluentSnippets القصاصات البرمجية

يوفر محرر وردبريس الأساسية خاصية وضع CSS عالمي بحيث يمكنك كتابة كل الكود هناك وسيظهر في داخل المحرر لكن فيه مشاكل منها أنه لا يملك أي خصائص المحررات البرمجية لهذا الكتابة فيه صعبة وسيئة للمبتدئين ولا يدعم خاصية إضافة php أو Javascript عالمية أصلا. والأسوء أن ثيمات المكونات عادة لا تأتي مع ثيم ابن Child Theme (يمكن صنع واحد) لهذا من الضروري أضافة محرر برمجي يشغل القصاصات البرمجية وبشرط يحدد مكان تشغيلها مع محرر بصري جيد وخاصية إضافة أنواع مختلفة من القصاصات بناءا على كل لغة.

FileBird مدير ملفات مكتبة الوسائط

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

في الختام

ستحتاج لبعض المناورات لتستخدم المحرر بشكل تجاري وربما لن تحتاج أي منها لموقع شخصي وهناك أسباب تدفع لعدم اختياره اتفهمها لكن أي منها لن يعوض أدوات التطوير التي ذكرتها تماما لا في مكاتب المكونات ولا في المحررات الأخرى وهذا الطريق المجاني جيد وممتاز حتى أني صنعت موقعي الشخصي

فيه ,ولا تتعارض هذه الإضافات مع بعض غالبا وتوفر حلا لـ90% من متطلبات المواقع الأساسية ما دمت تجيد استخدام CSS ولا أنصحك بترك تعلمه حتى لو ذهبت في طريق محرر آخر.