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

سلام دوستان عزیز و همراهان میز وردپرس

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

آموزش ساخت ابزارک یا ویجت در المنتور elementor

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

خب مراحل کار دار این مقاله بسیار پیچیده است و باید با دقت صورت پذیرد.

مرحله اول : در این مرحله باید ابتدا به قالب خود پشتیبانی از مکان های location های المنتور را اضافه کنیم.

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

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

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

function theme_kabinwp_register_elementor_locations( $elementor_theme_manager ) {

	$elementor_theme_manager->register_all_core_location();

}
add_action( 'elementor/theme/register_locations', 'theme_kabinwp_register_elementor_locations' );

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

اما اگر میخواهید فقط بعضی از لوکشین های دلخواه خود را اضافه کنید از قطعه کد زیر میتوانید استفاده کنید.

شما با استفاده از قطعه کد زیر میتوانید هر بخشی را که خواستید حذف و اضافه کنید برای مثالب در کد زیر هدر و فوتر (سربرگ و پانوشت) فعال هستند ولی ارشیو و صفحه تک نوشته یا سینگل کامنت شده و غیر فعال شده اند که میتوانید به طور دلخواه اضافه یا حذف کنید.

function theme_kabinwp_register_elementor_locations( $elementor_theme_manager ) {

	$elementor_theme_manager->register_location( 'header' );
	$elementor_theme_manager->register_location( 'footer' );
	// $elementor_theme_manager->register_location( 'single' );
	// $elementor_theme_manager->register_location( 'archive' );

}
add_action( 'elementor/theme/register_locations', 'theme_kabinwp_register_elementor_locations' );

ایجاد لوکیشن های مکان های شخصی در المنتور

با استفاده از کد زیر شما میتوانید جایگاه ومکان های شخصی خود را بسازید.برای مثال در قطعه کد زیر ما لوکیشن main sidebar را ساخته ایم.و ID ان را نیز main-sidebar قرار داده ایم.

function theme_kabinwp_register_elementor_locations( $elementor_theme_manager ) {

	$elementor_theme_manager->register_location(
		'main-sidebar',
		[
			'label' => __( 'Main Sidebar', 'theme-name' ),
			'multiple' => true,
			'edit_in_content' => false,
		]
	);

}
add_action( 'elementor/theme/register_locations', 'theme_kabinwp_register_elementor_locations' );

در کد بالا label همان نام لوکیشن یا جایگاه است.باقی موارد را دست نخوره به جا بگذارید.

نکته خیلی مهم : اینجا میخوام یک نکته خیلی مهم به شما بگم که خب خیلی میتونه به نظم بخشیدن در کار شما کمک کنه !! برای اینکه پشتیبانی از المنتور رو به قالب خود اضافه کنید بهتر است که تمام موارد مربوط به المنتور داخل یک پوشه باشد تا بتوانید بدون هیچ مشکلی به تمام موارد دسترسی داشته باشید و ویرایش کنید.پس ما در فایل های خود ابتدا یک پوشه به نام المنتور قرار میدهیم.و کد های بالا که مربوط به همگام سازی قالب وردپرس و افزونه المنتور را داخل قرار میدهیم.

مرحله دوم: تعریف دسته بندی یا category در المنتور

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

افزودن ویجت به دسته بندی های پیشفرض المنتور

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

• Basic
• Pro 
• WooCommerce 
• General
• WordPress

و قطعه کد هم در زیر آماده است.

<?php
class Elementor_kabinwp_Widget extends \Elementor\Widget_Base {

	public function get_categories() {
		return [ 'basic' ];
	}

}

افزودن دسته بندی خاص و مخصوص در المنتور

با استفاده از کد زیر میتوانید دسته بندی مخصوص به خود را در المنتور اضافه کنید.ما در کد زیر دو دسته بندی اضافه کرده ایم شکه شما میتوانید این موارد را کم و زیاد کنید.

<?php
function add_elementor_widget_categories( $elements_manager ) {

	$elements_manager->add_category(
		'first-category',
		[
			'title' => __( 'First Category', 'plugin-name' ),
			'icon' => 'fa fa-plug',
		]
	);
	$elements_manager->add_category(
		'second-category',
		[
			'title' => __( 'Second Category', 'plugin-name' ),
			'icon' => 'fa fa-plug',
		]
	);

}
add_action( 'elementor/elements/categories_registered', 'add_elementor_widget_categories' );

مرحله سوم ساخت ویجت و تعریف ویجت برای قالب

ابتدا در این مرحله روند کار را مشخص میکنیم.

فایل های مختلف در پوشه المنتور

لازم است که داخل پوشه قالب وردپرس خود یک پوشه دیگر به اسم elementor بسازیم و در ان یک پوشه دیگر به اسم widgets میسازیم و همچنین داخل ان دو فایل php به نام های elementor.php وfunctions.php میسازیم و کد ها را مطابق ان چه در زیر آمده است قرار میدهیم.کدها در بالاتر توضیح داده شده است.فقط یک تابع اضافه شده است که ادرس ویجت ها را معرفی میکند ولود میکند.

