نحوه افزودن آکاردئون پرسش و پاسخ jQuery در وردپرس

اخیراً یکی از کاربران ما از ما پرسید آیا راهی برای افزودن آکاردئون پرسش و پاسخ در سایت وردپرس برای آنها وجود دارد یا خیر. افزونه های زیادی در دسترس است که به شما امکان می دهد عنوان افزودن س questionsالات متداول یا بخش سQالات متداول در وردپرس . در این مقاله ما به شما نحوه افزودن آکاردئون پرسش و پاسخ jQuery در سایت وردپرس خود را نشان خواهیم داد.

آکاردئون چیست؟ h4>

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

An accordion menu for FAQs

آموزش فیلم h4>

مشترک شدن در WPBeginner

اگر فیلم را دوست ندارید یا به دستورالعمل های بیشتری احتیاج دارید ، به خواندن ادامه دهید.

افزودن آکاردئون پرسش و پاسخ jQuery

قبل از افزودن آکاردئون پرسش و پاسخ jQuery ، باید مطمئن شوید که دارای بخش سQالات متداول هستید. با دنبال کردن آموزش ما در نحوه افزودن بخش س toالات متداول در وردپرس .

حالا بیایید با اضافه کردن آکاردئون پرسش و پاسخ jQuery جلو برویم. وردپرس با کتابخانه jQuery همراه است اما دارای مضامین jquery نیست. ما این مورد را از Google CDN بارگیری خواهیم کرد و این اسکریپت ها را در وردپرس صف می کشیم. ما همچنین یک کد کوتاه ایجاد می کنیم که س questionsالات متداول ما را نشان می دهد. از همه مهمتر همه این کارها را با ایجاد یک افزونه وردپرس انجام خواهیم داد.

یک پوشه در دسک تاپ خود ایجاد کنید و نام آن را my-harmonion بگذارید. دفترچه یادداشت یا هر ویرایشگر متن دیگر را به انتخاب خود باز کنید. فایلی به نام my-harmonion.php ایجاد کنید و این کد را درون آن جای گذاری کنید:

 10 ،
'orderby' => 'menu_order' ،
'order' => 'ASC' ،
'post_type' => 'سوال' ،
))

// تولید خروجی
$ faq. = '
'؛ // ظرف را باز کنید foreach ($ posts as $ post) {// ایجاد علامت گذاری برای هر سال $ faq. = sprintf (('

٪ 1 $ s

٪ 2 $ s
') ، $ post-> post_title ، wpautop ($ post-> post_content) ) } $ faq. = '
'؛ // ظرف را ببندید بازگشت $ faq؛ // HTML را برگردانید. } add_shortcode ('faq_accordion'، 'harmonion_shortcode')؛

پس از ذخیره تغییرات در آن فایل ، یک پرونده خالی جدید باز کنید. آن را به عنوان harmonion.js ذخیره کنید. بعد این کد را درون آن قرار دهید و پرونده را ذخیره کنید:

jQuery (سند). آماده (تابع () {
jQuery ("# ​​آکاردئون"). آکاردئون ()؛
}) ()؛

اکنون افزونه خود را برای بارگذاری آماده کرده ایم. FTP Client خود را باز کرده و پوشه my-harmonion را در / wp-contnt / plugins / Directory در وب سایت وردپرس خود بارگذاری کنید. در مرحله بعدی ، باید پلاگین را با رفتن به صفحه افزونه خود در منطقه مدیر وردپرس فعال کنید.

افزودن صفحه سQالات متداول با آکاردئون h4>

برای نمایش این س FAالات متداول در قالب آکاردئون ، باید صفحه جدیدی ایجاد کنید. به صفحات »افزودن موارد جدید بروید. عنوان خود را به صفحه خود اختصاص دهید ، س FAالات متداول و در قسمت ویرایش صفحه این کد کوتاه را وارد کنید:

[عناوین_فق]]

صفحه خود را ذخیره و منتشر کرده و پیش نمایش کنید. س FAالات متداول خود را در یک فهرست خوب آکاردئون مشاهده خواهید کرد.

تغییر سبک و رنگهای آکاردئون شما h4>

برای رنگ ها و یک ظاهر طراحی شده ، این آکاردئون سوالات متداول از تم های UI jQuery استفاده می کند که در Google میزبانی شده است. این اساساً یک سبک است و اگر ترجیح می دهید می توانید آن را بارگیری کرده و در وب سایت خود قرار دهید. وب سایت jQuery دارای بخش تم های رابط کاربری jQuery با چند مورد آماده است برای استفاده از مضامین همانطور که می بینید ما از تم انسانیت در پلاگین خود استفاده کرده ایم. می توانید آن را با هر یک از مضامین موجود مانند صافی ، کوپرتینو و غیره جایگزین کنید. همچنین می توانید این مضامین را در Themeroller ایجاد یا اصلاح کنید.

jQuery UI Themes

امیدواریم این مقاله به شما در افزودن آکاردئون پرسش و پاسخ jQuery در وب سایت وردپرس شما کمک کرده باشد. برای بازخورد و س questionsال لطفاً در زیر نظر دهید.

منبع:
https://www.wpbeginner.com/wp-tutorials/how-to-add-jquery-faq-accordion-in-wordpress/.

دیدگاهتان را بنویسید