web-dev-qa-db-ja.com

カスタムヘッダーとしてSVGを使用する方法？

私はWordPressのカスタムヘッダーとしてSVGを使用したいです。

私は2つの方法を試しました：

最初

私は、ユーザーが自分自身のsvgをカスタムヘッダーとしてアップロードできるようにしたいと思います。だから私はfunctions.phpでSVGのアップロードを有効にしました：

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

WordPressでは、カスタムヘッダー画像として使用する前に画像を切り取る必要があるため、これは機能しません。それがfunctions.phpファイルで定義した正確なサイズであっても。

第二

単純なユーザーアップロードからsvgsをカスタムヘッダーとして取得する方法はないように思われるので、デフォルトイメージとして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バックエンドからそれを上書きする方法を全く残さず、カスタムヘッダ機能を完全に役に立たなくします。

これを解決する方法についての提案は大歓迎です！

custom-headersvg
2
Afterlame

私は2番目の方法でそれを解決しました。

デフォルトの画像も登録する必要があることがわかりました。そのため、デフォルトヘッダーとして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
) );
3
Afterlame

デフォルトの画像を設定する代わりに、svg画像を選択した後に2番目の画面に「トリミングをスキップする」ボタンを用意することもできます。

あなたがする必要があるのはあなたが高さと幅を定義するところで、上で定義されたその配列を取り、そしてこれを追加することです：

    '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 

0
user18275