WordPress-以编程方式在页面中插入Elementor小部件 [英] WordPress - Programmatically insert Elementor Widgets in a page

问题描述

我在WordPress网站上安装了Elementor Pro，我正在编写一个自定义插件，该插件将做一些事情并以编程方式创建一个新页面.我能够创建Page，但是问题是，我想以编程方式在此新页面内插入Elementor Widget.

I have Elementor Pro installed on my WordPress website and I was writing a custom plugin that will do some stuff and programmatically creates a new Page. I was able to create the Page, but the problem is, I want to insert an Elementor Widget programmatically inside this new page.

我已经联系了Elementor支持人员，看看他们是否对我有任何帮助.但是他们的答复是:

I've contacted the Elementor Support to see if they have any inputs for me. But their reply is:

尽我所能为您提供帮助，自定义代码/代码段或对此的任何指导超出了我们的支持范围，因为我们仅支持Elementor的现有功能.

那么无论如何我可以通过代码来实现这一点，我的意思是在页面中插入一个特定的Elementor Widget?

So is there anyway I can achieve this via code, I mean insert a specific Elementor Widget to a page ?

推荐答案

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

This won't be the best solution, but I will explain how I figured out a workaround.

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

For me, I tried monitoring my WordPress website's database to see what all changes are happening when I create a new page with Elementor. Tables that I monitored are: wp_posts and wp_postmeta. Please note that the wp_ prefix maybe different in your case, if you had chosen a different one while installing the WordPress.

创建页面时，新行将以 post_type 值 page 插入 wp_posts 表中.记下 post_id 的值(为便于说明，让 post_id 为 123 ).

When you create a page, a new row gets inserted in the wp_posts table with the post_type value page. Note down that post_id value(for the sake of explaining, let the post_id be 123).

此页面的元数据将存储在 wp_postmeta 表中，Elementor在此存储与每个页面或帖子相关的数据.使用phpMyAdmin，我访问了该表并搜索了具有 post_id = 123 (此处 123 是页面ID)的记录.您可以使用phpMyAdmin的 Search 标签(选择 wp_postmeta 表后)，如下所示:

The metadata for this page will be stored in the wp_postmeta table, and that's where Elementor stores it's data related to each Page or Post. Using phpMyAdmin, I accessed that table and searched for records that has post_id = 123 (here 123 is the ID of the page). You can use the Search tab of phpMyAdmin(after selecting the wp_postmeta table) like this:

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

Or, could run a query like this in the SQL Tab of phpMyAdmin:

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

现在，您将看到附在我们页面上的所有元数据(ID为 123 ).

Now you will see all the metadata attached to our page (with ID 123).

就我而言，我已经在Elementor中为该页面(ID 123 )添加了一个小部件.因此，如上图所示，它附加了一些元数据.

In my case, I had already added one widget in Elementor, for this page (ID 123) earlier. So, as you can see in the above image, it has some metadata attached to it.

存在 _wp_page_template = page-fullwidth.php 的原因是，因为我为页面的 Template属性选择了 Full Width :

That _wp_page_template = page-fullwidth.php is there because I had selected the Full Width for my Page's Template Attribute :

这两个值似乎是必需的，以使其了解该页面是使用Elementor创建的:

And these two values seems to be required to make it understand that the page is created using Elementor:

_elementor_edit_mode = builder
_elementor_template_type = wp-page

所以我们绝对需要.然后输入Elementor版本值:

So we definitely need that. Then for the Elementor version values:

_elementor_version = 2.9.14
_elementor_pro_version = 2.10.3

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

You can make use of the constants : ELEMENTOR_VERSION (if you have free version of Elementor plugin) and ELEMENTOR_PRO_VERSION (if you have Pro version plugin). These constants are defined already if you have the respective version (free or pro) of Elementor plugin installed.

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

Then comes the important part, the Widget's data and the layout related data seems to be stored in the : _elementor_data and _elementor_controls_usage metakeys.

值似乎是JSON字符串.因此，您可以使用任何在线JSON解析器来查看其功能.在我的情况下，值是这样的:

Value of _elementor_data seems to be a JSON string. So you can make use of any online JSON parser to see what it has. The value in my case was like this:

[{"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}]

解析后，它看起来像这样:

When parsed, it would look like this:

[
  {
    "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
  }
]

自从我将该小部件添加到我的页面之前，并将Tag ID输入框的值设置为 21 (通过Elementor编辑器)后，我知道我必须传递新的值来替换该<代码> 21 .

Since I added that Widget to my page earlier, and set the Tag ID input box with a value of 21 (via Elementor Editor), I understood that I have to pass new value replacing that 21.

然后是 _elementor_controls_usage 元键.它的价值是这样的:

Then comes the _elementor_controls_usage metakey. And the value of it was like this:

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:{}}}

它是序列化的数据.您可以使用任何在线工具对该数据进行反序列化.这是我的反序列化后的样子:

It's serialized data. You can use any online tool to unserialize that data. Here's what mine looks like after unserializing:

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 (
    ),
  ),
)

看起来基本上是与布局相关的数据.因此，我认为不对该值进行任何编辑，并按原样使用它.

And it looks like basically the layout related data. So I thought not to do any editing this value, and use it as it is.

让我们做最后一件事

对于创建页面，我使用了 wp_insert_post()方法，该方法返回插入后添加新的 page_id .在创建页面之后，我使用了 update_post_meta()方法，并传递了此 page_id 并附加了元数据.

For creating the page, I used the wp_insert_post() method, which returns the new page_id after insertion. And after creating the page, I used the update_post_meta() method, passing this page_id and attached the metadata.

我的最终代码如下:

//-- 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}]' );

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

Keep in mind, this is not the perfect solution. But I explained how I figured out a workaround to this problem.

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

Maybe someone else would be posting a better solution. ;)

这篇关于WordPress-以编程方式在页面中插入Elementor小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！