ساخت اسلایدر مطالب وردپرس بدون افزونه؛ قدم‌به‌قدم

برای ساخت اسلایدر مطالب وردپرس بدون افزونه، لازم نیست سراغ ابزارهای سنگین برید. می‌تونید نوشته‌های دلخواهتون رو با تصویر شاخص داخل یک ردیف افقی نمایش بدید و دکمه‌های قبلی و بعدی هم کنارش بذارید. توی این آموزش، این کار رو برای قالب‌های کلاسیک با PHP، CSS و JavaScript انجام می‌دیم. برای قالب‌های بلوکی هم از Query Loop، یعنی بلوک داخلی وردپرس برای نمایش خودکار نوشته‌ها، کمک می‌گیریم.

کدهای این آموزش آخرین مطالب رو به‌صورت خودکار می‌گیرن، در موبایل و دسکتاپ درست نمایش داده می‌شن و بدون JavaScript هم فهرست مطالب رو از دسترس خارج نمی‌کنن. قبل از شروع، از سایت بکاپ بگیرید و تغییرات قالب کلاسیک رو داخل چایلد تم انجام بدید تا با به‌روزرسانی قالب مادر پاک نشن.

یادتون باشه کدهای داخل این مقاله نمونه هستن و ظاهر پایه اسلایدر رو می‌سازن. اگه می‌خواید این المان رو برای سایت خودتون پیاده‌سازی کنید، بهتره مقادیر ظاهری مثل رنگ‌ها، فاصله‌ها، اندازه نوشته‌ها و تعداد کارت‌ها رو متناسب با طراحی سایتتون تغییر بدید. برای شخصی‌سازی کدها می‌تونید از ابزارهای هوش مصنوعی هم کمک بگیرید، ولی قبل از استفاده نهایی حتماً خروجی رو روی نسخه آزمایشی سایت بررسی کنید.

قبل از ساخت اسلایدر مطالب وردپرس بدون افزونه چه چیزهایی لازمه؟

اول باید بفهمید سایتتون از قالب کلاسیک استفاده می‌کنه یا قالب بلوکی. اگه از پیشخوان وردپرس وارد «نمایش» می‌شید و گزینه «ویرایشگر» رو می‌بینید، به احتمال زیاد قالب شما بلوکیه. البته سطح دسترسی شما یا بعضی افزونه‌ها ممکنه گزینه‌های این منو رو تغییر بدن. برای اطمینان، صفحه جزئیات قالب فعال رو هم بررسی کنید و ببینید قالب از «ویرایشگر سایت» پشتیبانی می‌کنه یا نه. برای آشنایی ساده‌تر با این تفاوت، راهنمای قالب وردپرس چیست هم به کارتون میاد.

• برای قالب کلاسیک: به فایل‌های چایلد تم و امکان ویرایش PHP، CSS و JavaScript نیاز دارید.
• برای قالب بلوکی: می‌تونید بخش اصلی چیدمان رو با ویرایشگر سایت و بلوک Query Loop بسازید. این روش بدون کد یک فهرست یا شبکه واکنش‌گرا بهتون می‌ده، ولی برای دکمه‌های حرکت اسلایدی به کدنویسی اختصاصی نیاز دارید.
• برای هر دو روش: نوشته‌ها بهتره عنوان کوتاه، پیوند سالم و تصویر شاخص هم‌اندازه داشته باشن.

قبل از دست‌زدن به کدها، یک بکاپ کامل بگیرید. بهتره تغییر رو اول روی نسخه آزمایشی سایت امتحان کنید. در قالب کلاسیک هم کدها رو داخل چایلد تم بذارید؛ چون ویرایش مستقیم قالب مادر ممکنه با آپدیت بعدی از بین بره.

اسلایدر مطالب قراره چطور کار کنه؟

خروجی نهایی یک ردیف از کارت‌های نوشته هست. هر کارت تصویر شاخص و عنوان نوشته رو نشون می‌ده. دکمه‌های «قبلی» و «بعدی» بین کارت‌ها حرکت می‌کنن. در موبایل یک کارت و در صفحه‌های بزرگ‌تر چند کارت دیده می‌شن.

