WordPress - 以编程方式在页面中插入 Elementor 小部件

Question

我在我的 WordPress 网站上安装了 Elementor Pro，我正在编写一个自定义插件来执行一些操作并以编程方式创建一个新页面。我能够创建页面，但问题是，我想以编程方式在此新页面中插入一个 Elementor Widget。

我已经联系了 Elementor 支持人员，看看他们是否有任何意见要告诉我。但他们的回答是:

As much as I'd like to assist you with this, custom code/snippet or any guidance for this is beyond the scope of our support, given thatwe provide support for Elementor's existing features only.

那么我是否可以通过代码实现这一点，我的意思是将特定的 Elementor Widget 插入页面？

Answer 1

这不是最好的解决方案，但我会解释我是如何找到解决方法的。

对我来说，我尝试监视我的 WordPress 网站的数据库，以查看在使用 Elementor 创建新页面时发生的所有更改。我监控的表是:wp_posts 和 wp_postmeta。请注意，如果您在安装 WordPress 时选择了不同的前缀，则 wp_ 前缀可能会有所不同。

当您创建页面时，会在 wp_posts 表中插入一个具有 post_type 值 page 的新行。记下 post_id 的值(为了解释，让 post_id 为 123)。

此页面的元数据将存储在 wp_postmeta 表中，这是 Elementor 存储与每个页面或帖子相关的数据的地方。使用 phpMyAdmin，我访问了该表并搜索了具有 post_id = 123 的记录(这里 123 是页面的 ID)。您可以像这样使用 phpMyAdmin 的 Search 选项卡(选择 wp_postmeta 表后):

或者，可以在 phpMyAdmin 的 SQL 选项卡 中运行这样的查询:

SELECT * FROM `wp_postmeta` WHERE `post_id` = 123

现在您将看到附加到我们页面的所有元数据(ID 123)。

在我的例子中，我之前已经在 Elementor 中添加了一个小部件，用于此页面(ID 123)。因此，如上图所示，它附加了一些元数据。

那个 _wp_page_template = page-fullwidth.php 在那里，因为我为我的页面的 模板属性 选择了 Full Width :

这两个值似乎是让它理解页面是使用 Elementor 创建的:

_elementor_edit_mode = builder
_elementor_template_type = wp-page

所以我们绝对需要它。然后对于 Elementor 版本值:

_elementor_version = 2.9.14
_elementor_pro_version = 2.10.3

您可以使用常量:ELEMENTOR_VERSION(如果您有 Elementor 插件的免费版本)和 ELEMENTOR_PRO_VERSION(如果您有 Pro 版插件)。如果您安装了 Elementor 插件的相应版本(免费或专业版)，则这些常量已经定义。

然后是重要的部分，Widget 的数据和布局相关数据似乎存储在 _elementor_data 和 _elementor_controls_usage 元键中。

_elementor_data 的值似乎是 JSON 字符串。所以你可以使用任何online JSON parser看看它有什么。我的情况是这样的:

[{"id":"2e0569b","elType":"section","settings":[],"elements":[{"id":"e2a6dbb","elType":"column","settings":{"_column_size":100,"_inline_size":null},"elements":[{"id":"441552a","elType":"widget","settings":{"tag_ids":"21"},"elements":[],"widgetType":"listings_grid_new"}],"isInner":false}],"isInner":false}]

解析后如下所示:

[
  {
    "id": "2e0569b",
    "elType": "section",
    "settings": [],
    "elements": [
      {
        "id": "e2a6dbb",
        "elType": "column",
        "settings": {
          "_column_size": 100,
          "_inline_size": null
        },
        "elements": [
          {
            "id": "441552a",
            "elType": "widget",
            "settings": {
              "tag_ids": "21"
            },
            "elements": [],
            "widgetType": "listings_grid_new"
          }
        ],
        "isInner": false
      }
    ],
    "isInner": false
  }
]

由于我之前将该小部件添加到我的页面，并将标签 ID 输入框的值设置为 21(通过 Elementor 编辑器)，因此我知道我必须传递新值来替换该 21.

然后是 _elementor_controls_usage 元键。而它的值(value)是这样的:

