1.2محرّر Gutenberg & الكتل
الأساسي في 30 ثانية
- Gutenberg يعمل بـالكتل: كل عنوان وفقرة وصورة وزر وعمود كتلة مستقلة يمكن نقلها وضبطها.
- نُدرج كتلة بزر + أو بكتابة / متبوعة بالاسم (/image، /columns)، وهو اختصار المعتادين.
- الأنماط (patterns) تُدرج تخطيطات جاهزة؛ والكتل القابلة لإعادة الاستخدام تُعدَّل في مكان واحد وتُحدَّث في كل مكان.
حالة مصغّرة متسلسلة — سمير يركّب صفحة المجموعات
على سمير بناء صفحة «المجموعات» في ورشة بهجة: لافتة، ثم ثلاث بطاقات للتشكيلات جنبًا إلى جنب، ثم صندوق تواصل متكرّر في عدة صفحات. يكتشف أن Gutenberg يتيح فعل كل شيء دون كود، لكنه يريد الإسراع والبقاء متّسقًا. يعرض له هذا القسم الكتل والأعمدة والأنماط والكتلة القابلة لإعادة الاستخدام التي ستجنّبه إعادة إنشاء الصندوق في كل صفحة.
تكملة الحالة 1.1 — مخطط المحتويات جاهز، ننتقل إلى التركيب.
1. الكتل والأعمدة
في Gutenberg، كل شيء كتلة: عنوان، فقرة، صورة، زر، معرض، أعمدة. تُحدَّد كل كتلة، وتُنقل بالسحب والإفلات، ولها إعداداتها الخاصة في الشريط الجانبي. هكذا نركّب الصفحة كما نكدّس الطوب، دون كتابة كود. الاختصار الأكثر فائدة: كتابة / في المحتوى تفتح أداة الإدراج وتتيح استدعاء كتلة باسمها (/image، /button، /columns).
بالنسبة إلى تشكيلات حسن الثلاث، يُدرج سمير كتلة أعمدة بثلاثة أعمدة، ثم يضع في كل عمود صورة وعنوانًا وفقرة. على الهاتف، تتراكم الأعمدة تلقائيًا: تبقى الصفحة مقروءة دون إعداد إضافي.
2. الأنماط والكتل القابلة لإعادة الاستخدام
الأنماط (patterns) تخطيطات جاهزة — لافتة، شبكة أسعار، شهادات — تُدرج بنقرة ثم تُخصّص. توفّر وقتًا كبيرًا في الأقسام المعقّدة وتضمن نتيجة احترافية.
الكتل القابلة لإعادة الاستخدام (أو المتزامنة) تذهب أبعد: كتلة صُمّمت مرة واحدة (مثل صندوق «اتصل بنا») يمكن إعادة استخدامها في عدة صفحات. تعديلها في مكان واحد يُحدّث كل التكرارات. يستخدمها سمير لبيانات الورشة التي يجب أن تبقى متطابقة في كل مكان.
🔎 مثال ملموس — ثلاث تشكيلات جنبًا إلى جنب (حالة سمير)
1. كتلة أعمدة ← 3 أعمدة.
2. في كل عمود: صورة + عنوان التشكيلة + فقرة.
3. زر + ← الأنماط ← إدراج شريط «التزاماتنا».
4. صندوق التواصل ← «إنشاء كتلة قابلة لإعادة الاستخدام».
← إعادة استخدام الصندوق في المجموعات، من نحن واتصل بنا.النتيجة: صفحة منظَّمة في بضع دقائق.
الدرس: النمط للتخطيط، والكتلة القابلة لإعادة الاستخدام للمحتوى المتكرّر.
مفردات القسم
- Gutenberg
- محرّر محتوى WordPress القائم على الكتل: الطريقة الحديثة لتركيب المقالات والصفحات.
مثال بسيط: يبني سمير صفحة المجموعات في Gutenberg.
ما ليس كذلك: العودة إلى المحرّر الكلاسيكي بدافع العادة.
رد فعل: الكتل = Gutenberg.
- الكتلة (Block)
- وحدة محتوى مستقلة: فقرة، عنوان، صورة، زر، أعمدة، معرض.
مثال بسيط: تشغل كل تشكيلة عمودًا بثلاث كتل.
ما ليس كذلك: وضع كل شيء في كتلة فقرة واحدة.
رد فعل: عنصر واحد = كتلة واحدة.
- الإدراج (+ أو /)
- إضافة كتلة بزر + أو بكتابة / متبوعة باسم الكتلة.
مثال بسيط: كتابة /columns لإدراج الشبكة.
ما ليس كذلك: البحث عن كل كتلة في قائمة دون استخدام الاختصار.
رد فعل: / + الاسم = إدراج سريع.
- النمط (pattern)
- تخطيط جاهز للاستخدام، يُدرج بنقرة ثم يُخصّص.
مثال بسيط: شريط «التزاماتنا» يُدرج ثم يُكيَّف مع الورشة.
ما ليس كذلك: إعادة إنشاء كل قسم معقّد يدويًا.
رد فعل: قسم جاهز = نمط.
- الكتلة القابلة لإعادة الاستخدام
- كتلة محفوظة تُستخدم في عدة صفحات، وتُحدَّث في كل مكان من مصدر واحد.
مثال بسيط: صندوق التواصل متطابق في ثلاث صفحات.
ما ليس كذلك: نسخ الصندوق ولصقه ثم نسيان تصحيح أحد التكرارات.
رد فعل: محتوى متكرّر = كتلة متزامنة.
في التطبيق — تركيب صفحة بالكتل
- في صفحة، أدرج عنوانًا وفقرة وصورة وزرًا عبر + أو /.
- أضف كتلة أعمدة بعمودين وانقل إليها الكتل.
- أدرج نمطًا من تبويب الأنماط، ثم خصّص نصه وصورته.
- أنشئ كتلة قابلة لإعادة الاستخدام «اتصل بنا» وأدرجها في صفحة ثانية.
نص جاهز للقول — عرض التركيب بالكتل (30 ثانية)
«تُبنى صفحتك كما تُبنى بالطوب: عنوان، صورة، زر. يمكنني أيضًا إعادة استخدام كتلة تواصل في عدة صفحات: إذا تغيّر رقمك، أعدّله مرة واحدة ويُحدَّث في كل مكان.»
اعرض الكتلة القابلة لإعادة الاستخدام مباشرة: إنها الحجّة الأكثر إقناعًا.
نموذج نسخ ولصق — مخطط صفحة بالكتل
القسم 1: لافتة (عنوان + صورة + زر)
القسم 2: أعمدة ← 3 تشكيلات (صورة + عنوان + نص)
القسم 3: نمط «الالتزامات» مخصّص
كتلة قابلة لإعادة الاستخدام: صندوق التواصل
صفحات استخدام الصندوق: _______________صفحة بسيطة
يكفي تكديس عنوان ونص وصورة؛ لا حاجة إلى أعمدة أو أنماط.
صفحة غنية
أعمدة + أنماط لتخطيط متقن دون كود.
محتوى متكرّر
كتلة قابلة لإعادة الاستخدام لبيانات الاتصال أو المواعيد أو دعوات الإجراء.
استعادة موقع قديم
تبقى الكتل الكلاسيكية قابلة للتحرير؛ يُنقل الأقسام القديمة تدريجيًا.
✓ ممارسات جيدة
- استخدم / لإدراج كتلة من لوحة المفاتيح.
- مرّ عبر نمط قبل إعادة بناء قسم معقّد.
- خصّص الكتل القابلة لإعادة الاستخدام للمحتويات المتكرّرة فعلًا.
✗ أخطاء شائعة
- تكديس كل شيء في كتلة فقرة واحدة.
- نسخ صندوق ولصقه في عشر صفحات.
- إعادة إنشاء نمط موجود يدويًا.
النقاط الأساسية
- كل شيء في Gutenberg كتلة.
- / + الاسم يُدرج كتلة بسرعة.
- الأنماط توفّر الوقت في الأقسام المعقّدة.
- الكتلة القابلة لإعادة الاستخدام تُحدَّث في كل مكان.
تحدي 48 ساعة — طبّق غدًا
أعِد إنتاج قسم «ثلاث خدمات» بكتلة أعمدة وأدرج نمطًا في صفحة. ثم أنشئ كتلة تواصل قابلة لإعادة الاستخدام وضعها في صفحتين. 25 دقيقة.
- أركّب صفحة بكتل وأعمدة.
- أُدرج كتلة من لوحة المفاتيح باستخدام /.
- أعرف متى أستخدم نمطًا أو كتلة قابلة لإعادة الاستخدام.
أسئلة شائعة
Gutenberg أم منشئ صفحات؟
Gutenberg، الأصلي والمجاني، يكفي لمعظم المواقع ويبقى خفيفًا. منشئات مثل Elementor تمنح حرية بصرية أكبر، مقابل وزن واعتماد أكبر. تعلّم الكتل هو الأساس.
هل يمكن استعادة المحرّر الكلاسيكي القديم؟
نعم، بإضافة Classic Editor، لكنه خيار انتقالي: Gutenberg هو مستقبل WordPress وأساس تحرير الموقع الكامل (FSE، القسم 2.2). الأفضل تعلّم الكتل.
هل الكتلة القابلة لإعادة الاستخدام متزامنة فعلًا؟
الكتلة الكلاسيكية القابلة لإعادة الاستخدام متزامنة: تعديل محتواها في مكان واحد يُحدّث كل التكرارات. لأشكال مستقلة، نستخدم نمطًا أو قالبًا بدلًا من ذلك.
يريد سمير إدراج قسم «التزاماتنا» الجاهز التخطيط بسرعة. أي إجراء هو الأكثر فاعلية في Gutenberg؟