برخی اوقات ممکن است شما دوست داشته باشید که پرسش و پاسخ‌های متداول کاربران خود در مورد افزونه‌ها را روی سایت خود نمایش دهید. سایت‌های زیادی وجود دارند که از آکاردئون برای نمایش قسمتی از محتوای خود به‌صورت کشویی استفاده می‌کنند. شما می‌توانید مطالب موجود در سایت خود را به اشکال مختلف در اختیار کاربران سایت خود قرار دهید. یکی از این راه‌ها استفاده از آکاردئون می‌باشد. پس تا انتها با “آموزش ساخت آکاردئون سوالات متداول با JQuery در وردپرس” همراه ما باشید.
مطابق با این آموزش شما نیاز به استفاده از افزونه ندارید و می‌توانید با استفاده از قطعه کدی که در اختیار شما قرار داده‌ایم این کار را در سایت وردپرس خود انجام دهید. در این مقاله در ابتدا به بررسی زبان پرکاربرد جی کوئری می‌پردازیم و سپس ساخت آکاردئون با استفاده از جی کوئری را به شما کاربران عزیز آموزش خواهیم داد.
این نکته را در نظر داشته باشید که شما علاوه بر استفاده از کد، امکان این را دارید که از افزونه‌های مختلفی که در این زمینه وجود دارند استفاده نمایید. با دکتر گرافیک همراه باشید.
برای مطالعه مطالب بیشتر، به صفحه بلاگ سایت دکتر گرافیک مراجعه کنید.
جی کوئری (JQuery) چیست؟
جی کوئری جهت ساده کردن اسکریپت‌های جاوا اسکریپت به وجود آمده است. درواقع جی‌کوئری به‌عنوان یک کتابخانه برای جاوا اسکریپت در نظر گرفته‌شده است. در جی کوئری شما از کدهای کمتری استفاده کرده و قادر هستید در یک مدت‌زمان کوتاه به هدف خود برسید. جی کوئری قابلیت‌های بسیاری را به شما ارائه می‌کند. شما با استفاده از آن دیگر نیاز نیست از کد نویسی‌های طولانی جاوا اسکریپت استفاده نمایید.
البته این نکته مهم را در نظر داشته باشید که شما در هنگام استفاده از جی کوئری باز هم از کد های جاوا اسکریپت استفاده خواهید کرد. اما جی کوئری برای شما راه را آسان کرده و می‌توانید در یک مدت‌زمان کوتاه امور دلخواه خود را انجام دهید. درواقع به‌وسیله آن شما قادر هستید سایت خود را به‌سرعت توسعه دهید.
هنگامی‌که شما از جی کوئری استفاده می‌کنید نیازی نیست که حتماً دانش کاملی از جاوا اسکریپت داشته باشید. همچنین این را در نظر داشته باشید که از جی کوئری برای موارد مختلفی ازجمله ساخت انیمیشن، Ajax و… استفاده می‌شود. علاوه بر این‌یکی از مزیت‌های خوب جی کوئری این است که به شما امکان این را می‌دهد که کدی را بسازید که در تمام موتورهای جستجو به‌راحتی و مانند هم اجرا شود.
مقالات مرتبط:
– چگونه در جی کوئری دکمه رفتن به بالای صفحه را بسازیم؟
آکاردئون چیست؟
در طراحی سایت آکاردئون یک اصطلاح مورداستفاده برای الگوی طراحی رابط کاربران که دارای تب و محتوای بلوک است که به‌صورت تعاملی باز یا بسته می‌شود. هر تب دارای محتوای زیرینی است که زمانی‌که کاربران روی آیتم منو کلیک می‌کنند آن را گسترش می‌دهد. به زبان ساده شبیه منو است که با کلیک روی آن گسترش پیدا می‌کند.
شما قادر هستید در موارد مختلفی در سایت خود از آکاردئون استفاده نمایید. به‌عنوان مثال شما می‌توانید از آن‌ها در منو و یا ستون های وردپرس استفاده نمایید. قرار دادن آکاردئون در سایت به‌راحتی قابل انجام است و یکی از روش‌های ساده‌ای است که باعث می‌شود سایت شما در نظر مخاطب حرفه‌ای نشان داده شود.
استفاده از آکاردئون در سایت مزیت‌های فراوانی دارد. ازجمله باعث می‌شود شما بتوانید محتوا و مطالب سایت خود را بهتر به کاربرانتان نمایش دهید. هم اینکه آکاردئون باعث می‌شود شما در سایت خود فضای بیشتری برای دیگر مطالب سایت خود در اختیار داشته باشید. درواقع یکی از بهترین روش‌های دسته‌بندی و بهینه‌سازی مطالب سایت استفاده از آکاردئون می‌باشد.
آموزش ساخت آکاردئون سوالات متداول با JQuery در وردپرس
قبل از افزودن آکاردئون لازم است که شما از داشتن بخش پرسش و پاسخ اطمینان حاصل کنید. وردپرس دارای کتابخانه جی کوئری می‌باشد. با این حال دارای قالب جی کوئری نیست. بنابراین ما آن را از گوگل CDN بارگذاری می‌کنیم و اسکریپت‌ها را در وردپرس در صف قرار می‌دهیم. همچنین یک کد کوتاه ایجاد می‌کنیم که مکرراً پرسش و پاسخ را نمایش می‌دهد. مهم‌تر از همه تمام این کارها را با ساخت افزونه وردپرس اختصاصی انجام می‌دهیم.
در ابتدا برای انجام این کار شما باید یک فولدر روی دسکتاپ ایجاد کرده و نام آن را My-accordion قرار دهید. در مرحله بعد یک ویرایشگر متن باز کنید. پس‌ازآن یک فایل بانام My-accordion.php ایجاد کنید. در ادامه کد زیر را در آن فایل قرار دهید:
<?php
/**
Plugin Name: افزونه پرسش و پاسخ اختصاصی سایت من
Description: یک افزونه وردپرسی که برای شما پرسش و پاسخ می سازد
Version: 1.0
Author: drgraphic
Author URI: https://drgraphic.net
License: GPL2
*/
function accordion_shortcode() {
// Registering the scripts and style
wp_register_style('wpb-jquery-ui-style', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/humanity/jquery-ui.css', false, null);
wp_enqueue_style('wpb-jquery-ui-style');
wp_register_script('wpb-custom-js', plugins_url('/accordion.js', __FILE__ ), array('jquery-ui-accordion'), '', true);
wp_enqueue_script('wpb-custom-js');
// Getting FAQs from WordPress FAQ Manager plugin's custom post type questions
$posts = get_posts(array(
'posts_per_page' => 10,
'orderby' => 'menu_order',
'order' => 'ASC',
'post_type' => 'question',
));
// Generating Output
$faq .= '<div id="accordion">'; //Open the container
foreach ( $posts as $post ) { // Generate the markup for each Question
$faq .= sprintf(('<h3><a href="">%1$s</a></h3><div>%2$s</div>'),
$post->post_title,
wpautop($post->post_content)
);
}
$faq .= '</div>'; //Close the container
return $faq; //Return the HTML.
}
add_shortcode('faq_accordion', 'accordion_shortcode');
پس از ذخیره تغییرات یک فایل جدید بازکنید و آن را به‌عنوان Accordion.js ذخیره کنید. سپس کد زیر را در آن کپی کنید:
jQuery(document).ready(function() {
jQuery("#accordion").accordion();
})();
اکنون افزونه شما آماده آپلود است. پس از آن FTP یا فایل منیجر هاست خود را بازکرده و فولدر My-accordion را به دایرکتوری /Wp-contnt/plugins/ در وب‌سایت وردپرس آپلود کنید. سپس شما باید به بخش مدیریت افزونه بروید و افزونه خود را از آنجا را فعال کنید.
مقالات مرتبط:
– آموزش افزونه سوالات متداول وردپرس Quick and Easy FAQs
افزودن صفحه برای ساخت آکاردئون jQuery
برای نمایش پرسش و پاسخ در فرمت آکاردئون می‌توانید یک صفحه جدید با رفتن به بخش برگه‌ها > افزودن صفحه جدید ایجاد کنید. سپس باید در بخش ویرایش صفحه، کد زیر را وارد کنید:
[faq_accordion]
در قدم بعد صفحه را ذخیره کرده و آن را انتشار دهید. اکنون می‌توانید نمایش پرسش و پاسخ را در یک منوی آکاردئون زیبا ببینید.
تغییر سبک و رنگ آکاردئون
در نظر داشته باشید که برای رنگ و سبک آکاردئون از قالب JQuery UI در گوگل استفاده کنید. این‌یک سبک پایه است؛ که اگر بخواهید می‌توانید آن را دانلود کرده و در وب‌سایت خود قرار دهید.
وب‌سایت جی کوئری دارای بخش JQuery UI Themes می‌باشد. شما می‌توانید آن را با هر قالب در دسترس مانند Smoothness و Cupertino جایگزین کنید. همچنین می‌توانید قالب را روی Themeroller ایجاد کنید یا تغییر دهید.
امیدواریم که از این آموزش بهره کافی را برده باشید. اگر سوالی داشتید، در بخش نظرات با ما در میان بگذارید. سپاس از همراه شما…
منابع: wikipedia – wordpress.org – mihanwp – youtube
