Elementor Core Cơ bản
Sau khi vượt qua tất cả các kiểm tra tương thích, chúng ta có thể an toàn chạy tiện ích bổ sung và bắt đầu mở rộng chức năng của Elementor. Chúng ta có thể tải các tệp khác, móc vào các bộ lọc và hành động, và viết mã tùy chỉnh.
Đăng ký Scripts & Styles tùy chỉnh
Tiện ích bổ sung có thể đăng ký và xếp hàng đợi các scripts and styles. Hãy xem một ví dụ về cách thực hiện điều này:
final class Plugin {
/**
* Initialize
*
* Load the addons functionality only after Elementor is initialized.
*
* Fired by `elementor/init` action hook.
*
* @since 1.0.0
* @access public
*/
public function init(): void {
add_action( ‘elementor/frontend/after_register_styles’, [ $this, ‘register_frontend_styles’ ] );
add_action( ‘elementor/frontend/after_register_scripts’, [ $this, ‘register_frontend_scripts’ ] );
add_action( ‘elementor/frontend/after_enqueue_styles’, [ $this, ‘enqueue_frontend_styles’ ] );
add_action( ‘elementor/frontend/after_enqueue_scripts’, [ $this, ‘enqueue_frontend_scripts’ ] );
}
public function register_frontend_styles(): void {
wp_register_style( ‘frontend-style-1’, plugins_url( ‘assets/css/frontend-style-1.css’, __FILE__ ) );
wp_register_style( ‘frontend-style-2’, plugins_url( ‘assets/css/frontend-style-2.css’, __FILE__ ), [ ‘external-framework’ ] );
wp_register_style( ‘external-framework’, plugins_url( ‘assets/css/libs/external-framework.css’, __FILE__ ) );
}
public function register_frontend_scripts(): void {
wp_register_script( ‘frontend-script-1’, plugins_url( ‘assets/js/frontend-script-1.js’, __FILE__ ) );
wp_register_script( ‘frontend-script-2’, plugins_url( ‘assets/js/frontend-script-2.js’, __FILE__ ), [ ‘external-library’ ] );
wp_register_script( ‘external-library’, plugins_url( ‘assets/js/libs/external-library.js’, __FILE__ ) );
}
public function enqueue_frontend_styles(): void {
wp_enqueue_style( ‘frontend-style-1’ );
wp_enqueue_style( ‘frontend-style-2’ );
}
public function enqueue_frontend_scripts(): void {
wp_enqueue_script( ‘frontend-script-1’ );
wp_enqueue_script( ‘frontend-script-2’ );
}
}
Đăng ký Widgets mới
Để thêm các widget mới vào Elementor, chúng ta cần đăng ký chúng bằng cơ chế quản lý widget. Đây là một quy trình khá đơn giản: chúng ta móc vào hook đăng ký widget, bao gồm các tệp của widget và đăng ký các lớp của widget.
final class Plugin {
/**
* Initialize
*
* Load the addons functionality only after Elementor is initialized.
*
* Fired by `elementor/init` action hook.
*
* @since 1.0.0
* @access public
*/
public function init(): void {
add_action( ‘elementor/widgets/register’, [ $this, ‘register_widgets’ ] );
}
/**
* Register Widgets
*
* Load widgets files and register new Elementor widgets.
*
* Fired by `elementor/widgets/register` action hook.
*
* @param \Elementor\Widgets_Manager $widgets_manager Elementor widgets manager.
*/
public function register_widgets( $widgets_manager ): void {
require_once( __DIR__ . ‘/includes/widgets/widget-1.php’ );
require_once( __DIR__ . ‘/includes/widgets/widget-2.php’ );
$widgets_manager->register( new \Widget_1() );
$widgets_manager->register( new \Widget_2() );
}
}
Đăng ký Controls mới
Bây giờ, hãy cùng xem cách đăng ký các control mới bằng cách sử dụng cơ chế quản lý control. Một lần nữa, chúng ta móc vào hành động đăng ký control để tải các tệp control và đăng ký các lớp control.
final class Plugin {
/**
* Initialize
*
* Load the addons functionality only after Elementor is initialized.
*
* Fired by `elementor/init` action hook.
*
* @since 1.0.0
* @access public
*/
public function init(): void {
add_action( ‘elementor/controls/register’, [ $this, ‘register_controls’ ] );
}
/**
* Register Controls
*
* Load controls files and register new Elementor controls.
*
* Fired by `elementor/controls/register` action hook.
*
* @param \Elementor\Controls_Manager $controls_manager Elementor controls manager.
*/
public function register_controls( $controls_manager ): void {
require_once( __DIR__ . ‘/includes/controls/control-1.php’ );
require_once( __DIR__ . ‘/includes/controls/control-2.php’ );
$controls_manager->register( new \Control_1() );
$controls_manager->register( new \Control_2() );
}
}
Nguồn:https://developers.elementor.com
