使用SVG for Wordpress徽标

Question

我正尝试在Wordpress中使用SVG文件作为站点的徽标，正如您从下面的代码中看到的那样，我已经在.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代码，但我的主要问题是在哪里插入此代码？我想尝试和使用现代以及备份。

下面是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' );

它将为您提供如下所示的屏幕：

​

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

因为这个问题已经提了一年了，我希望这对其他人有用。

Answer 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/

Answer 3

custom-header支持似乎是一回事(定制器->头图像)，而custom-logo则是另一回事。@Gray Ayer的解决方案很棒，但对于徽标，它是通过Customizer -> Site Identity ->徽标设置的，并在header.php中使用the_custom_logo();添加，您的functions.php中应该包含以下内容：

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