web-dev-qa-db-ja.com

テーマの複数画像ロゴ

私のウェブサイトにはロゴがあり、このロゴには2つの状態（オンラインとオフライン）があります。それぞれにメディアにアップロードされる画像があります。私が達成しようとしているのは、ホバリング時にロゴの状態が変化することです（これは非常に簡単に行うことができます）。ただし、ロゴ画像を簡単に追跡するために、テーマでadd_theme_supportを介してcustom_logoをサポートできるようにすることを考えています。これは途中で動作します。つまり、現時点ではイメージの1つしか制御できません。テーマのカスタマイズ（カスタムロゴ）から2つの異なる画像を追加して表示できるようにする方法はありますか。前もって感謝します

themeslogo
1
Tree Nguyen

私はオンラインとオフラインであなたがロゴのアクティブな状態を意味すると仮定しています。私はあなたが使うべきいくつかの選択肢があると思います。最初の2つのオプションはあなたのテーマの中で使うことができ、それから単にディレクトリの中の画像ファイルを変えることです。

オプション1（WPを使用しない）

透明度の簡単な使い方を利用できます。ロゴに透明効果を適用し、次にホバーすると、不透明度をいっぱいにします。例えば：

.logo {
    opacity: 0.75;
}

.logo:hover {
    opacity: 1;
}

// If you want to use SASS:

.logo {
    opacity: 0.75;

    &:hover {
        opacity: 1;
    }
}

オプション2（WPを使用しない）

ホバー効果の代わりに画像を使用する必要がある場合は、（これもクラスを使用して）次のことを試すことができます。

.logo {
    background-image: url('path/to/your-off-image.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    width: 200px; // Have to set a width/height in order for the background to appear
    height: 200px;
}

.logo:hover {
    background-image: url('path/to/your-on-image.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

// If you want to use SASS:

.logo {
    background-image: url('path/to/your-off-image.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    width: 200px; // Have to set a width/height in order for the background to appear
    height: 200px;

    &:hover {
        background-image: url('path/to/your-on-image.jpg');
        background-repeat: no-repeat;
        background-size: cover;
    }
}

オプション3（WPのカスタマイザを使用）：

WPカスタマイザドキュメントから取得

このオプションでは、以下を使用して設定を登録する必要があります。

function mytheme_customize_register( $wp_customize ) {
    //All our sections, settings, and controls will be added here

    $wp_customize->add_section( 'my_site_logo' , array(
        'title'      => __( 'My Site Logo', 'mytheme' ),
        'priority'   => 30,
    ) );

    $wp_customize->add_control(
        new WP_Customize_Image_Control(
            $wp_customize,
            'logo',
            array(
               'label'      => __( 'Upload a logo', 'theme_name' ),
               'section'    => 'my_site_logo',
               'settings'   => 'my_site_logo_id' 
            )
        )
    );

}
add_action( 'customize_register', 'mytheme_customize_register' );

上記のコードは、あなたのテーマディレクトリ内にあるはずのfunctions.phpファイルに追加されるでしょう。画像を取得するには、次の操作を行います。

get_theme_mod( 'my_site_logo_id' );

次に、インラインスタイルを使用してロゴの2つの異なるオプションを出力するという慣習を怠る必要があります。

あなたがしていることを達成するためにあなたが持っているかもしれない様々なオプションをチェックするためにコーデックスをチェックしてください。

2
EBennett

add_theme_support('custom-logo');を使用するとき、Site Identityセクションに追加されるロゴアップローダは複数の画像をサポートしないWP_Customize_Image_Controlを使います、それは1のためだけです。

より簡単な解決策 ：

このコードを使用して、WordPressの1つ下に2つ目のコントロールを追加します。

function your_theme_customizer_setting($wp_customize) {
// add a setting 
    $wp_customize->add_setting('your_theme_hover_logo');
// Add a control to upload the hover logo
    $wp_customize->add_control(new WP_Customize_Image_Control($wp_customize, 'your_theme_hover_logo', array(
        'label' => 'Upload Hover Logo',
        'section' => 'title_tagline', //this is the section where the custom-logo from WordPress is
        'settings' => 'your_theme_hover_logo',
        'priority' => 8 // show it just below the custom-logo
    )));
}

add_action('customize_register', 'your_theme_customizer_setting');

get_theme_mod( 'your_theme_hover_logo' )と一緒に使用してください。

複雑な解決策 ：

2つの画像を受け入れる独自のカスタムコントロールを作成します。

2
David Lee

デフォルトではロゴとして1つの画像しか持てませんが、これはwpカスタマイザ内の別のカスタムコントロールによって2つに拡張することができます。

別の解決策は、アクティブ状態とホバー状態の両方を含む単一のイメージを使用することです。そして、画像アイコンを使用する古い方法のようにcss positionプロパティでビューを制御します。

たとえば、画像の高さを100ピクセルにすることができます。 50pxはデフォルトでロゴを含み、別の50pxはホバー状態のロゴを含みます。次にデフォルトで画像の0pxから50pxの高さを表示し、アクティブまたはホバー状態のときに背景位置を50pxから100pxに変更します。イメージラッパーの高さはoverflow:hiddenで50pxでなければなりません

0
Anwer AR