ساخت آکاردئون با جی کوئری در وردپرس

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

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

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

آکاردئون چیه و چه کاربردی توی وردپرس داره؟

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

آکاردئون چطور کار می‌کنه؟

هر آیتم آکاردئون از یک عنوان و یک بخش محتوا ساخته می‌شه. جاوا اسکریپت کلیک یا فشردن کلیدهای کیبورد رو تشخیص می‌ده و وضعیت محتوا رو تغییر می‌ده. توی روش این آموزش، ابزار Accordion از جی‌کوئری UI بخش اصلی این رفتار رو مدیریت می‌کنه.

چه زمانی استفاده از آکاردئون انتخاب خوبیه؟

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

جی‌کوئری چیه و چه نقشی توی ساخت آکاردئون داره؟

جی‌کوئری یک کتابخانه جاوا اسکریپته؛ یعنی مجموعه‌ای از کدهای آماده که انجام بعضی کارها مثل پیدا کردن عناصر صفحه و واکنش به کلیک رو ساده‌تر می‌کنه. جی‌کوئری UI هم ابزارهای رابط کاربری، از جمله آکاردئون، رو روی جی‌کوئری ارائه می‌ده.

تفاوت جی‌کوئری با جاوا اسکریپت

جاوا اسکریپت زبان برنامه‌نویسیه، ولی جی‌کوئری کتابخانه‌ایه که با همین زبان ساخته شده. پس وقتی از جی‌کوئری استفاده می‌کنید، همچنان کد جاوا اسکریپت اجرا می‌شه؛ فقط بخشی از کارها با دستورهای کوتاه‌تر انجام می‌شن.

کتابخانه جی‌کوئری و جی‌کوئری UI در وردپرس

وردپرس جی‌کوئری و بخش‌های مختلف جی‌کوئری UI رو به‌عنوان اسکریپت‌های داخلی ثبت می‌کنه. توی کد این آموزش، وابستگی jquery-ui-accordion رو به وردپرس اعلام می‌کنیم تا فایل‌های لازم با ترتیب درست بارگذاری بشن. بااین‌حال، بهتره قبل از انتشار نهایی کد رو روی نسخه وردپرس سایتتون آزمایش کنید و یک نسخه ناشناس رو از CDN، یعنی سرویس بیرونی تحویل فایل، به سایت اضافه نکنید.

قبل از ساخت آکاردئون به چه چیزهایی نیاز دارید؟

• دسترسی به فایل‌های سایت از طریق فایل منیجر هاست یا FTP؛ FTP روشی برای جابه‌جایی فایل بین کامپیوتر و هاسته
• امکان ساخت، نصب و فعال‌کردن افزونه اختصاصی
• یک ویرایشگر متن ساده که فایل رو با کدگذاری UTF-8 ذخیره کنه
• یک نسخه پشتیبان سالم از فایل‌ها و پایگاه داده
• ترجیحاً یک محیط آزمایشی برای بررسی کد قبل از اجرای اون روی سایت اصلی

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

ساخت افزونه اختصاصی آکاردئون در وردپرس

ساخت پوشه و فایل اصلی افزونه

روی کامپیوترتون پوشه‌ای با نام mihanwp-accordion بسازید. داخل اون هم سه فایل با نام‌های mihanwp-accordion.php، accordion.js و accordion.css ایجاد کنید. PHP زبانیه که کد اصلی افزونه رو روی سرور اجرا می‌کنه. حروف نام فایل‌ها رو دقیقاً مثل نمونه بنویسید.

اضافه‌کردن اطلاعات افزونه

فایل mihanwp-accordion.php رو باز کنید و کد کامل زیر رو داخل اون قرار بدید. بخش ابتدایی کد، نام و مشخصات افزونه رو به وردپرس معرفی می‌کنه.

