خطوة بخطوة إلى Gutenberg Builder for WordPress

خطوة بخطوة إلى Gutenberg Builder for WordPress

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


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

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

ربما حاولت إضافة أعمدة متعددة ، ولم تسر الأمور كما هو متوقع. إذا لم يكن الأمر كذلك ، فربما لا يمكنك إضافة ملفات PDF بسهولة ، أو ترى رسالة “فشل التحديث” اللعين عدة مرات.

حسنًا ، لا داعي للقلق بعد الآن ؛ لقد كنت في وضعك الدقيق منذ وقت ليس ببعيد ، ولكن الآن أجد غوتنبرغ مثيرة للاستخدام. هناك منحنى تعليمي ، نعم ، ولكن بنهاية مشاركة اليوم ، ستفكر في جوتنبرج بشكل مختلف.

ما هو محرر جوتنبرج?

وورد محرر جوتنبرج

أنت تبحث في Gutenberg ، محرر كتلة WordPress الافتراضي

إذا كنت تستخدم WordPress 5.0 والإصدارات الأحدث ، فيجب أن تكون قد صادفت محرر WordPress الجديد واللامع ، المعروف باسم Gutenberg.

ومثل العديد من المستخدمين الآخرين ، تريد استخدام المحرر الثوري ، لكنك متردد لأن جوتنبرج معقد.

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

لذا ، عادت بسرعة إلى محرر كلاسيكي, التي ، BTW ، بخير معنا. فقط ضع في اعتبارك أن WordPress لن يدعم المحرر الكلاسيكي بعد عام 2022. بالإضافة إلى ذلك ، ستفوتك جميع المزايا الإضافية التي تقدمها Gutenberg.

من حيث الوظائف ، يفعل المحرر الكلاسيكي وجوتنبرج الشيء نفسه ؛ كما تعلم ، كلتا الأداتين تساعدك على إنشاء محتوى بدون تشفير.

ومع ذلك ، نحن معتادون جدًا على محرر WYSIWYG القديم الذي نجد أنه يتكيف مع واجهة مستخدم Gutenberg الجديدة غريبة بعض الشيء ، إن لم يكن مربكًا تمامًا. على الأقل هذا ما أعتقده.

ولكن ، ما هو بالضبط جوتنبرج?

Gutenberg هو محرر WordPress الافتراضي الجديد. إنه بخلاف محرر النصوص / النصوص التقليدية ؛ يستخدم جوتنبرج كتل المحتوى مثل الكثير من منشئي الصفحات الحديثة.

يتم شحنه بميزات أكثر سهولة من Classic Editor ، مما يعني أنه يمكنك إنشاء محتوى وسائط غنية بسرعة. الآن ، يمكنك إعداد تخطيطات استثنائية بسرعة سواء كنت تعمل مع منشورات أو صفحات WordPress.

وباستخدام بعض الإضافات ، يمكن لـ Gutenberg التنافس بشكل إيجابي مع منشئي صفحات WordPress المعروفة مثل Brizy و Elementor و Divi.

العيب الوحيد هو أن منشئي الصفحات غالبًا ما يقدمون المزيد من الميزات لأنهم هم في الأساس منشئو الصفحات! في الوقت نفسه ، لا يزال غوتنبرغ صغيرًا جدًا ، ويمكنك فقط توقع نمو محرر الكتلة بسرعة فائقة.

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

هل أنت جاهز؟ إذا كان الأمر كذلك ، فلنقم بإنشاء منشور WordPress هذا.

كيفية إنشاء وظيفة ووردبرس] مع جوتنبرج

إذا قمت بتشغيل موقع WordPress على الويب ، فمن المحتمل أن تقوم بإنشاء منشورات أكثر من الصفحات. في القسم التالي ، نقوم بإنشاء منشور WordPress في جوتنبرج من البداية. آمل أن تكون مستمتعًا بقدر ما كنت أفعل عندما أختبر غوتنبرغ.

أن الطريق ، انتقل إلى الوظائف> إضافة جديد كما نبرز في لقطة الشاشة أدناه.

إنشاء وظيفة جديدة في جوتنبرج

