اذهب إلى المحتوى

كيفية استخدام مكون Event لفريق Automatic في ووردبريس


Ali Alrohia

أصدرت Automatic -الشركة الأم لووردبريس- بعض الإضافات المعروفة جيدًا في عالم ووردبريس، مثل ووكومرس وJetpack وAkismet وBuddyPress واللائحة تطول، كما أضافت الشركة مؤخرًا مجموعةً من الإضافات القوية لهذه القائمة الطويلة ومنها كان مكون Event الذي يُمثل حلًا بسيطًا يسمح للمستخدمين بمعرفة ما يوجد لديك في جدول أعمالك مستقبلًا.

ما هو مكون Event؟

يجب تثبيت مكون Event من مستودع ووردبريس بدلًا من مسار المكون في المحرر نفسه.

001_wordpress_event_block_plugin.png

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

002_wordpress_event_block_plugin_2.png

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

كيفية إضافة مكون Event لمقال أو صفحة

بعد تثبيت الإضافة فإن عملية إضافة مكون Event لمقال أو صفحة ضمن موقعك ستكون أمرًا بسيطًا. عليك أولًا التوجه من لوحة تحكم ووردبريس إلى مقال أو صفحة جديدة، أو تحرير أي مقال أو صفحة موجودة مسبقًا، ثم الضغط على إشارة "+" الموجودة في جسم المنشور أو أعلى يمين النافذة. أدخل الآن اسم المكون في حقل البحث واضغط عليه عند ظهوره.

003_wordpress_add_event_block.png

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

خيارات وإعدادات مكون Event

كما ذكرنا سابقًا، الخيار الغير موجود ضمن المكون هو عدم القدرة على عرض مجموعة من المناسبات، والآن لنلقي نظرةً على ما تستطيع إضافة مكون Event عمله.

004_wordpress_event_block.png

تستطيع ضبط موعد المناسبة من خلال الضغط على "Choose a Date" لتظهر لك رزنامة تستطيع من خلالها اختيار تاريخ المناسبة، وإن لم تختر الوقت فسوف يُعين افتراضيًا للوقت الذي اخترت فيه التاريخ. سوف يُستبدل الآن الزر السابق بالتاريخ الذي اخترته في الزاوية العلوية اليسرى.

005_wordpress_event_block_date.png

الحقول الأخرى -Event Title وEvent location وEvent Descritpion- هي حقول نصية تكتب داخلها المعلومات المرتبطة بالمناسبة ولا حاجة لشرحها.

006_wordpress_event_block_fields.png

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

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

007_wordpress_event_block_image.png

سوف تجد تحت القسم السابق القسم المسؤول عن الألوان Color Settings، حيث يسمح لك بتعديل لون الخط والخلفية لكامل المكون.

008_wordpress_event_block_color.png

يتضمن المحرر ميزةً لتحذير المستخدم في حال اختار ألوانًا تُصّعب على الزوار قراءة محتوى المكون.

أحد أفضل ميزات مكون Event هي إمكانية إضافة مكونات فرعية داخله وذلك بالضغط على زر Enter بعد حقل الوصف ليظهر لك زر "+"، ومن هنا تستطيع إضافة العدد الذي تريد من المكونات ضمن مكون Event نفسه، أي تستطيع إضافة مكونات Event أخرى.

009_wordpress_event_block_sub-block.png

يُمكن تعديل كل عنصر داخل مكون Event فرديًا، أي تستطيع التعامل مع مكون Event الذي أنشأته مثل حاوية محتوى صغيرة. يُمكن لكل مكون Event فرعي أن يمتلك تصميمه الخاص وصورته الخاصة كما هو الحال بالنسبة لأي مكون فقرة أو أي مكون آخر. سوف تظهر خيارات المكون إلى اليسار ضمن الشريط الجانبي لإعدادات المكون وهذا يتوقف على المكون الذي ضغطت عليه بمؤشر الفأرة.

الخيار الأخير لمكون Event هو طريقة محاذاة العنصر للوسط أو عرض كامل ليمتد على كامل منطقة المحتوى، حيث توجد هذه الخيارات ضمن شريط أدوات المكون.

010_wordpress_event_block_alignment.png

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

أفضل النصائح لاستخدام فعال لمكون Event

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

استخدم اللون

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

وإن استخدمت مكونات ضمن مكون Event نفسه، فتأكد من تصميمهم، حيث تظهر هذه المكونات بوضوح ضمن المكون الرئيسي كي يلحظها زوار الموقع.

استخدام أحجام صور مناسبة

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

تأكد من اختبار الصور للتأكد من أنها تُعرض جيدًا بنسب عرض مختلفة.

الاستفادة من المكونات الفرعية

لا تتردد في إضافة مكونات فرعية ضمن مكون Event نفسه لكي تضمن أن عين المتابع سوف تتوجه للمعلومات الموجودة فقط ضمن مكون Event.

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

قدّم ووردبريس 5.8 تبويب الأنماط ضمن المحرر، لذلك فإن استعماله مع مكون Event يسمح لك بإنشاء صفحات ذات تصميم جميل بأقل جهد ممكن.

011_wordpress_event_block_paterns.png

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

الخلاصة

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

ترجمة -وبتصرّف- للمقال How to Use the WordPress Event Block by Automattic لصاحبه B.J. Keeton.

اقرأ أيضًا


تفاعل الأعضاء

أفضل التعليقات

لا توجد أية تعليقات بعد



انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أضف تعليق

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • أضف...