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

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

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

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

این نکته را در نظر داشته باشید که شما علاوه بر استفاده از کد، امکان این را دارید که از افزونه‌های مختلفی که در این زمینه وجود دارند استفاده نمایید.

جی کوئری چیست

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

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

هنگامی‌که شما از جی کوئری استفاده می‌کنید نیازی نیست که حتماً دانش کاملی از جاوا اسکریپت داشته باشید. همچنین این را در نظر داشته باشید که از جی کوئری برای موارد مختلفی ازجمله ساخت انیمیشن، Ajax و… استفاده می‌شود. علاوه بر این‌یکی از مزیت‌های خوب جی کوئری این است که به شما امکان این را می‌دهد که کدی را بسازید که در تمام موتورهای جستجو به‌راحتی و مانند هم اجرا شود.

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

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

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

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

ساخت آکاردئون با JQuery

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

در ابتدا برای انجام این کار شما باید یک فولدر روی دسکتاپ ایجاد کرده و نام آن را My-accordion قرار دهید. در مرحله بعد یک ویرایشگر متن باز کنید. پس‌ازآن یک فایل بانام My-accordion.php ایجاد کنید. در ادامه کد زیر را در آن فایل قرار دهید:

<?php
/** 
Plugin Name: افزونه پرسش و پاسخ اختصاصی سایت من
Description: یک افزونه وردپرسی که برای شما پرسش و پاسخ می سازد و در سایت میهن وردپرس آموزش داده شده
Version: 1.0
Author: mihanwp
Author URI: https://mihanwp.com
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/ در وب‌سایت وردپرس آپلود کنید. سپس شما باید به بخش مدیریت افزونه بروید و افزونه خود را از آنجا را فعال کنید.

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

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

[faq_accordion]

در قدم بعد صفحه را ذخیره کرده و آن را انتشار دهید. اکنون می‌توانید نمایش پرسش و پاسخ را در یک منوی آکاردئون زیبا ببینید.

تغییر سبک و رنگ آکاردئون

در نظر داشته باشید که برای رنگ و سبک آکاردئون از قالب JQuery UI در گوگل استفاده کنید. این‌یک سبک پایه است؛ که اگر بخواهید می‌توانید آن را دانلود کرده و در وب‌سایت خود قرار دهید.

وب‌سایت جی کوئری دارای بخش JQuery UI Themes می‌باشد. شما می‌توانید آن را با هر قالب در دسترس مانند Smoothness و Cupertino جایگزین کنید. همچنین می‌توانید قالب را روی Themeroller ایجاد کنید یا تغییر دهید.

شاد و پیروز باشید. 🙂

رضا راد

میلیون‌ها کیلومتر اسکرول کردم تا به هدفم نزدیک بشم و این داستان همچنان ادامه داره...