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代码，但我的主要问题是在哪里插入这段代码？我想尝试使用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头。要解决此问题，必须删除预先存在的标题图像，保存该更改。退出自定义程序。然后进入并重新应用图像，单击“跳过裁剪”使其不冻结。

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

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 -> Logo 设置并在 header.php 中添加 the_custom_logo(); 的徽标，您应该在函数.php：

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

使用SVG for Wordpress Logo

3 个答案: