كيفية إنشاء شريط نشر مدونة باستخدام وحدة ديفي بوست المنزلق

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

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

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

هيا بنا نبدأ!

نظرة خاطفة

فيما يلي نظرة سريعة على شريط نشر المدونة الذي سنقوم ببنائه في هذا البرنامج التعليمي.

إليك كيفية تكديس مؤشر النشر بشكل جيد على شاشة الهاتف.

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

قم بتنزيل التخطيط والقالب مجانًا

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

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

تنزيل مجاني

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

تحميل

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

قم باستيراد التخطيط إلى مكتبة Divi

لاستيراد تخطيط القسم إلى مكتبة Divi الخاصة بك ، انتقل إلى مكتبة Divi.

انقر فوق الزر "استيراد".

في نافذة قابلية النقل المنبثقة ، حدد علامة التبويب استيراد واختر ملف التنزيل من جهاز الكمبيوتر الخاص بك. سيكون ملف JSON داخل المجلد المسمى "تخطيط شريط نشر المدونة (مكتبة Divi)".

ثم انقر فوق زر الاستيراد.

بمجرد الانتهاء من ذلك ، سيكون تخطيط القسم متاحًا في Divi Builder.

قم باستيراد قالب الرأس إلى Divi Theme Builder

إذا كنت ترغب في استيراد قالب منشور المدونة مع إضافة شريط النشر إلى العنوان ، فستحتاج إلى التنقل في Divi> Theme Builder.

ثم استخدم رمز قابلية النقل في أعلى يمين الصفحة لاستيراد ملف JSON. سيكون الملف داخل المجلد المسمى "قالب رأس منشور المدونة مع شريط النشر (منشئ السمات)".

دعنا نصل إلى البرنامج التعليمي ، أليس كذلك؟

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

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

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

بعد ذلك ، سيكون لديك لوحة فارغة لبدء التصميم في Divi.

إنشاء شريط نشر المدونة في Divi

خلق الصف

للبدء ، دعنا ننشئ صفًا من عمود واحد داخل القسم.

إعدادات الصف

بعد ذلك ، قم بتحديث إعدادات تصميم الصف كما يلي:

• عرض الحضيض: 1
• المساحة المتروكة: 0 بكسل للأعلى و 0 بكسل للأسفل

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

الآن بعد أن أصبح الصف في مكانه ، أضف وحدة نصية إلى الصف لإنشاء عنوان مؤشر المشاركة.

نص العنوان والخلفية

قم بتحديث النص الأساسي لقراءة "المشاركات الأخيرة:".

ثم قم بتحديث لون الخلفية:

• لون الخلفية: # 333333

إعدادات التصميم

ضمن علامة تبويب التصميم ، قم بتحديث أنماط النص على النحو التالي:

• خط النص: بوبينز
• وزن خط النص: شبه عريض
• نمط خط النص: TT
• لون نص النص: rgba (255،255،255،0.7)
• تباعد حروف النص: 1 بكسل
• ارتفاع خط النص: 40 بكسل
• محاذاة النص: الوسط

• العرض: 100٪
• أقصى عرض: 175 بكسل (سطح مكتب وجهاز لوحي) ، 100٪ (هاتف)

هذا يعتني بعنوان شريط البريد الخاص بنا. لنبدأ الآن في بناء شريط النشر.

إنشاء شريط نشر المدونة باستخدام وحدة شريط تمرير منشور المدونة

لإنشاء شريط نشر المدونة ، سنستخدم وحدة شريط تمرير التدوين ثم نبسط التصميم لجعله مضغوطًا حقًا.

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

مشاركة محتوى شريط التمرير

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

لإخفاء مقتطف المنشور ، تأكد من تحديث ما يلي:

• استخدم مقتطفات ما بعد: لا
• طول المقتطف: 0

إضافة عناصر شريط التمرير والخلفية

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

• إظهار الضوابط:
• إظهار زر قراءة المزيد: NO
• إظهار ميتا بعد: NO

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

• لون الخلفية: #eeeeee

نشر إعدادات تصميم شريط التمرير

أنماط التراكب والسهم

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

• استخدام تراكب الخلفية: نعم
• لون تراكب الخلفية: rgba (248،248،248،0.9)
• لون السهم: #ffffff (سطح المكتب) ، # ef51f7 (تحوم)

نص العنوان

بعد ذلك ، قم بتحديث أنماط نص العنوان كما يلي:

