4

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

3 回答 3

3

首先安装 SVG Support 插件（并出于安全原因将其限制为管理员使用）。然后你会在上传 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 标头。要解决此问题，有必要删除预先存在的标题图像，保存该更改。退出定制器。然后进入并重新应用图像，单击“跳过裁剪”以使其不冻结。

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

于 2016-05-10T01:01:18.497 回答
0

对于您的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/

于 2016-11-07T09:48:42.200 回答
0

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

    add_theme_support( 'custom-logo', array(
        'height'      => 110,
        'width'       => 320,
        'flex-width'  => true,
        'flex-height' => true,
    ) );
于 2021-07-20T08:10:36.597 回答