این روش به کتابخانه خارجی وابسته نیست. اگه JavaScript اجرا نشه، کاربر هنوز می‌تونه کارت‌ها رو با اسکرول افقی ببینه. حرکت خودکار رو هم فعال نمی‌کنیم؛ چون ممکنه خوندن صفحه رو سخت کنه و برای دسترس‌پذیری به کنترل توقف و مدیریت دقیق‌تری نیاز داره.

ساخت اسلایدر بدون کدنویسی با قالب اهورا

اگه از قالب پیشرفته اهورا استفاده می‌کنید، می‌تونید بدون کدنویسی اسلایدر بسازید. المان‌های خود قالب بهتون اجازه می‌دن اسلایدهای موردنیاز بخش‌های مختلف سایتتون رو طراحی کنید؛ پس لازم نیست فایل‌های PHP، CSS یا JavaScript رو دستی تغییر بدید.

برای شروع، صفحه دلخواهتون رو با صفحه‌ساز باز کنید و از بین المان‌های قالب، المان اسلایدر مناسب رو انتخاب کنید. بعد می‌تونید محتوا، تصویرها، تعداد اسلایدها و تنظیمات ظاهری رو از پنل همون المان تغییر بدید. اسم و جای بعضی گزینه‌ها ممکنه با توجه به نسخه قالب یا صفحه‌ساز فرق داشته باشه؛ پس تنظیمات المان انتخاب‌شده رو هم بررسی کنید.

ساخت اسلایدر مطالب در قالب کلاسیک وردپرس

مرحله اول: ساخت چایلد تم برای نگه‌داشتن تغییرات

چایلد تم، یک قالب فرزند سبک هست که تغییرات شما رو جدا از قالب اصلی نگه می‌داره. اگه چایلد تم فعال دارید، از همون استفاده کنید. اگه ندارید، پوشه‌ای برای اون بسازید و حداقل فایل‌های style.css و functions.php رو داخلش قرار بدید. نام پوشه قالب مادر باید در بخش Template فایل style.css نوشته بشه.

/*Theme Name: My Theme ChildTemplate: parent-theme-folderVersion: 1.0.0*/

عبارت parent-theme-folder رو با نام واقعی پوشه قالب مادر عوض کنید. بعد از بخش «نمایش ← پوسته‌ها»، چایلد تم رو فعال کنید. ظاهر سایت رو همون لحظه بررسی کنید. بعضی قالب‌ها استایل اصلی رو خودشون بارگذاری می‌کنن، ولی بعضی‌ها به تنظیم جداگانه در functions.php نیاز دارن؛ پس روش پیشنهادی سازنده قالب مادر رو هم بررسی کنید.

اگه لازم شد یک فایل قالب رو از قالب مادر به چایلد تم کپی کنید، یادتون باشه اون نسخه بعداً به‌صورت خودکار با تغییرات قالب مادر هماهنگ نمی‌شه. بعد از هر به‌روزرسانی مهم قالب، فایل کپی‌شده رو با نسخه تازه قالب مادر مقایسه و روی نسخه آزمایشی بررسی کنید.

مرحله دوم: بررسی پشتیبانی قالب از تصویر شاخص

یک نوشته رو باز کنید و در تنظیمات کناری دنبال بخش «تصویر شاخص» بگردید. بیشتر قالب‌های امروزی این قابلیت رو دارن. اگه این بخش در قالب کلاسیک شما دیده نمی‌شه، کد زیر رو به فایل functions.php چایلد تم اضافه کنید.

function mihanwp_slider_theme_setup() {    add_theme_support( 'post-thumbnails' );    add_image_size( 'mihanwp-slider-card', 720, 480, true );}add_action( 'after_setup_theme', 'mihanwp_slider_theme_setup' );

