ساخت آکاردئون jquery در وردپرس

ساخت آکاردئون jquery در وردپرس

در این مقاله از وب سایت میلاد وردپرس می خواهیم به نحوه ساخت آکاردئون jquery در وردپرس بپردازیم.

با ما تا انتهای مقابه همراه باشید.

 

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

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

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

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

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

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

برای انجام این کار شما قادر هستید از آکاردئون استفاده نمایید.

افزونه‌های زیادی برای ساخت آکاردئون JQuery در وردپرس وجود دارند.

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

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

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

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

 

اصلا جی کوئری چیست

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

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

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

جی کوئری قابلیت‌های بسیاری را به شما ارائه می‌کند.

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

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

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

درواقع به‌وسیله آن شما قادر هستید سایت خودتان را به‌سرعت توسعه دهید.

هنگامی‌که شما از جی کوئری استفاده می‌کنید نیازی نیست که حتماً دانش کاملی از جاوا اسکریپت داشته باشید.

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

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

 

بیشتر بخوانید:

• نحوه افزایش ترافیک در وردپرس به صورت Onpage
• اموزش سئو سازی برای چت روم
• انتقال کاربران بر اساس کشور در وردپرس با Country IP Specific Redirections

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

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

هر تب دارای محتوای زیرینی است که زمانی‌که کاربران روی آیتم منو کلیک می‌کنند آن را گسترش می‌دهد.

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

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

شما قادر هستید در موارد مختلفی در سایت خود از آکاردئون استفاده نمایید.

به‌عنوان‌مثال شما می‌توانید از آن‌ها در منو و یا ستون‌های وردپرس استفاده نمایید.

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

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

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

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

ساخت آکاردئون با 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', 'https://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 Accordion Menu Widget

با افزونه JQuery Accordion Menu Widget می توانید به راحتی منوهای آکاردئون عمودی از هر منوی سفارشی وردپرس با استفاده از jQuery ایجاد نمایید.

افزونه دارای چندین پارامتر است که می توانید برای تنظیمات منو آکوردئون عمودی  از آن استفاده نمایید.

امکانات :

 نوع رویداد را انتخاب می کند که منو را باز / بسته می کند.

 منوهای باز را خودکار ببندید – اگر این گزینه را انتخاب کنید، تنها یک منو در هر زمان قابل گسترش می گردد.
با کلیک بر روی یک آیتم جدید منو، به طور خودکار یکی از موارد قبلی را می بندد.

 وضعیت ذخیره منو (با استفاده از کوکی ها)

 Auto Expand بر اساس صفحه فعلی / مورد – در صورت انتخاب، این گزینه به طور خودکار زیر منوها بر اساس صفحه / پست کنونی براساس کلاس های CSS منوی سفارشی وردپرس به صورت خودکار گسترش می یابد

 غیر فعال کردن لینک های والد

 بستن منو (فقط شناور) – منو به صورت خودکار به طور کامل پس از 1 ثانیه هنگامی که ماوس منوی  از روی منو می رود بسته می شود.

 Show Count – در صورت انتخاب، منو به طور خودکار یک شماره را نشان می دهد که نشان دهنده تعداد لینک ها در زیر هر یک از آیتم های منو است

 منوی کلاس – کلاس CSS منوی وردپرس را تنظیم کنید

 Class Disable

 سرعت انیمیشن – سرعت که در آن منو باز خواهد شد را تنظیم نمایید.

با استفاده از کد کوتاه

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

[dcwp-jquery-accordion menu = “منوی تست”]

پارامترهای کوتاه اختیاری برای سفارشی کردن منو :

auto_close – true / false (default = false)
save – true / false (default = false)
expand – true / false (default = false)
غیر فعال کردن – true / false (default = false)
close – true / false (default = false)
count – true / false (default = false)
menu_class – اختیاری (default = menu)
disable_class – اختیاری (بدون پیش فرض)

انیمیشن – آهسته / نرمال / سریع (به طور پیش فرض = آهسته)
تم – سیاه / آبی / تمیز / نسخه ی نمایشی / گرافیت / خاکستری (به طور پیش فرض = بدون تم)

نصب و راه اندازی

1. آپلود پلاگین از طریق Plugins > Add New > Upload رابط یا آپلود jquery-vertical-accordion-menu پوشه jquery-vertical-accordion-menu به /wp-content/plugins/
2. افزونه را از طریق منوی Plugins در وردپرس فعال کنید
3. در بخش ویدجت، ویجت منوی آکوردئون jQuery را انتخاب کنید و به یکی از قسمت های ویجت خود اضافه کنید
4. یکی از منوهای WP را انتخاب کنید، تنظیمات مورد نظر را تنظیم کرده و ویجت خود را ذخیره کنید

تصاویر :

لینک اصلی دانلود افزونه

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

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

این‌یک سبک پایه است؛ که اگر بخواهید می‌توانید آن را دانلود کرده و در وب‌سایت خود قرار دهید.

وب‌سایت جی کوئری دارای بخش JQuery UI Themes می‌باشد.

شما می‌توانید آن را با هر قالب در دسترس مانند Smoothness و Cupertino جایگزین کنید.

همچنین می‌توانید قالب را روی Themeroller ایجاد کنید یا تغییر دهید.

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

 

ساخت آکاردئون jquey در وردپرس