مقال حصري رقم 10 — شريط تمرير للمقالات المميزة في ووردبريس
في هذا المقال سنتعلم كيفية إنشاء شريط تمرير جذاب لعرض المقالات المميزة باستخدام HTML وCSS وJS ودمجها في ووردبريس بسهولة.
الكود الكامل للإضافة
<?php
/*
Plugin Name: Featured Posts Slider
Description: شريط تمرير للمقالات المميزة.
Version: 1.0
Author: موقعك الحصري
*/
if(!defined('ABSPATH')) exit;
// إنشاء شورتكود لعرض الشريط
add_shortcode('featured_posts_slider', function($atts){
$atts = shortcode_atts(['count'=>5], $atts);
$query = new WP_Query([
'posts_per_page' => intval($atts['count']),
'meta_key' => '_is_ns_featured_post',
'meta_value' => 'yes',
'post_status' => 'publish'
]);
if(!$query->have_posts()) return '<p>لا توجد مقالات مميزة حالياً.</p>';
ob_start(); ?>
<div class="slider-container">
<div class="slider-wrapper">
<?php while($query->have_posts()): $query->the_post(); ?>
<div class="slide">
<?php if(has_post_thumbnail()) the_post_thumbnail('medium'); ?>
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<p><?php echo wp_trim_words(get_the_content(), 20); ?></p>
</div>
<?php endwhile; ?>
</div>
<div class="slider-nav">
<button id="prev">❮</button>
<button id="next">❯</button>
</div>
</div>
<script>
(function(){
const wrapper = document.querySelector('.slider-wrapper');
const slides = document.querySelectorAll('.slide');
let index=0;
document.getElementById('next').addEventListener('click', ()=>{
index = (index+1) % slides.length;
wrapper.style.transform = 'translateX(-'+index*100+'%)';
});
document.getElementById('prev').addEventListener('click', ()=>{
index = (index-1+slides.length) % slides.length;
wrapper.style.transform = 'translateX(-'+index*100+'%)';
});
})();
</script>
<?php
wp_reset_postdata();
return ob_get_clean();
});
?>
شرح الكود
- يتم إنشاء شورتكود
يمكن وضعه في أي صفحة أو مقال.لا توجد مقالات مميزة حالياً.
- يعتمد على تصنيف المقالات المميزة عن طريق
_is_ns_featured_post. - شريط تمرير متجاوب وسهل التحكم باستخدام JS خفيف.
- يمكنك تعديل عدد المقالات المعروضة عبر الخاصية
count.
تخصيص الشريط
- تغيير الألوان أو الهوامش عبر CSS بسهولة.
- يمكن إضافة تأثيرات انتقال أكثر سلاسة أو مؤثرات عند المرور على الصور.
- دمج الشريط مع أي قالب ووردبريس موجود بدون مشاكل.
الخلاصة
الآن لديك شريط تمرير جذاب للمقالات المميزة، يساعد الزوار على تصفح أهم المقالات بسرعة، ويزيد التفاعل في موقعك بشكل أنيق واحترافي.
