web-dev-qa-db-ja.com

デフォルトのヘッダー画像が表示されない

明確化：テーマカスタマイザの「画像を隠す」オプションを使って削除した後、私のデフォルトのヘッダー画像は再表示されません（推奨画像をクリック）。

  1. カスタムヘッダー画像のテーマサポートを追加しました

    // Add Theme Support for Custom Header Image
add_theme_support( 'custom-header', 
    array(
        'default-image' => get_template_directory_uri() . '/assets/img/hdr_earth.jpg',
        'default-text-color' => '#e2f0d6',
        'header-text' => true,
        'uploads' => true,
        'width' => 1140,
        'height' => 200,
        'wp-head-callback' => 'wpfw_style_header',
    )
);

  2. テーマカスタマイザ内で、（デフォルトの）画像は次のように表示されます。

    • 「現在のヘッダー」ボックス
    • 「おすすめ」ボックスに

  3. [画像を隠す]ボタンをクリックして現在のヘッダー画像を削除しました。

そしてここから問題が始まりました

[推奨]（デフォルト）画像をクリックしてデフォルト画像を再追加しようとすると...

  1. カスタマイザウィンドウのイメージ表示されている。
  2. しかし画像保存しないなので、画像はWebページに表示されません。

var_dump( get_header_image() );がfalseを返したので、コアの中の関数を読んだ後、私はこのif ( 'remove-header' == $url ) return false;を見ます。

だからvar_dump( get_theme_mods() )は確かに'header_image' => string 'remove-header' (length=13)を表しています。

???

...これは、保存したデフォルトの画像back andを追加した後です。

何が足りないの？

スクリプト全体（custom-header.php）

    if ( ! function_exists( 'wpfw_custom_header' ) ) {
        function wpfw_custom_header() {
            // Add theme Support for Custom Backgrounds
            add_theme_support( 'custom-background',
                array(
                    'default-color' => '#e2f0d6',
                    'default-image' => get_template_directory_uri() . '/assets/img/bgp-128x180.jpg',
                )
            );

            // Add Theme Support for Custom Header Image
            add_theme_support( 'custom-header', 
                array(
                    'default-image'             => get_template_directory_uri() . '/assets/img/hdr_earth.jpg',
                    'default-text-color'    => '#e2f0d6',
                    'header-text'                   => true,
                    'uploads'                       => true,
                    'width'               => 1140,
                    'height'              => 200,
                    'wp-head-callback'      => 'wpfw_style_header',
                )
            );
        } // end wpfw_custom_header()
    } // end if 

    // Hook into the 'after_setup_theme' action
    add_action( 'after_setup_theme', 'wpfw_custom_header', 11 );

    /**
     * ---------------------------------------------- 
     * Callback function for updating header styles
     * ----------------------------------------------
     */

    if ( ! function_exists( 'wpfw_style_header' ) ) {
        function wpfw_style_header() {
          $text_color = get_header_textcolor();
          ?>  
          <style type="text/css" id="wpfw-custom-header-styles">
              .site-title a.site-title-link {
                color: #<?php echo esc_attr( $text_color ); ?>;
              }

              <?php if ( display_header_text() != true ) : ?>
                  .site-title {
                    display: none;
              } 
              <?php endif; ?> 
          </style>
          <?php 
        } // end wpfw_style_header()
    } // end if...
theme-developmenttheme-customizer
2
sleeper

デフォルトのヘッダはregister_defaults_headersを使って登録する必要があります。

register_default_headers( array(
    'default-image' => array(
        'url'           => get_stylesheet_directory_uri() . '/assets/img/default-header.jpg',
        'thumbnail_url' => get_stylesheet_directory_uri() . '/assets/img/default-header.jpg',
        'description'   => __( 'Default Header Image', 'textdomain' )
    ),
) );

関数の詳細については、codexのエントリを参照してください - https://codex.wordpress.org/Function_Reference/register_default_headers 。

Codexは明確ではありませんが、custom_headersが正しく機能するためには実際にこの機能が必要です。

1
Mark

ヘッダ画像のURLを取得する必要があり、デフォルトを設定したところでこれを試してみてください。

    $url = has_header_image() ? get_header_image() : get_theme_support( 'custom-header', 'default-image' );
0
dewd

正直に言うと、私は次のコードを使用して私のカスタマイザで作業ヘッダー画像を持っています。

Functions.php 

/* custom header image */
$headerimage = array(
    'default-image' => '%s/images/image1.jpg',
    'width' => 1920,
    'height' => 1080,
    'flex-height' => false,
    'flex-width' => true,
    'uploads' => true,
    'random-default' => false,
    'header-text' => true,
    'default-text-color' => '',
    'wp-head-callback' => '',
    'admin-head-callback' => '',
    'admin-preview-callback' => '',
);
add_theme_support('custom-header', $headerimage);

customizer.php に何もない

ヘッダー画像を呼び出す場所： 

<header class="site-header">
    <div class="row header-home no-gutters" <?php echo 'style="background-image:url(' . get_header_image() . ');' . 'background-repeat: no-repeat;
     background-position: center; background-size: cover;min-height:100vh">'; ?>
    </div>
</header>

デフォルトの画像を登録 （明らかにこれも必要ですALSO functions.php）

register_default_headers( array(
    'headerimage' => array(
        'url'           => '%s/images/image1.jpg',
        'thumbnail_url' => '%s/images/image1.jpg',
        'description'   => __( 'headerimage', 'DesignitMultistore' )
        ),
    ) );
0
CompactCode

まだ問題を抱えている人々のために、あなたが必要とする完全なコードは以下の通りです：

functions.phpで：

register_default_headers( array(
    'default-image' => array(
        'url'           => get_template_directory_uri() . '/img/header.jpg',
        'thumbnail_url' => get_template_directory_uri() . '/img/header.jpg',
        'description'   => __( 'Default Header Image', 'textdomain' )
    ),
) );

function yourtheme_custom_header_setup() {
    $args = array(
        'default-image'      => get_template_directory_uri() . '/img/header.jpg',
        'default-text-color' => '000',
        'width'              => 1200,
        'height'             => 720,
        'flex-width'         => true,
        'flex-height'        => true,
    );
    add_theme_support( 'custom-header', $args );
}
add_action( 'after_setup_theme', 'yourtheme_custom_header_setup' );

あなたのテンプレートファイル（おそらくheader.php）の中で：

echo(has_header_image() ? get_header_image() : get_theme_support( 'custom-header', 'default-image' ));
0
Eric van Eldik