ووردبريس: استخدم الذكاء الاصطناعي لصنع كتل مخصصة (مثال أكورديون مجاني)

أردت أكورديون في موقعي على WordPress. كل إضافة "مجانية" جربتها كانت في الحقيقة عرض ترقية له صفحة إعدادات. فطلبت من الذكاء الاصطناعي أن يكتب لي واحدًا: 25 سطرًا، بلا إضافة، وبلا جافاسكريبت، وهو لك أيضًا إن أردت.

تحديث، يوليو 2026: بقي هذا المقال في المسودات لأكثر من عام يَعِد بـ"الكود أدناه" دون أن يكون هناك كود فعلًا. ها هو أخيرًا. أعتذر عن ذلك.

ما تحصل عليه في النهاية

هذه معاينة حية. إنها الكود نفسه بالضبط من القسم التالي، مُلصَق في هذه الصفحة بنفس الطريقة التي كنت ستلصقه بها في ووردبريس. انقر على اللوحات:

يُفتح ويُغلق بلا أي جافاسكريبت لأن عنصر <details> المدمج في المتصفح هو من يتولى الطيّ نيابة عنا. كل متصفح يدعمه منذ سنوات.

الكود

<style>
.ll-acc { border: 1px solid rgba(128,128,128,.5); border-radius: 10px; overflow: hidden; }
.ll-acc details + details { border-top: 1px solid rgba(128,128,128,.5); }
.ll-acc summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; font-weight: 600; list-style: none; }
.ll-acc summary::-webkit-details-marker { display: none; }
.ll-acc summary::after { content: "+"; font-size: 1.3em; font-weight: 400; line-height: 1; }
.ll-acc details[open] > summary { background: rgba(128,128,128,.12); }
.ll-acc details[open] > summary::after { content: "–"; }
.ll-acc .ll-acc-body { padding: 12px 18px 16px; }
</style>

<div class="ll-acc">
  <details>
    <summary>Question one goes here</summary>
    <div class="ll-acc-body">Answer one goes here. Text, links, pictures, whatever you want.</div>
  </details>
  <details>
    <summary>Question two goes here</summary>
    <div class="ll-acc-body">Answer two. Add more panels by copying one whole details block.</div>
  </details>
  <details>
    <summary>Question three goes here</summary>
    <div class="ll-acc-body">Answer three. Delete panels the same way.</div>
  </details>
</div>

أشياء يُرجَّح أنك سترغب في تغييرها:

• النص. استبدل الأسئلة والإجابات النموذجية مباشرة داخل الكتلة. مناطق الإجابة تقبل HTML عاديًا، فالروابط والصور تعمل فيها.
• عدد اللوحات. انسخ كتلة <details>...</details> كاملة لإضافة لوحة؛ واحذف كتلة لإزالة واحدة.
• البدء مفتوحًا. غيّر وسم فتح اللوحة إلى <details open> فتُحمَّل موسَّعة.
• الألوان. درجات الرمادي محايدة عمدًا لتبدو جيدة على القالبين الفاتح والداكن معًا. استبدل قيم rgba(...) إن أردت ألوان علامتك التجارية.

ضعه في صفحتك

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

1. سجّل الدخول إلى ووردبريس وافتح الصفحة أو المقال الذي تريد وضع الأكورديون فيه. اضغط تحرير.
2. انقر على + في المكان الذي يجب أن يظهر فيه الأكورديون وابحث عن الكتلة المسمّاة Custom HTML.
3. الصق المقطع كاملًا فيها، جزء <style> وجزء <div> معًا.
4. انقر مفتاح المعاينة الخاص بالكتلة (أو معاينة الصفحة كاملة) لترى النتيجة مُصيَّرة بدل الكود الخام.
5. تحديث أو نشر. اذهب وانقر لوحاتك الجديدة على الصفحة الفعلية واستمتع بشعور الرضا عن أموال الإضافة التي لم تُنفقها.

الطلب الذي كتبه

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

أي ذكاء اصطناعي يكتب كودًا يفي بالغرض:

