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

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

مقدمه: چرا باید اِلمان اختصاصی در المنتور بسازیم؟

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

فهرست مطالب

  1. المنتور چیست و چرا محبوب است؟
  2. چرا به اِلمان اختصاصی نیاز داریم؟
  3. پیش‌نیازهای ساخت اِلمان اختصاصی در المنتور
  4. مراحل ساخت ویجت اختصاصی (گام‌به‌گام)
  5. نمونه کدهای کاربردی برای ساخت اِلمان
  6. نکات سئو و بهینه‌سازی اِلمان اختصاصی
  7. سوالات متداول (People also search for)
  8. نتیجه‌گیری و جمع‌بندی
  9. منابع معتبر برای یادگیری بیشتر

المنتور چیست و چرا محبوب است؟

المنتور (Elementor) یکی از محبوب‌ترین صفحه‌سازهای وردپرس است که به شما امکان می‌دهد بدون نیاز به دانش برنامه‌نویسی، صفحات حرفه‌ای و زیبا بسازید. طبق آمار رسمی بیش از 16 میلیون سایت در سراسر جهان از المنتور استفاده می‌کنند. این افزونه با رابط کاربری ساده و قابلیت کشیدن و رها کردن (Drag & Drop)، کار طراحی سایت را برای همه آسان کرده است.

ویژگی‌های کلیدی المنتور:

  • رابط کاربری بصری و آسان
  • سازگاری با اکثر قالب‌های وردپرس
  • کتابخانه‌ای غنی از ویجت‌ها و اِلمان‌ها
  • قابلیت توسعه و افزودن اِلمان اختصاصی

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

گاهی اوقات ویجت‌های پیش‌فرض المنتور پاسخگوی نیازهای خاص شما نیستند مثلاً:

  • نمایش یک نوع خاص از پست‌ها با طراحی سفارشی
  • افزودن فرم‌های خاص یا گالری‌های پیشرفته
  • نمایش داده‌های داینامیک از منابع خارجی

در این مواقع ساخت اِلمان اختصاصی بهترین راه‌حل است با این کار:

  • کنترل کامل بر ظاهر و عملکرد ویجت دارید
  • می‌توانید قابلیت‌های منحصر به فرد به سایت اضافه کنید
  • تجربه کاربری سایت را بهبود می‌بخشید

پیش‌نیازهای ساخت اِلمان اختصاصی در المنتور

قبل از شروع، باید چند پیش‌نیاز را فراهم کنید:

1. آشنایی با وردپرس و المنتور
برای ساخت ویجت اختصاصی، باید با محیط وردپرس و المنتور آشنا باشید.

2. دانش پایه PHP و HTML/CSS
ساخت اِلمان اختصاصی نیازمند کمی دانش برنامه‌نویسی است. اگر با PHP و HTML/CSS آشنا باشید، کارتان راحت‌تر خواهد بود.

3. نصب افزونه Elementor Pro (اختیاری)
اگرچه با نسخه رایگان هم می‌توانید ویجت بسازید، اما نسخه پرو امکانات بیشتری دارد.

4. ویرایشگر کد (مانند VS Code)
برای نوشتن کدها به یک ویرایشگر کد نیاز دارید.

پیش‌نیازهای ساخت اِلمان اختصاصی در المنتور

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

✅ پیش‌نیازهای ساخت اِلمان اختصاصی در المنتور

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

💻 نمونه کد ساخت افزونه پایه

				
					<?php
/*
Plugin Name: My Custom Elementor Widget
Description: یک ویجت اختصاصی برای المنتور
Version: 1.0
Author: Your Name
*/

if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

// بارگذاری فایل ویجت
function register_my_custom_widget() {
    require_once( __DIR__ . '/widgets/my-custom-widget.php' );
}
add_action( 'elementor/widgets/widgets_registered', 'register_my_custom_widget' );
				
			

💡 نکته کلیدی: افزونه را در پوشه wp-content/plugins قرار دهید و فعال کنید.

