افزونه المنتور (Elementor) یک صفحه ساز قدرتمند در وردپرس است که از طریق کشیدن و رها کردن می توان صفحات وب را طراحی کرد که این ویژگی به ما این امکان را می دهد که صفحات را به راحتی ایجاد کنیم. یکی از بزرگترین ویژگیهای المنتور قابلیت توسعه است. با استفاده از این ویژگی ، می توانیم از طریق ایجاد اکستنشن جدید، ابزارک ها و کنترل های سفارشی بسازیم.

ساختار افزونه

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

تعریف متغیرها

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

در کلاس اصلی، باید سه ثابت مانند زیر تعریف شود:

• VERSION: نسخه پلاگین را دخیره می کند.
• MINIMUM_ELEMENTOR_VERSION: نسخه اصلی المنتور را دخیره می کند.
• MINIMUM_PHP_VERSION: نسخه PHP ای را که در پلاگین استفاده شده است، ذخیره می کند.

const VERSION;
const MINIMUM_ELEMENTOR_VERSION;
const MINIMUM_PHP_VERSION;

نمونه گیری

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

private static $_instance = null;

public static function instance() {
    //check $_instance is null or not
    if ( is_null( self::$_instance ) ) {
	self::$_instance = new self();
    }
    return self::$_instance;
}

سازنده یا Constructor

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

public function __construct() {

	add_action( 'init', [ $this, 'i18n' ] );
	add_action( 'plugins_loaded', [ $this, 'init' ] );

}

public function i18n() {
	load_plugin_textdomain( 'our-plugin-name' );
}

public function init() {
	// Plugin logic here...
}

بررسی نصب المنتور

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

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

public function init() {

	// Check if Elementor installed and activated
	if ( ! did_action( 'elementor/loaded' ) ) {
		add_action( 'admin_notices', [ $this, 'admin_notice_missing_main_plugin' ] );
		return;
	}

}

public function admin_notice_missing_main_plugin() {

	if ( isset( $_GET['activate'] ) ) unset( $_GET['activate'] );

	$message = sprintf(
		/* translators: 1: Our plugin name 2: Elementor */
		esc_html__( '"%1$s" requires "%2$s" to be installed and activated.', 'our-plugin-name' ),
		'<strong>' . esc_html__( 'Elementor our-plugin-name', 'our-plugin-name' ) . '</strong>',
		'<strong>' . esc_html__( 'Elementor', 'our-plugin-name' ) . '</strong>'
	);

	printf( '<div class="notice notice-warning is-dismissible"><p>%1$s</p></div>', $message );
}

بررسی نسخه المنتور

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

const MINIMUM_ELEMENTOR_VERSION = '2.5.11';

public function init() {

	// Check for required Elementor version
	if ( ! version_compare( ELEMENTOR_VERSION, self::MINIMUM_ELEMENTOR_VERSION, '>=' ) ) {
		add_action( 'admin_notices', [ $this, 'admin_notice_minimum_elementor_version' ] );
		return;
	}

}

public function admin_notice_minimum_elementor_version() {

	if ( isset( $_GET['activate'] ) ) unset( $_GET['activate'] );
	$message = sprintf(
		/* translators: 1: Our plugin name 2: Elementor 3: Required Elementor version */
		esc_html__( '"%1$s" requires "%2$s" version %3$s or greater.', 'our-plugin-name' ),
		'<strong>' . esc_html__( 'Elementor our-plugin-name', 'our-plugin-name' ) . '</strong>',
		'<strong>' . esc_html__( 'Elementor', 'our-plugin-name' ) . '</strong>',
		 self::MINIMUM_ELEMENTOR_VERSION
	);

	printf( '<div class="notice notice-warning is-dismissible"><p>%1$s</p></div>', $message );

}

بررسی نسخه PHP

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

const MINIMUM_PHP_VERSION = '7.0';

public function init() {

	// Check for required PHP version
	if ( version_compare( PHP_VERSION, self::MINIMUM_PHP_VERSION, '<' ) ) {
		add_action( 'admin_notices', [ $this, 'admin_notice_minimum_php_version' ] );
		return;
	}

}

public function admin_notice_minimum_php_version() {

	if ( isset( $_GET['activate'] ) ) unset( $_GET['activate'] );

	$message = sprintf(
		/* translators: 1: Our plugin name 2: PHP 3: Required PHP version */
		esc_html__( '"%1$s" requires "%2$s" version %3$s or greater.', 'our-plugin-name' ),
		'<strong>' . esc_html__( 'Elementor our-plugin-name', 'extension-name' ) . '</strong>',
		'<strong>' . esc_html__( 'PHP', 'our-plugin-name' ) . '</strong>',
		 self::MINIMUM_PHP_VERSION
	);

	printf( '<div class="notice notice-warning is-dismissible"><p>%1$s</p></div>', $message );

}

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