• خط العنوان: بوبينز
• وزن خط العنوان: متوسط
• محاذاة نص العنوان: يسار
• لون نص العنوان: # 333333
• لون نص العنوان (تحوم): # ef51f7
• حجم نص العنوان: 16 بكسل (سطح المكتب) ، 14 بكسل (هاتف)
• ارتفاع خط العنوان: 40 بكسل
• ظل نص العنوان: انظر لقطة الشاشة
• لون ظل نص العنوان: شفاف

تباعد

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

• الهامش: 175 بكسل يسار (سطح المكتب والجهاز اللوحي) ، 0 بكسل يسار (الهاتف)
• المساحة المتروكة: 0 بكسل للأعلى ، 0 بكسل للأسفل ، 0 بكسل لليسار ، 0 بكسل لليمين

الرسوم المتحركة التلقائية

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

أضف الرسوم المتحركة التلقائية كما يلي:

• الرسوم المتحركة التلقائية: تشغيل
• سرعة الحركة التلقائية: 3500

لا تتردد في زيادة السرعة أو تقليلها إلى أي شيء تشعر أنه الأفضل.

التصميم المتقدم

فئة CSS و CSS مخصص

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

أولاً ، أضف فئة CSS مخصصة على النحو التالي:

• فئة CSS: et-post-ticker

للتأكد من بقاء عنوان المنشور في سطر واحد داخل شريط التمرير / المؤشر وإخفاء الفائض بعلامة حذف ، أضف CSS التالي إلى عنوان الشريحة:

padding-bottom:0px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

لإضفاء المزيد من الإحساس على أسهم الشرائح ، أضف CSS التالية إلى أسهم الشرائح:

height: 40px;
width: 40px;
line-height:40px;
font-size: 28px;
text-align: center;
margin-top:-20px;
background:#333;

CSS إضافية مع وحدة التعليمات البرمجية لتحديد موضع أسهم الشرائح

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

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

ثم الصق CSS التالية مع التأكد من لفها بعلامات الأنماط الضرورية.

.et-post-ticker.et_pb_slider:hover .et-pb-arrow-prev,
.et-post-ticker .et-pb-arrow-prev {
  right: 40px !important;
  opacity: 1 !important;
  left: auto !important;
}
.et-post-ticker.et_pb_slider:hover .et-pb-arrow-next,
.et-post-ticker .et-pb-arrow-next {
  right: 0px !important;
  opacity: 1 !important;
}
.et-post-ticker .et_pb_slide {
  padding: 0 84px 0 3% !important;
}

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

ها هي النتيجة النهائية على الصفحة الحية.

لاحظ كيف يتعامل مؤشر النشر مع تجاوز نص العنوان.

وإليك كيفية تكديس مؤشر النشر بشكل جيد على شاشة الهاتف.

إضافة شريط النشر إلى رأس قالب منشور مدونة

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

حفظ الصف إلى مكتبة Divi

أولاً ، احفظ الصف الذي يحتوي على العناصر التي تشكل شريط المنشور الخاص بنا في مكتبة Divi. يمكنك القيام بذلك عن طريق النقر على أيقونة النقاط الثلاث في الصف واختيار "حفظ في المكتبة". ثم قم بتسمية التخطيط وانقر على زر "حفظ في المكتبة".

إضافة صف شريط المشاركة إلى قالب الرأس

قم بتحرير رأس مخصص

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

إدراج صف (شريط النشر) من المكتبة

في محرر تخطيط الرأس ، انقر لإضافة صف جديد حيثما تريد عرض مؤشر النشر.

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

الآن سيظهر شريط النشر على الرأس.

عرض الوظائف ذات الصلة للفئة الحالية

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

أولاً ، نحتاج إلى تحديث نص العنوان في الوحدة النصية الخاصة بنا إلى "منشورات ذات صلة:".

بعد ذلك ، افتح إعدادات شريط تمرير النشر. ضمن الفئات المضمنة ، حدد خيار الفئة الحالية.

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

النتيجة على قالب منشور المدونة

هنا الرسوم المتحركة التلقائية في العمل.

إليك كيفية النقر فوق أسهم التنقل للانتقال إلى المشاركات التالية والسابقة. والنقر فوق عنوان المنشور ينقلك إلى هذا المنشور.

وإليك كيف يبدو على الجهاز اللوحي والهاتف.

افكار اخيرة

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

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

هتافات!