a:3:{s:17:"listings_grid_new";a:3:{s:5:"count";i:1;s:15:"control_percent";i:1;s:8:"controls";a:1:{s:7:"content";a:1:{s:13:"section_query";a:2:{s:7:"loc_ids";i:1;s:7:"tag_ids";i:1;}}}}s:6:"column";a:3:{s:5:"count";i:1;s:15:"control_percent";i:0;s:8:"controls";a:1:{s:6:"layout";a:1:{s:6:"layout";a:1:{s:12:"_inline_size";i:1;}}}}s:7:"section";a:3:{s:5:"count";i:1;s:15:"control_percent";i:0;s:8:"controls";a:0:{}}}

它是序列化的数据。您可以使用任何 online tool to unserialize那个数据。这是我的反序列化后的样子:

array (
  'listings_grid_new' => 
  array (
    'count' => 1,
    'control_percent' => 1,
    'controls' => 
    array (
      'content' => 
      array (
        'section_query' => 
        array (
          'loc_ids' => 1,
          'tag_ids' => 1,
        ),
      ),
    ),
  ),
  'column' => 
  array (
    'count' => 1,
    'control_percent' => 0,
    'controls' => 
    array (
      'layout' => 
      array (
        'layout' => 
        array (
          '_inline_size' => 1,
        ),
      ),
    ),
  ),
  'section' => 
  array (
    'count' => 1,
    'control_percent' => 0,
    'controls' => 
    array (
    ),
  ),
)

它看起来基本上是布局相关的数据。所以我想不做任何编辑这个值，并按原样使用它。

---

让我们做最后一件事

为了创建页面，我使用了 wp_insert_post()方法，它在插入后返回新的 page_id。创建页面后，我使用了 update_post_meta()方法，传递此 page_id 并附加元数据。

我的最终代码如下所示:

//-- set the new page arguments
$new_page_args = array(
    'post_type'     => 'page',              //-- this is of type 'page'
    'post_title'    => 'My Dynamic Page',   //-- title of the page              
    'post_status'   => 'publish'            //-- publish the page
);

//-- insert the page
$new_page_id = wp_insert_post( $new_page_args );

if( is_wp_error( $new_page_id ) )
{
    echo 'Unable to create the page!';        
    die;
}

if( defined( 'ELEMENTOR_VERSION' ) )    //-- if FREE version of Elementor plugin is installed
{
    update_post_meta( $new_page_id, '_elementor_version', ELEMENTOR_VERSION );
}

if( defined( 'ELEMENTOR_PRO_VERSION' ) )    //-- if PRO version of Elementor plugin is installed
{
    update_post_meta( $new_page_id, '_elementor_pro_version', ELEMENTOR_PRO_VERSION );
}

update_post_meta( $new_page_id, '_wp_page_template', 'page-fullwidth.php' );    //-- for using full width template

//-- for Elementor
update_post_meta( $new_page_id, '_elementor_edit_mode', 'builder' );
update_post_meta( $new_page_id, '_elementor_template_type', 'wp-page' );

//-- Elementor layout
update_post_meta( $new_page_id, '_elementor_controls_usage', 'a:3:{s:17:"listings_grid_new";a:3:{s:5:"count";i:1;s:15:"control_percent";i:1;s:8:"controls";a:1:{s:7:"content";a:1:{s:13:"section_query";a:2:{s:7:"loc_ids";i:1;s:7:"tag_ids";i:1;}}}}s:6:"column";a:3:{s:5:"count";i:1;s:15:"control_percent";i:0;s:8:"controls";a:1:{s:6:"layout";a:1:{s:6:"layout";a:1:{s:12:"_inline_size";i:1;}}}}s:7:"section";a:3:{s:5:"count";i:1;s:15:"control_percent";i:0;s:8:"controls";a:0:{}}}' );

$tag_id = '56'; //-- new value
//-- Elementor data ( I have injected the new $tag_id value in the string )
update_post_meta( $new_page_id, '_elementor_data', '[{"id":"2e0569b","elType":"section","settings":[],"elements":[{"id":"e2a6dbb","elType":"column","settings":{"_column_size":100,"_inline_size":null},"elements":[{"id":"441552a","elType":"widget","settings":{"tag_ids":"'. $tag_id .'"},"elements":[],"widgetType":"listings_grid_new"}],"isInner":false}],"isInner":false}]' );

请记住，这不是完美的解决方案。但我解释了我是如何找到解决这个问题的方法的。

也许其他人会发布更好的解决方案。 ;)