1. David Wu首页
  2. WordPress
  3. WordPress安装教程

WordPress支持上传SVG图片并显示在媒体库中

因 SVG 格式图片特性,可能会被插入恶意代码,网站容易被攻击,所以出于安全考虑 wordpress 默认不支持 SVG 格式图片上传,另外不像网上说 SVG 格式图片有那么高的应用价值,除了一些网页上的小图标可以使用 SVG 图片外,正常的彩色图片,如果使用 SVG 格式毫无优势可言。不过有时还确实需要这个 SVG 图片比如我主题的 LOGO 图片,如果使用 PNG 图片在手机上不是很清晰,采用 SVG 格式则无此问题。

如何让 WordPress 支持上传 SVG 格式图片?可以将下代码添加当前主题函数模板 functions.php 中,让 WordPress 支持上传 SVG,并只管理员有此权限

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

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

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

网上有很多以上类似的代码,但都不支持媒体库网格模式显示 SVG 图片,下面的代码可以实现:

  1.     // 媒体库网格模式显示SVG图片
  2.     function zm_display_svg_media($response, $attachment, $meta){
  3.     	if($response['type'] === 'image' && $response['subtype'] === 'svg+xml' && class_exists('SimpleXMLElement')){
  4.     		try {
  5.     			$path = get_attached_file($attachment->ID);
  6.     			if(@file_exists($path)){
  7.     				$svg                = new SimpleXMLElement(@file_get_contents($path));
  8.     				$src                = $response['url'];
  9.     				$width              = (int) $svg['width'];
  10.     				$height             = (int) $svg['height'];
  11.     				$response['image']  = compact( 'src', 'width', 'height' );
  12.     				$response['thumb']  = compact( 'src', 'width', 'height' );
  13. 
    
  14.     				$response['sizes']['full'] = array(
  15.     					'height'        => $height,
  16.     					'width'         => $width,
  17.     					'url'           => $src,
  18.     					'orientation'   => $height > $width ? 'portrait' : 'landscape',
  19.     				);
  20.     			}
  21.     		}
  22.     		catch(Exception $e){}
  23.     	}
  24.     	return $response;
  25.     }
  26.     add_filter('wp_prepare_attachment_for_js', 'zm_display_svg_media', 10, 3);

另一个相对代码较少的支持媒体库网格模式显示 SVG 图片代码,不过如果开启调试模式会有错误提示,但不影响使用。

  1.     // 媒体库网格模式显示SVG图片
  2.     function zm_svg_metadata($data, $post_id) {
  3.     	$data = array(
  4.     		'sizes' => array(
  5.     			'large' => array(
  6.     				'file' => pathinfo(wp_get_attachment_url($post_id), PATHINFO_BASENAME)
  7.     			)
  8.     		)
  9.     	);
  10.     	return $data;
  11.     }
  12.     add_filter('wp_get_attachment_metadata', 'zm_svg_metadata', 10, 2);

至于加这个功能用于什么,那要看你用的主题是否有这个功能需要了,直接 FTP 上传后获取链接也一样在网页中使用。

原创文章,作者:DavidWu,如若转载,请注明出处:https://www.davidwu.net/archives/103679

服务项目 服务内容 收费标准(元)
开发定制 WordPress主题/插件开发定制 (以最终需求为准)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

邮箱地址不会被公开。 必填项已用*标注