(WordPress教程)纯代码实现SVG图片上传并显示在媒体库中 - 汇站网

(WordPress教程)纯代码实现SVG图片上传并显示在媒体库中

2023-09-01 0 798

前言:

汇站首页轮播图片就是 SVG 格式,整站相对来说也用了 SVG 格式好几张,但是由于 SVG 格式图片的特性,可能会被插入恶意代码,从而导致网站容易受到攻击。因此,为了保证安全性,WordPress 默认不支持上传 SVG 格式图片。虽然有人声称 SVG 格式图片具有很高的应用价值,但除了一些网页上的小图标可以使用 SVG 图片外,对于正常的彩色图片来说,并没有明显的优势。然而,在某些情况下,我们确实需要使用 SVG 图片,比如主题的 LOGO 图片。因为如果使用 PNG 图片,在手机上可能不够清晰,而使用 SVG 格式则可以解决这个问题。
(WordPress教程)纯代码实现SVG图片上传并显示在媒体库中
如果你想让 WordPress 支持上传 SVG 格式图片并在媒体库中显示,你可以将下面的代码添加到当前主题的函数模板functions.php中,让 WordPress 支持上传 SVG 图片,并且只允许管理员具有此权限。

以下汇站分享几个代码如下:

 // 只允许管理员上传 SVG 图片
if (current_user_can( 'manage_options' )) {
    add_filter('upload_mimes', function ($mimes) {
        $mimes['svg'] = 'image/svg+xml';
        return $mimes;
    });
}  

媒体库列表模式显示 SVG 图片:

 // 媒体库列表模式显示 SVG 图片
add_action('admin_head', function () {
    echo "<style>table.media .column-title .media-icon img[src*='.svg']{width: 100%;height: auto;}.components-responsive-wrapper__content[src*='.svg'] {position: relative;}</style>";
});  

在互联网上,有很多类似的代码,但是它们都不支持使用媒体库网格模式来展示 SVG 图片。下面的代码可以解决这个问题。

 // 媒体库网格模式显示 SVG 图片
function zm_display_svg_media($response, $attachment, $meta){
    if($response['type'] === 'image' && $response['subtype'] === 'svg+xml' && class_exists('SimpleXMLElement')){
        try {
            $path = get_attached_file($attachment->ID);
            if(@file_exists($path)){
                $svg                = new SimpleXMLElement(@file_get_contents($path));
                $src                = $response['url'];
                $width              = (int) $svg['width'];
                $height             = (int) $svg['height'];
                $response['image']  = compact( 'src', 'width', 'height' );
                $response['thumb']  = compact( 'src', 'width', 'height' );
                $response['sizes']['full'] = array(
                    'height'        => $height,
                    'width'         => $width,
                    'url'           => $src,
                    'orientation'   => $height > $width ? 'portrait' : 'landscape',
                );
            }
        }
        catch(Exception $e){}
    }
    return $response;
}
add_filter('wp_prepare_attachment_for_js', 'zm_display_svg_media', 10, 3);  

这是一个支持媒体库网格模式显示 SVG 图片的代码,相对来说代码量较少。即使开启调试模式,也会有错误提示,但不会影响使用。

 
// 媒体库网格模式显示 SVG 图片
function zm_svg_metadata($data, $post_id) {
    $data = array(
        'sizes' => array(
            'large' => array(
                'file' => pathinfo(wp_get_attachment_url($post_id), PATHINFO_BASENAME)
            )
        )
    );
    return $data;
}
add_filter('wp_get_attachment_metadata', 'zm_svg_metadata', 10, 2);  

结语:

关于这个功能的用途,取决于您所使用的主题是否需要它。您可以通过直接使用 FTP 上传并获取链接,同样可以在网页中使用。

转载请注明:汇站网 » (WordPress 教程)纯代码实现 SVG 图片上传并显示在媒体库中

收藏 (0)

微信扫一扫

支付宝扫一扫

点赞 (0)

感谢您的来访,获取更多精彩资源请收藏本站。

本站声明

本资源仅用于个人学习和研究使用,禁止用于任何商业环境!

 1.  本网站名称:汇站网
 2.  本站永久网址:https://www.huizhanii.com/
 3.  本站所有资源来源于网友投稿和高价购买,所有资源仅对编程人员及源代码爱好者开放下载做参考和研究及学习,本站不提供任何技术服务!
 4.  未经原版权作者许可,禁止用于任何商业环境,任何人不得擅作它用,下载者不得用于违反国家法律,否则发生的一切法律后果自行承担!
 5.  为尊重作者版权,请在下载24小时内删除!请购买原版授权作品,支持你喜欢的作者,谢谢!
 6.  若资源侵犯了您的合法权益, 请持您的版权证书和相关原作品信息来信通知我们请来信     通知我们我们会及时删除,给您带来的不便,我们深表歉意!
 7.  如下载链接失效、广告或者压缩包问题请联系站长处理!
 8.  如果你也有好源码或者教程,可以发布到网站,分享有金币奖励和额外收入!
 9.  本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
 10.  因源码具有可复制性,一经赞助 ,不得以任何形式退款。
 11.  更多详情请点击查看

汇站网 WordPress教程 (WordPress教程)纯代码实现SVG图片上传并显示在媒体库中 https://www.huizhanii.com/33117.html

汇站

站长资源下载中心-找源码上汇站

常见问题
  • 如果付款后没有弹出下载页面,多刷新几下,有问题联系客服!
查看详情
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情

相关文章

发表评论
暂无评论
  随机评论 表情开关按钮图片
表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情
登录后评论
联系官方客服

为您解决烦忧 - 24小时在线 专业服务

(汇站网)一个专注站长资源的平台网站,提供最新的网站模板和整站源码,内容包含各类精品网页模板,企业网站模板,网站模板,DIV+CSS模板,织梦模板,帝国cms模板,discuz模板,wordpress模板,个人博客论坛模板,上千种免费网页模板下载尽在汇站网.找源码上汇站.huizhanii.com