شرح محرر المكونات Gutenburg لإضافة الصفحات والمقالات
بالتأكيد عندما تريد إضافة صفحة أو مقالة جديدة في موقعك الووردبريس، فأنت تتعامل مع محرر Gutenberg والذي يحتوي على العديد من المكونات والخيارات التي لم تكون في المحرر القديم TinyMCE.
يستخدم ووردبريس لإنشاء العديد من أنواع المواقع، ولذلك ظهر المحرر الجديد للتعامل مع جميع أنواع المواقع وجعلها أكثر تخصيصًا لأصحاب المواقع، حيث يعمل محرر غوتبرج بنظام الحاويات (Blocks) وهي عبارة عن مجموعة من العناصر أو البيانات الموجودة داخل حاوية محددة.
في هذا المقال سنشرح لك كافة الإمكانيات والخيارات التي يوفرها هذا المحرر والتي ستساعدك في إنتاج المحتوى بشكل أفضل، وسنتعرف على بعض الخصائص التي قد لا تكون تعرفها من قبل.
المكونات الرئيسية للمحرر
قبل شرح المكونات الرئيسية يجب علينا معرفة أن محرر جوتنبرج يستخدم لإنشاء صفحات و مقالات، وإذا كان موقعك للتجارة الالكترونية فإنه يستخدم لإنشاء المنتجات أيضا لانشاء صفحة جديدة.
ستعتمد على المحرر عندما تريد إضافة صفحة جديدة عندما تتوجه في القائمة الجانبية إلى (صفحات << أضف جديد)

ونفس الأمر عندما تضيف مقالًا جديدًا (مقالات << أضف جديد)، فستعتمد على نفس المحرر أيضا

الآن نستعرض ما تحتويه القائمة الرئيسية لمحرر جوتنبرج، والتي تحتوي على المكونات التالية:
- نص
- وسائط
- تصميم
- ودجات
- تضمينات
كل مكون يحتوي على العديد من العناصر وكل عنصر يستخدم معه أدوات خاصة به،
لإظهار القائمة الرئيسية لمحرر غوتنبرغ اذهب لصفحة المحرر الذي تكتب فيه ثم انقر على علامة (+ أضف مكون) كما بالشكل التالي

بعد الضغط على علامة + سيظهر لك قائمة المحرر بالمكونات المهمة

إذا استعرضنا جميع تلك المكونات بشكل سريع، فهي على النحو التالي:

بالشكل السابق يمكنك الإطلاع سريعًا على كافة مكونات المحرر، ولنتحدث الآن على كل مكون على حدة
أولا إضافة نص
يحتوي المكون الأساسي (نص) على مكونات فرعية كالتالي:
- عنوان
- فقرة
- قائمة
- إقتباس
- شفرة
- تقليدي
- مهيأ مسبقا
- إقتباس مائل
- جدول
- بيت شعر أو عبارة
1- إضافة عنوان
أول عنصر من عناصر المحتوى هو (العنوان)، وتستطيع إضافتها كما بالشكل التالي

ثم تحدد نوع العنوان، سواءًا كان عنوانًا رئيسًا أو فرعيًا، (H1,H2,H3 ..H6)، وتجد معه امكانية كتابة الخط بشكل مائل و خط عريض وايضا رابط تشعبي ولكن لا يحبذ ان يتم استخدام خط مائل او عريض في العناوين الفرعية

2- إضافة فقرة
العنصر التالي هو عنصر فقرة، والذي يحتوي على فقرات النصوص المتتالية، تستطيع إضافة فقرة من خلال الضغط على علامة الإضافة (+) ثم تختر (فقرة)

ثم تبدأ في كتابة فقرة المحتوى بشكل مرتب ومسلسل

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

3- إضافة قائمة

الان يمكنك التحكم في نمط محتويات القائمة مباشرة كالتالي، حيث يمكنك اختيار قائمة نقطية أو قائمة مرقمة ومن خلال السهم في آخر قائمة أدوات يمكن التحكم في اللون ووضع خط أسفل النص أو في وسطه وغيرها من الأدوات

وتستطيع تغيير اللون ونمط الخط ونمط القائمة من شريط الأدوات

4- إضافة إقتباس
العنصر التالي هو “الاقتباس” والذي يستخدم لعمل شكل متميز لوضع مقولة مقتبسة لأحد المشهورين، مع امكانية وضع اسم قائل هذه المقولة
لعمل ذلك اضغط على علامة + واختار “اقتباس”

بعد اختيار عنصر اقتباس ضع المقولة واسم قائلها كالتالي

ثم انقر علامة الاقتباس واختار خط مائل

ليصبح الشكل الناتج كالتالي

5- إضافة شفرة
سنستخدم الان عنصر “شفرة”والذي يستخدم غالبًا لإضافة الأكواد البرمجية لتصبح بشكل منسق على النحو التالي:

يظهر لك مربع كتابة الكود والذي سيكون أكثر تنسيقًا مما لو كتبته في فقرة عادية

