使用 SVG 制作 WordPress 徽标

Question

我正在尝试使用 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%;
}

Answer 1

首先安装 SVG 支持插件（并出于安全原因限制管理员使用）。然后，您在上传 SVG 后会遇到错误，其中第二步要求您裁剪图像，但您无法对 SVG 执行此操作。所以这样做：

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

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

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

所以对于我自己的自定义主题，完整的片段是：

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 header。要解决此问题，需要删除预先存在的标题图像，并保存更改。退出定制器。然后进入并重新应用图像，单击“跳过裁剪”以使其不冻结。

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