个性化阅读
专注于IT技术分析

如何在storefront主题中将SVG用于徽标

我想在woocommerce storefront主题中使用SVG徽标。我无法使用Customizer b / c, 它将不允许SVG上传。有没有办法解决这个限制?

如果没有, 我将如何编辑该钩子/动作以使用SVG?

我在storefront / inc文件夹中看到了storefront_site_branding模板函数, 并且尝试在子主题中创建inc文件夹, 但是显然该覆盖不适用于inc文件夹中的文件。


#1


如果你使用的是儿童主题, 则可以将其添加到functions.php中, 如果你更新主题theme.php, 则在下一个补丁/更新中它可能会被覆盖。

我从以下代码中获取了此代码:https://themeisle.com/blog/add-svg-to-wordpress/

方法1:使用SVG支持插件如果你正在寻找将SVG添加到WordPress的最快方法, 就是这样。我们将使用SVG支持插件, 该插件可启用这种特殊的图像格式并将其支持添加到你的媒体库中:

这个过程很简单。你只需照常安装并激活插件, 然后就可以将SVG添加到你的WordPress网站。

WordPress现在要求我们在上传之前在SVG文件中添加标签。请在任何代码编辑器中打开SVG文件(例如sublime文本), 并将以下内容添加到SVG文件的第一行并保存, 以免遇到安全性错误:

<?xml version="1.0" encoding="utf-8"?>

但是, 你可能还需要根据需要更改另外两个设置。首先, 让我们进入”设置”→” SVG支持”标签:

如何使用SVG支持插件将SVG添加到WordPress

在内部, 你会找到两个选择。首先打开插件的高级模式, 该模式可让你使用CSS定位SVG。如果你不想为SVG设置动画, 则可以跳过此选项。

其次, 你还可以仅通过启用”限制管理员?”来限制将SVG上传给管理员的功能。特征。取决于你!

方法2:修改网站的functions.php文件每个WordPress网站都有自己的functions.php文件。该基本组件包括重要的功能, 类和过滤器。这也是通过几行代码为WordPress添加SVG支持的门票。

要访问此文件, 你需要通过FTP访问你的网站。如果你没有客户, 建议你使用FileZilla。找到FTP凭据并访问你的站点后, 你将想要转到根文件夹, 该根文件夹通常称为public_html或以你的站点命名:

WordPress根文件夹。

现在, 进入wp-includes文件夹并在其中查找functions.php文件。请务必注意, 这是父文件, 而每个主题都有单独的functions.php文件:

wp-includes文件夹。

在此示例中, 我们将代码添加到父文件中。但是, 当更新WordPress时, 你可能会发现所做的更改已丢失, 因此, 请根据你更习惯的方法随意将其添加到主题特定的functions.php文件中。

(编者注:建议在主题的功能文件中执行此操作。)

现在, 通过右键单击并选择View / Edit选项来访问functions.php文件。这将使用默认的文本编辑器将其打开。现在, 滚动到底部, 然后将此代码段粘贴到此处:

function add_file_types_to_uploads($file_types){
$new_filetypes = array();
$new_filetypes['svg'] = 'image/svg+xml';
$file_types = array_merge($file_types, $new_filetypes );
return $file_types;
}
add_filter('upload_mimes', 'add_file_types_to_uploads');

#2


我想在woocommerce storefront主题中使用SVG徽标。我无法使用Customizer b / c, 它将不允许SVG上传。有没有办法解决这个限制?

如果没有, 我将如何编辑该钩子/动作以使用SVG?

我在storefront / inc文件夹中看到了storefront_site_branding模板函数, 并且尝试在子主题中创建inc文件夹, 但是显然该覆盖不适用于inc文件夹中的文件。


#3


如果你使用的是儿童主题, 则可以将其添加到functions.php中, 如果你更新主题theme.php, 则在下一个补丁/更新中它可能会被覆盖。

我从以下代码中获取了此代码:https://themeisle.com/blog/add-svg-to-wordpress/

方法1:使用SVG支持插件如果你正在寻找将SVG添加到WordPress的最快方法, 就是这样。我们将使用SVG支持插件, 该插件可启用这种特殊的图像格式并将其支持添加到你的媒体库中:

这个过程很简单。你只需照常安装并激活插件, 然后就可以将SVG添加到你的WordPress网站。

WordPress现在要求我们在上传之前在SVG文件中添加标签。请在任何代码编辑器中打开SVG文件(例如sublime文本), 并将以下内容添加到SVG文件的第一行并保存, 以免遇到安全性错误:

<?xml version="1.0" encoding="utf-8"?>

但是, 你可能还需要根据需要更改另外两个设置。首先, 让我们进入”设置”→” SVG支持”标签:

如何使用SVG支持插件将SVG添加到WordPress

在内部, 你会找到两个选择。首先打开插件的高级模式, 该模式可让你使用CSS定位SVG。如果你不想为SVG设置动画, 则可以跳过此选项。

其次, 你还可以仅通过启用”限制管理员?”来限制将SVG上传给管理员的功能。特征。取决于你!

方法2:修改网站的functions.php文件每个WordPress网站都有自己的functions.php文件。该基本组件包括重要的功能, 类和过滤器。这也是通过几行代码为WordPress添加SVG支持的门票。

要访问此文件, 你需要通过FTP访问你的网站。如果你没有客户, 建议你使用FileZilla。找到FTP凭据并访问你的站点后, 你将想要转到根文件夹, 该根文件夹通常称为public_html或以你的站点命名:

WordPress根文件夹。

现在, 进入wp-includes文件夹并在其中查找functions.php文件。请务必注意, 这是父文件, 而每个主题都有单独的functions.php文件:

wp-includes文件夹。

在此示例中, 我们将代码添加到父文件中。但是, 当更新WordPress时, 你可能会发现所做的更改已丢失, 因此, 请根据你更习惯的方法随意将其添加到主题特定的functions.php文件中。

(编者注:建议在主题的功能文件中执行此操作。)

现在, 通过右键单击并选择View / Edit选项来访问functions.php文件。这将使用默认的文本编辑器将其打开。现在, 滚动到底部, 然后将此代码段粘贴到此处:

function add_file_types_to_uploads($file_types){
$new_filetypes = array();
$new_filetypes['svg'] = 'image/svg+xml';
$file_types = array_merge($file_types, $new_filetypes );
return $file_types;
}
add_filter('upload_mimes', 'add_file_types_to_uploads');
赞(0)
未经允许不得转载:srcmini » 如何在storefront主题中将SVG用于徽标

评论 抢沙发

评论前必须登录!