<?php/** * Plugin Name: آکاردئون اختصاصی میهن وردپرس * Description: ساخت و نمایش پرسش‌های آکاردئونی با جی‌کوئری UI داخلی وردپرس * Version: 1.1.0 * Author: میهن وردپرس * Author URI: https://mihanwp.com/ * License: GPL-2.0-or-later */if ( ! defined( 'ABSPATH' ) ) {    exit;}function mwp_accordion_register_question_type() {    $labels = array(        'name'          => 'پرسش‌ها',        'singular_name' => 'پرسش',        'add_new_item'  => 'افزودن پرسش جدید',        'edit_item'     => 'ویرایش پرسش',        'menu_name'     => 'پرسش‌های آکاردئون',    );    register_post_type(        'mwp_question',        array(            'labels'              => $labels,            'public'              => false,            'show_ui'             => true,            'show_in_menu'        => true,            'show_in_rest'        => true,            'menu_icon'           => 'dashicons-editor-help',            'supports'            => array( 'title', 'editor', 'page-attributes' ),            'exclude_from_search' => true,        )    );}add_action( 'init', 'mwp_accordion_register_question_type' );function mwp_accordion_register_assets() {    wp_register_script(        'mwp-accordion',        plugins_url( 'accordion.js', __FILE__ ),        array( 'jquery', 'jquery-ui-accordion' ),        filemtime( plugin_dir_path( __FILE__ ) . 'accordion.js' ),        true    );    wp_register_style(        'mwp-accordion',        plugins_url( 'accordion.css', __FILE__ ),        array(),        filemtime( plugin_dir_path( __FILE__ ) . 'accordion.css' )    );}add_action( 'wp_enqueue_scripts', 'mwp_accordion_register_assets' );function mwp_accordion_enqueue_assets() {    wp_enqueue_script( 'jquery-ui-accordion' );    wp_enqueue_script( 'mwp-accordion' );    wp_enqueue_style( 'mwp-accordion' );}function mwp_accordion_shortcode( $atts ) {    $atts = shortcode_atts(        array(            'limit' => 50,        ),        $atts,        'mihanwp_accordion'    );    $limit = min( 100, max( 1, absint( $atts['limit'] ) ) );    $questions = get_posts(        array(            'post_type'      => 'mwp_question',            'post_status'    => 'publish',            'posts_per_page' => $limit,            'orderby'        => array(                'menu_order' => 'ASC',                'date'       => 'ASC',            ),        )    );    if ( empty( $questions ) ) {        if ( current_user_can( 'edit_posts' ) ) {            return '<p class="mwp-accordion-notice">هنوز پرسش منتشرشده‌ای برای نمایش ندارید.</p>';        }        return '';    }    mwp_accordion_enqueue_assets();    $accordion_id = wp_unique_id( 'mwp-accordion-' );    $output       = '<div id="' . esc_attr( $accordion_id ) . '" class="mwp-faq-accordion">';    foreach ( $questions as $question ) {        $answer = has_blocks( $question->post_content )            ? do_blocks( $question->post_content )            : wpautop( $question->post_content );        $answer = do_shortcode( $answer );        $output .= '<h3>' . esc_html( get_the_title( $question ) ) . '</h3>';        $output .= '<div class="mwp-faq-answer">';        $output .= wp_kses_post( $answer );        $output .= '</div>';    }    $output .= '</div>';    return $output;}add_shortcode( 'mihanwp_accordion', 'mwp_accordion_shortcode' );

ساخت شورت‌کد نمایش آکاردئون

شورت‌کد یک عبارت کوتاه داخل کروشه‌ست که وردپرس اون رو با خروجی پویا جایگزین می‌کنه. تابع mwp_accordion_shortcode پرسش‌های منتشرشده رو می‌گیره، ساختار آکاردئون رو می‌سازه و شورت‌کد [mihanwp_accordion] رو ثبت می‌کنه. این کد به‌صورت پیش‌فرض حداکثر ۵۰ پرسش رو می‌گیره تا صفحه با تعداد نامحدود پرسش سنگین نشه.

بارگذاری جی‌کوئری UI داخلی وردپرس

هوک wp_enqueue_scripts فایل‌های افزونه رو در زمان مناسب به وردپرس معرفی می‌کنه. بعد تابع mwp_accordion_enqueue_assets ابزار Accordion و فایل‌های محلی رو فقط وقتی خروجی آکاردئون ساخته می‌شه در صف بارگذاری می‌ذاره. تابع filemtime() هم بعد از تغییر فایل، نسخه تازه‌ای می‌سازه تا مرورگر نسخه قدیمی CSS یا جاوا اسکریپت رو از کش نشون نده.

