logo标签列表

使用SVG作为WordPress标志

phpcsswordpresssvggenesis
5

我正在尝试在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,
) );

我还在functions.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%;
}
看一下这个，可能会对你有所帮助：http://blog.teamtreehouse.com/perfect-wordpress-inline-svg-workflow - ctwheels
@ctwheels 感谢您提供的链接，非常感谢。我尝试了一下，似乎出现了一个错误：“警告：除以零”。 - Tom25
除以零，你能找到它吗？在检查器中检查哪一行失败。 - ctwheels
@ctwheels 是的，就是在这个函数里插入了代码（确切地说是第63行）。 - Tom25
那么你可能需要使用一个插件。我上面分享的链接是一种将SVG插入WordPress的“hack”方法。尝试寻找一个SVG插件。https://wordpress.org/plugins/tags/svg - ctwheels
此外，您可以尝试以下 PHP 代码：function cc_mime_types( $mimes ){ $mimes['svg'] = 'image/svg+xml'; return $mimes; } add_filter( 'upload_mimes', 'cc_mime_types' ); - ctwheels
3个回答
4
首先安装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' );

这将为您提供像这样的屏幕：

enter image description here

我发现，有时如果您只是点击“跳过裁剪”，并且之前已经指定了一张图片，您可能会遇到网站冻结的情况。重新实施开发网站上的SVG标头。要解决此问题，需要删除预先存在的标头图像，保存该更改。退出自定义器。然后重新应用图像，单击“跳过裁剪”以避免冻结。

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

0
0

custom-header支持似乎是一件事情（自定义 -> 页眉图像），而custom-logo则是另一件事情。@Gray Ayer的解决方案非常好，但对于通过自定义 -> 网站标识 -> 徽标设置并在header.php中使用the_custom_logo();添加的徽标，您应该在functions.php中添加以下代码：

    add_theme_support( 'custom-logo', array(
        'height'      => 110,
        'width'       => 320,
        'flex-width'  => true,
        'flex-height' => true,
    ) );
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接