【问题标题】:How to use SVG for logo in storefront theme如何在店面主题中使用 SVG 作为徽标
【发布时间】:2019-12-27 13:46:54
【问题描述】:

我想在我的 woocommerce 店面主题中使用 SVG 徽标。我不能使用定制器 b/c 它不允许上传 SVG。有没有办法绕过这个限制?

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

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

【问题讨论】:

    标签: wordpress-theming hook-woocommerce storefront


    【解决方案1】:

    如果您使用的是子主题,您可以将其添加到您的functions.php,如果您更新主题functions.php,它可能会在您的下一个补丁/更新期间覆盖。

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

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

    过程很简单。您只需要像往常一样安装并激活插件,然后您就可以将 SVG 添加到您的 WordPress 网站。

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

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

    但是,您可能还需要根据需要更改另外两个设置。首先,让我们转到“设置”→“SVG 支持”选项卡:

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

    在里面,你会发现两个选项。第一个打开插件的高级模式,它允许您使用 CSS 定位您的 SVG。如果您不想为 SVG 制作动画,则可以跳过此选项。

    其次,您还可以通过启用限制为管理员来限制将 SVG 上传给管理员的能力?特征。由你决定!

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

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

    WordPress 根文件夹。

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

    wp-includes 文件夹。

    在本例中,我们将代码添加到父文件中。但是,您可能会发现更新 WordPress 时更改会丢失,因此请随意将其添加到特定主题的 functions.php 文件中,具体取决于您更熟悉的方法。

    (编者注:在主题的函数文件中执行此操作实际上是推荐的方法。)

    现在通过右键单击并选择查看/编辑选项来访问 functions.php 文件。这将使用您的默认文本编辑器打开它。现在,滚动到底部并将这段代码 sn-p 粘贴到那里:

    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');
    

    【讨论】:

      猜你喜欢
      • 2017-11-21
      • 1970-01-01
      • 2017-08-01
      • 2014-12-10
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-02-17
      相关资源
      最近更新 更多