كيفية إنشاء قالب صفحة فئة لمدونتك باستخدام Divi Theme Builder

يمكن أن تكون صفحة الفئة مفيدة للغاية للمستخدمين من خلال تزويدهم بصفحة كاملة مليئة بالأشياء التي يهتمون بها (أو يبحثون عنها). ولكن في كثير من الأحيان يمكن أن تتأثر صفحة الفئات عندما يتعلق الأمر بالتصميم. في Divi ، قبل أيام Divi Theme Builder ، كان على المطورين الاعتماد على تخصيص كود php يدويًا في ملف سمة قالب صفحة الفئة ثم تصميم قالب الصفحة تمامًا باستخدام CSS خارجي. ولكن الآن ، مع Divi Theme Builder ، أصبحت هذه العملية سهلة وممتعة!

في هذا البرنامج التعليمي ، سنعرض لك كيفية إنشاء قالب صفحة فئة لمدونتك بالكامل من البداية باستخدام Divi Theme Builder. سنوضح لك كيفية إعداد قالب جديد سريعًا مخصصًا لفئات النشر وكذلك كيفية تصميم القالب باستخدام الوحدات النمطية المناسبة والمحتوى الديناميكي باستخدام Divi Builder.

هيا بنا نبدأ!

نظرة خاطفة

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

قم بتنزيل Layout مجانًا

لتضع يديك على التصميمات من هذا البرنامج التعليمي ، ستحتاج أولاً إلى تنزيلها باستخدام الزر أدناه. للوصول إلى التنزيل ، ستحتاج إلى الاشتراك في قائمة البريد الإلكتروني Divi Daily الخاصة بنا باستخدام النموذج أدناه. بصفتك مشتركًا جديدًا ، ستتلقى المزيد من مزايا Divi وحزمة Divi Layout المجانية كل يوم اثنين! إذا كنت موجودًا بالفعل في القائمة ، فما عليك سوى إدخال عنوان بريدك الإلكتروني أدناه والنقر فوق تنزيل. لن يتم "إعادة اشتراكك" ولن تتلقى رسائل بريد إلكتروني إضافية.

قم بتنزيل الملفات

تنزيل مجاني

انضم إلى رسالة Divi الإخبارية وسنرسل لك نسخة من حزمة Divi Landing Page Layout النهائية ، بالإضافة إلى الكثير من موارد ونصائح وحيل Divi المذهلة والمجانية الأخرى. تابع معنا وستكون سيد Divi في أي وقت من الأوقات. إذا كنت مشتركًا بالفعل ، فاكتب ببساطة عنوان بريدك الإلكتروني أدناه وانقر فوق تنزيل للوصول إلى حزمة التخطيط.

تحميل

لقد تم اشتراكك بنجاح. يرجى التحقق من عنوان بريدك الإلكتروني لتأكيد اشتراكك والحصول على حزم تخطيط Divi الأسبوعية المجانية!

لاستيراد تخطيط القالب إلى موقع الويب الخاص بك ، ستحتاج إلى الانتقال إلى Divi Theme Builder واستخدام خيار قابلية النقل لاستيراد ملف .json إلى أداة إنشاء السمات.

دعنا نصل إلى البرنامج التعليمي ، فهل نحن؟

ما تحتاجه للبدء

للبدء ، سوف تحتاج إلى القيام بما يلي:

1. إذا لم تكن قد قمت بذلك بعد ، فقم بتثبيت وتفعيل Divi Theme المثبت (أو البرنامج المساعد Divi Builder إذا لم تكن تستخدم Divi Theme).
2. نظرًا لأننا سننشئ قالب صفحة فئة لمنشورات المدونة ، فسوف تحتاج إلى إنشاء منشورات بالفعل على موقع الويب الخاص بك مع تحديد الفئات لها.

بعد ذلك ، أنت على استعداد للذهاب.

تتوفر الوحدات النمطية والمحتوى الديناميكي لقوالب صفحة الفئات

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

وحدة المدونة

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

هذا هو إخبار Divi بشكل أساسي بعرض المنشورات التي يتم إنشاؤها عادةً عندما يزور المستخدم الصفحة. لذلك مع تعيين الخيار لعرض "منشورات للصفحة الحالية" ، سيتمكن المستخدم من عرض صفحة فئة وعرض المشاركات حسب الفئة بشكل صحيح.

وحدة شريط التمرير ووحدة عنوان المشاركة

يمكنك أيضًا استخدام وحدة Post Slider Module لعرض المنشورات للصفحة الحالية. يعد هذا مفيدًا لإنشاء شريط تمرير ديناميكي للنشر يعرض المنشورات التي تم إنشاؤها عند زيارة صفحة فئة ، تمامًا مثلما يمكن أن تفعله وحدة المدونة.

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

عنوان المشاركة / الأرشيف (محتوى ديناميكي)

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

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

الآن بعد أن فهمت الأدوات اللازمة لإنشاء قالب صفحة فئة ، دعنا ننتقل وننشئ واحدًا معًا.

