jQuery 调用 Elementor

Elementor 是一款流行的 WordPress 页面构建插件，它能够方便快捷地创建各种类型的网站页面。而 jQuery 则是一款经典的 JavaScript 库，能够方便地操作页面元素。在 WordPress 中，我们可以通过 jQuery 调用 Elementor 插件，进一步扩展 Elementor 的功能，同时也能够更快地实现一些动态效果。

如何调用 Elementor？

要想调用 Elementor，我们需要将以下代码添加到 WordPress 主题中的函数文件（ functions.php ）中：

// Load Elementor from the frontend
add_action( 'wp_enqueue_scripts', function() {

    // Load Elementor's frontend script and styles
    if ( ! defined( 'ELEMENTOR_ASSETS_MANAGER' ) ) {
        wp_enqueue_style( 'elementor-frontend-css', ELEMENTOR_URL . 'assets/css/frontend.min.css', [], ELEMENTOR_VERSION, 'all' );
        wp_enqueue_script( 'elementor-frontend-js', ELEMENTOR_URL . 'assets/js/frontend.min.js', ['jquery'], ELEMENTOR_VERSION, true );
    }

    // Load Elementor Pro's frontend script and styles
    if ( defined( 'ELEMENTOR_PRO_VERSION' ) ) {
        wp_enqueue_style( 'elementor-pro-frontend-css', ELEMENTOR_PRO_URL . 'assets/css/frontend.min.css', [], ELEMENTOR_PRO_VERSION, 'all' );
        wp_enqueue_script( 'elementor-pro-frontend-js', ELEMENTOR_PRO_URL . 'assets/js/frontend.min.js', ['jquery'], ELEMENTOR_PRO_VERSION, true );
    }

    // Load our custom scripts and styles
    wp_enqueue_style( 'my-custom-styles', get_stylesheet_directory_uri() . '/css/custom-styles.css', [], false, 'all' );
    wp_enqueue_script( 'my-custom-scripts', get_stylesheet_directory_uri() . '/js/custom-scripts.js', ['jquery'], false, true );
});

在上述代码中，我们首先通过 wp_enqueue_style 和 wp_enqueue_script 函数加载了 Elementor 和 Elementor Pro 的前端样式和脚本，随后又加载了我们自定义的样式和脚本。注意到我们在加载自定义脚本时加入了 jquery 依赖，这是因为我们需要确保 jQuery 已经被加载。

在加载完 Elementor 的前端脚本后，我们就可以使用 jQuery 对页面进行操作了。以下是一个简单的例子：

jQuery(function($) {

    // Add a click event to the button
    $('.my-button').on('click', function() {

        // Create a new Elementor section
        var section = elementor.getDocument( '#elementor-preview' ).createSection();

        // Add a new widget to the section
        section.addWidget( elementor.getWidgetType('image').model.cid, {
            settings: {
                url: 'https://picsum.photos/200/300'
            }
        });
    });
});

在这个例子中，我们首先使用 jQuery 选中了一个名为 .my-button 的按钮，并为其添加了一个点击事件。当按钮被点击时，我们通过 elementor.getDocument 函数获取了当前页面的 Elementor 文档对象，并使用 createSection 方法创建了一个新的 Elementor section。随后，我们使用 addWidget 方法向该 section 中添加了一个新的名为 image 的 Widget，并设置了该 Widget 的图片 URL。

如何使用 Elementor 的 API？

通过 Elementor 的 API，我们可以更加方便地操作 Elementor 的各种对象，如 sections、columns 和 widgets。以下是一些常用的 API 示例：

// 获取文档对象
var doc = elementor.getDocument();

// 获取当前文档中的 section 数量
var sectionCount = doc.getControls('section').length;

// 获取 ID 为 'section-1' 的 section 对象
var section = doc.getSection('section-1');

// 获取 section-1 中的所有列
var columns = section.getChildren();

// 获取 ID 为 'column-1' 的列对象
var column = section.getChild('column-1');

// 获取 ID 为 'widget-1' 的小部件对象
var widget = elementor.getPreviewView().getWidget(1);

// 获取小部件对象的设置
var widgetSettings = widget.getSettings();

通过这些 API，我们可以更加简单地操作 Elementor，实现各种动态效果。