如何使用SVG作为自定义标题？

时间：2015-11-03 作者：Afterlame

我想在WordPress中使用svg作为自定义标题。

我尝试了两种方法：

首先，我希望用户能够上传自己的svg作为自定义标题。所以我在函数中启用了svg上传。php：

function cc_mime_types($mimes) {
  $mimes[\'svg\'] = \'image/svg+xml\';
  return $mimes;
}
add_filter(\'upload_mimes\', \'cc_mime_types\');
但这不起作用，因为WordPress要求我先裁剪图像，然后再将其用作自定义标题图像。即使它是我在functions.php 文件

其次，由于似乎无法从简单的用户上传中获得svg作为自定义标题，因此我考虑将svg添加为默认图像。这就是我所做的：

add_theme_support( \'custom-header\', array(
    \'default-image\'   => get_stylesheet_directory_uri() . \'/images/logo.svg\',
    \'width\'           => 320,
    \'height\'          => 320,
    \'header-selector\' => \'.site-title a\',
    \'header-text\'     => false,
) );
当我在后端将标题图像设置为默认值时，它似乎可以工作。svg显示为标题图像，我可以保存它。但当我关闭自定义面板并查看前端时，会显示回退文本。没有显示我的设置…

最糟糕的是，这让我不得不将默认徽标直接硬编码到主题。这使得我无法从WordPress后端覆盖它，从而使自定义头函数完全无用。

非常感谢您对如何解决此问题的任何建议！

2 个回复
最合适的回答,由SO网友:Afterlame 整理而成

我用第二种方法解决了它。

我发现您还必须注册默认图像。因此，在将svg注册为默认标题后，它会像应该的那样显示出来！

这是我的代码：

register_default_headers( array(
    \'kami-logo\' => array(
        \'url\'   => get_stylesheet_directory_uri() . \'/images/logo.svg\',
        \'thumbnail_url\' => get_stylesheet_directory_uri() . \'/images/logo.svg\',
        \'description\'   => __( \'Kami Logo\', \'fun\' )
    )
));

add_theme_support( \'custom-header\', array(
    \'default-image\'   => get_stylesheet_directory_uri() . \'/images/logo.svg\',
    \'width\'           => 320,
    \'height\'          => 320,
    \'header-selector\' => \'.site-title a\',
    \'header-text\'     => false
) );

SO网友:Gray Ayer

设置默认图像的另一种方法是，在选择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\' );
这将为您提供如下屏幕：What your upload screen will look like

标签： custom-header   svg   小码农  

相关推荐

ADD_THEME_SUPPORT(‘CUSTOM-HEADER-UPLOADS’)；功能有什么作用？

同时向functions.php 文件中，我发现了以下内容：add_theme_support(\'custom-header-uploads\');这到底是做什么的？我删除了条目functions.php 但对网站没有什么不同。我最初认为这与上传标题图像的能力有关，但这取决于add_theme_support(\'custom-header\');在执行搜索时，我无法在Codex中看到任何有意义的信息。这是某种贬值的特征还是我忽略了什么？