web-dev-qa-db-fra.com

Logo à images multiples pour thème

Mon site Web a un logo et ce logo a 2 états (c'est-à-dire en ligne et hors ligne). Chacun d'entre eux a une image qui sera téléchargée sur le média. Ce que j'essaie de faire, c'est que, lorsque vous passez la souris sur l'écran, l'état du logo change (vous pouvez le faire assez facilement). Cependant, afin de garder facilement trace de l’image du logo, je pense que le thème pourra prendre en charge custom_logo via add_theme_support. Cela fonctionne à mi-chemin, ce qui signifie que je ne peux contrôler que 1 image pour le moment. Puis-je autoriser l'ajout de 2 images différentes à partir de la personnalisation du thème (logo personnalisé) et les afficher? Merci d'avance

themeslogo
1
Tree Nguyen

Je suppose qu'en ligne et hors ligne, vous entendez les états actifs du logo. Je pense qu'il y a plusieurs options que vous pouvez utiliser. Les deux premières options peuvent être utilisées dans votre thème. Il suffit ensuite de changer le fichier image dans le répertoire.

Première option (ne pas utiliser WP):

Vous pouvez utiliser une simple utilisation de la transparence. Appliquez un effet transparent au logo puis, en survol, complétez l'opacité. Par exemple:

.logo {
    opacity: 0.75;
}

.logo:hover {
    opacity: 1;
}

// If you want to use SASS:

.logo {
    opacity: 0.75;

    &:hover {
        opacity: 1;
    }
}

Deuxième option (ne pas utiliser WP):

Si vous devez utiliser des images au lieu d'un effet de survol, vous pouvez alors essayer ce qui suit (en utilisant à nouveau des classes):

.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;
    }
}

Troisième option (en utilisant le personnaliseur dans WP):

Extrait du WP Docs du Customiser

Avec cette option, vous devez enregistrer le paramètre en utilisant les éléments suivants:

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

Le code ci-dessus serait ajouté au fichier functions.php qui devrait être situé dans votre répertoire de thèmes. Pour récupérer l'image, procédez comme suit:

get_theme_mod( 'my_site_logo_id' );

Ensuite, vous devrez rompre avec la convention consistant à utiliser le style en ligne pour afficher les deux options différentes pour les logos, en survol.

S'il vous plaît consulter le codex pour vérifier sur les différentes options que vous pouvez avoir afin d'atteindre ce que vous recherchez.

2
EBennett

Lorsque vous utilisez add_theme_support('custom-logo');, le téléchargeur de logo ajouté à la section Site Identity utilisera WP_Customize_Image_Control qui ne prend pas en charge plusieurs images, mais uniquement pour 1.

Solution plus simple :

Ajoutez un deuxième contrôle juste en dessous de celui WordPress avec ce code:

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

utilisez-le avec get_theme_mod( 'your_theme_hover_logo' ).

Solution complexe :

Créez votre propre contrôle personnalisé qui acceptera 2 images.

2
David Lee

vous ne pouvez utiliser qu'une seule image comme logo par défaut, mais cela peut être étendu à deux par un autre contrôle personnalisé dans wp customizer.

une autre solution consiste à utiliser une seule image contenant à la fois des états actif et survolé. et contrôlez la vue avec la propriété de position css comme à l’ancienne méthode d’utilisation des icônes de l’image.

par exemple, vous pourriez avoir une hauteur d'image de 100 px. 50px contiendra par défaut le logo et un autre 50px contiendra l’état de survol du logo. puis, par défaut, affiche la hauteur de l’image de 0 à 50 pixels et lorsque son état actif ou en position de survol change la position de l’arrière-plan sur 50px à 100px. la hauteur du wrapper doit être 50px avec overflow:hidden

0
Anwer AR