امن‌سازی عنوان و محتوای خروجی

تابع esc_html() عنوان پرسش رو به متن امن تبدیل می‌کنه. تابع wp_kses_post() هم فقط HTML مجاز نوشته‌ها رو نگه می‌داره. کد با do_blocks() بلوک‌های معمول ویرایشگر و با do_shortcode() شورت‌کدهای داخل جواب رو پردازش می‌کنه. شناسه آکاردئون هم با esc_attr() برای استفاده داخل ویژگی HTML امن می‌شه.

ساخت و مدیریت پرسش‌های آکاردئون

ساخت نوع نوشته اختصاصی برای پرسش‌ها

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

مرتب‌کردن ترتیب نمایش پرسش‌ها

برای هر پرسش، عنوان رو به‌عنوان سؤال و ویرایشگر رو برای جواب استفاده کنید. توی ستون کناری ویرایشگر، پنل مربوط به ویژگی‌های نوشته رو باز کنید و عدد «ترتیب» رو وارد کنید. محل یا نام این پنل ممکنه با نسخه وردپرس یا تنظیمات ویرایشگر کمی فرق داشته باشه. عدد کمتر زودتر نمایش داده می‌شه؛ مثلاً پرسش با ترتیب ۱ قبل از پرسش با ترتیب ۲ میاد.

نمایش عنوان و جواب هر پرسش

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

اضافه‌کردن کد جاوا اسکریپت آکاردئون

ساخت فایل جاوا اسکریپت

فایل accordion.js رو باز کنید و کد زیر رو داخل اون بذارید:

jQuery(function ($) {    $('.mwp-faq-accordion').each(function () {        $(this).accordion({            header: '> h3',            collapsible: true,            active: false,            heightStyle: 'content'        });    });});

اتصال آکاردئون به بخش پرسش‌ها

انتخاب‌گر .mwp-faq-accordion همه آکاردئون‌های ساخته‌شده با افزونه رو پیدا می‌کنه. متد each() هم هر نمونه رو جدا راه‌اندازی می‌کنه. می‌تونید شورت‌کد رو چند بار توی یک صفحه بذارید، ولی کد فعلی هر بار همون فهرست مشترک پرسش‌های منتشرشده رو نشون می‌ده و برای هر نمونه مجموعه جداگانه‌ای نمی‌سازه.

تنظیم باز یا بسته بودن آیتم‌ها

گزینه active: false باعث می‌شه همه آیتم‌ها در شروع بسته باشن. گزینه collapsible: true هم اجازه می‌ده کاربر آیتم باز رو دوباره انتخاب کنه و اون رو ببنده. اگه می‌خواید اولین پرسش از ابتدا باز باشه، مقدار active رو به 0 تغییر بدید.

بازشدن فقط یک آیتم در هر لحظه

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

طراحی ظاهر آکاردئون با CSS

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

طراحی عنوان و جواب پرسش‌ها

کد زیر رو داخل فایل accordion.css قرار بدید:

