首页站长学院 Wordpress教程正文

WordPress短代码实现文章嵌入B站等网页视频

觅站网官方 Wordpress教程 2024年12月30日

0 收藏 0 点赞 54 浏览 1939 个字

遇到喜欢有用的B站视频，大家都会想着放到自己的博客来备用看看，但是官方给的嵌入代码实在看不了。老白我使用以前的网页自适应视频嵌入代码，结合WordPress网站的短代码功能，将其修改到文章编辑器界面，方便添加。详细的修改教程如下：

1.演示效果

1.1 WordPress文章界面

如下图，在文章的编辑页面有一个video短代码按钮

使用的时候直接选中视频链接，点击按钮即可

1.2 视频链接获取

超级简单，直接复制这坨，丢进去即可，不用去获取什么源地址了

1.3 视频嵌入效果

2.WordPress短代码

将下面的短代码添加到主题的function.php文件中即可

// WordPress添加视频链接短代码开始-https://www.xcbtmw.com/29370.html
// 老白仅针对B站特殊处理
function xcbtmw_bvideo_shortcode($atts, $content = null) {
    // 检查内容是否为空
    if (!is_null($content)) {
        // 对于不完整的URL，添加https://前缀
        if (!preg_match('~^(?:f|ht)tps?://~i', $content)) {
            $content = "https://" . $content;
        }

        // 解析URL
        $url_parts = parse_url($content);

        // 检查是否是Bilibili的URL
        if (isset($url_parts['host']) && $url_parts['host'] == 'www.bilibili.com') {
            // 正则表达式提取BV号
            if (preg_match('//video/(BV[^/?]+)/', $url_parts['path'], $matches)) {
                // 重建URL为player版本
                $content = "https://player.bilibili.com/player.html?bvid=" . $matches[1];
            }
        }

        // 清理URL并返回iframe
        return '<div style="position: relative; padding-top: 56.25%">
                    <iframe src="' . esc_url_raw($content) . '"
                            style="border: none; position: absolute; top: 0; height: 100%; width: 100%"
                            allowfullscreen="true">
                    </iframe>
                </div>';
    } else {
        return '请输入有效的视频链接';
    }
}
add_shortcode('Bvideo', 'xcbtmw_bvideo_shortcode');
// 添加短代码按钮到TinyMCE编辑器
function xcbtmw_add_button_mce($mce_settings) {
    ?>
    <script type="text/javascript">
        QTags.addButton('Bvideo', 'Bvideo', '
                    
                    
                ');
    </script>
    <?php
}
add_action('after_wp_tiny_mce', 'xcbtmw_add_button_mce');
// WordPress添加视频链接短代码结束-https://www.xcbtmw.com/29370.html

2.1 代码说明

B站视频直接从状态栏复制粘贴即可，我已经添加了bvid处理获取的，如视频地址为

https://www.bilibili.com/video/BV14km6YHEJU/?vd_source=daaf1562b90f676edcbbe03e9caf2183

自动处理后为：

https://player.bilibili.com/player.html?bvid=BV14km6YHEJU

不用再去复制粘贴对应的实际地址了

2.2 修改为不跳转

在视频播放页面，有一个“前往哔哩哔哩观看高清版本”，这个是可以禁用的，代码如下：

参考代码：

<iframe src="https://player.bilibili.com/player.html?bvid=BV1ijn9eWE2k" scrolling="no" border="0" frameborder="no" framespacing="0" width="100%" height="500" allowfullscreen="true" sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"></iframe>