در فایل elementor.php کدهای زیر را قرار دهید که مربوط به تعریف لوکیشن ها میباشد.

<?php
//ADD THEME SUPPORT ELEMENTOR
function theme_prefix_register_elementor_locations( $elementor_theme_manager ) {

    $elementor_theme_manager->register_all_core_location();

}
add_action( 'elementor/theme/register_locatio

و در فایل functions.php هم کد های زیر را قرار دهید.

<?php
namespace Elementor;

/*! ADD THEME WIDGETS
------------------------------------------------->*/
add_action( 'elementor/widgets/widgets_registered', 'Elementor\hamyar_widgets' );
function hamyar_widgets() {

    $widgets = glob( get_template_directory() . '/elementor/widgets/*.php' );

    foreach( $widgets as $key ){
        if ( file_exists( $key ) ) {
            require_once $key;
        }
    }
}


/*! ADD WIDGET CATEGORIES
------------------------------------------------->*/
add_action( 'elementor/elements/categories_registered', 'Elementor\hamyar_widget_categories' );
function hamyar_widget_categories( $elements_manager ) {

    $elements_manager->add_category(
        'hamyar-theme',
        array(
            'title' => esc_html__( 'المان های قالب همیار', 'hamyar' )
        )
    );
}

تعریف فایل ها در فانکشن قالب وردپرس

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

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

/*   ELEMENTOR   */
require_once ('elementor/elementor.php');
require_once ('elementor/functions.php');

خب حالا بریم سراغ ساخت ویجت مورد نظر خود.برای این کار باید یک فایل php در داخل پوشه widgets که قبلا ساختیم بسازید .

ساختار ساده و خام یک ویجت المنتور

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

<?php
namespace Elementor;

class Elementor_Test_Widget extends Widget_Base {

	public function get_name() {}

	public function get_title() {}

	public function get_icon() {}

	public function get_categories() {}

	protected function _register_controls() {}

	protected function render() {}

	protected function _content_template() {}

}

Plugin::instance()->widgets_manager->register_widget_type( new Elementor_Test_Widget() );

خب این ساختار اسان و ساده و خام یک ویجت در المنتورمیباشد که تمام بخش ها باید تکمیل شود.هر چند که کاملا مشخص است که هر بخش شامل چه چیزی است ولی خب ما در زیر توضیح انگلیسی این موارد قرار دهیم.

• Widget Name – The get_name() method is a simple one, you just need to return a widget name that will be used in the code.
• Widget Title – The get_title() method, which again, is a very simple one, you need to return the widget title that will be displayed as the widget label.
• Widget Icon – The get_icon() method, is an optional but recommended method, it lets you set the widget icon. you can use any of the eicon or font-awesome icons, simply return the class name as a string.
• Widget Categories – The get_categories method, lets you set the category of the widget, return the category name as a string.
• Widget Controls – The _register_controls method lets you define which controls (setting fields) your widget will have.
• Render Frontend Output – The render() method, which is where you actually render the code and generate the final HTML on the frontend using PHP.
• Render Editor Output – The _content_template() method, is where you render the editor output to generate the live preview using a Backbone JavaScript template.

یک مثال ساده ولی کامل از ویجت المنتور

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

<?php
namespace Elementor;

class My_Widget_1 extends Widget_Base {

    public function get_name() {
        return 'title-subtitle';
    }

    public function get_title() {
        return 'title & sub-title';
    }

    public function get_icon() {
        return 'fa fa-font';
    }

    public function get_categories() {
        return [ 'hamyar-theme' ];
    }

    protected function _register_controls() {

        $this->start_controls_section(
            'section_title',
            [
                'label' => __( 'Content', 'elementor' ),
            ]
        );

        $this->add_control(
            'title',
            [
                'label' => __( 'Title', 'elementor' ),
                'label_block' => true,
                'type' => Controls_Manager::TEXT,
                'placeholder' => __( 'Enter your title', 'elementor' ),
            ]
        );

        $this->add_control(
            'subtitle',
            [
                'label' => __( 'Sub-title', 'elementor' ),
                'label_block' => true,
                'type' => Controls_Manager::TEXT,
                'placeholder' => __( 'Enter your sub-title', 'elementor' ),
            ]
        );

        $this->add_control(
            'link',
            [
                'label' => __( 'Link', 'elementor' ),
                'type' => Controls_Manager::URL,
                'placeholder' => __( 'https://your-link.com', 'elementor' ),
                'default' => [
                    'url' => '',
                ]
            ]
        );

        $this->end_controls_section();
    }

    protected function render() {

        $settings = $this->get_settings_for_display();
        $url = $settings['link']['url'];
        echo  "<a href='$url'><div class='title'>$settings[title]</div> <div class='subtitle'>$settings[subtitle]</div></a>";


    }

    protected function _content_template() {

    }


}

Plugin::instance()->widgets_manager->register_widget_type( new My_Widget_1() );

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