كود اختصار وصف التدوينة لسطر واحد (CSS)

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

______________ WowoLabs _____________

صوره سطور التدوينه قبل

 

الصوره بعد ماضفنا لها الكود

 

📖 إيش فائدة هذا الكود؟

هذا الكود صُمم خصيصاً لحل مشكلة ظهور وصف التدوينات الطويل في الصفحة الرئيسية أو صفحات الفئات داخل بلوجر. فائدته الأساسية تكمن في:

• 🔹 اختصار الوصف: يجعل نص الوصف يظهر في سطر واحد فقط بنهاية (...) أنيقة.
• 🔹 مظهر مرتب: يوحد ارتفاعات بطاقات التدوينات ويجعل التصميم متناسقاً.
• 🔹 تجربة أفضل: الزائر يرى لمحة سريعة مرتبة بدلاً من نصوص متقطعة وفوضوية.

______________ WowoLabs _____________

🤔 متى تحتاج إلى هذا الكود؟

قد تعتقد أن مدونتك بخير، لكنك ستحتاج هذا الكود فوراً إذا لاحظت:

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

______________ WowoLabs _____________

🌟 مميزات هذا الكود:

• ✅ سطر واحد فقط: يقصر الوصف تلقائياً عند السطر الأول مع إظهار (...).
• ✅ تصميم أنيق: يجعل جميع بطاقات التدوينات متساوية الارتفاع.
• ✅ سهل التخصيص: يمكنك زيادة عدد الأسطر بتغيير رقم واحد فقط.
• ✅ آمن وسريع: لا يؤثر على أداء المدونة أو SEO إطلاقاً.

______________ WowoLabs _____________

💜 لماذا هذا الكود مناسب للمبتدئين؟

• 🟣 لا يحتاج خبرة برمجية: مجرد نسخ ولصق في المكان الصحيح.
• 🟣 آمن تماماً: لن يكسر قالبك أو يؤثر على سرعة المدونة.
• 🟣 تعديله سهل: تغيير عدد الأسطر يتم بتعديل رقم واحد فقط.
• 🟣 نتائجه فورية: بمجرد الحفظ ستلاحظ الفرق مباشرة.

______________ WowoLabs _____________

🧪 تجربتي مع هذا النوع من الأكواد

في WowoLabs، جرّبت أكثر من حل لمشكلة تفاوت أطوال أوصاف التدوينات. هذا الكود تحديداً كان الأبسط والأكثر فعالية عبر مختلف القوالب. لاحظت أن:

• 📌 الصفحة الرئيسية أصبحت أكثر ترتيباً وجاذبية بصرياً.
• 📌 معدل التصفح زاد لأن الزائر يرى محتوى منظماً يشجعه على الاستمرار.
• 📌 لم أواجه أي مشاكل مع السيو أو سرعة التحميل.

______________ WowoLabs _____________

🛠️ طريقة الاستخدام:

ببساطة، قم بنسخ الكود التالي ووضعه في قسم إضافة CSS داخل إعدادات المظهر بمدونتك:

CSS CODE WowoLabs Exclusive

/* جعل وصف التدوينة سطر واحد فقط في المعاينة */
.post-body .snippet-container, 
.post-body .snippet-item, 
.post-body .resizer {
  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important; /* تحديد عدد الأسطر بـ 1 */
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important; /* إضافة ثلاث نقاط (...) في نهاية السطر */
  white-space: normal !important;
  max-height: 1.6em !important; /* ارتفاع السطر لضمان عدم ظهور الزيادة */
}

______________ WowoLabs _____________

🎯 كيفية دمج الكود في موقعك خطوة بخطوة

1. 📁 الخطوة الأولى: من لوحة تحكم بلوجر، اذهب إلى المظهر.
2. ⚙️ الخطوة الثانية: انقر على زر تخصيص الموجود بجوار القالب النشط.
3. 🎨 الخطوة الثالثة: من القائمة اليسرى، اختر خيارات متقدمة.
4. 📝 الخطوة الرابعة: انزل للأسفل واختر إضافة CSS.
5. 📋 الخطوة الخامسة: انسخ الكود أعلاه بالكامل وألصقه في الصندوق المخصص.
6. 💾 الخطوة السادسة: انقر على حفظ وشاهد النتيجة مباشرة على مدونتك.

______________ WowoLabs _____________

💡 نصائح لتحسين تجربة المستخدم مع هذا الكود

• 🟣 سطر واحد أم اثنين؟ غيّر الرقم في `-webkit-line-clamp` إلى 2 إذا أردت وصفاً أطول قليلاً.
• 🟣 اجعل المقدمة مختصرة: اكتب أول سطر من تدوينتك بعناية لأنه الوصف الوحيد الذي سيظهر.
• 🟣 اختبر على الموبايل: تأكد أن النص المختصر يظهر بشكل جميل على الهواتف أيضاً.
• 🟣 نسق الوصف يدوياً: استخدم وسم <!--more--> بعد المقدمة مباشرة لتتحكم بطول الوصف الظاهر.

______________ WowoLabs _____________

🚀 كيف تجعل الكود متوافقًا مع SEO؟

هذا الكود في الأساس صديق لمحركات البحث، لكن يمكنك تعزيز ذلك باتباع التالي:

• 🔍 الكود لا يخفي المحتوى عن جوجل: `-webkit-line-clamp` يخفي النص بصرياً فقط لكنه يبقى مقروءاً لمحركات البحث.
• ⚡ اكتب مقدمة غنية بالكلمات المفتاحية: لأن السطر الأول هو ما سيظهر للمستخدم، فاجعله جذاباً ومفيداً.
• 📱 متوافق مع الموبايل: النص المختصر يظهر بشكل مثالي على جميع الشاشات مما يحسن تجربة المستخدم وتقييم جوجل.
• 📏 استخدم وسم الوصف: تأكد من وجود وصف ميتا (Meta Description) منفصل لكل تدوينة حتى لا يعتمد جوجل على النص المختصر فقط.

______________ WowoLabs _____________

❓ الأسئلة الشائعة

💬 هل هذا الكود يؤثر على SEO أو سرعة مدونتي؟

لا، إطلاقاً. الكود مجرد تنسيق بصري ولا يخفي المحتوى عن جوجل. النص الكامل يبقى مقروءاً لمحركات البحث.

💬 كيف أجعل الوصف يظهر بسطرين بدل سطر واحد؟

ببساطة، غيّر قيمة `-webkit-line-clamp` من 1 إلى 2، وغيّر `max-height` إلى 3.2em تقريباً.

💬 الكود لم يعمل معي، ماذا أفعل؟

تأكد من مسح ذاكرة التخزين المؤقت (Ctrl+F5). إذا استمرت المشكلة، قد تحتاج لتغيير اسم الكلاس `.post-body` إلى ما يناسب قالبك.

______________ WowoLabs _____________

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

______________ WowoLabs _____________

⚠️ نصيحة: أنا (أعوذ بالله من كلمة أنا) عدت شغلي عشرات المرات.. لا تحاول تقرب جنب تعديل HTML لو ما كنت مبرمج أو مطور، الأفضل والآمن لك هو خيار "إضافة CSS".