يؤدي ذلك إلى توجيهك مباشرةً إلى محرر Gutenberg الموضح أدناه.

وورد محرر جوتنبرج

أنيق جدا ، هاه؟ الآن ، دعونا نشمر تلك الأكمام ونبدأ العمل.

إضافة عنوان

إضافة عنوان جديد في جوتنبرج

لا يمكنك كتابة منشور بدون عنوان ثابت. الشيء الجيد هو أن غوتنبرغ يجعل من السهل للغاية إضافة عنوان.

الكتلة الأولى التي تراها هي عنوان في أعلى المستند كما نوضح بالتفصيل في الصورة أعلاه. لإنشاء عنوان لمشاركتك ، اكتب داخل الكتلة. بسيطة مثل A ، B ، C.

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

تعديل الرابط الثابت في غوتنبرغ

بعد إضافة عنوانك ، اضغط على أدخل مفتاح لبدء خط جديد. أوه نعم ، يحتفظ جوتنبرج بالملاحة الأصلية التي أحببتها في محرر WordPress الكلاسيكي.

إضافة فقرة جديدة

كتلة فقرة جديدة في جوتنبرج

ضرب أدخل يخلق مفتاح جديد فقرة كتلة ، كما هو موضح أعلاه. قبل أن تكتب في أي نص ، تقدم لك الكتلة خيارين. انظر الصورة المرقمة أدناه لمزيد من التفاصيل.

خيارات كتلة فقرة جديدة جوتنبرج

ملاحظات. تستطيع:

  1. تحويل كتلة الفقرة الجديدة إلى أي كتلة أخرى ، على سبيل المثال ، صورة ، عنوان ، غلاف ، معرض ، WooCommerce ، نموذج ، إلخ.
  2. استخدم الاختصار لتغيير كتلة الفقرة إلى كتلة صورة
  3. قم بتغيير كتلة الفقرة إلى كتلة عنوان ، أي H2 و H3 و H4
  4. تحويل كتلة الفقرة إلى كتلة صورة الغلاف

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

شريط أدوات تنسيق الفقرة غوتنبرغ

بفضل شريط أدوات التنسيق ، يمكنك:

  • قم بتغطية الفقرة في شكل آية ، اقتباس ، عنوان ، قائمة ، رمز ، ونص منسق مسبقًا
  • بالخط العريض, مائل, يتوسطه خط, و تسطير المحتوى
  • محاذاة النص إلى اليسار واليمين والوسط والضبط
  • أضف رابطًا يمكن فتحه أيضًا في علامة تبويب جديدة
  • إدراج صورة مضمنة (نعم ، موجودة!)
  • إخفاء إعدادات الكتلة
  • ضاعف الكتلة
  • إدراج كتلة قبل أو بعد الكتلة الحالية (في حالتنا ، هذه هي الفقرة الأولى ، لذلك لم تكن تضيف أي شيء من قبل ، فقط بعد.) يمكنك إضافة كتلة صورة غلاف قبل الفقرة الأولى إذا كنت ترغب في ذلك لأنها تبدو كذلك حسن
  • قم بتحرير الكتلة كـ HTML
  • أضف الكتلة الحالية إلى الكتل القابلة لإعادة الاستخدام بحيث يمكنك استخدامها في المنشورات الأخرى
  • قم بإزالة الكتلة بالكامل

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

خيارات الشريط الجانبي لغوتنبرغ لكتلة الفقرة

بعض الملاحظات حول الصورة أعلاه:

  1. اختر ال منع انقر هنا لعرض جميع خيارات وإعدادات الحظر
  2. حدد حجم الخط وقم بتفعيل Drop Cap هنا
  3. أضف لون الخلفية إلى فقرتك. قمت بتعيينه إلى اللون الأزرق لأغراض التوضيح. يمكنك أيضًا تخصيص لون النص. في كلتا الحالتين ، يمكنك إضافة ألوان مخصصة غير محدودة
  4. يمكنك إضافة فئة CSS مخصصة هنا ، مما يعني أنه يمكنك إضافة أنماط CSS إضافية إلى مجموعتك
  5. تم تطبيق الخلفية الزرقاء و Drop Cap بالفعل في محرر Gutenberg