بعد ار بررسی پیش نیازها برای فعال کردن اکستنشن، نیاز هست که فایلهای اکستنشن نیز بارگزاری شود.

public function init() {

	// Add Plugin actions
	add_action( 'elementor/widgets/widgets_registered', [ $this, 'init_widgets' ] );
	add_action( 'elementor/controls/controls_registered', [ $this, 'init_controls' ] );
}

public function init_widgets() {

	// Include Widget files
	require_once( __DIR__ . '/widgets/our-plugin-name-widget.php' );

	// Register widget
	\Elementor\Plugin::instance()->widgets_manager->register_widget_type( new \Elementor_extension_Widget() );

}

public function init_controls() {

	// Include Control files
	require_once( __DIR__ . '/controls/our-plugin-name-control.php' );

	// Register control
	\Elementor\Plugin::$instance->controls_manager->register_control( 'control-type-', new \extension_Control() );

}

چرخه توسعه اکستنشن

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

<?php
 /**
 * Plugin Name: Spicy Extension
 * Description: Custom Elementor extension.
 * Plugin URI:  https://spicy.test/
 * Version:     1.0.0
 * Author:      HBahonar
 * Author URI:  https://hbahonar.ir/
 * Text Domain: hbahonar
 */

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

/**
 * Main Spicy Extension Class
 *
 * The main class that initiates and runs the plugin.
 *
 * @since 1.0.0
 */
final class Spicy_Extension {

	/**
	 * Plugin Version
	 *
	 * @since 1.0.0
	 *
	 * @var string The plugin version.
	 */
	const VERSION = '1.0.0';

	/**
	 * Minimum Elementor Version
	 *
	 * @since 1.0.0
	 *
	 * @var string Minimum Elementor version required to run the plugin.
	 */
	const MINIMUM_ELEMENTOR_VERSION = '2.5.11';

	/**
	 * Minimum PHP Version
	 *
	 * @since 1.0.0
	 *
	 * @var string Minimum PHP version required to run the plugin.
	*/
	const MINIMUM_PHP_VERSION = '6.0';

	/**
	 * Instance
	 *
	 * @since 1.0.0
	 *
	 * @access private
	 * @static
	 *
	 * @var Spicy_Extension The single instance of the class.
	 */
	private static $_instance = null;

	/**
	 * Instance
	 *
	 * Ensures only one instance of the class is loaded or can be loaded.
	 *
	 * @since 1.0.0
	 *
	 * @access public
	 * @static
	 *
	 * @return Spicy_Extension An instance of the class.
	 */
	public static function instance() {

		if ( is_null( self::$_instance ) ) {
			self::$_instance = new self();
		}
	 	return self::$_instance;
	}

	/**
	 * Constructor
	 *
	 * @since 1.0.0
	 *
	 * @access public
	 */
		
	public function __construct() {	
		add_action( 'init', [ $this, 'i18n' ] );
		add_action( 'plugins_loaded', [ $this, 'init' ] );
	}

	/**
	 * Load Textdomain
	 *
	 * Load plugin localization files.
	 *
	 * Fired by `init` action hook.
	 *
	 * @since 1.0.0
	 *
	 * @access public
	 */
	public function i18n(){}

	/**
	 * Initialize the plugin
	 *
	 * Load the plugin only after Elementor (and other plugins) are loaded.
	 * Checks for basic plugin requirements, if one check fail don't continue,
	 * if all check have passed load the files required to run the plugin.
	 *
	 * Fired by `plugins_loaded` action hook.
	 *
	 * @since 1.0.0
	 *
	 * @access public
	 */
	public function init() {

		// Check if Elementor installed and activated
		if ( ! did_action( 'elementor/loaded' ) ) {
			add_action( 'admin_notices', [ $this, 'admin_notice_missing_main_plugin' ] );
			return;
		}

		// Check for required Elementor version			
		if ( ! version_compare( ELEMENTOR_VERSION, self::MINIMUM_ELEMENTOR_VERSION, '>=' ) ) {
			add_action( 'admin_notices', [ $this, 'admin_notice_minimum_elementor_version' ] );
			return;
		}

		// Check for required PHP version
		if ( version_compare( PHP_VERSION, self::MINIMUM_PHP_VERSION, '<' ) ) {
			add_action( 'admin_notices', [ $this, 'admin_notice_minimum_php_version' ] );
			return;
		}

		// Add Plugin actions
		add_action( 'elementor/widgets/widgets_registered', [ $this, 'init_widgets' ] );
		add_action( 'elementor/controls/controls_registered', [ $this, 'init_controls' ] );
			
		// Register Widget Styles
		add_action( 'elementor/frontend/after_enqueue_styles', [ $this, 'widget_styles' ] );

	}

	public function widget_styles() {
		//For Example
		//wp_enqueue_style( 'spicyPluginStylesheet', plugins_url( '/css/gallery.css', __FILE__ ) );
	}

	/**
	 * Admin notice
	 *
	 * Warning when the site doesn't have Elementor installed or activated.
	 *
	 * @since 1.0.0
	 *
	 * @access public
	 */
	public function admin_notice_missing_main_plugin() {

		if ( isset( $_GET['activate'] ) ) unset( $_GET['activate'] );
		$message = sprintf(
			/* translators: 1: Plugin name 2: Elementor */
			esc_html__( '"%1$s" requires "%2$s" to be installed and activated.', 'Spicy-extension' ),
			'<strong>' . esc_html__( 'Elementor Spicy Extension', 'Spicy-extension' ) . '</strong>',
			'<strong>' . esc_html__( 'Elementor', 'Spicy-extension' ) . '</strong>'
		);		

		printf( '<div class="notice notice-warning is-dismissible"><p>%1$s</p></div>', $message );

	}

	/**
	 * Admin notice
	 *
	 * Warning when the site doesn't have a minimum required Elementor version.
	 *
	 * @since 1.0.0
	 *
	 * @access public
	 */
	public function admin_notice_minimum_elementor_version() {

		if ( isset( $_GET['activate'] ) ) unset( $_GET['activate'] );

		$message = sprintf(
			/* translators: 1: Plugin name 2: Elementor 3: Required Elementor version */
			esc_html__( '"%1$s" requires "%2$s" version %3$s or greater.', 'Spicy-extension' ),
			'<strong>' . esc_html__( 'Elementor Spicy Extension', 'Spicy-extension' ) . '</strong>',
			'<strong>' . esc_html__( 'Elementor', 'Spicy-extension' ) . '</strong>',
			self::MINIMUM_ELEMENTOR_VERSION
		);

		printf( '<div class="notice notice-warning is-dismissible"><p>%1$s</p></div>', $message );

	}

	/**
	 * Admin notice
	 *
	 * Warning when the site doesn't have a minimum required PHP version.
	 *
	 * @since 1.0.0
	 *
	 * @access public
	 */
	public function admin_notice_minimum_php_version() {		

		if ( isset( $_GET['activate'] ) ) unset( $_GET['activate'] );

		$message = sprintf(
			/* translators: 1: Plugin name 2: PHP 3: Required PHP version */
			esc_html__( '"%1$s" requires "%2$s" version %3$s or greater.', 'Spicy-extension' ),
			'<strong>' . esc_html__( 'Elementor Spicy Extension', 'Spicy-extension' ) . '</strong>',
			'<strong>' . esc_html__( 'PHP', 'Spicy-extension' ) . '</strong>',
			self::MINIMUM_PHP_VERSION
		);

		printf( '<div class="notice notice-warning is-dismissible"><p>%1$s</p></div>', $message );

	}

	/**
	 * Init Widgets
	 *
	 * Include widgets files and register them
	 *
	 * @since 1.0.0
	 *
	 * @access public
	 */
	public function init_widgets() {
		 // For Example
		// Include Widget files
		//require_once( __DIR__ . '/widgets/gallery.php' );

		// Register widget
		//\Elementor\Plugin::instance()->widgets_manager->register_widget_type( new \spicy_oEmbed_Widget() );
		//\Elementor\Plugin::instance()->widgets_manager->register_widget_type( new \spicy_gallery_Widget() );

	}

	/*
	 * Init Controls
	 *
	 * Include controls files and register them
	 *
	 * @since 1.0.0				
	 *
	 * @access public
	*/
	public function init_controls() {
		//For example
			
		//Include Control files
		//require_once( __DIR__ . '/controls/multi-unit.php' );

		// Register control
	    //\Elementor\Plugin::$instance->controls_manager->register_control( 'spicy-multi-unit-control', new spicy_multi_unit());

	}

}

spicy_Extension::instance();

منبع

Extend Elementor like a pro: Creating a new extension in Elementor