امروزه بسیاری از قالب های حرفه‌ای موجود در مارکت های مختلف از افزونه های صفحه ساز استفاده میکنند. برترین و پرکاربردترین افزونه صفحه ساز در قالب های وردپرس، افزونه Visual Composser است. که توسط WPBakery توسعه داده شده است.
احتمالا شما هم علاقه‌مند به استفاده از این افزونه در قالب خودتان باشید؛ برای این کار شما ابتدا باید این افزونه را درون قالبی که مشغول توسعه آن هستید، ادغام کنید. خب شاید این سوال برایتان پیش آید که چگونه باید این کار را انجام دهیم، زیرا آموزش های بسیار اندکی در سطح وب وجود دارد که این فرآیند را بطور کامل و با زبانی آسان برایتان توضیح دهد. به همین دلیل هم من تصیم گرفتم که تجربه شخصی خودم را که با خواندن چندین مقاله از منابع انگلیسی زبان بدست آوردم، برای شما در طول این مقاله بازگو کنم. پس با من همراه باشید:
بعد از اینکه اقدام به خریداری افزونه ویژوال کامپوزر از مارکت های معتبر خارجی یا فارسی نمودید، آنرا در بخش افزونه هایتان نصب کنید تا شروع به توسعه آن کنیم. البته در نظر داشته باشید که اگر قصد فروش قالبتان در مارکت های خارجی مانند تم فارست و یا سایر مارکت های معتبر را دارید، حتما باید از لاینسس پیشرفته این افزونه استفاده کنید تا بتوانید با خیال راحت قالبتان را در این مارکت ها نیز به فروش برسانید. برای اینکه کاربران را ملزم به نصب و فعالسازی افزونه بعد از نصب قالبتان بکنید، میتوانید از کتابخانه TGM Plugin Activation استفاده کید.
همانگونه که در ابتدای مقاله گفته شد برای افزودن کدهای ویژوال کامپوزر به قالب، روش های گوناگونی وجود دارد که هر توسعه دهنده ، با توجه به علاقه و تشخیص خود از آنها استفاده میکند، با توجه به توضیحات گفته شده، دو راه برای افزونه کدهای افزونه درون قالب وجود دارد، عده ای از توسعه دهندگان، تمامی کدها را بصورت مستقیم درون فایلfunctions.php اضافه میکنند، و گروهی دیگر نیز کدها و توابع را درون فایل مجزایی ذخیره کرده و سپس اقدام به فراخوانی آن درون فایل functions.php میکنند.در این آموزش ،ما از روش دوم استفاده کرده و تمامی کدهای مربوطه را درون فایلی به نام vc-functions.php اضافه کرده و سپس با دستور
require_once 'vc-functions.php' ;
آنرا به فایل functions.php اضافه میکنیم.
در این جا ما باید مجموعه توابعی را که باید پیش از راه اندازی کامل افزونه ، فراخوانی شوند را اضافه کنیم تا ویژوال کامپوزر براساس دستورات ما شخصی سازی شده و مشخص شود که قالب ما چه تنظیمات منحصر بفردی دارا است. ابتدا کدهایی را که باید اضافه شود را نوشته و سپس اقدام به توضیح آن ها میکنم.
// Before VC Init add_action( 'vc_before_init', 'vc_before_init_actions' ); function vc_before_init_actions() { // Setup VC to be part of a theme if( function_exists('vc_set_as_theme') ){ vc_set_as_theme( true ); } // Link your VC elements's folder if( function_exists('vc_set_shortcodes_templates_dir') ){ vc_set_shortcodes_templates_dir( get_template_directory() . '/vc-elements' ); } // Disable Instructional/Help Pointers if( function_exists('vc_pointer_load') ){ remove_action( 'admin_enqueue_scripts', 'vc_pointer_load' ); } }
خط شماره 2 : در اینجا من تابعی به نام vc_before_init_actions را به اکشن vc_before_init قلاب ( hook ) کرده ام. بدیهی است که شما میتوانید این تابع را تغییر نام دهید.
خط شماره 5 : در اینجا من از تابع function_exists() برای اطمینان یافتن از وجود تابعی که استفاده میکنم؛ بدیهی است که در صورت موجود نبودن این تابع، عملیات ادامه نخواهد یافت.
خط شماره 6 : من از تابع vc_set_as_theme()استفاده کرده‌ام. این تابع به افزونه ویژوال کامپوزر اطلاع میدهد که این قالب از این افزونه بصورت ادغام شده استفاده خواهد کرد؛ و باید تنظیمات مربوطه را که ذکر شده ،اعمال نماید. همچنین این تابع، تعدادی لینک و تنظیمات بی استفاده را غیرفعال خواهد کرد که باعث استفاده راحت تر از افزونه خواهد شد.
خط شماره 10 : من تابعی به نام vc_set_shortcodes_templates_dir() را فراخوانی کرده ام تا بوسیله آن، پوشه ای را که قرار است در آن شورتکدهای مربوط به قالب و افزونه ویژوال کامپوزر را در آن قرار دهم به افزونه معرفی کنم. انشالله در آموزش های بعدی درباره این بخش آموزشهای مفصلی را خواهم نوشت.
خط شماره 14 : در اینجا نیز من با استفاده از تابع remove_action علائم راهنما و نیز توصیه نامه های پیشفرض افزونه را حذف کرده ام. لازم به توضیح نیست که استفاده از این بخش کاملا اختیاری است.
دراین بخش باید توابعی را که باید پس از آماده بکار شدن افزونه ویژوال کامپوزر فراخوانی شوند را اضافه کنیم.این توابع ویژگی هایی را که قرار است قالب ما از آن پشتیبانی کند مشخص میکند.
// After VC Init add_action( 'vc_after_init', 'vc_after_init_actions' ); function vc_after_init_actions() { // Enable VC by default on a list of Post Types if( function_exists('vc_set_default_editor_post_types') ){ $list = array( 'page', 'post', 'your-custom-posttype-slug', // add here your custom post types slug ); vc_set_default_editor_post_types( $list ); } // Disable AdminBar VC edit link if( function_exists('vc_frontend_editor') ){ remove_action( 'admin_bar_menu', array( vc_frontend_editor(), 'adminBarEditLink' ), 1000 ); } // Disable Frontend VC links if( function_exists('vc_disable_frontend') ){ vc_disable_frontend(); } }
توضیح کدها
خط شماره 2 : در اینجا من تابعی به نام vc_after_init_actions را به اکشن vc_after_init قلاب ( hook ) کرده ام. بدیهی است که شما میتوانید این تابع را تغییر نام دهید.
خط شماره 6 تا 12 : در اینجا من یک آرایه ( array[] ) ساخته ام که بوسیله آن بتوان بخش هایی که قرار است افزونه ویژوال کامپوزر در آن نمایش داده شود را مشخص کرد. شما میتوانید نام پست تایپ های سفارشی ای که خودتان ساخته اید را نیز در این بخش اضافه کنید. بعد از تعیین این موارد، این آرایه را به تابع vc_set_default_editor_post_types()پاس میدهیم.
خط شماره 15 : در اینجا من لینکی را که در بالای صفحات برگه ها و نوشته افزوده شده و به کاربر امکان تغییر نوشته ها و برگه را میدهد را اضافه کرده ام. ( کاملا اختیاری )
خط شماره 20 :در اینجا من با استفاده از تابع vc_disable_frontend()اقدام به غیرفعال کردن ویرایشگر زنده افزونه ویژوال کامپوزر کرده ام. ( کاملا اختیاری )
خب حالا و بعد از انجام این تغییرات، افزونه ویژوال کامپوزر به خوبی با قالب شما ادغام شده و آماده توسعه قالب شما است. هم اکنون شما میتوانید کدهای کوتاه ( شورت کد ) های مورد نظرتان را درون قالب تعیین و استفاده کنید.
خب این آموزش در اینجا به پایان میرسد ، به امید خدا درآموزش های بعدی به نحوه نوشتن کدهای کوتاه برای قالب و نیز استفاده از آنها خواهیم پرداخت.