6- إضافة عنصر تقليدي
لعمل نص تقليدي اختر مكون نص ثم الايقونة تقليدي كالتالي

سيظهر لك المحرر التقليدي القديم ، يمكنك الكتابة واضافة اي نص تريد مع كل الامكانيات كما يظهر بالشكل

7- إضافة محتوى مهيأ مسبقا
لاضافة هذا العنصر اذهب للقائمة الرئيسية وقم باختياره

فائدة هذا العنصر انك يمكن ان تقوم بإدخال نص كنت قد قمت بتهيئته مسبقا في احد الملفات النصية وهو يحافظ على النمط المنقول انظر التالي

8- إضافة اقتباس مائل
لا يختلف عنصر اقتباس مائل عن عنصر إقتباس حيث ان به نفس الأدوات ولاختياره قم بالذهاب للقائمة الرئيسية واختر اقتباس مائل

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

ويظهر لك الناتج كما بالشكل التالي

9- إضافة جدول
لعمل جدول بيانات داخل المحتوى الخاص بك، فيمكنك استخدام عنصر “جدول” من القائمة الرئيسية ثم اختياره من المكون نص

يظهر أدوات عمل الجدول كالتالي قم بإضافة عدد الصفوف والاعمدة

,ولإضافة عمود او صف جديد قبل او بعد الصف أو العمود المحدد اختار الاداة التالية

10- عنصر بيت شعر أو عبارة
10- عنصر بيت شعر أو عبارة
لعمل تهيئة لـ بيت شعر او عبارة بصورة صحيحة اذهب الى القائمة الرئيسية واختار هذا العنصر

ثم ستجد نفس الأدوات العامة ستجدها لتهيئة بيت الشعر أو العبارة

ثانيا: إضافة وسائط
ويحتوي على العناصر التالية
- عنصر صورة
- عنصر مقارنة صور
- عنصر عرض شرائح
- عنصر معرض متجانب
- عنصر معرض
- عنصر صوت
- عنصر غلاف
- عنصر ملف
- عنصر وسائط من نص
- عنصر فيديو
1- إضافة صورة
الآن سنقوم بإضافة صورة ولعمل ذلك اذهب الى المكون الثاني (وسائط) واختار منه العنصر صورة كالتالي

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

من خلال الضغط على زر رفع لتقوم برفع الصورة من حاسوبك، ثم تقوم بتحديد الصورة المطلوبة

بعد رفع الصورة يظهر لك أدوات التحكم في الصورة وأيضا أدوات لكتابة تسمية توضيحية للصورة كالتالي

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

لتحميل الصورتين قبل التعديل وبعده قم بعمل رفع عن طريق مربع الحوار الذي يظهر لك عند استخدامك العنصر

يظهر لك حدا فاصلًا بين الصورتين يمكن تغير ابعاده بالنقر عليه وسحبه

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

سيظهر لك مربع حوار لرفع الصور التي تريد عرضها، ثم ستضغظ على زر رفع وتختر الصور المراد عرضها

لإضافة أية عدد من الصور يمكنك نقر علامة + الموجودة أسفل الشرائح ورفع صور اخرى

الشكل التالي يوضح لك الناتج النهائي وكيف يمكن أن يظهر للزائرين في مقالك او صفحتك

4- عنصر معرض متجانب
لإظهار الصور بشكل متجانب قم بالذهاب الى القائمة الرئيسية واختر عنصر معرض متجانب

يظهر لك مربع حوار للمساعدة على رفع الصور قم بالنقر على زر رفع لمجموعة من الصور لإظهارها في المعرض

ستظهر لك الصور بشكل متناسق كما بالشكل التالي

لتغير طريقة عرض الشرائح اذهب الى الأدوات الخاصة وانقر تغير نوع او نمط المكون واختار تغير النمط كما تريد ان يظهر كما بالشكل التالي

لاختيار مرشح الصور وتغير الوانها بالمرشحات المعطاه قم بالتالي

5- إضافة معرض
لإظهار عددًا كبيرًا من الصور بشكل منسق وبترتيب جيد، أضف مكون (معرض)

سيظهر لك خيار رفع الصور، ثم قم باختيار عددًا كبيرًا من الصور لمشاهدة ما يمكن ان يقدم لك العنصر

سيظهر لك المعرض كما بالشكل التالى ولاضافة اي عدد من الصور مرة اخرى ستجد في الأسفل زر رفع

6- إضافة صوت
اذا اردت إضافة ملفًا صوتيًا ليظهر في مقالك، قم بالذهاب إلى قائمة المكونات واختر صوت

سيظهر لك مربع حوار لرفع الملف الصوتي قم باختيار الملف ورفعه كما بالشكلين التاليين


سيظهر لك الناتج النهائي كالتالي، حيث يمكنك أيضًا إضافة نصًا أسفل الملف الصوتي بما يقدمه مثلا

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

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