كيفية إنشاء قالب صفحة فئة لمدونتك

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

إنشاء وتعيين قالب مخصص لفئات النشر

للبدء ، انتقل إلى لوحة معلومات WordPress الخاصة بك وانتقل إلى Divi> Theme Builder. ثم انقر فوق منطقة المربع الرمادي الفارغة لإضافة قالب جديد.

بعد ذلك ، قم بتعيين القالب إلى كافة صفحات الفئات.

إضافة منطقة نص مخصصة جديدة إلى القالب

لإنشاء جسم مخصص للقالب ، انقر فوق منطقة إضافة نص مخصص ثم حدد "إنشاء جسم مخصص".

ثم اختر خيار "البناء من الصفر".

أضف عنوان أرشيف ديناميكي

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

ثم أضف وحدة نصية إلى الصف.

احذف محتوى النص الافتراضي وانقر على رمز "استخدام المحتوى الديناميكي" وحدد الخيار "عنوان النشر / الأرشيف.

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

ثم قم بتحديث مناطق الإدخال قبل وبعد لالتفاف المحتوى في علامة H1 وإضافة جزء إضافي من المحتوى الثابت بعد العنوان الديناميكي على النحو التالي:

قبل:

<h1>

بعد، بعدما:

 Articles</h1>

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

أسلوب عنوان الأرشيف الديناميكي

بمجرد وضع المحتوى الديناميكي في مكانه ، يمكننا تصميمه باستخدام ما يلي:

• خط العنوان: أوبونتو
• خط العنوان: الوزن: غامق
• لون نص العنوان: # 192231
• حجم نص العنوان: 48 بكسل (سطح المكتب) ، 38 بكسل (الجهاز اللوحي) ، 28 بكسل (الهاتف)
• ارتفاع خط العنوان: 1.2em

استخدام وحدة المدونة لعرض المنشورات للفئة الحالية ديناميكيًا

مع وجود عنوان صفحة الفئة الديناميكية في مكانه ، نحتاج إلى إضافة وحدة المدونة لعرض المنشورات لصفحة الفئة الحالية.

أضف صفًا جديدًا

أضف صفًا جديدًا من عمود واحد تحت الصف العلوي الحالي.

أضف وحدة المدونة

ثم أضف وحدة مدونة إلى الصف.

قم بتحديث خيارات المحتوى على النحو التالي:

• المشاركات للصفحة الحالية: نعم
• عدد الوظائف: 9
• إظهار زر قراءة المزيد: نعم

تذكر ، يجب أن نتأكد من تمكين المنشورات للصفحة الحالية لصفحة الفئة لسحب أرشيف المنشور الصحيح.

وحدة تصميم المدونة

مع وجود إعدادات المحتوى في مكانها الصحيح ، دعنا نجري بعض التغييرات على التصميم على النحو التالي:

• التخطيط: الشبكة

• خط العنوان: أوبونتو
• وزن خط العنوان: غامق
• لون نص العنوان: # 192231
• خط التعريف: Ubuntu
• لون نص ميتا: # 985e6d
• حجم نص التعريف: 13 بكسل

• قراءة المزيد الخط: أوبونتو
• قراءة المزيد وزن الخط: جريء
• قراءة المزيد Font Style: Underline
• قراءة المزيد لون النص: # 985e6d
• خط ترقيم الصفحات: أوبونتو
• لون نص ترقيم الصفحات: # 985e6d
• حجم نص ترقيم الصفحات: 18 بكسل
• ارتفاع خط ترقيم الصفحات: 2em

• عرض حدود تخطيط الشبكة: 0 بكسل
• Box Shadow: انظر لقطة الشاشة
• مربع قوة طمس الظل: 70 بكسل
• قوة انتشار الظل المربع: -10 بكسل
• لون الظل: rgba (25،34،49،0.3)

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

قم بإنشاء شريط تمرير المنشور لسحب أحدث 4 منشورات في الفئة الحالية.

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

أضف صفًا جديدًا

قم أولاً بإضافة صف جديد بتنسيق عمود 1/3 2/3 أسفل الصف العلوي.

إضافة وحدة شريط التمرير

في العمود الأيسر ، أضف وحدة شريط تمرير النشر.

ثم قم بتحديث خيارات محتوى شريط التمرير على النحو التالي:

• المشاركات للصفحة الحالية: نعم
• عدد الوظائف: 4
• إظهار ميتا بعد: NO

تصميم وحدة شريط التمرير

الآن بعد أن أصبح محتوى شريط تمرير المنشور في مكانه ، قم بتحديث إعدادات التصميم على النحو التالي:

• محاذاة النص: يسار
• خط العنوان: أوبونتو
• ارتفاع خط العنوان: 1.3em
• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 16 بكسل
• لون خلفية الزر: # 985e6d
• عرض حد الزر: 0 بكسل
• خط الزر: أوبونتو