✅ ساخت فایل ویجت

در پوشه افزونه، یک پوشه به نام widgets بسازید و فایل my-custom-widget.php را در آن قرار دهید.

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

				
					<?php
class My_Custom_Widget extends \Elementor\Widget_Base {

    public function get_name() {
        return 'my_custom_widget';
    }

    public function get_title() {
        return 'ویجت اختصاصی من';
    }

    public function get_icon() {
        return 'eicon-code';
    }

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

    protected function _register_controls() {
        $this->start_controls_section(
            'content_section',
            [
                'label' => 'محتوا',
                'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_control(
            'title',
            [
                'label' => 'عنوان',
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => 'سلام دنیا!',
            ]
        );

        $this->end_controls_section();
    }

    protected function render() {
        $settings = $this->get_settings_for_display();
        echo '<h2>' . $settings['title'] . '</h2>';
    }
}
\Elementor\Plugin::instance()->widgets_manager->register_widget_type( new My_Custom_Widget() );
				
			

✅ افزودن استایل و اسکریپت

برای زیباتر شدن ویجت، می‌توانید CSS و JS اختصاصی اضافه کنید

💻 نمونه کد افزودن CSS

				
					public function get_style_depends() {
    return [ 'my-custom-widget-style' ];
}
				
			

💻 در فایل افزونه

				
					function my_custom_widget_styles() {
    wp_register_style( 'my-custom-widget-style', plugins_url( 'assets/css/style.css', __FILE__ ) );
}
add_action( 'wp_enqueue_scripts', 'my_custom_widget_styles' );
				
			

✅ تست و نمایش ویجت در المنتور

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

✅ افزودن تنظیمات پیشرفته به ویجت

می‌توانید کنترل‌های بیشتری مانند رنگ، تصویر، دکمه و … به ویجت اضافه کنید.

💻 افزودن کنترل رنگ

				
					$this->add_control(
    'title_color',
    [
        'label' => 'رنگ عنوان',
        'type' => \Elementor\Controls_Manager::COLOR,
        'default' => '#333',
        'selectors' => [
            '{{WRAPPER}} h2' => 'color: {{VALUE}};',
        ],
    ]
);
				
			

✅ افزودن قابلیت‌های داینامیک

برای نمایش داده‌های داینامیک (مثلاً پست‌های اخیر) می‌توانید از توابع وردپرس استفاده کنید.

💻 نمونه کد نمایش پست‌های اخیر

				
					$args = array(
    'post_type' => 'post',
    'posts_per_page' => 5,
);
$query = new WP_Query( $args );
if ( $query->have_posts() ) {
    echo '<ul>';
    while ( $query->have_posts() ) {
        $query->the_post();
        echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
    }
    echo '</ul>';
    wp_reset_postdata();
}
				
			

🚀 نکات سئو و بهینه‌سازی اِلمان اختصاصی

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

نکات کلیدی سئو:
استفاده از تگ‌های HTML مناسب (مانند h2، h3)
افزودن متن جایگزین برای تصاویر
بارگذاری بهینه فایل‌های CSS و JS
رعایت سرعت بارگذاری ویجت
💻 نمونه کد افزودن متن جایگزین به تصویر

				
					$this->add_control(
    'image',
    [
        'label' => 'تصویر',
        'type' => \Elementor\Controls_Manager::MEDIA,
        'default' => [
            'url' => \Elementor\Utils::get_placeholder_image_src(),
        ],
    ]
);

// در تابع render:
echo '<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="&#039; . $settings[&#039;image&#039;][&#039;url&#039;] . &#039;" alt="تصویر اختصاصی ویجت" title="آموزش ساخت اِلمان اختصاصی در المنتور 1">';
				
			

🔊 سوالات متداول

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

بله آشنایی با PHP و HTML/CSS ضروری است.

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

مستندات رسمی المنتور و سایت‌های آموزشی معتبر مانند WPTuts و Udemy.

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

📎 منابع

0 0 رای ها
امتیاز دادن
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها