ساخت ویجت سفارشی برای المنتور

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

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

شاید خیلی وقت ها هم این موضوع به ذهنتون خرده باشه که من چطوری میتونم یکی از این ویجت هارو برای خودم بسازم یا چطوری بیام ویجت های قالبم رو با المنتور بسازم و مثل خیلی از قالب های امروزی بیام و قالبم رو بر مبنای المنتور پیش ببرم.

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

چطور میتونم برای المنتور ویجت سفارشی بسازم؟

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

فقط قبلش باید توضیح بدم که شما میتونید ویجت های خودتون رو به ۲ روش ایجاد کنید.

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

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

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

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

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

مرحله اول – ساخت فایل های مورد نیاز افزونه

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

اول از همه برین توی پوشه wp-content/plugins و یک پوشه برای افزونه خودتون ایجاد کنید. من اسمش رو میذارم elementor-awesomesauce

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

• elementor-awesomesauce.php – این فایل برای تعریف افزونمونه.
• class-elementor-awesomesauce.php – توی این فایل قراره پیش نیاز های افزونه رو بررسی کنیم.
• class-widgets.php – ویجت ها و اسکریپت های سفارشی افزونه را اینجا قرار میدیم.
• widgets/class-awesomesauce.php – کد های ویجتمون هم اینجاس.
• assets/js/awesomesauce.js – کد های js مربوط به ویجتمون اینجاس.
• assets/css/awesomesauce.css – کد های css مربوط به ویجتمون اینجاس.

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

مرحله دوم – تعریف افزونه

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

فایل elementor-awesomesauce.php رو باز کنید و کد های زیر رو داخلش قرار بدین.

<?php
/**
 * Elementor Awesomesauce WordPress Plugin
 *
 * @package ElementorAwesomesauce
 *
 * Plugin Name: Elementor Awesomesauce
 * Description: Simple Elementor plugin example
 * Plugin URI:  http://localhost/mrjunior/build-custom-elementor-widgets/
 * Version:     1.0.0
 * Author:      mrjunior
 * Author URI:  http://localhost/mrjunior
 * Text Domain: elementor-awesomesauce
 */

define( 'ELEMENTOR_AWESOMESAUCE', __FILE__ );

/**
 * Include the Elementor_Awesomesauce class.
 */
require plugin_dir_path( ELEMENTOR_AWESOMESAUCE ) . 'class-elementor-awesomesauce.php';

توی این فایل که اتفاق خاصی نمیوفته فقط ی سری اطلاعات که برای پلاگینمون نیازه رو وارد کردیم و بعدش هم ی ثابت تعریف کردیم برای استفاده در آینده? و بعدش هم فایل class-elementor-awesomesauce.php رو فراخوانی کردم که حالا توی ادامه میریم سراغش و داخلش کد میزنیم.

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

حالا توی این مرحله فایل class-elementor-awesomesauce.php رو باز کنید.

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

کدهای زیر رو داخل فایل class-elementor-awesomesauce.php وارد کنید

<?php
/**
 * Elementor_Awesomesauce class.
 *
 * @category   Class
 * @package    ElementorAwesomesauce
 * @subpackage WordPress
 * @author     MrJunior <info@mrjunior.ir>
 * @copyright  2022 mrjunior
 * @license    https://opensource.org/licenses/GPL-3.0 GPL-3.0-only
 * @link       http://localhost/mrjunior/build-custom-elementor-widgets/
 * @since      1.0.0
 * php version 7.3.9
 */

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

/**
 * Main Elementor Awesomesauce Class
 *
 * The init class that runs the Elementor Awesomesauce plugin.
 * Intended To make sure that the plugin's minimum requirements are met.
 *
 * You should only modify the constants to match your plugin's needs.
 *
 * Any custom code should go inside Plugin Class in the plugin.php file.
 */
final class Elementor_Awesomesauce {

	/**
	 * 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.0.0';

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

	/**
	 * Constructor
	 *
	 * @since 1.0.0
	 * @access public
	 */
	public function __construct() {
		// Load the translation.
		add_action( 'init', array( $this, 'i18n' ) );

		// Initialize the plugin.
		add_action( 'plugins_loaded', array( $this, 'init' ) );
	}

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

	/**
	 * Initialize the plugin
	 *
	 * Validates that Elementor is already loaded.
	 * Checks for basic plugin requirements, if one check fail don't continue,
	 * if all check have passed include the plugin class.
	 *
	 * 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', array( $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', array( $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', array( $this, 'admin_notice_minimum_php_version' ) );
			return;
		}

		// Once we get here, We have passed all validation checks so we can safely include our widgets.
		require_once 'class-widgets.php';
	}

	/**
	 * 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() {
		deactivate_plugins( plugin_basename( ELEMENTOR_AWESOMESAUCE ) );

		return sprintf(
			wp_kses(
				'<div class="notice notice-warning is-dismissible"><p><strong>"%۱$s"</strong> requires <strong>"%۲$s"</strong> to be installed and activated.</p></div>',
				array(
					'div' => array(
						'class'  => array(),
						'p'      => array(),
						'strong' => array(),
					),
				)
			),
			'Elementor Awesomesauce',
			'Elementor'
		);
	}

	/**
	 * 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() {
		deactivate_plugins( plugin_basename( ELEMENTOR_AWESOMESAUCE ) );

		return sprintf(
			wp_kses(
				'<div class="notice notice-warning is-dismissible"><p><strong>"%۱$s"</strong> requires <strong>"%۲$s"</strong> version %3$s or greater.</p></div>',
				array(
					'div' => array(
						'class'  => array(),
						'p'      => array(),
						'strong' => array(),
					),
				)
			),
			'Elementor Awesomesauce',
			'Elementor',
			self::MINIMUM_ELEMENTOR_VERSION
		);
	}

	/**
	 * 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() {
		deactivate_plugins( plugin_basename( ELEMENTOR_AWESOMESAUCE ) );

		return sprintf(
			wp_kses(
				'<div class="notice notice-warning is-dismissible"><p><strong>"%۱$s"</strong> requires <strong>"%۲$s"</strong> version %3$s or greater.</p></div>',
				array(
					'div' => array(
						'class'  => array(),
						'p'      => array(),
						'strong' => array(),
					),
				)
			),
			'Elementor Awesomesauce',
			'Elementor',
			self::MINIMUM_ELEMENTOR_VERSION
		);
	}
}

// Instantiate Elementor_Awesomesauce.
new Elementor_Awesomesauce();

خب توی این مرحله ما میام و ی سری ثابت تعریف میکنیم برای نسخه افزونه و نسخه المنتور و نسخه php مورد استفاده. بعد میام اعتبار سنجی میکنیم که

• اصن المنتور نصب و فعال هست یا ن؟
• اصن نسخه ای که نصب هست با افزونه ها سازگاری داری یا ن؟
• و اینکه نسخه php که هاست ما داره با افزونمون سازگاره یا ن؟

این سه مورد رو بررسی میکنیم و اگه همه موارد پاس شدن اون موقع میریم و فایل class-widgets.php رو لود میکنیم و اگه هر کدومشون خطا دادن میایم پیغام خطا رو توی پیشخوان نمایش میدیم.

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

مرحله چهارم – ساخت ویجت سفارشی

خب تا اینجا ما اومدین زمینه رو فراهم کردیم. حالا شما برین داخل پوشه widgets و فایل class-awesomesauce.php باز کنید و کد های زیر رو داخل قرار بدین.

<?php
/**
 * Awesomesauce class.
 *
 * @category   Class
 * @package    ElementorAwesomesauce
 * @subpackage WordPress
 * @author     MrJunior <info@mrjunior.ir>
 * @copyright  2022 mrjunior
 * @license    https://opensource.org/licenses/GPL-3.0 GPL-3.0-only
 * @link       http://localhost/mrjunior/build-custom-elementor-widgets/
 * @since      1.0.0
 * php version 7.3.9
 */

namespace ElementorAwesomesauce\Widgets;

use Elementor\Widget_Base;
use Elementor\Controls_Manager;

// Security Note: Blocks direct access to the plugin PHP files.
defined( 'ABSPATH' ) || die();

/**
 * Awesomesauce widget class.
 *
 * @since 1.0.0
 */
class Awesomesauce extends Widget_Base {
	/**
	 * Class constructor.
	 *
	 * @param array $data Widget data.
	 * @param array $args Widget arguments.
	 */
	public function __construct( $data = array(), $args = null ) {
		parent::__construct( $data, $args );

		wp_register_style( 'awesomesauce', plugins_url( '/assets/css/awesomesauce.css', ELEMENTOR_AWESOMESAUCE ), array(), '1.0.0' );
	}

	/**
	 * Retrieve the widget name.
	 *
	 * @since 1.0.0
	 *
	 * @access public
	 *
	 * @return string Widget name.
	 */
	public function get_name() {
		return 'awesomesauce';
	}

	/**
	 * Retrieve the widget title.
	 *
	 * @since 1.0.0
	 *
	 * @access public
	 *
	 * @return string Widget title.
	 */
	public function get_title() {
		return __( 'Awesomesauce', 'elementor-awesomesauce' );
	}

	/**
	 * Retrieve the widget icon.
	 *
	 * @since 1.0.0
	 *
	 * @access public
	 *
	 * @return string Widget icon.
	 */
	public function get_icon() {
		return 'fa fa-pencil';
	}

	/**
	 * Retrieve the list of categories the widget belongs to.
	 *
	 * Used to determine where to display the widget in the editor.
	 *
	 * Note that currently Elementor supports only one category.
	 * When multiple categories passed, Elementor uses the first one.
	 *
	 * @since 1.0.0
	 *
	 * @access public
	 *
	 * @return array Widget categories.
	 */
	public function get_categories() {
		return array( 'general' );
	}
	
	/**
	 * Enqueue styles.
	 */
	public function get_style_depends() {
		return array( 'awesomesauce' );
	}

	/**
	 * Register the widget controls.
	 *
	 * Adds different input fields to allow the user to change and customize the widget settings.
	 *
	 * @since 1.0.0
	 *
	 * @access protected
	 */
	protected function _register_controls() {
		$this->start_controls_section(
			'section_content',
			array(
				'label' => __( 'Content', 'elementor-awesomesauce' ),
			)
		);

		$this->add_control(
			'title',
			array(
				'label'   => __( 'Title', 'elementor-awesomesauce' ),
				'type'    => Controls_Manager::TEXT,
				'default' => __( 'Title', 'elementor-awesomesauce' ),
			)
		);

		$this->add_control(
			'description',
			array(
				'label'   => __( 'Description', 'elementor-awesomesauce' ),
				'type'    => Controls_Manager::TEXTAREA,
				'default' => __( 'Description', 'elementor-awesomesauce' ),
			)
		);

		$this->add_control(
			'content',
			array(
				'label'   => __( 'Content', 'elementor-awesomesauce' ),
				'type'    => Controls_Manager::WYSIWYG,
				'default' => __( 'Content', 'elementor-awesomesauce' ),
			)
		);

		$this->end_controls_section();
	}

	/**
	 * Render the widget output on the frontend.
	 *
	 * Written in PHP and used to generate the final HTML.
	 *
	 * @since 1.0.0
	 *
	 * @access protected
	 */
	protected function render() {
		$settings = $this->get_settings_for_display();

		$this->add_inline_editing_attributes( 'title', 'none' );
		$this->add_inline_editing_attributes( 'description', 'basic' );
		$this->add_inline_editing_attributes( 'content', 'advanced' );
		?>
		<h2 <?php echo $this->get_render_attribute_string( 'title' ); ?>><?php echo wp_kses( $settings['title'], array() ); ?></h2>
		<div <?php echo $this->get_render_attribute_string( 'description' ); ?>><?php echo wp_kses( $settings['description'], array() ); ?></div>
		<div <?php echo $this->get_render_attribute_string( 'content' ); ?>><?php echo wp_kses( $settings['content'], array() ); ?></div>
		<?php
	}

	/**
	 * Render the widget output in the editor.
	 *
	 * Written as a Backbone JavaScript template and used to generate the live preview.
	 *
	 * @since 1.0.0
	 *
	 * @access protected
	 */
	protected function _content_template() {
		?>
		<#
		view.addInlineEditingAttributes( 'title', 'none' );
		view.addInlineEditingAttributes( 'description', 'basic' );
		view.addInlineEditingAttributes( 'content', 'advanced' );
		#>
		<h2 {{{ view.getRenderAttributeString( 'title' ) }}}>{{{ settings.title }}}</h2>
		<div {{{ view.getRenderAttributeString( 'description' ) }}}>{{{ settings.description }}}</div>
		<div {{{ view.getRenderAttributeString( 'content' ) }}}>{{{ settings.content }}}</div>
		<?php
	}
}

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

بریم ی توضیح مختصر راجب کد بالا بدم

خب توی خط های ۱۹,۲۰ من دو مقدار use Elementor\Widget_Base; use Elementor\Controls_Manager; رو اضافه کردم. این دو مورد رو در ادامه نیاز داریم که به وقتش بهتون توضیح میدم. بریم ادامه.

توی ادامه شما ی کلاس ایجاد میکنید که اسمش مهم نیست که چی باشه و هرچی دلتون خواست بذارین ولی چون من توی پروژم ی ویجت اختصاصی داشتم اومدم و اسمش رو Awesomesauce شما بسته به کارایی ویجتتون ی اسم با معنا و مفهمون براش قرار بدین که با ویجت های دیگتون تداخل ایجاد نشه.

توی ادامه شما متد سازنده این کلاس یعنی __construct رو ایجاد میکنید و اینجا میتویند استایل اختصاصی و js اختصاصی ویجت رو لود کنید. من توی اینجا فقط css رو لود کردم که شما با ی سرچ ساده میتونید کد js رو هم پیدا کنید. (اینو قرار ندادم تا شما هم ی زحمتی به خودتون بدین و ی سرچی بزنید

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

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

با متد get_categories هم میتونید مشخص کنید که ویجت شما توی چه دسته بندی باشی که الان با مقدار general که من قرار دادم توی دسته “کلی” قرار میده (البته اگه از زبان فارسی استفاده کنید

هوووووووووووووووووووووففففففففف خسه شدم چقد تایپ کردم

خب میرسیم به جای جذاب ماجرا. ی متد داریم به اسم _register_controls توی این متد میایم فیلد هایی که قراره داخل ویجتمون نمایش داده بشه رو قرار میدیم. (ی نگاهی به کامنت ها بندازید متوجه میشید که کجا چ خبره

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

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

مرحله پنجم – رجیستر کردن ویجت

خب دیگه فقط ی مرحله میمونه واسه اینکه بخواین ویجت رو به ویجت های المنتورتون اضافه کنید. کافیه فایل class- widgets.php رو باز کنید و کد زیر رو داخلش قرار بدین

<?php
/**
 * Widgets class.
 *
 * @category   Class
 * @package    ElementorAwesomesauce
 * @subpackage WordPress
 * @author     MrJunior <info@mrjunior.ir>
 * @copyright  2022 mrjunior
 * @license    https://opensource.org/licenses/GPL-3.0 GPL-3.0-only
 * @link       http://localhost/mrjunior/build-custom-elementor-widgets/
 * @since      1.0.0
 * php version 7.3.9
 */

namespace ElementorAwesomesauce;

// Security Note: Blocks direct access to the plugin PHP files.
defined( 'ABSPATH' ) || die();

/**
 * Class Plugin
 *
 * Main Plugin class
 *
 * @since 1.0.0
 */
class Widgets {

	/**
	 * Instance
	 *
	 * @since 1.0.0
	 * @access private
	 * @static
	 *
	 * @var Plugin 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
	 *
	 * @return Plugin An instance of the class.
	 */
	public static function instance() {
		if ( is_null( self::$instance ) ) {
			self::$instance = new self();
		}

		return self::$instance;
	}

	/**
	 * Include Widgets files
	 *
	 * Load widgets files
	 *
	 * @since 1.0.0
	 * @access private
	 */
	private function include_widgets_files() {
		require_once 'widgets/class-awesomesauce.php';
	}

	/**
	 * Register Widgets
	 *
	 * Register new Elementor widgets.
	 *
	 * @since 1.0.0
	 * @access public
	 */
	public function register_widgets() {
		// It's now safe to include Widgets files.
		$this->include_widgets_files();

		// Register the plugin widget classes.
		\Elementor\Plugin::instance()->widgets_manager->register_widget_type( new Widgets\Awesomesauce() );
	}

	/**
	 *  Plugin class constructor
	 *
	 * Register plugin action hooks and filters
	 *
	 * @since 1.0.0
	 * @access public
	 */
	public function __construct() {
		// Register the widgets.
		add_action( 'elementor/widgets/widgets_registered', array( $this, 'register_widgets' ) );
	}
}

// Instantiate the Widgets class.
Widgets::instance();

توی این فایل میایم و محتوای فایل widgets/class-awesomesauce.php رو وارد میکنیم و اون رو register میکنیم و تمام

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

سخن آخر

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

اگر سوالی داشتین توی کامنت ها بپرسین تا جواب بدم و اگه ویجت خیلی خفنی هم ساختین عکسش رو بگیرین و برامون توی سایت استوری کنید❤️