اندازه دوم برای ساخت تصویرهای هم‌نسبت استفاده می‌شه. تصویرهای قدیمی ممکنه این اندازه رو نداشته باشن؛ پس اگه برش اون‌ها درست نبود، باید بندانگشتی‌های قدیمی رو دوباره تولید کنید یا تصویر شاخص رو دوباره بارگذاری کنید. آموزش دریافت URL تصویر شاخص هم جزئیات بیشتری درباره تصویر نوشته‌ها داره.

مرحله سوم: دریافت آخرین مطالب با WP_Query

WP_Query ابزار داخلی وردپرس برای گرفتن نوشته‌ها از پایگاه داده هست. یک فایل به نام template-parts/posts-slider.php داخل چایلد تم بسازید. اگه پوشه template-parts ندارید، اون رو هم بسازید. شروع فایل رو با کد زیر قرار بدید.

<?php$slider_query = new WP_Query(    array(        'post_type'           => 'post',        'post_status'         => 'publish',        'posts_per_page'      => 8,        'ignore_sticky_posts' => true,        'no_found_rows'       => true,    ));?>

posts_per_page تعداد نوشته‌ها رو مشخص می‌کنه. گزینه no_found_rows هم چون صفحه‌بندی نداریم، یک محاسبه اضافه رو حذف می‌کنه. فعلاً بقیه گزینه‌ها رو تغییر ندید.

مرحله چهارم: ساخت کد HTML اسلایدر

ادامه کد زیر رو بعد از بخش قبلی و داخل همون فایل بذارید. تابع esc_url() نشانی نوشته و تابع esc_html() عنوان اون رو قبل از چاپ امن می‌کنن. دکمه‌ها هم برچسب قابل‌فهم دارن و وضعیت حرکت برای ابزارهای کمکی اعلام می‌شه.

<?php if ( $slider_query->have_posts() ) : ?><section class="mihanwp-posts-slider" aria-labelledby="mihanwp-posts-slider-title" data-posts-slider>    <div class="mihanwp-posts-slider__header">        <h2 id="mihanwp-posts-slider-title">آخرین مطالب</h2>        <div class="mihanwp-posts-slider__controls">            <button type="button" data-slider-prev aria-label="نمایش مطلب قبلی">قبلی</button>            <button type="button" data-slider-next aria-label="نمایش مطلب بعدی">بعدی</button>        </div>    </div>    <p class="mihanwp-posts-slider__status" data-slider-status aria-live="polite" aria-atomic="true"></p>    <div class="mihanwp-posts-slider__track" data-slider-track tabindex="0">        <?php $slider_index = 0; ?>        <?php while ( $slider_query->have_posts() ) : $slider_query->the_post(); ?>            <article class="mihanwp-posts-slider__slide">                <a href="<?php echo esc_url( get_permalink() ); ?>">                    <?php if ( has_post_thumbnail() ) : ?>                        <?php                        the_post_thumbnail(                            'mihanwp-slider-card',                            array(                                'loading'       => 0 === $slider_index ? 'eager' : 'lazy',                                'fetchpriority' => 0 === $slider_index ? 'high' : 'auto',                            )                        );                        ?>                    <?php else : ?>                        <span class="mihanwp-posts-slider__placeholder" aria-hidden="true"></span>                    <?php endif; ?>                    <h3><?php echo esc_html( get_the_title() ); ?></h3>                </a>            </article>            <?php $slider_index++; ?>        <?php endwhile; ?>    </div></section><?php endif; ?><?php wp_reset_postdata(); ?>

wp_reset_postdata() اطلاعات نوشته اصلی صفحه رو بعد از پایان حلقه برمی‌گردونه. حذف این خط ممکنه عنوان یا اطلاعات بخش‌های بعدی قالب رو اشتباه کنه. بارگذاری فوری تصویر اول هم بیشتر برای اسلایدری مناسبه که بالای صفحه دیده می‌شه؛ نتیجه نهایی رو با ابزار سنجش سرعت روی سایت خودتون بررسی کنید.

مرحله پنجم: اضافه کردن استایل واکنش‌گرا با CSS