يظهر لك الناتج النهائي بعد اضافة النص داخل الصورة كما بالشكل التالي

8- إضافة ملف
اذا اردت رفع ملف على الصفحة ليتم تنزيله بواسطة الزائرين، قم بالذهاب الى القائمة الرئيسية واختر ملف

سيظهر لك الخيار لرفع الملف باي امتداد مثل pdf او docx او غيرها من الامتدادات لكافة انواع الملفات

بعد أن يتم رفع الملف سيظهر لك كالتالي باسمه وزر تنزيل يمكنك تغير اسمه كما تريد

9- إضافة وسائط مع نص
للقيام باضافة وسائط كالصور وإضافة نص بجانبها على اليمين او اليسار، قم باختيار وسائط مع نص

سيظهر لك قسمين في مربع الحوار أحدهما لرفع الصورة والآخر لكتابة المحتوى المراد بجانبه، ويمكن أن يكون المحتوى عبارة عن عنوان أو فقرة أو غيرهما

سيظهر لك قسمين في مربع الحوار أحدهما لرفع الصورة والآخر لكتابة المحتوى المراد بجانبه، ويمكن أن يكون المحتوى عبارة عن عنوان أو فقرة أو غيرهما

10- إضافة فيديو
لإضافة الفيديو، اذهب إلى القائمة الرئيسية واختر عنصر فيديو

ثم قم برفع الفيديو عن طريق مربع الحوار الذي سيظهر لك كما بالشكل التالي

يمكنك ايضًا احضار رابط من اليوتيوب مثلا او Vimo او أية روابط فيديو اخرى وربطها كالتالي

سيظهر لك الفيديو كما بالشكل التالي

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

سيظهر لك الزر اكتب اسمه الداخلي كالتالي ويمكنك عمل رابط تشعبي له ايضا وتغير الخط الى عريض أو مائل

2- إضافة أعمدة
عنصر أعمدة يظهر لك النصوص والصور مقسمة كما تظهر بالصحف العامة، اذهب الى القائمة الرئيسية وختر عنصر أعمدة

سيظهر لك العديد من التقسيمات للاعمدة مثل عمودين متساويين في العرض أو أحدهما ضعف الاخر او ثلاث اعمدة

بعد القيام بالتقسيم يمكنك إضافة فقرات في كل عمود عن طريق النقر على علامة + واختيار فقرة

يمكنك تنسيق النصوص في الاعمدة واضافة خط مائل وخط عريض وعمل روابط تشعبية كما يحدث في أي فقرة عادية

3- إضافة مجموعة
لإضافة مكون يجمع مجموعة مكونات أخرى، اذهب الى القائمة الرئيسية واختر مجموعة

يمكنك بعد ذلك النقر على علامة + ووضع أي نوع من أنواع العناصر داخل المجموعة

4- إضافة عنصر المزيد
عنصر المزيد يستخدم حتى يظهر للمستخدم ليقوم بالنقر عليه لإضافة المزيد من القراءة
لتفعيله اذهب إلى القائمة الرئيسية واختر المزيد

سيظهر لك الفاصل كما بالشكل التالي

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

سيظهر التقسيم كحد فاصل كما بالشكل التالي

6- عنصر فاصل
يستخدم هذا المكون لعمل فاصل بين الأقسام والأفكار، ولتفعيله اذهب إلى القائمة الرئيسية وقم باختياره من مكون تصميم

7- فراغ
لعمل فراغ بين أي محتويات بالصفحة باي مسافة تريدها قم باختيار هذا العنصر من القائمة الرئيسية أسفل مكون تصميم

يظهر لك الفاصل كما بالشكل التالي ومن النقطة الزرقاء يمكنك زيادة المسافة للفاصل

رابعا: إضافة ودجات
يختلف عدد عناصر هذان المكونان حسب ما يوجد لديك من ودجات تم تركيبها على الووردبريس باستخدام القالب الخاص بك غالبًا، وسيتم شرح بعض منها كالتالي
1-عنصر أخر المقالات
هذا العنصر يظهر لك قائمة اخر مقالات تم اضافتها او كتابتها مؤخرا
لتفعيل العنصر، اذهب إلى القائمة الرئيسية واختر: آخر المقالات

سيظهر لك تلقائيا بآخر المقالات دون تدخل منك كما بالشكل التالي
2- إضافة أرشيف
يستخدم عنصر ارشيف لإظهار الأرشيفات بتواريخ المقالات
لإضافة أرشيف قم بالذهاب الى القائمة الرئيسية وختر: أرشيف

مكون تضمينات وموجز لعناصره
هناك العديد من العناصر الموجودة في مكون تضمينات مثل عنصر فيسبوك وتويتر ويوتيوب وانستجرام وصور GIF المتحركة وغيرها الكثير من التضمينات من خلالها يمكن وضع منشورات من وسائل التواصل الاجتماعي مثل المنشورات الشكل التالي لبعض ما يمكن تضمينه

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