css 如何使用SVG（可缩放矢量图形）作为您的徽标

Posted 2021-05-13

// https://wpsites.net/wordpress-tips/how-to-use-a-svg-scalable-vector-graphic-as-your-logo/
// METHOD 1
// Add the following PHP code to your child themes functions file and your logo.svg file to your images folder:

add_filter( 'theme_mod_header_image', 'filter_header_image', 10, 1 );
function filter_header_image( $url ) {
	
    $url = sprintf( '%s/images/logo.svg', get_stylesheet_directory_uri() ); 
		
    return $url;
}

// METHOD 2
// Add support for a custom header image in your functions file which enables you to add/remove/change your logo in the WordPress customizer. Your themes functions file may already include this code.

add_theme_support( 'custom-header', array(
	'width'           => 300,
	'height'          => 80,
	'header-selector' => '.site-title a',
	'header-text'     => false,
	'flex-height'     => true,
) );

// Then register a default header using this code:

register_default_headers( array(
    'child' => array(
	'url' => '%2$s/images/logo.svg',
	'thumbnail_url' => '%2$s/images/logo.svg',
	'description'   => __( 'SVG Logo', 'genesis' )
) ) );

// Alternatively, you could also register a default header using code like this:

register_default_headers( array(
        'svg-logo' => array(
        'url'   => get_stylesheet_directory_uri() . '/images/logo.svg',
        'thumbnail_url' => get_stylesheet_directory_uri() . '/images/logo.svg',
        'description'   => __( 'SVG Logo', 'genesis' )
)));

// The above code adds a suggested image to the customizer like you see in the following image:

/*-- Method 3 --*/

Simple CSS will also work. Add your logo.svg to your child theme’s images folder.

.header-image .site-title > a {
    background: url(images/logo.svg);
    background-repeat: no-repeat;
}