علامة تبويب المستند في الشريط الجانبي

هناك علامة تبويب أخرى في قائمة الشريط الجانبي ؛ ال المستند علامة التبويب كما هو موضح أدناه.

فقرة الوثيقة الشريط الجانبي كتلة الفقرة

هنا ، ملاحظات للصورة أعلاه:

  1. انقر هنا للتبديل إلى المستند التبويب
  2. هنا يمكنك جدولة منشور ، وتعيين الرؤية إلى أي منهما نشر أو عامة, تعيين مشاركة على في انتظار المراجعة الحالة ، اختر تنسيق المشاركة وإنشاء مشاركة ثابتة
  3. يسمح لك القسم بتعديل الرابط الثابت الخاص بك
  4. يمكنك تحديد أو إنشاء فئات جديدة هنا
  5. أضف علامات إلى منشورك
  6. مجموعة صورة مميزة
  7. إنشاء مقتطف يدوي
  8. السماح بالتعليقات و pingbacks و trackbacks

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

بعد الفقرة الأولى ، ضرب أدخل المفتاح مرة أخرى لإنشاء سطر جديد (أو كتلة فقرة). الآن ، دعنا نضيف صورة أسفل الفقرة الأولى.

إضافة صور في جوتنبرج

مضيفا صورة جديدة في جوتنبرج

يقولون أن الصورة تتحدث عن ألف كلمة ، ومشاركة مدونة بدون صور جيدة ، باهتة. لإضافة صورة في منشور WordPress الخاص بك باستخدام Gutenberg ، لديك خياران.

عندما تضرب أدخل المفتاح قبل لحظات قليلة ، قمت بتشغيل كتلة فقرة جديدة. نظرًا لأن Gutenberg أمر بديهي ، يمكنك إضافة صورة عن طريق النقر على رمز علامة زائد (+) أو صورة أو غلاف كما نبرز في الصورة أدناه.

إضافة صورة جديدة في محرر جوتنبرج

بضع ملاحظات:

  1. يمكنك إضافة صورة عبر رموز علامة الجمع (+)
  2. هنا ، يمكنك إضافة صورة بسهولة
  3. يتيح لك هذا الخيار إضافة التغطية image (عادةً ما تكون هذه أكبر من الصور الأخرى. بالإضافة إلى ذلك ، يمكنك إضافة نص على صور الغلاف ، BTW)

المضي قدما وانقر فوق أي من رموز زائد (+). بعد ذلك ، انقر فوق صورة علامة التبويب ، كما هو موضح أدناه.

مضيفا الصور في جوتنبرج

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

كتلة الصورة جوتنبرج

ال صورة يسمح لك الحظر بتحميل صورة أو إضافة واحدة من عنوان URL أو مكتبة الوسائط. في هذه العملية ، يمكنك إضافة نص بديل (مهم لكبار المسئولين الاقتصاديين) ، والشرح والوصف عبر إعدادات شاشة الوسائط ، أو منع الشريط الجانبي كما هو موضح في الصور التالية.

إعدادات الوسائط المعتادة …

إعدادات وسائط وورد

…و ال صورة حظر الإعدادات.

إعدادات كتلة الصورة غوتنبرغ

هل تتعلم شيئًا هنا اليوم؟ اتمنى ذلك. هيا لنذهب.

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

كيفية إضافة ملفات قابلة للتنزيل ، مثل PDF ، صور ، فيديو ، إلخ

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

في جديد فقرة منع ، انقر فوق رمز علامة الجمع (+) ، انتقل إلى كتل مشتركة وضرب ملف علامة التبويب كما نبرز أدناه.

مضيفا الملفات القابلة للتحميل في جوتنبرج

يؤدي ذلك إلى تشغيل الكتلة التالية:

كتلة ملف جوتنبرج

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

إضافة ملف في جوتنبرج

يمكنك اللعب بالخيارات. على سبيل المثال ، يمكنك تعديل / حذف “قائمة المراجعة المجانية لـ Gutenberg“وكذلك عنوان تحميل زر. يمكنك إضافة فئة CSS إلى الكتلة وتصميمها كيفما تشاء.

إضافة اقتباس في جوتنبرج

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

