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

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

ویجت المنتور چیست؟

ویجت های المنتور، کامپوننت های آماده ای هستند که کاربر میتواند با استفاده از آنها صفحات وب سایت خود را طراحی کند. به عبارت دیگر ویجت المنتور جزء سازنده یک صفحه وب سایت است. به عنوان مثال ویجت تصویر، دکمه، عنوان، آیکون و … ویجت های عمومی المنتور هستند که بصورت پیشفرض با نصب المنتور به وب سایت اضافه شده و میتوان از آنها استفاده نمود. هر ویجت از طریق گزینه ها و تنظیماتی که دارد به کاربر قابلیت شخصی سازی و ایجاد تغییرات در ساختار خود را میدهد.

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

چرا به ویجت اختصاصی در المنتور نیاز داریم؟

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

چطور ویجت اختصاصی خود را در المنتور بسازیم؟

برای ساخت ویجت اختصاصی در المنتور دو راه وجود دارد:

• افزودن ویجت اختصاصی از طریق ساخت افزونه وردپرس: در این روش باید کدهای گفته شده در مراحل بعدی را داخل فایل های اصلی پلاگین اختصاصی خود جایگذاری کنید.
• افزودن ویجت اختصاصی از طریق پوسته سایت: در این روش کافی است کد های گفته شده در مراحل بعدی را داخل فایل functions.php پوسته فعال وب سایت خود قرار دهید.

چگونه پلاگین اختصاصی خود را در وردپرس ایجاد کنیم؟

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

مراحل ساخت افزونه (پلاگین) وردپرس

1- در هاست وب سایت خود، وارد فولدر wp-content/plugins شوید و یک فولدر جدید با نام دلخواه خود درون آن ایجاد کنید. به عنوان مثال my-custom-elementor-widget

2- درون فایل پلاگین خود یک فایل index.php خالی بسازید. این فایل به منظور جلوگیری از دیده شدن محتویات فولدر پلاگین شما از بیرون از سرور ساخته میشود و برای امنیت افزونه وردپرس شما ضروری است.

3- درون فولدر پلاگینتان یک فایل دیگر با اسم دلخواه و با فرمت php ایجاد کنید. به عنوان مثال:
my-custom-elementor-widget.php

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

... WordPress Root Directory ...
+ wp-admin
+ wp-includes
+ wp-content
    ... Other folders ...
    + plugins
        + my-custom-elementor-widget
            - index.php
            - my-custom-elementor-widget.php

4- حالا فایل my-custom-elementor-widget.php را با ویرایشگر باز کرده، کد زیر را درون آن قرار داده و ذخیره کنید:

<?php
/*
 * Plugin Name: My Custom Elementor Widget Plugin
 */

این کامنت در ابتدای فایل php افزونه شما، به وردپرس کمک میکند تا آن را شناسایی کند.

5- بعد از این کامنت شما میتوانید کدهای دلخواه مربوط به پلاگین خود را درون این فایل اضافه کنید. به عنوان مثال:

<?php
/*
 * Plugin Name: My Custom Elementor Widget Plugin
 */

echo "This is My First Plugin";

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

در ادامه میتوانید کدهای گفته شده در مراحل بعدی را به همین فایل اضافه کنید.

مرحله اول: ساخت Class اختصاصی برای ویجت

برای تعیین ساختار و تنظیمات ویجت المنتور، در ابتدا باید یک Class اختصاصی برای آن ایجاد کنیم. به عنوان مثال به کد زیر توجه کنید:

class Custom_Welcome_Widget extends \Elementor\Widget_Base {}

در کد بالا ما یک ویجت اختصاصی جدید با نام Custom_Welcome_Widget ساختیم که از کلس Widget_Base المنتور ارث بری میکند. اما این کار به تنهایی کافی نیست و باید حتما متدهای اصلی ویجت را به آن اضافه کنیم. این متدها به المنتور در شناسایی و اجرای ویجت کمک میکنند و وجود آنها در کد ما ضروری خواهد بود.

class Custom_Welcome_Widget extends \Elementor\Widget_Base {

	public function get_name() {}

	public function get_title() {}

	public function get_icon() {}

	public function get_categories() {}

	public function get_keywords() {}

	public function get_custom_help_url() {}

	protected function get_upsale_data() {}

	public function get_script_depends() {}

	public function get_style_depends() {}

	protected function is_dynamic_content() {}

	protected function register_controls() {}

	protected function render() {}

	protected function content_template() {}

}

همانطور که در کد بالا می بینید برای ساخت ویجت اختصاصی در المنتور، باید یکسری متدها در بدنه کلس ویجت شما تعریف شوند. در جدول پایین ما به معرفی این متد ها خواهیم پرداخت:

برای فهم بهتر این متدها ما در کد زیر یک ویجت اختصاصی به نام Custom Welcome Widget ایجاد کرده و از طریق تنظیمات ویجت نام وب سایت را دریافت میکنیم و بر اساس آن متن خوش آمد گویی را نمایش می دهیم.

class Custom_Welcome_Widget extends \Elementor\Widget_Base {

    // Widget Unique ID
    public function get_name() {
        return 'custom_welcome_widget';
    }

    // Widget Title
    public function get_title() {
        return 'Custom Welcome Widget';
    }

    // Widget Icon
    public function get_icon() {
        return 'eicon-code';
    }
    
    // Widget Categories
    public function get_categories() {
        return [ 'general' ];
    }

    // Widget Controls
    protected function _register_controls() {
        $this->start_controls_section(
            'content_section',
            [
                'label' => 'Content Settings',
                'tab' => Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_control(
            'site_name',
            [
                'label' => 'Site Name',
                'type' => Controls_Manager::TEXT,
                'default' => 'Webino',
            ]
        );

        $this->end_controls_section();
    }
    
    // Render Widget Template
    protected function render() {
        $settings = $this->get_settings_for_display();
        echo '<div class="custom-welcome-widget">';
        echo "Welcome to " . esc_html( $settings['site_name'] );
        echo '</div>';
    }
}

همانطور که در کد بالا مشخص است ما یک تب تنظیمات با عنوان Content Settings برای ویجت خود ساختیم و مقداری که کاربر در فیلد Site Name وارد میکند را ذخیره کرده و در متد render آن را نمایش میدهیم.

مرحله دوم: افزودن ویجت به لیست ویجت های المنتور

برای اینکه ویجت ساخته شده به لیست ویجت های صفحه ساز المنتور اضافه شود، کافی است از طریق هوک elementor/widgets/register کلس ویجت را رجیستر کنیم:

function register_custom_welcome_widget( $widgets_manager ) {

	$widgets_manager->register( new \Custom_Welcome_Widget () );
}

add_action( 'elementor/widgets/register', 'register_custom_welcome_widget' );

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