یک فایل به نام assets/css/posts-slider.css داخل چایلد تم بسازید و کد زیر رو داخلش قرار بدید. این استایل در موبایل یک کارت، در تبلت دو کارت و در دسکتاپ سه کارت نشون می‌ده.

.mihanwp-posts-slider {    --slider-gap: 16px;    margin-block: 32px;}.mihanwp-posts-slider__header {    display: flex;    align-items: center;    justify-content: space-between;    gap: 16px;    margin-bottom: 16px;}.mihanwp-posts-slider__header h2 {    margin: 0;}.mihanwp-posts-slider__controls {    display: flex;    gap: 8px;}.mihanwp-posts-slider__controls button {    min-width: 72px;    min-height: 44px;    padding: 8px 14px;    border: 1px solid #d0d5dd;    border-radius: 8px;    background: #fff;    color: #101828;    cursor: pointer;}.mihanwp-posts-slider__controls button:disabled {    cursor: not-allowed;    opacity: 0.5;}.mihanwp-posts-slider__controls button:focus-visible,.mihanwp-posts-slider__track:focus-visible {    outline: 3px solid #2f6fed;    outline-offset: 3px;}.mihanwp-posts-slider__status {    position: absolute;    width: 1px;    height: 1px;    padding: 0;    margin: -1px;    overflow: hidden;    clip: rect(0, 0, 0, 0);    white-space: nowrap;    border: 0;}.mihanwp-posts-slider__track {    display: flex;    gap: var(--slider-gap);    overflow-x: auto;    scroll-snap-type: x mandatory;    scroll-behavior: smooth;    scrollbar-width: thin;    padding: 4px 4px 14px;}.mihanwp-posts-slider__slide {    flex: 0 0 86%;    scroll-snap-align: start;    border: 1px solid #eaecf0;    border-radius: 12px;    overflow: hidden;    background: #fff;}.mihanwp-posts-slider__slide a {    display: block;    color: inherit;    text-decoration: none;}.mihanwp-posts-slider__slide img,.mihanwp-posts-slider__placeholder {    display: block;    width: 100%;    aspect-ratio: 3 / 2;    object-fit: cover;    background: #f2f4f7;}.mihanwp-posts-slider__slide h3 {    margin: 0;    padding: 16px;    font-size: 1rem;    line-height: 1.8;}@media (min-width: 600px) {    .mihanwp-posts-slider__slide {        flex-basis: calc((100% - var(--slider-gap)) / 2);    }}@media (min-width: 960px) {    .mihanwp-posts-slider__slide {        flex-basis: calc((100% - (2 * var(--slider-gap))) / 3);    }}@media (prefers-reduced-motion: reduce) {    .mihanwp-posts-slider__track {        scroll-behavior: auto;    }}

مرحله ششم: اضافه کردن حرکت اسلایدر با JavaScript

حالا فایل assets/js/posts-slider.js رو بسازید. این کد به‌جای محاسبه مستقیم مقدار پیمایش افقی، کارت مقصد رو پیدا می‌کنه و همون کارت رو به ابتدای بخش قابل‌دیدن می‌بره. به‌این‌ترتیب، وابستگی کمتری به تفاوت رفتار پیمایش RTL در مرورگرها داره.

document.addEventListener('DOMContentLoaded', () => {    document.querySelectorAll('[data-posts-slider]').forEach((slider) => {        const track = slider.querySelector('[data-slider-track]');        const previous = slider.querySelector('[data-slider-prev]');        const next = slider.querySelector('[data-slider-next]');        const status = slider.querySelector('[data-slider-status]');        const slides = Array.from(slider.querySelectorAll('.mihanwp-posts-slider__slide'));        if (!track || !previous || !next || slides.length === 0) {            return;        }        let currentIndex = 0;        const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');        const updateControls = () => {            previous.disabled = currentIndex === 0;            next.disabled = currentIndex === slides.length - 1;            if (status) {                status.textContent = `مطلب ${currentIndex + 1} از ${slides.length}`;            }        };        const showSlide = (newIndex) => {            currentIndex = Math.min(Math.max(newIndex, 0), slides.length - 1);            slides[currentIndex].scrollIntoView({                behavior: reduceMotion.matches ? 'auto' : 'smooth',                block: 'nearest',                inline: 'start'            });            updateControls();        };        previous.addEventListener('click', () => showSlide(currentIndex - 1));        next.addEventListener('click', () => showSlide(currentIndex + 1));        track.addEventListener('keydown', (event) => {            if (event.key === 'ArrowRight') {                event.preventDefault();                showSlide(currentIndex - 1);            }            if (event.key === 'ArrowLeft') {                event.preventDefault();                showSlide(currentIndex + 1);            }        });        updateControls();    });});

رفتار RTL و کلیدهای جهت رو حتماً در مرورگرها و دستگاه‌هایی که مخاطب‌های سایتتون بیشتر استفاده می‌کنن آزمایش کنید. جهت موردانتظار دکمه‌های «قبلی» و «بعدی» ممکنه به طراحی رابط کاربری سایتتون هم بستگی داشته باشه.

مرحله هفتم: بارگذاری درست فایل‌های CSS و JavaScript در وردپرس

نباید تگ script یا link رو مستقیم داخل فایل هدر بذارید. وردپرس برای این کار سیستم بارگذاری استاندارد داره. کد زیر رو به functions.php چایلد تم اضافه کنید. راهنمای افزودن CSS و JavaScript سفارشی به وردپرس هم این موضوع رو ساده‌تر توضیح می‌ده.

function mihanwp_enqueue_posts_slider_assets() {    $css_path = get_stylesheet_directory() . '/assets/css/posts-slider.css';    $js_path  = get_stylesheet_directory() . '/assets/js/posts-slider.js';    wp_enqueue_style(        'mihanwp-posts-slider',        get_stylesheet_directory_uri() . '/assets/css/posts-slider.css',        array(),        file_exists( $css_path ) ? filemtime( $css_path ) : wp_get_theme()->get( 'Version' )    );    wp_enqueue_script(        'mihanwp-posts-slider',        get_stylesheet_directory_uri() . '/assets/js/posts-slider.js',        array(),        file_exists( $js_path ) ? filemtime( $js_path ) : wp_get_theme()->get( 'Version' ),        true    );}add_action( 'wp_enqueue_scripts', 'mihanwp_enqueue_posts_slider_assets' );

آرگومان آخر wp_enqueue_script() فایل رو نزدیک انتهای صفحه قرار می‌ده و معمولاً کمک می‌کنه محتوای اصلی زودتر دیده بشه. نتیجه نهایی به قالب و بقیه فایل‌های سایت هم بستگی داره. تابع filemtime() هم بعد از تغییر فایل، شماره نسخه تازه‌ای می‌سازه تا مرورگر یا CDN کمتر نسخه قدیمی رو از کش نشون بده.

مرحله هشتم: نمایش اسلایدر در بخش دلخواه قالب

فایل قالبی رو باز کنید که باید اسلایدر داخلش دیده بشه؛ مثلاً front-page.php برای صفحه اصلی یا home.php برای برگه نوشته‌ها. کد زیر رو در جای دلخواه قرار بدید.

<?php get_template_part( 'template-parts/posts-slider' ); ?>

اگه فایل موردنظر داخل چایلد تم نیست، قبل از کپی‌کردن نسخه قالب مادر بررسی کنید که قالب راه اختصاصی یا هوک مناسبی برای افزودن این بخش نداشته باشه. اگه فایل رو کپی کردید، بعد از آپدیت‌های مهم قالب اون رو با نسخه تازه قالب مادر مقایسه کنید. در پایان، کش سایت و مرورگر رو پاک کنید و صفحه رو در موبایل و دسکتاپ ببینید. برای چیدمان بهتر صفحه اول هم می‌تونید راهنمای ساخت صفحه اصلی سفارشی در وردپرس رو بخونید.

ساخت فهرست افقی مطالب در قالب بلوکی وردپرس

ساخت فهرست مطالب با بلوک Query Loop

از پیشخوان وارد «نمایش ← ویرایشگر» بشید و قالب یا الگویی رو باز کنید که می‌خواید مطالب داخلش دیده بشن. بلوک «Query Loop» یا «حلقه پرس‌وجو» رو اضافه کنید. بعد یکی از چیدمان‌های شبکه‌ای رو انتخاب کنید و داخل الگوی نوشته، بلوک‌های تصویر شاخص و عنوان نوشته رو نگه دارید.

در تنظیمات Query Loop می‌تونید تعداد نوشته‌ها، دسته، ترتیب و نوع محتوا رو مشخص کنید. اگه فقط یک فهرست یا شبکه واکنش‌گرا می‌خواید، همین بلوک کافیه و نیازی به JavaScript ندارید.

تبدیل فهرست مطالب به ردیف افقی قابل اسکرول

Query Loop به‌تنهایی دکمه قبلی و بعدی برای حرکت کارت‌ها نمی‌سازه. می‌تونید بلوک Query Loop رو انتخاب کنید و از بخش «پیشرفته»، کلاس mihanwp-block-posts-slider رو در قسمت «کلاس‌های CSS اضافی» بنویسید. بعد با CSS سفارشی، فهرست نوشته‌ها رو به یک ردیف افقی قابل اسکرول تبدیل کنید. این خروجی هنوز اسلایدر دکمه‌دار کامل نیست، ولی بدون JavaScript کار می‌کنه.

ساخت دکمه‌هایی که JavaScript بتونه به اون‌ها وصل بشه، در همه قالب‌های بلوکی یکسان نیست. ساختار HTML بلوک Query Loop هم ممکنه با نسخه وردپرس یا تنظیمات قالب فرق کنه. پس نمی‌شه کد روش کلاسیک رو بدون تغییر به این بلوک وصل کرد. اگه دکمه‌های واقعی قبلی و بعدی می‌خواید، بهتره یک بلوک اختصاصی و آزمایش‌شده بسازید یا از راهکاری استفاده کنید که با قالب فعلیتون سازگاره. قرار دادن PHP داخل بلوک «HTML سفارشی» هم کار نمی‌کنه.

قرار دادن فهرست مطالب در قالب با ویرایشگر سایت

بعد از آماده‌شدن Query Loop، اون رو در قالب صفحه اصلی، آرشیو یا یک «بخش الگو» قرار بدید. تغییرات رو ذخیره کنید و بررسی کنید این بخش ناخواسته در همه صفحه‌ها تکرار نشده باشه. اگه فقط صفحه اصلی به این فهرست نیاز داره، اون رو داخل قالب مخصوص صفحه اصلی بذارید.

چطور مطالب اسلایدر رو انتخاب و مرتب کنیم؟

در روش کلاسیک، همه انتخاب‌ها داخل آرایه WP_Query انجام می‌شن. برای نمایش آخرین نوشته‌ها، تنظیم پیش‌فرض کافیه. برای نمایش یک دسته خاص، نامک دسته رو اضافه کنید.

'category_name' => 'tutorials',

tutorials رو با نامک واقعی دسته خودتون عوض کنید؛ نه عنوانی که با فاصله و حروف نمایشی دیده می‌شه. برای تغییر تعداد کارت‌ها هم مقدار posts_per_page رو تغییر بدید.

برای حذف چند نوشته خاص، شناسه اون‌ها رو در post__not_in بذارید.

'post__not_in' => array( 12, 34, 56 ),

اگه می‌خواید چند نوشته مشخص رو با ترتیب دلخواه نشون بدید، از post__in و ترتیب post__in استفاده کنید.

'post__in' => array( 56, 12, 34 ),
'orderby'  => 'post__in',

این گزینه‌ها رو بی‌دلیل با هم ترکیب نکنید. اول مشخص کنید اسلایدر باید خودکار آخرین مطالب رو بگیره یا یک انتخاب دستی و ثابت داشته باشه.

تنظیم ظاهر و رفتار اسلایدر

تغییر اندازه و نسبت تصویرها

نسبت تصویر در CSS با aspect-ratio: 3 / 2 مشخص شده. برای تصویر مربعی اون رو به 1 / 1 تغییر بدید. بهتره اندازه ثبت‌شده در add_image_size() هم با همین نسبت هماهنگ باشه تا مرورگر مجبور نشه فایل خیلی بزرگ‌تری رو دانلود کنه.

تنظیم تعداد اسلایدها در موبایل و دسکتاپ

تعداد کارت‌های قابل‌مشاهده با مقدار flex-basis کنترل می‌شه. در کد فعلی، موبایل تقریباً یک کارت، تبلت دو کارت و دسکتاپ سه کارت نشون می‌ده. اگه چهار کارت دسکتاپ می‌خواید، مقدار بخش آخر رو به فرمول زیر تغییر بدید.

flex-basis: calc((100% - (3 * var(--slider-gap))) / 4);

چرا حرکت خودکار در این نمونه غیرفعاله؟

حرکت خودکار برای بیشتر اسلایدرهای مطلب ضروری نیست. کاربر باید فرصت خوندن عنوان رو داشته باشه و حرکت ناگهانی هم ممکنه تمرکز رو به‌هم بزنه. به همین دلیل، نمونه این آموزش فقط با دکمه‌ها و اسکرول دستی حرکت می‌کنه.

اگه حرکت خودکار لازم بود چه چیزهایی رو رعایت کنیم؟

حرکت خودکار به یک تایمر ساده خلاصه نمی‌شه. باید دکمه واضح توقف داشته باشه، موقع قرارگرفتن نشانگر یا فوکوس صفحه‌کلید روی اسلایدر متوقف بشه و ترجیح prefers-reduced-motion کاربر رو رعایت کنه. اگه نمی‌خواید این کنترل‌ها رو به‌طور کامل بسازید و آزمایش کنید، همون حرکت دستی انتخاب بهتریه.

نکات مهم برای سرعت، دسترس‌پذیری و تجربه کاربری

• تصویرهای شاخص رو قبل از بارگذاری فشرده کنید و ابعاد خیلی بزرگ نفرستید. راهنمای افزایش سرعت سایت وردپرس برای بررسی بقیه عوامل سرعت هم مفیده.
• برای تصویرها عرض، ارتفاع یا نسبت ثابت داشته باشید تا موقع بارگذاری، چیدمان صفحه نپره.
• اگه اسلایدر بالای صفحه هست، بارگذاری تصویر اول رو جداگانه آزمایش کنید. تنبل‌کردن همه تصویرها ممکنه نمایش محتوای اصلی رو عقب بندازه.
• از عنصر واقعی button برای کنترل‌ها استفاده کنید. لینک خالی جای دکمه نیست.
• برچسب دکمه‌ها باید کاری رو که انجام می‌دن توضیح بده؛ مثل «نمایش مطلب بعدی».
• در ابتدا و انتهای فهرست، دکمه‌ای رو که دیگه کاری انجام نمی‌ده غیرفعال کنید و وضعیت حرکت رو برای ابزارهای کمکی اعلام کنید.
• مسیر حرکت با صفحه‌کلید باید دیده بشه. استایل focus-visible رو حذف نکنید.
• ترجیح prefers-reduced-motion کاربر رو رعایت کنید و برای این افراد حرکت نرم یا خودکار رو کنار بذارید.
• فهرست مطالب باید بدون JavaScript هم قابل‌دیدن و قابل‌اسکرول بمونه.
• تعداد نوشته‌ها رو محدود نگه دارید. بارگذاری ده‌ها تصویر در بالای صفحه می‌تونه سرعت نمایش محتوای اصلی رو کم کنه.

رفع خطاهای رایج اسلایدر مطالب وردپرس

اسلایدر نمایش داده نمی‌شه

اول مطمئن بشید فایل posts-slider.php در مسیر درست قرار گرفته و کد get_template_part() هم داخل فایل قالب اجرا می‌شه. بعد بررسی کنید حداقل یک نوشته منتشرشده دارید. اگه صفحه سفید شده، گزارش خطای هاست رو بررسی کنید یا از پشتیبان هاست کمک بگیرید. حالت اشکال‌زدایی وردپرس رو روی سایت اصلی بدون محافظت روشن نذارید؛ چون ممکنه جزئیات فنی خطاها رو به بازدیدکننده‌ها نشون بده.

مطالب دیده می‌شن ولی حرکت نمی‌کنن

در مرورگر روی صفحه کلیک راست کنید، گزینه Inspect یا «بررسی» رو بزنید و برگه Console رو باز کنید. اگه خطای قرمزی درباره فایل اسلایدر می‌بینید، مسیر فایل در کد enqueue، نام کلاس‌ها و ویژگی‌های data-slider-* رو بررسی کنید. این موارد باید دقیقاً با HTML یکی باشن. کش افزونه، سرور، CDN و مرورگر رو هم پاک کنید.

تصویر شاخص بعضی نوشته‌ها خالیه

اون نوشته‌ها احتمالاً تصویر شاخص ندارن یا اندازه تازه ثبت‌شده برای تصویر قدیمی ساخته نشده. تصویر شاخص رو تعیین کنید و در صورت نیاز بندانگشتی‌ها رو دوباره بسازید. کد آموزش برای نوشته بدون تصویر، یک جای خالی هم‌اندازه نشون می‌ده تا چیدمان خراب نشه.

ظاهر اسلایدر در موبایل به‌هم می‌ریزه

اول دنبال CSS قالب باشید که روی همه عناصر article، تصویرها یا لینک‌ها اثر می‌ذاره. بعد عرض کارت، فاصله‌ها و overflow-x رو بررسی کنید. استفاده از عرض ثابت پیکسلی برای کل اسلایدر معمولاً در موبایل مشکل می‌سازه.

بعد از به‌روزرسانی قالب، کدها حذف می‌شن

این اتفاق وقتی می‌افته که فایل‌های قالب مادر رو مستقیم تغییر داده باشید. تغییرات رو به چایلد تم منتقل کنید و قبل از به‌روزرسانی بعدی، یک بکاپ کامل بگیرید. فایل‌های سفارشی رو هم با یک نسخه محلی یا مخزن کد نگه دارید. بعد از آپدیت قالب مادر، فایل‌های قالبی کپی‌شده در چایلد تم رو با نسخه تازه مقایسه کنید تا تغییرات مهم قالب رو از دست ندید.

جمع‌بندی

برای ساخت اسلایدر مطالب وردپرس بدون افزونه در قالب کلاسیک، به یک حلقه WP_Query، ساختار HTML، CSS واکنش‌گرا و JavaScript کوتاه نیاز دارید. فایل‌ها رو با سیستم استاندارد وردپرس بارگذاری کنید و همه تغییرات رو داخل چایلد تم نگه دارید.

در قالب بلوکی، Query Loop انتخاب و نمایش نوشته‌ها رو راحت می‌کنه و بدون کد یک فهرست یا شبکه واکنش‌گرا بهتون می‌ده. برای ساخت اسلایدر دکمه‌دار واقعی باید راهکاری متناسب با ساختار همون قالب یا یک بلوک اختصاصی داشته باشید. در هر دو حالت، حجم تصویرها، کار با صفحه‌کلید، آزمایش RTL و نمایش محتوا بدون JavaScript رو جدی بگیرید.

سؤال‌های متداول درباره ساخت اسلایدر مطالب وردپرس بدون افزونه

تیم تولید محتوا

ما در تیم تولید محتوای میهن وردپرس در تلاش هستیم تا بهترین مقالات آموزشی در زمینه وردپرس و کسب‌و‌کارهای اینترنتی را تهیه کنیم. صحت محتوای این صفحه توسط رضا راد بررسی خواهد شد.