返回

通过 REST API 获取完整 Elementor 页面内容 | 3种解决方案

php

通过 REST API 获取完整的 Elementor 页面内容

在 WordPress 网站开发中,Elementor 作为一款强大的页面构建器,被广泛应用于创建各种页面布局。借助 Elementor 提供的丰富的模板库,我们可以快速构建出美观的页面。然而,当我们需要通过 WordPress 的 REST API 获取使用 Elementor 模板构建的页面内容时,却可能会遇到一些障碍。例如,我们可能无法获取到所有的小部件内容,像是特色图片、文章标题和社交媒体小部件等。本文将深入探讨这个问题,并提供几种解决方案,帮助你通过 REST API 获取包含 Elementor 模板库中所有内容的完整文章内容。

问题根源

问题的核心在于 Elementor 的 [elementor-template id="..."] 短代码。当 WordPress 在服务器端渲染页面时,这个短代码只会渲染文章的主要内容部分,而不会渲染其他的 Elementor 小部件。这是因为 Elementor 的一些动态功能,例如加载 JavaScript 和 CSS 文件,需要在浏览器端执行才能完整呈现。

解决方案

为了解决这个问题,我们需要找到一种方法,使服务器端能够完整地渲染 Elementor 模板,包括所有的小部件。以下列举几种可行的方案:

1. 利用 Elementor Pro 的 REST API 功能

如果你使用的是 Elementor Pro 版本,那么恭喜你,你可以直接利用它提供的 REST API 功能来获取完整的页面内容。Elementor Pro 的 REST API 会返回一个 JSON 对象,其中包含了页面所有的 Elementor 数据,包括所有的小部件及其设置信息。

你可以使用类似以下的 PHP 代码来获取 Elementor Pro 的 REST API 数据:

$response = wp_remote_get( get_rest_url( null, '/elementor/v1/templates/' . $post_id ) );
$data = json_decode( wp_remote_retrieve_body( $response ) );

if ( ! is_wp_error( $response ) && isset( $data->data ) ) {
    $content = $data->data->content;
}

2. 使用 Elementor 的 frontend.php 文件

如果你的网站没有使用 Elementor Pro,也不用担心,我们还可以尝试使用 Elementor 的 frontend.php 文件来手动渲染 Elementor 模板。

首先,你需要找到 Elementor 的 frontend.php 文件,它通常位于 wp-content/plugins/elementor/includes/frontend.php

然后,你可以使用以下代码来手动渲染 Elementor 模板:

require_once 'wp-content/plugins/elementor/includes/frontend.php';

$elementor_frontend = new \Elementor\Frontend();
$content = $elementor_frontend->get_builder_content_for_display( $post_id );

这段代码会加载 Elementor 的前端类,并使用 get_builder_content_for_display() 方法来渲染 Elementor 模板,从而获取完整的页面内容。

3. 使用第三方插件

除了以上两种方法,还有一些第三方插件可以帮助你通过 REST API 获取完整的 Elementor 页面内容。例如,"Elementor REST API" 插件可以将 Elementor 的页面和模板添加到 WordPress 的 REST API 中,方便你进行访问和获取。

代码示例

以下是一个完整的代码示例,演示了如何使用 Elementor 的 frontend.php 文件来获取包含 Elementor 模板库中所有内容的完整文章内容:

function get_blog_post_html_test( $request ) {
    $permalink = $request->get_param( 'slug' );

    $args = [
        'post_type'      => 'post',
        'posts_per_page' => 1,
        'post_name__in'  => [$permalink],
        'fields'         => 'ids' 
    ];

    $posts = get_posts( $args );
    $post_id = $posts[0];
    $post = get_post($post_id);

    if ( ! $post || $post->post_type !== 'post' ) {
        wp_send_json_error( 'Resource not found', 404 );
    }

    // 确保 Elementor 已加载
    if ( class_exists( '\Elementor\Plugin' ) ) {
        // 引入 Elementor 的 frontend.php 文件
        require_once 'wp-content/plugins/elementor/includes/frontend.php';

        // 实例化 Elementor 的前端类
        $elementor_frontend = new \Elementor\Frontend();

        // 获取完整的 Elementor 内容
        $content = $elementor_frontend->get_builder_content_for_display( $post_id );

        $response = array(
            'content_html' => $content
        );

        echo json_encode( array( 'statusCode' => 200, 'message' => 'Blog Detail', 'result' => $response ) );
    }
}

常见问题解答

1. 为什么我使用 Elementor Pro 的 REST API 仍然无法获取所有的小部件内容?

这可能是因为你的 Elementor Pro 版本过旧,或者你的主题或其他插件与 Elementor Pro 的 REST API 存在冲突。建议你尝试更新 Elementor Pro 到最新版本,并禁用其他插件进行测试。

2. 使用 frontend.php 文件手动渲染 Elementor 模板会影响网站性能吗?

是的,使用 frontend.php 文件手动渲染 Elementor 模板会增加服务器端的负载,可能会对网站性能造成一定的影响。建议你根据实际情况进行评估,并考虑使用缓存插件来优化性能。

3. 除了 "Elementor REST API" 插件,还有其他推荐的第三方插件吗?

是的,还有其他一些插件可以帮助你通过 REST API 获取 Elementor 页面内容,例如 "Elementor Addons & Templates" 和 "Essential Addons for Elementor" 等。你可以根据自己的需求选择合适的插件。

4. 我如何调试 Elementor REST API 的问题?

你可以使用浏览器的开发者工具来查看 REST API 的请求和响应,并检查是否有错误信息。你也可以在 WordPress 的调试模式下查看错误日志,以获取更多信息。

5. 我可以在 Elementor 模板中使用自定义字段吗?

是的,你可以在 Elementor 模板中使用 WordPress 的自定义字段,并通过 REST API 获取这些字段的值。你需要使用 Elementor 的动态内容功能来将自定义字段的值插入到模板中。

希望本文能够帮助你解决通过 REST API 获取完整 Elementor 页面内容的问题。请记住,以上代码示例仅供参考,你需要根据你的实际情况进行修改和调整。祝你使用 Elementor 构建出更加优秀的 WordPress 网站!