مضيفا اقتباسات في جوتنبرج

القيام بذلك يضيف اقتبس حظر في مشاركتك كما نسلط الضوء في screengrab أدناه.

إعدادات كتلة الاقتباس غوتنبرغ

لاحظ إعدادات كتلة الاقتباس في الشريط الجانبي الأيمن أعلاه?

لإضافة الاقتباس الخاص بك ، اكتب داخل الكتلة. ها هي نتيجتي.

اقتباس جوتنبرج

تبدو مذهلة ، أليس كذلك?

إضافة تضمين الوسائط في جوتنبرج

يأتي Gutenberg بعدة كتل لتضمين مقاطع الفيديو والوسائط الأخرى من أكثر من 30 موقعًا مثل YouTube و Vimeo و Facebook و SoundCloud و WordPress و Slideshare وما إلى ذلك..

لتضمين محتوى ، انقر فوق رمز علامة الجمع (+) ، وانتقل إلى يدمج, واختر الموقع. على سبيل المثال ، أردت YouTube ، كما هو موضح أدناه.

تضمين يوتيوب غوتنبرغ

بعد ذلك ، انسخ والصق عنوان URL لفيديو YouTube وانقر على تضمين الزر كما هو موضح في الصورة أدناه.

تضمين كتلة جوتنبرج يوتيوب

بمجرد أن تضرب تضمين زر ، غوتنبرغ يغطي الرابط في الفيديو تلقائيا كما نبرز أدناه.

فيديو يوتيوب مضمن في جوتنبرج

سلسة على طول الطريق. الآن ، دعنا نضيف زرًا مستقلًا مثاليًا لإنشاء عبارة تحث المستخدم على اتخاذ إجراء (CTA).

كيفية إضافة زر في جوتنبرج

لا يجب أن تجد صعوبة في إضافة الكتل في هذه المرحلة. فقط انقر فوق علامة الجمع (+) ، واختر الكتلة الخاصة بك. لا يمكن أن يكون أسهل من ذلك.

لذا ، كيف نضيف زر?

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

مضيفا الأزرار في محرر جوتنبرج

القيام بذلك يقودك إلى زر منع كما نقوم بالتفصيل أدناه.

مضيفا الأزرار في محرر جوتنبرج

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

بعد بضع نقرات ، هذا ما حصلت عليه.

مثال زر جوتنبرج

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

كيفية إضافة أعمدة في جوتنبرج

مع وجود زر جميل في المكان ، دعنا نضيف بعض الأعمدة. سأضيف عمودين ، لذلك اتبع بعناية.

إليك ما يجب فعله. انقر فوق رمز علامة الجمع (+) ، وانتقل إلى عناصر التخطيط وانقر فوق الأعمدة علامة التبويب كما هو موضح في الصورة أدناه.

أعمدة محرر جوتنبرج

يضيف جوتنبرج عمودين بشكل افتراضي. انظر الصورة أدناه ، وتذكر ، لقد أضفت محتوى بالفعل في الأعمدة.

أعمدة جوتنبرج في محرر وورد

الذي يحصل لي:

أعمدة جوتنبرج الأمامية

ليس سيئا لبضع ثوان من العمل. ولكن ربما لا ترغب في إنشاء أعمدة. ربما تريد عرض صورة بجانب بعض النص.

هل هناك كتلة لذلك؟ نعم هنالك!

كيفية إضافة صورة بجانب النص في جوتنبرج

هل تبحث لإضافة صورة بجانب بعض النص؟ إذا كان الأمر كذلك ، فسوف تحب القسم التالي.

كالعادة ، انقر فوق رمز علامة الجمع (+) ، وانتقل إلى عناصر التخطيط وانقر الوسائط والنص كما هو مبين أدناه.

وسائل الإعلام والنص كتلة كتلة جوتنبرج

يجب أن ترى الوسائط والنص كتلة ، كما هو موضح أدناه.

كتلة الوسائط والنص في جوتنبرج

بعد ذلك ، قم بتحميل الصورة / الفيديو / الوسائط أو أضف واحدة من مكتبة الوسائط. بعد ذلك ، أضف النص بجانب الوسائط ، كما هو موضح في الصورة أدناه.

