将 SVG 用于 Wordpress 徽标答案

【问题标题】：Using SVG for Wordpress Logo将 SVG 用于 Wordpress 徽标
【发布时间】：2014-10-05 20:12:09
【问题描述】：

我正在尝试将 SVG 文件用于 Wordpress 中网站的徽标，正如您从下面的代码中看到的那样，我尝试在 .svg 文件中调用它。不幸的是，我无法让它工作......

//* Add support for custom header
add_theme_support( 'custom-header', array(
    'header_image'    => '/images/tgoc.svg',
    'header-selector' => '.site-title a',
    'header-text'     => false,
    'height'          => 110,
    'width'           => 320,
) );

我还在 funtions.php 中执行了以下操作：

//* Enable SVG file upload
function custom_mtypes( $m ){
    $m['svg'] = 'image/svg+xml';
    $m['svgz'] = 'image/svg+xml';
    return $m;
}
add_filter( 'upload_mimes', 'custom_mtypes' );

我知道您也可以插入 svg 代码，但我的主要问题是在哪里插入此代码？我也想尝试使用 Modernizr 进行备份。

这是 CSS：

/* Logo, hide text */

.header-image .title-area {
    padding: 0;
    width: 340px;
    height: 340px;
    background: url(/images/logo.png);
    display: block;
}

.no-svg .header-image {
    // fallback
    background-image: url(/images/logo.png);
}

.header-image .site-title a {
    float: left;
    min-height: 110px;
    width: 100%;
}

【问题讨论】：

看看这个，可能对你有帮助：blog.teamtreehouse.com/perfect-wordpress-inline-svg-workflow
@ctwheels 感谢您的链接，非常感谢。我试过了，似乎收到错误“警告：除以零”
除以零，你能找到吗？检查检查器哪一行失败
@ctwheels 是的，这是我插入这个函数的地方（准确地说是第 63 行）。
那么您可能必须使用插件。我在上面分享的链接是将 svg 插入 wordpress 的“hack”。尝试为它寻找一个 svg 插件。 wordpress.org/plugins/tags/svg

标签： php css wordpress svg genesis

【解决方案1】：

首先安装 SVG 支持插件（出于安全原因，仅限管理员使用）。然后你会在上传 SVG 后遇到错误，其中第二步希望你裁剪图像，但你不能对 SVG 执行此操作。这样做：

在选择您的 svg 图像后，在第二个屏幕上提供一个“跳过裁剪”按钮，该图像必须已经裁剪为您需要的确切尺寸。

您需要做的就是使用您在上面定义的用于自定义标题支持的数组，您可以在其中定义高度和宽度，然后添加以下内容：

'flex-width'             => true,
'flex-height'            => true,

所以对于我自己的自定义主题，完整的 sn-p 是：

function hikeitbaby_custom_header_setup() {
    add_theme_support( 'custom-header', apply_filters( 'hikeitbaby_custom_header_args', array(
        'default-image'          => '',
        'default-text-color'     => '000000',
        'width'                  => 190,
        'height'                 => 84,
        'flex-width'             => true,
        'flex-height'            => true,
        'wp-head-callback'       => 'hikeitbaby_header_style',
        'admin-head-callback'    => 'hikeitbaby_admin_header_style',
        'admin-preview-callback' => 'hikeitbaby_admin_header_image',
    ) ) );
}
add_action( 'after_setup_theme', 'hikeitbaby_custom_header_setup' );

这将为您提供这样的屏幕：

我发现，有时如果您只是点击“跳过裁剪”并且之前已经在此处指定了一张图片，您可能会遇到网站冻结的情况。在开发站点上重新实现 svg 标头。要解决此问题，有必要删除预先存在的标题图像，保存该更改。退出定制器。然后进入并重新应用图像，单击“跳过裁剪”使其不会冻结。

由于这个问题现在已经有一年了，我希望这对其他人有用。

【讨论】：

【解决方案2】：

对于您的functions.php 文件或功能插件：

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

如果没有这个，SVG 文件将在尝试通过媒体上传器上传时被拒绝。

参考文献：-

https://css-tricks.com/snippets/wordpress/allow-svg-through-wordpress-media-uploader/

https://www.sitepoint.com/wordpress-svg/

【讨论】：

【解决方案3】：

custom-header 支持似乎是一回事（Customizer -> Header Image）和custom-logo 是另一回事。 @Gray Ayer 的解决方案很棒，但是对于通过 Customizer -> Site Identity -> Logo 设置并在 header.php 中添加 the_custom_logo(); 的徽标，您应该在函数中使用它。 php：

    add_theme_support( 'custom-logo', array(
        'height'      => 110,
        'width'       => 320,
        'flex-width'  => true,
        'flex-height' => true,
    ) );

【讨论】：