كيف تحوّل صفحة Elementor إلى HTML وCSS بسيطين

الصفحة المبنية بـ Elementor يجمّعها WordPress وPHP في كل زيارة، لكن ما يصل إلى المتصفح هو HTML وCSS وJavaScript عادية. ولهذا السبب تحديدًا يمكن صنع نسخة ثابتة من الأساس: تحتفظ بالناتج وتتخلى عن الآلة التي أنتجته. ويفعل الناس ذلك لاستضافة صفحة هبوط مكتملة في أي مكان، أو للتوقف عن صيانة تثبيت WordPress لموقع لا يتغير أبدًا، أو لتسريع تحميل صفحة ثقيلة.

لا يوفّر Elementor زرًا لهذا. فالتصدير الخاص به ينتج ملف قالب بصيغة JSON، مخصصًا للاستيراد من جديد في Elementor، لا HTML يمكنك استضافته. لذلك يجري العمل في ثلاث خطوات: احفظ الصفحة كما تُعرض، واختصر CSS إلى ما تستخدمه فعلًا، واستبدل الأجزاء التي كانت تعتمد على WordPress.

ما الذي يبقى بعد النقل وما الذي لا يبقى

إذا كانت الصفحة في معظمها من الصفّين الأولين، فالنسخة الثابتة مكسب سهل. أما إذا كانت تعتمد على النماذج أو قوائم المتجر أو خلاصة مدونة، فأبقِها في WordPress وسرّعها هناك بدلًا من ذلك.

الخطوة 1: احفظ الصفحة كما تُعرض

سجّل الخروج من WordPress أولًا، أو افتح الصفحة في نافذة خاصة. فالزيارة وأنت مسجّل الدخول تضيف شريط الإدارة وأنماطه إلى HTML، ولا تريد أيًّا منهما في النسخة.

صفحة واحدة: احفظها من المتصفح

1. افتح الصفحة في Chrome وأنت مسجّل الخروج.
2. اضغط Ctrl+S (أو Cmd+S على Mac) واختر Webpage, Complete (صفحة ويب، كاملة).
3. ستحصل على ملف HTML وبجانبه مجلد يضم الصور وأوراق الأنماط والسكربتات التي حمّلتها الصفحة.

موقع كامل: استخدم إضافة تصدير ثابت

لأكثر من بضع صفحات، تزحف إضافة مواقع ثابتة مثل Simply Static على موقع WordPress وتكتب كل صفحة مع ملحقاتها في مجلد أو ملف ZIP. كما تعيد كتابة الروابط الداخلية، وهو عمل مملّ إذا قمت به يدويًا. ومع ذلك افحص الناتج صفحةً صفحة: فقد تفوّت الإضافات ملفات لا تطلبها إلا JavaScript.

الخطوة 2: اختصر CSS إلى ما تستخدمه الصفحة

تحمّل صفحة Elementor النموذجية ورقة أنماط القالب، وCSS الواجهة الأمامية الخاص بـ Elementor، وملف CSS لكل نوع من العناصر، وملفًا مولَّدًا للصفحة نفسها، وغالبًا ملف خط أو اثنين. ومعظم هذه القواعد تنسّق عناصر غير موجودة في الصفحة. وأضمن طريقة لمعرفة القواعد المستخدمة هي أن تدع Chrome يسجّلها.

1. افتح الصفحة الحية وأنت مسجّل الخروج، ثم افتح DevTools.
2. افتح القائمة ذات النقاط الثلاث، ثم More tools (مزيد من الأدوات)، ثم Coverage (التغطية)، واضغط زر إعادة التحميل فيها.
3. استخدم الصفحة: افتح قائمة الجوال، وتنقّل بين التبويبات والأكورديونات، وغيّر حجم النافذة إلى عرض هاتفك وجهازك اللوحي.
4. اضغط Export (تصدير) في لوحة Coverage واحفظ ملف JSON.
5. أفلِت ذلك الملف على صفحة تحويل Coverage JSON إلى CSS واضغط استخراج CSS المستخدم.
6. احفظ النتيجة في ورقة أنماط واحدة، واستبدل وسوم <link rel="stylesheet"> في الصفحة برابط واحد إليها، واحتفظ بملفات الخطوط التي تشير إليها.

يكتب مزيل CSS غير المستخدم كل قاعدة من جديد داخل كتلة @media الخاصة بها، وهذا مهم هنا: فـ Elementor يضع قواعد الجهاز اللوحي والجوال داخل استعلامات الوسائط، والأداة التي تفقدها تجعل تخطيط الجوال ينطبق على سطح المكتب أيضًا. كما أنه يُبقي @font-face و@keyframes كاملة.

وإن كنت تفضّل العمل من الملفات المحفوظة، فإن تبويب HTML + CSS في الأداة نفسها يأخذ HTML وأوراق الأنماط بدلًا من ذلك. يضيف Elementor وإضافاته بعض الفئات عبر JavaScript بعد تحميل الصفحة، فضع بادئاتها في احتفظ دائمًا، مثل /^elementor-/ و/^e-/، وقارن النتيجة بالصفحة الأصلية قبل أن تثق بها.

الخطوة 3: تعامل مع ما كان يحتاج إلى WordPress

حركات الظهور والعناصر المخفية

يحمل العنصر الذي له حركة ظهور الفئة elementor-invisible، وتزيلها JavaScript الخاصة بـ Elementor حين يظهر العنصر في مجال الرؤية أثناء التمرير. وفي نسخة تخلو من ذلك السكربت لا تزول الفئة أبدًا ويبقى العنصر غير مرئي. فإما أن تحتفظ بسكربتات الواجهة الأمامية الخاصة بـ Elementor، أو تحذف elementor-invisible من HTML وتدع العناصر تظهر دون حركة.

النماذج

يرسل نموذج Elementor بياناته إلى WordPress، الذي لم يعد موجودًا. استبدله بخدمة نماذج تقبل نموذج HTML عاديًا، أو برابط بسيط يفتح رسالة بريد إلكتروني.

الروابط والبقايا

• افحص كل رابط داخلي: عناوين WordPress مثل /about/ تحتاج إلى مجلد مطابق فيه ملف index.html، أو إلى إعادة كتابة (rewrite) على الاستضافة الجديدة.
• احذف سكربتات WordPress التي لم تعد الصفحة تحتاجها، مثل سكربت الرموز التعبيرية (emoji)، وأرقام ?ver= في أسماء الملفات إن أعدت تسمية الملفات.
• احتفظ بصور srcset التي يشير إليها HTML، وإلا حمّلت الهواتف الصورة بحجمها الكامل.

افحص قبل أن تنتقل

1. افتح النسخة الثابتة والأصل جنبًا إلى جنب على عروض سطح المكتب والجهاز اللوحي والهاتف.
2. افتح كل قائمة وتبويب وأكورديون، ومرّر الصفحة كلها لاكتشاف العناصر المخفية.
3. شغّل الاثنين في اختبار سرعة وقارن مقدار CSS المحمَّل.
4. احتفظ بموقع WordPress وملفات CSS الكاملة حتى تعمل النسخة الثابتة على الموقع الحي لبعض الوقت.