.mwp-faq-accordion {    margin: 24px 0;    border: 1px solid #e5e7eb;    border-radius: 12px;    overflow: hidden;}.mwp-faq-accordion .ui-accordion-header {    position: relative;    margin: 0;    padding: 18px 52px 18px 20px;    border-bottom: 1px solid #e5e7eb;    background: #f8fafc;    color: #111827;    font-size: 18px;    line-height: 1.7;    cursor: pointer;}.mwp-faq-accordion .ui-accordion-header:focus-visible {    outline: 3px solid #2563eb;    outline-offset: -3px;}.mwp-faq-accordion .ui-accordion-header::after {    content: '+';    position: absolute;    top: 50%;    inset-inline-start: 20px;    transform: translateY(-50%);    font-size: 26px;    line-height: 1;}.mwp-faq-accordion .ui-accordion-header-active::after {    content: '−';}.mwp-faq-accordion .mwp-faq-answer {    padding: 20px;    border-bottom: 1px solid #e5e7eb;    background: #ffffff;    color: #374151;    line-height: 2;}.mwp-faq-accordion .mwp-faq-answer > :first-child {    margin-top: 0;}.mwp-faq-accordion .mwp-faq-answer > :last-child {    margin-bottom: 0;}@media (max-width: 600px) {    .mwp-faq-accordion .ui-accordion-header {        padding: 14px 44px 14px 14px;        font-size: 16px;    }    .mwp-faq-accordion .ui-accordion-header::after {        inset-inline-start: 14px;    }    .mwp-faq-accordion .mwp-faq-answer {        padding: 14px;    }}

اضافه‌کردن علامت باز و بسته‌شدن

شبه‌عنصر ::after علامت مثبت رو کنار هر سؤال می‌ذاره. ویژگی inset-inline-start جای علامت رو بر اساس راست‌به‌چپ یا چپ‌به‌راست بودن صفحه تنظیم می‌کنه. وقتی سؤال بازه، کلاس ui-accordion-header-active اضافه می‌شه و علامت مثبت جاش رو به منفی می‌ده.

تنظیم ظاهر آکاردئون برای موبایل

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

استفاده از CSS محلی به‌جای فایل قدیمی CDN

توی این روش، ظاهر آکاردئون داخل افزونه خودتون ذخیره می‌شه. پس به فایل CSS قدیمی روی یک سرویس بیرونی وابسته نیستید و کنترل کامل‌تری روی طراحی دارید.

نصب و فعال‌کردن افزونه آکاردئون

ساخت فایل ZIP افزونه

بررسی کنید که هر سه فایل داخل پوشه mihanwp-accordion باشن. بعد خود پوشه رو فشرده کنید تا فایل mihanwp-accordion.zip ساخته بشه. فایل‌ها نباید داخل یک پوشه اضافه و تو‌در‌تو قرار گرفته باشن.

نصب افزونه از پیشخوان وردپرس

1. وارد پیشخوان وردپرس بشید.
2. به «افزونه‌ها ← افزودن افزونه تازه» برید.
3. روی «بارگذاری افزونه» کلیک کنید.
4. فایل ZIP رو انتخاب کنید و دکمه نصب رو بزنید.
5. بعد از پایان نصب، افزونه رو فعال کنید.

نصب دستی از طریق فایل منیجر یا FTP

اگه بارگذاری از پیشخوان در دسترس نیست، پوشه افزونه رو داخل مسیر /wp-content/plugins/ قرار بدید. بعد به صفحه افزونه‌های وردپرس برگردید و «آکاردئون اختصاصی میهن وردپرس» رو فعال کنید.

نمایش آکاردئون در برگه یا نوشته

اضافه‌کردن شورت‌کد در ویرایشگر بلوکی

اول چند پرسش بسازید و منتشر کنید. بعد نوشته یا برگه موردنظرتون رو باز کنید، یک بلوک «کد کوتاه» اضافه کنید و عبارت زیر رو داخل اون بذارید:

[mihanwp_accordion]

برای تغییر سقف نمایش می‌تونید مثلاً از [mihanwp_accordion limit="20"] استفاده کنید. مقدار این گزینه بین ۱ تا ۱۰۰ محدود می‌شه. اگه شورت‌کد رو چند بار بذارید، همه نمونه‌ها همون فهرست مشترک پرسش‌ها رو نشون می‌دن.

اگه می‌خواید شورت‌کد رو داخل فایل قالب اجرا کنید، راهنمای نمایش شورت کد در قالب وردپرس رو بخونید.

انتشار برگه و بررسی نتیجه

برگه رو پیش‌نمایش کنید و روی همه سؤال‌ها کلیک کنید. باز و بسته‌شدن با ماوس و کیبورد، ترتیب پرسش‌ها و ظاهر موبایل رو بررسی کنید. بعد از اطمینان از نتیجه، برگه رو منتشر کنید.

ساخت آکاردئون ساده بدون جی‌کوئری

استفاده از تگ‌های details و summary

اگه فقط چند سؤال ثابت دارید، HTML بومی مرورگر ساده‌تره. تگ summary عنوان قابل انتخاب و تگ details محتوای بازشونده رو می‌سازه:

<details>    <summary>هزینه ارسال چطور محاسبه می‌شه؟</summary>    <p>هزینه ارسال بر اساس روش انتخابی و نشانی سفارش محاسبه می‌شه.</p></details>

مقایسه روش HTML با روش جی‌کوئری

روش HTML کد و وابستگی کمتری داره و برای محتوای ثابت مناسبه. روش جی‌کوئری این آموزش مدیریت پرسش‌ها از پیشخوان، ترتیب سفارشی و کنترل رفتاری بیشتری بهتون می‌ده. پس انتخاب درست به تعداد پرسش‌ها و شیوه مدیریت محتوای سایتتون بستگی داره.

دسترس‌پذیری آکاردئون برای همه کاربرها

باز و بسته‌کردن آکاردئون با کیبورد

کاربر باید بتونه با کلید Tab به عنوان آکاردئون برسه و با کلیدهای پشتیبانی‌شده اون رو کنترل کنه. جی‌کوئری UI بخشی از رفتار کیبورد رو اضافه می‌کنه، ولی این موضوع به‌تنهایی دسترس‌پذیری کامل رو تضمین نمی‌کنه. بعد از هر تغییر، Tab، Enter، Space و کلیدهای جهت‌دار رو روی نسخه واقعی صفحه آزمایش کنید.

ساختار درست عنوان‌ها و وضعیت بازشدن

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

خوانایی محتوا برای صفحه‌خوان‌ها

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

رفع خطاهای رایج آکاردئون جی‌کوئری

آکاردئون باز و بسته نمی‌شه

اول کنسول مرورگر رو برای خطای جاوا اسکریپت بررسی کنید. کنسول بخشی از ابزارهای مرورگره که خطاهای صفحه رو نشون می‌ده. معمولاً می‌تونید با زدن کلید F12 یا کلیک راست و انتخاب Inspect، یعنی ابزار بررسی صفحه، اون رو باز کنید و بعد وارد زبانه Console بشید. سپس مطمئن بشید فایل accordion.js دقیقاً کنار فایل اصلی افزونه قرار گرفته و اسم کلاس mwp-faq-accordion توی PHP و جاوا اسکریپت یکسانه. افزونه‌های بهینه‌سازی اسکریپت رو هم موقتاً غیرفعال کنید تا تداخل احتمالی مشخص بشه.

فایل جاوا اسکریپت بارگذاری نمی‌شه

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

شورت‌کد به‌جای آکاردئون نمایش داده می‌شه

بررسی کنید افزونه فعاله و شورت‌کد رو دقیقاً به‌شکل [mihanwp_accordion] نوشته‌اید. بهتره اون رو داخل بلوک «کد کوتاه» بذارید، نه بلوک «کد» یا «HTML سفارشی».

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

با ابزار Inspect مرورگر بررسی کنید کدوم قانون CSS روی عنوان یا جواب اثر می‌ذاره. این ابزار معمولاً با F12 یا کلیک راست روی بخش موردنظر و انتخاب Inspect باز می‌شه. چون همه انتخاب‌گرهای این آموزش با کلاس .mwp-faq-accordion شروع می‌شن، احتمال تداخل کمتره. اگه قالب قانون دقیق‌تری داره، انتخاب‌گر CSS افزونه رو کمی دقیق‌تر کنید.

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

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

چک‌لیست بررسی آکاردئون قبل از انتشار

• از فایل‌ها و پایگاه داده نسخه پشتیبان بگیرید.
• افزونه رو اول توی محیط آزمایشی بررسی کنید.
• حداقل یک پرسش رو منتشر کنید و ترتیب نمایش رو ببینید.
• ظاهر صفحه رو روی موبایل و کامپیوتر بررسی کنید.
• کار با Tab، Enter، Space و کلیدهای جهت‌دار رو آزمایش کنید.
• کنسول مرورگر رو برای خطای جاوا اسکریپت بررسی کنید.
• کش سایت و مرورگر رو پاک کنید و صفحه رو دوباره ببینید.

پرسش‌های متداول

جمع‌بندی

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

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

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