当前位置:首页>网站建设>为WordPress启用SVG支持,允许上传SVG图像

为WordPress启用SVG支持,允许上传SVG图像

释放双眼,带上耳机,听听看~!

SVG作为一种通用的矢量图格式,已经被主流浏览器支持,截止本文发布日期,WordPress还没有内置SVG支持,用户无法直接上传SVG图像到WordPress文章或媒体库中,实在理解不了。虽然允许嵌入JavaScript代码会带来一些安全性问题,但也不是没有办法解决,如果仅仅因为这一点而不支持SVG,实在有点因噎废食。

好在WordPress是一个开放的平台,虽然WordPress默认不支持上传SVG图像,但是我们可以通过一些办法来为我们的站点添加这个功能。

通过代码为WordPress添加SVG支持

下面是允许在WordPress中上传SVG图像的代码,简单的添加到主题的functions.php文件或插件文件中即可为WordPress启用SVG支持。

add_filter('wp_check_filetype_and_ext', function ($data, $file, $filename, $mimes)
{
    global $wp_version;

    if ($wp_version !== '4.7.1') {
        return $data;
    }

    $filetype = wp_check_filetype($filename, $mimes);

    return [
        'ext'             => $filetype[ 'ext' ],
        'type'            => $filetype[ 'type' ],
        'proper_filename' => $data[ 'proper_filename' ],
    ];

}, 10, 4);


add_filter('upload_mimes', function ($mimes)
{
    $mimes[ 'svg' ] = 'image/svg+xml';

    return $mimes;
});


add_action('admin_head', function ()
{
    echo '<style>
        .attachment-266x266, .thumbnail img {
             width: 100% !important;
             height: auto !important;
        }
        </style>';
});

使用这种方法为WordPress添加SVG支持没有安全检查,不建议使用在多用户WordPress站点中。

欢迎访问秀主题博客,分享简单实用WP教程

通过插件为WordPress启用SVG支持

使用Safe SVG插件为WordPress添加SVG支持简单方法,推荐大家都使用这种方法来实现。这个插件除了能启用WordPress支持,还会对上传的SVG文件进行清理和验证,以阻止可能影响网站的SVG漏洞。

Safe SVG插件的安全处理功能是通过svg-sanitizer库实现的,如果您有代码洁癖,想在自己的主题或插件中集成SVG支持,可以参考Safe SVG插件实现安全处理功能。

其他为WordPress启用SVG支持的方法

除此之外,流行的Elementor编辑器也内置了启用SVG支持的功能,不过貌似只能在Elementor编辑器中上传SVG、无法在默认的媒体库中上传。

如果您还有其他为WordPress启用SVG支持的方法,欢迎在本文的评论中留言提出。

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

给TA打赏
共{{data.count}}人
人已打赏
网站建设

蜘蛛池是干嘛的怎么搭建蜘蛛池?

2023-2-26 10:40:29

网站建设

给子比文章标题加上渐变彩色字体

2023-3-2 9:23:17

温馨提示:

1.本站大部分内容均收集于网络!若内容若侵犯到您的权益,请发送邮件至:971318156@qq.com,我们将第一时间处理!

2.资源所需价格并非资源售卖价格,是收集、整理、编辑详情以及本站运营的适当补贴,并且本站不提供任何免费技术支持。

3.所有资源仅限于参考和学习,版权归原作者所有,更多请阅读网站声明

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索