如何通过PHP/Elementor动态获取WordPress媒体库的上传视频？

当然可以实现，下面提供几种不同思路的方案，覆盖代码定制和无代码插件两种场景：

一、PHP钩子自动将新上传视频添加到指定Elementor页面 #

利用WordPress的媒体上传钩子，监听MP4文件上传事件，自动把视频组件插入到你指定的空白Elementor页面中，无需手动操作。

操作步骤： #

1. 先找到你要用来展示视频的空白页面ID（在WordPress后台编辑页面时，地址栏里的post=xxx中的xxx就是页面ID）
2. 将以下代码添加到主题的functions.php文件，或者自定义插件中：

add_action('add_attachment', 'auto_append_video_to_elementor_page');
function auto_append_video_to_elementor_page($attachment_id) {
    // 只处理MP4格式的视频文件
    $mime_type = get_post_mime_type($attachment_id);
    if ($mime_type !== 'video/mp4') return;

    // 替换成你的目标空白页面ID
    $target_page_id = 123;
    $page = get_post($target_page_id);
    if (!$page || $page->post_type !== 'page') return;

    // 获取Elementor页面的现有组件数据
    $elementor_data = get_post_meta($target_page_id, '_elementor_data', true);
    $elementor_data = json_decode($elementor_data, true) ?: [];

    // 构建Elementor视频组件的配置
    $video_widget = [
        'id' => uniqid('video-'),
        'elType' => 'widget',
        'widgetType' => 'video',
        'settings' => [
            'video_type' => 'self',
            'video_file' => $attachment_id,
            'video_url' => wp_get_attachment_url($attachment_id),
            'controls' => 'yes',
            'play_button' => 'yes',
        ],
        'elements' => [],
    ];

    // 将新视频组件追加到页面末尾
    $elementor_data[] = $video_widget;

    // 更新Elementor页面数据
    update_post_meta($target_page_id, '_elementor_data', json_encode($elementor_data));
    // 更新页面修改时间，确保Elementor识别到内容更新
    wp_update_post([
        'ID' => $target_page_id,
        'post_modified' => current_time('mysql'),
        'post_modified_gmt' => current_time('mysql', 1),
    ]);
}

二、自定义Elementor组件，动态显示最新上传的视频 #

如果希望页面始终显示最新上传的MP4视频，而不是累加所有视频，可以做一个自定义Elementor组件：

操作步骤： #

将以下代码添加到主题functions.php或自定义插件中：

class Elementor_Latest_Video_Widget extends \Elementor\Widget_Base {

    public function get_name() {
        return 'latest_uploaded_video';
    }

    public function get_title() {
        return '最新上传视频';
    }

    public function get_icon() {
        return 'eicon-video-camera';
    }

    public function get_categories() {
        return ['basic'];
    }

    protected function render() {
        // 查询媒体库中最新的MP4视频
        $args = [
            'post_type' => 'attachment',
            'post_mime_type' => 'video/mp4',
            'post_status' => 'inherit',
            'posts_per_page' => 1,
            'orderby' => 'date',
            'order' => 'DESC',
        ];
        $latest_video = get_posts($args);
        
        if (!$latest_video) {
            echo '<p>暂无上传的视频</p>';
            return;
        }
        
        $video_url = wp_get_attachment_url($latest_video[0]->ID);
        ?>
        <video controls style="width: 100%;">
            <source src="<?php echo esc_url($video_url); ?>" type="video/mp4">
            你的浏览器不支持视频播放
        </video>
        <?php
    }

    protected function _content_template() {
        // Elementor编辑器预览模板
        ?>
        <#
        var placeholderUrl = 'https://example.com/placeholder-video.mp4';
        #>
        <video controls style="width: 100%;">
            <source src="{{ placeholderUrl }}" type="video/mp4">
            你的浏览器不支持视频播放
        </video>
        <?php
    }
}

// 注册自定义组件
add_action('elementor/widgets/widgets_registered', function() {
    \Elementor\Plugin::instance()->widgets_manager->register_widget_type(new Elementor_Latest_Video_Widget());
});

添加完成后，在Elementor编辑器里就能找到「最新上传视频」组件，拖到空白页面即可，每次上传新视频后刷新页面就会自动更新。

三、前端JS动态加载最新视频（无需后端代码） #

如果不想修改PHP代码，可以直接用WP的REST API在前端拉取最新视频：

操作步骤： #

在Elementor空白页面中添加一个「HTML组件」，插入以下代码：

<div id="latest-video-wrap"></div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 调用WP REST API获取最新MP4视频
    fetch('/wp-json/wp/v2/media?mime_type=video/mp4&per_page=1&order=desc')
        .then(res => res.json())
        .then(data => {
            if (!data.length) {
                document.getElementById('latest-video-wrap').innerHTML = '<p>暂无上传视频</p>';
                return;
            }
            const videoHtml = `
                <video controls style="width:100%;">
                    <source src="${data[0].source_url}" type="video/mp4">
                    你的浏览器不支持视频播放
                </video>
            `;
            document.getElementById('latest-video-wrap').innerHTML = videoHtml;
        })
        .catch(err => {
            console.error('加载视频失败:', err);
            document.getElementById('latest-video-wrap').innerHTML = '<p>视频加载失败</p>';
        });
});
</script>

注意：如果你的网站禁用了REST API，需要先开启该功能才能正常使用。

四、无代码插件方案 #

如果你完全不想写代码，可以使用「Dynamic Content for Elementor」这类插件：

1. 安装并激活插件后，打开Elementor编辑器的视频组件
2. 将「视频文件」选项切换为动态数据，选择「最新媒体」
3. 在筛选条件里指定仅显示MP4格式的文件
4. 保存页面后，每次上传新视频，页面会自动同步显示最新的那个

内容的提问来源于stack exchange，提问作者Aaron Busch