Comment utiliser un svg comme en-tête personnalisé?

Question

Je souhaite utiliser un svg comme en-tête personnalisé dans WordPress.

J'ai essayé deux manières:

Premier

Je veux que l'utilisateur puisse télécharger son propre svg en tant qu'en-tête personnalisé. J'ai donc activé les envois svg dans le fichier functions.php:

function cc_mime_types($mimes) {
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');

Mais cela ne fonctionne pas car WordPress exige que je recadre l'image avant de l'utiliser comme image d'en-tête personnalisé. Même s'il s'agit de la taille exacte que j'ai définie dans le fichier functions.php.

Seconde

Comme il semble n'y avoir aucun moyen d'obtenir svgs comme en-tête personnalisé à partir d'un simple téléchargement d'utilisateur, j'ai pensé à ajouter le svg comme image par défaut. C'est ce que j'ai fait:

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,
) );

Lorsque je mets l'image d'en-tête à la valeur par défaut dans le backend, cela semble fonctionner. Le svg est affiché comme image d'en-tête et je peux l'enregistrer. Mais lorsque je ferme le panneau de personnalisation et que je regarde l’intérieur, le texte de secours s’affiche. Aucun signe de mes réglages…

Le pire moyen

Cela me laisse coder en dur le logo par défaut directement sur le thème. Ce qui ne me laisse aucun moyen de l'écraser à partir du backend WordPress, rendant la fonction d'en-tête personnalisée complètement inutile.

Toutes les suggestions sur la façon de résoudre ceci sont très appréciées!

Answer 1

Je l'ai résolu en utilisant le deuxième moyen.

J'ai découvert que vous devez également enregistrer l'image par défaut. Ainsi, après avoir enregistré le svg comme en-tête par défaut, il s'affiche comme il se doit!

Voici mon code:

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
) );

Answer 2

Une alternative à la configuration de l'image par défaut consiste à fournir un bouton permettant de "sauter le recadrage" sur le deuxième écran après avoir sélectionné votre image svg, qui doit déjà être recadrée à la taille exacte dont vous avez besoin.

Tout ce que vous avez à faire est de prendre le tableau défini ci-dessus, où vous définissez la hauteur et la largeur, puis ajoutez ceci:

    'flex-width'             => true,
    'flex-height'            => true,

donc, pour mon propre thème personnalisé, l'extrait complet est:

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' );

qui vous fournira un écran comme celui-ci: