كيفية تخصيص عرض أرشيفات ووردبريس في الشريط الجانبي

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

عرض المحفوظات المخصصة في الشريط الجانبي لـ  ووردبريس

الآن ربما تتساءل لماذا كان من الصعب إدخالها في  ووردبريس عندما تقوم wp_get_archives () بإدراج الأرشيفات شهريًا مع السنة التي تليها؟ حسنًا ، هذا لأن هذا العميل أراد فقط عرض السنة مرة واحدة على المتبقي. لا توجد طريقة حقيقية لتخصيص تصميم وظيفة wp_get_archives ().

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

لم يكن لرمز أندرو معلمة حد للمحفوظات. لذا فإن استخدام أكواده يعني أنك ستعرض كل شهر المحفوظات. تخيل ذلك لمدونة عمرها 5 سنوات. لذلك أضفنا معلمة حد سمحت لنا بتحديد عدد الأشهر المعروضة إلى 18 شهرًا في أي وقت.

لذلك ، ما عليك فعله هو لصق الكود التالي في ملف sidebar.php الخاص بالقالب أو أي ملف آخر تريد عرض أرشيفات  ووردبريس المخصصة فيه:

<?php
global $wpdb;
$limit = 0;
$year_prev = null;
$months = $wpdb->get_results("SELECT DISTINCT MONTH( post_date ) AS month ,  YEAR( post_date ) AS year, COUNT( id ) as post_count FROM $wpdb->posts WHERE post_status = 'publish' and post_date <= now( ) and post_type = 'post' GROUP BY month , year ORDER BY post_date DESC");
foreach($months as $month) :
    $year_current = $month->year;
    if ($year_current != $year_prev){
        if ($year_prev != null){?>
         
        <?php } ?>
     
    <li class="archive-year"><a href="<?php bloginfo('url') ?>/<?php echo $month->year; ?>/"><?php echo $month->year; ?></a></li>
     
    <?php } ?>
    <li><a href="<?php bloginfo('url') ?>/<?php echo $month->year; ?>/<?php echo date("m", mktime(0, 0, 0, $month->month, 1, $month->year)) ?>"><span class="archive-month"><?php echo date_i18n("F", mktime(0, 0, 0, $month->month, 1, $month->year)) ?></span></a></li>
<?php $year_prev = $year_current;
 
if(++$limit >= 18) { break; }
 
endforeach; ?>

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

بدا CSS الخاص بنا قليلاً مثل هذا:

.widget-archive{padding: 0 0 40px 0; float: left; width: 235px;}
.widget-archive ul {margin: 0;}
.widget-archive li {margin: 0; padding: 0;}
.widget-archive li a{ border-left: 1px solid #d6d7d7; padding: 5px 0 3px 10px; margin: 0 0 0 55px; display: block;}
li.archive-year{float: left; font-family: Helvetica, Arial, san-serif; padding: 5px 0 3px 10px; color:#ed1a1c;}
li.archive-year a{color:#ed1a1c; margin: 0; border: 0px; padding: 0;}

لذلك من خلال القيام بذلك بهذه الطريقة ، كان لدينا النتيجة النهائية لتبدو كما يلي:

عرض المحفوظات المخصصة في الشريط الجانبي لـ  ووردبريس

الآن إذا كنت تريد إظهار عدد المنشورات في كل شهر ، فستحتاج إلى إضافة هذا الجزء من الكود في أي مكان بين السطر 12-16 من الكود أعلاه:

<?php echo $month->post_count; ?>

أحد الأمثلة على ما يمكنك فعله بعدد المنشورات ويمكن رؤية كل شيء في الصورة أدناه:

عرض أرشيفات  ووردبريس المخصصة مع عدد المنشورات

تم التقاط الصورة أعلاه من موقع Andrew Appleton لأن هذا كان الحل الذي توصل إليه والذي استمدنا منه أسلوبنا. إذا كنت تريد رؤية css لأنماطه ، فما عليك سوى النقر فوق رابط موقع الويب الخاص به أعلاه.

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

خدمات مميزة لآجلك

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

اشترك معنا لمزيد من المعرفة

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