• Box Shadow: انظر لقطة الشاشة
• مربع قوة طمس الظل: 70 بكسل
• قوة انتشار الظل المربع: -10 بكسل
• لون الظل: rgba (25،34،49،0.3)

قم بإنشاء وحدة مدونة بتخطيط كامل العرض

في العمود الأيمن ، يمكننا إضافة وحدة مدونة أخرى بتخطيط كامل العرض بدلاً من تخطيط الشبكة. سيتيح لنا ذلك توفير منطقة عرض فريدة أخرى لمشاركات الفئات لدينا.

أضف وحدة المدونة

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

قم بتحديث إعدادات وحدة المدونة المكررة

افتح إعدادات وحدة المدونة المكررة وقم بتحديث ما يلي:

• المشاركات للصفحة الحالية: نعم
• عدد الوظائف: 3
• طول المقتطف: 120
• إظهار الصورة المميزة: لا (على الأقل في الوقت الحالي)
• إظهار ترقيم الصفحات: NO

• التخطيط: عرض كامل:
• ظل المربع: لا شيء

النتيجة حتى الآن

حتى الآن ، كانت النتيجة هي الحد الأدنى من عرض منشورات المدونة الثلاثة.

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

استخدم CSS المخصص لإنشاء صور مميزة أصغر تطفو على يسار محتوى مقتطف المنشور.

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

امنح فئة CSS المخصصة لوحدة المدونة

بالنسبة للمبتدئين ، نحتاج إلى إضافة فئة CSS مخصصة إلى وحدة المدونة. افتح إعدادات المدونة ، وضمن علامة التبويب خيارات متقدمة ، أدخل ما يلي:

• فئة CSS: left-blog-image

أضف كود CSS مع كود الوحدة النمطية

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

أدخل كود CSS

ثم أدخل CSS التالي داخل منطقة محتوى الكود:

<style>
@media (min-width: 981px) {
.left-blog-image .et_pb_post .entry-featured-image-url {
float: left;
width: 100%;
max-width: 150px;
margin: 0 20px 30px 0;
}
.left-blog-image .et_pb_post {
margin-bottom: 20px !important;
}
}
</style>

تحديث إعدادات وحدة المدونة لتضمين الصورة المميزة

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

تصميم إضافي للقالب

قبل أن نختتم الأمور ، دعنا نجري بعض اللمسات الطفيفة على التصميم.

إضافة وتصميم فاصل تحت عنوان الأرشيف

أضف وحدة فاصل مباشرة أسفل عنوان صفحة الأرشيف في الجزء العلوي من القالب.

ثم قم بتحديث إعدادات الحاجز كما يلي:

• لون الخط: # 985e6d
• وزن الحاجز: 3 بكسل
• العرض الأقصى: 200 بكسل

إضافة قسم تقسيم إلى التخطيط

افتح إعدادات القسم وأضف مقسم القسم كما يلي:

• نمط الفاصل العلوي: انظر الصورة
• لون الحاجز العلوي: rgba (73،78،107،0.07)
• ارتفاع المقسم: 90vw
• فاصل الوجه: أفقي ورأسي

استخدم Post Offset Number مع كل وحدة لتجنب تكرار عرض النشر

تقوم جميع وحداتنا الآن بسحب نفس محتوى المنشور لصفحة الفئة الحالية. من أجل منع هذه الوحدة من عرض التكرارات ، يمكننا استخدام خيار Post Offset Number "لتخطي" عدد معين من المنشورات التي تعرض موجز المنشور.

إزاحة مشاركة وحدة المدونة ذات النطاق الكامل

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

• رقم الإزاحة اللاحقة: 1

ستبدأ الوحدة الآن مع ثاني أحدث مشاركة لصفحة الفئة الحالية.

شبكة مدونة مدونة بعد تعويض

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

• رقم الإزاحة اللاحقة: 4

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

النتائج النهائية

لعرض النتيجة النهائية ، انتقل إلى لوحة معلومات WordPress وانتقل إلى المنشورات> الفئات. ثم انقر فوق لعرض إحدى الفئات الموجودة.

هنا هو النتيجة النهائية.

وها هو على شاشة الكمبيوتر اللوحي والهاتف.

افكار اخيرة

نأمل أن يساعدك هذا المنشور على التنفس بشكل أسهل قليلاً عند مواجهة التحدي المتمثل في إنشاء تصميم صفحة فئة لموقع الويب الخاص بك. يجعل Divi Theme Builder من السهل جدًا القيام به ، خاصة مع وجود وحدة المدونة الآن التي لديها خيار عرض منشورات الصفحة الحالية. ويسمح لك خيار إزاحة المنشور بدمج عدة وحدات نمطية للمدونة (أو حتى وحدات شريط تمرير النشر) دون رؤية المنشورات المكررة معروضة على الإطلاق.

كيف ساعدك Divi Theme Builder في إنشاء صفحات الفئات؟

أتطلع إلى الاستماع منك في التعليقات.

هتافات!