WordPress代码启用 SVG 文件上传【非插件】

WordPress 允许用户上传多种不同类型的图像文件，例如 PNG 和 JPG。显示其他文件类型（例如矢量图形）可能会更加困难。幸运的是，有几种方法可以将 SVG 文件整合到您的网站中。只需进行一些重新配置，您就可以使用此文件类型优化一些徽标和其他图形。

利用本文了解有关 SVG 文件的更多信息以及您可能想要使用它们的原因。此外，通过两种方式在您的网站上启用它们。我们还将介绍您可能需要采取的一些重要安全预防措施。

什么是 SVG？

SVG 文件是一种矢量图像，其组成方式与更常见的图像文件类型不同。例如，JPG 由数千个像素组成。而矢量图像更像是一组书面指令。它们不包含构成较大图像的像素。相反，它们包含一组类似于架构的数据，用于创建二维图像。

为什么使用 SVG？

SVG 文件比其他类型的图像小得多。这意味着您的网站不会因图形而陷入困境。SVG 文件由 Google 编入索引。这对您网站的搜索引擎优化 (SEO) 来说是一个真正的福音。

如何将 SVG 上传到 WordPress

由于 WordPress 不支持 SVG，因此您必须付出更多努力才能将它们添加到您的网站中。阅读本文的以下部分以获取有关如何使用插件和手动流程将 SVG 文件添加到您的网站的更多信息。

方法 1：使用插件

首先，您需要下载并安装SVG 支持插件。

安装并激活插件后，您将在 WordPress 仪表板的 “设置”>“SVG 支持”下看到一个新的菜单选项。在那里，您将收到有关如何为您的网站设计 SVG 文件的说明。

此外，您还可以配置一些重要的管理设置。其中包括将 SVG 上传权限限制为仅管理员。之后，您就可以将 SVG 文件直接上传到您的媒体库。

方法 2：手动启用 SVG 文件上传

首先，您需要编辑网站的 functions.php 文件。为此，您可以转到仪表板中的外观 > 编辑主题，然后选择 functions.php 文件。或者，您可以使用文件传输协议 (FTP) 应用程序（例如 FileZilla）访问您网站的文件。

无论如何，好在对网站进行任何重大工作之前创建一个子主题或切换到开发环境。这将在您进行更改时保护您的实时网站免受损害。

接下来，您需要将以下代码片段添加到您的 functions.php 文件中。

// Allow 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 );

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

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

之后，您就可以将 SVG 图像上传到媒体库。在那里，您可以像查看其他图像文件类型一样查看和交互它们。