• شغّل واحدًا محليًا (مجاني وخاص): استخدمتُ أنا نموذج DeepSeek 70B الخاص بي محليًا. إن كان جهازك يملك القوة اللازمة، فهذا دليل الإعداد الخاص بي: تشغيل DeepSeek محليًا: دليل من 4 خطوات.
• أو استخدم واحدًا مجانيًا عبر الإنترنت: النسخة المجانية من ChatGPT تتعامل مع هذا الطلب دون أي مشكلة.

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

Write me an accordion I can paste into a WordPress "Custom HTML" block.

Requirements:
- Plain HTML and CSS only. No JavaScript, no external files, no plugin.
- Use <details> and <summary> so the browser handles opening and closing.
- Scope every CSS rule under one class so it can't restyle the rest of my theme.
- Neutral colors that look fine on a light theme or a dark theme.
- Three panels with placeholder questions and answers.
- Keep it under 40 lines.

Then explain, step by step, exactly how I install it on a WordPress page.
Assume I have never edited HTML before.

(يبقى نص الطلب أعلاه بالإنجليزية كما هو، لكن يمكنك أيضًا كتابة متطلباتك بالعربية وسيفهمها أغلب النماذج دون مشكلة.)

تلك الفقرة الأخيرة هي الحيلة الكامنة في عنوان هذا المقال: نفس الذكاء الاصطناعي الذي يكتب الكود سيكتب لك دليل التركيب أيضًا، بأي مستوى مهارة تطلبه. إن أربكتك إحدى الخطوات، الصقها مرة أخرى وقل "اشرح الخطوة 3 وكأنني لم أرَ HTML من قبل." سيفعل ذلك بصبر، إلى ما لا نهاية. هذا وحده يتفوق على معظم توثيقات الإضافات.

عادة تستحق أن تُقلَّد: قبل أن يقترب الكود من موقعك الفعلي، الصقه في ملف باسم test.html على سطح المكتب وانقر عليه نقرًا مزدوجًا. سيُفتح في متصفحك، بلا حاجة إلى أي خادم. انقر كل لوحة. إن كان هناك خلل، أطلِع الذكاء الاصطناعي عليه وأخبره بالمشكلة. فقط بعد أن يعمل كما ينبغي ينتقل إلى ووردبريس. هذا هو مختبر الاختبار بأكمله، وهكذا تحققتُ من الكتلة أعلاه.

مطبّات محتملة

• استخدم كتلة Custom HTML، لا كتلة فقرة. إن لصقت الكود في كتلة نصية عادية، سيقوم ووردبريس "مشكورًا" بترميزه (escape)، فيرى الزوار كودًا خامًا بدل الأكورديون.
• وضع أكورديونين في صفحة واحدة أمر لا بأس به. كتلة <style> ستتكرر، وهذا قبيح لكنه غير ضار. إن أزعجك ذلك، ضع CSS مرة واحدة فقط تحت المظهر ← تخصيص ← CSS إضافي، والصق في كتلك فقط جزء <div>.
• بعض القوالب ترسم سهمها الخاص لعنصر summary. المقطع يخفي العلامة الافتراضية بطريقتين، لكن قالبًا عنيدًا قد يرسم أيقونته الخاصة إلى جانب رمز +/– الذي وضعته. إن رأيت رمزين، اسأل الذكاء الاصطناعي: "قالبي يضيف سهمه الخاص لعناصر summary، أخفِه."
• تريد أن تُفتح اللوحات واحدة فواحدة فقط؟ أضف name="faq" داخل كل وسم <details>. المتصفحات الحديثة ستغلق اللوحات الأخرى تلقائيًا؛ والمتصفحات القديمة تتجاهل ذلك دون أن يتعطل شيء.
• لا تلصق ناتج الذكاء الاصطناعي في موقع فعلي دون اختبار. اختبار الملف التجريبي أعلاه يستغرق دقيقتين فقط. كما أن اشتراط عدم استخدام جافاسكريبت يقلّص ما يمكن أن يُخطئ فيه، وهذا نصف سبب اشتراطي له.