سأشرح في هذه التدوينة كيف تقوم بتعديل ملف الستايل css من أجل عرض التدوينات المتعلقة في أسفل كل تدوينة. بالأخص، سيعلمك هذا الدرس الكود المطلوب لعرض التدوينات المتعلقة بالضبط كما هو على موقع مقطوعات. بالطبع، سأفترض أنك تقدم هذه الخدمة أصلاً. أما إذا كنت لا توفّر هذه الميّزة لزوارك فأنصحك بإستخدام أحد إضافات ووردبرس المختصة بذلك مثل إضافة WordPress Related Posts التي عرّبتها لك.
بالطبع تستطيع إستخدام الكود التالي كما هو، لكن الهدف من هذا المثال هو السماح لك بتعديل الكود في القالب الذي تستخدمه لما يناسبك.
بعد تفعيل الإضافة وتحديد الإعدادات إفتح ملف ال css وأدخل الكود التالي:
.related { background:#F5F8FA; background-repeat:repeat; border:1px solid #467AA7; float: right; margin-bottom: 22px; font-size: 11px; text-align:right; width:100%; }
لنلقى نظرة على الكود سطر بسطر:
أولاً نصنع دالة جديدة. حددنا إسم الدالة الجديدة أنه related ثم حددنا لون الخلفية background (وجعلناها ير مكررة). بالطبع يمكنك تغيير هذا اللون لما يناسب قالبك وألوانه. بعد ذلك، قمنا بوضع خط حول مربع اللائحة حجمه 1px وحددنا لونه. ثم قمنا بإستخدام خاصيات float و margin و text-align و font-size من أجل تحديد موقع، حواشي، مسار وحكم الخط (على التوالي). أخيراُ قمنا بتحديد عرض المربع. لمزيد من التوضيح، أنظر الصورة التالية:
لاحظ بالطبع أننا هنا نحدد خصائص المحتوى.. أما عنوان القائمة فيمكن تعديل شكله عبر ملفات ال css الخاصة بالإضافة.
كل ماعليك القيام به الآن هو التأكد من ربط الدالة مع الإضافة باستخدام الكود التالي في المكان الذي يناسبك (كملف عرض تدوينة منفردة – single.php):
<div class="related">
<?php wp_related_posts(); ?>
</div>
هذا كل شيئ. يمكنك تحديد طريقة عرض لائحة التدوينات المتعلقة عبر الكود الذي وفرته لك.
وبالطبع، يمكنك إستخدام نفس الطريقة لتعديل طريقة عرض أي شيئ.. مثل خدمة إقرأ المزيد… بالتوفيق.. وما عليك إلا السؤال إن إحتجت أي مساعدة.
أضف تعليق (الرجاء عدم إستخدام اللهجة العامية)