لعبت حولها مع الوسائط والنص كتلة ، وخرجت بما يلي. تمانع فيك ؛ تمكنت من الضغط على زر هناك أيضًا ��

كتلة الوسائط والنص في العمل الكامل

أوه ، هذه هي النهاية! دعوني أريكم الواجهة الأمامية. هنا:

كتلة نص الوسائط في جوتنبرج

تبدو احترافية للغاية ، أليس كذلك؟ يمكنك أن تتخيل بالتأكيد ما يمكنك تحقيقه باستخدام محرر Gutenberg.

كتل غوتنبرغ طرف ثالث

يحرص مطورو WordPress على جعل السمات والمكونات الإضافية متوافقة مع محرر Gutenberg. تتضمن بعض الأمثلة WooCommerce و Jetpack و Yoast SEO.

على سبيل المثال ، يمكنك إضافة كتل WooCommerce إلى منشور WordPress الخاص بك. أولاً ، يجب عليك تثبيت WooCommerce وتنشيطه.

بعد ذلك ، في سطر جديد ، انقر فوق رمز علامة الجمع (+) ، وانتقل إلى WooCommerce واختر أي كتلة تريدها كما هو موضح أدناه.

كتل woocommerce gutenberg

هل تعرف ماذا يعني ذلك؟ هذا يعني أنه يمكنك إنشاء وسائط غنية ومشاركات وصفحات رائعة في غضون دقائق.

كتل بارزة أخرى

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

هذا بعيدًا ، إليك قائمة بالكتل الأخرى المتاحة.

  • الحاجيات – يمكنك إضافة محتوى من أدواتك إلى مشاركات المدونة
  • الرموز القصيرة – لا يزال بإمكانك استخدام الرموز القصيرة الأصلية في WordPress
  • كلاسيك – كتلة كبيرة تحمل المحتوى القديم الخاص بك
  • أكثر – كانت الكتلة تعرف سابقًا باسم اقرأ أكثر بطاقة شعار
  • فاصل صفحة ، فواصل ، فواصل
  • HTML مخصص ، Pullquote ، جدول
  • صالة عرض و صوت / فيديو HTML5
  • وأكثر من ذلك بكثير اعتمادًا على السمات والمكونات الإضافية التي تستخدمها

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

المأجورون سريعة الاختصارات واختصارات لوحة المفاتيح

يأتي Gutenberg مع زوجين من الاختصارات واختصارات لوحة المفاتيح التي تجعل الأمر أسهل. على سبيل المثال ، إذا كتبت “/” داخل كتلة فقرة ، فستظهر قائمة بالكتل.

يمكنك حتى تحديد كتلة معينة عن طريق كتابة عنوان الكتلة بعد الشرطة المائلة للخلف (/) ، على سبيل المثال ، تؤدي كتابة “/ image” إلى إظهار كتلة الصورة بين الكتل الأخرى المتعلقة بالصورة. انظر الصورة أدناه لمزيد من التفاصيل.

اختصار رد فعل جوتنبرج

اختصارات لوحة المفاتيح: لعرض جميع الاختصارات المتاحة اضغط SHIFT + ALT + H في ويندوز و OPT + CTRL + H في Mac.

في الجزء العلوي من المستند ، يمكنك مشاهدة بنية المستند بالنقر فوق الرمز (i) ، كما هو موضح أدناه.

هيكل وثيقة غوتنبرغ

لطيف. على نحو سلس للغاية.

أوه ، وبالمناسبة ، عادةً ما يحدث خطأ “فشل التحديث” نظرًا لضعف اتصال الإنترنت ��


بيني وبينك ، جوتنبرج هو محرر محتوى رائع. شريطة أن تكون على استعداد لتعلم الحبال ؛ يمكنك جني الكثير من محرر WordPress للمستقبل.

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

نأمل أن يساعدك دليلنا التدريجي لمحرر Gutenberg في وضع الأمور في نصابها. نعتقد أنه يمكنك الآن استخدام محرر الحظر لإنشاء محتوى مثل المحترفين.

يرجى مشاركة مخاوفك وأفكارك وأسئلتك في قسم التعليقات أدناه.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map