Logo con immagini multiple per il tema

Question

Logo con immagini multiple per il tema

18 feb 2017, 17:42:33

Visualizzazioni: 16.9K

Voti: 4

Il mio sito web ha un logo e questo logo ha 2 stati (ad esempio online e offline). Ognuno di essi ha un'immagine che verrà caricata nei media. Quello che sto cercando di ottenere è che, al passaggio del mouse, lo stato del logo cambi (questo può essere fatto abbastanza facilmente). Tuttavia, per tenere facilmente traccia delle immagini del logo, sto pensando di permettere al tema di supportare custom_logo tramite add_theme_support. Questo funziona a metà, nel senso che al momento posso controllare solo 1 delle immagini. Esiste un modo per permettere l'aggiunta di 2 immagini diverse dal personalizzatore del tema (logo personalizzato) e visualizzarle? Grazie in anticipo.

Tree Nguyen

153

temi logo

Commenti

Il logo personalizzato integrato nel tema supporta solo 1 immagine, dovresti creare il nostro controllo personalizzato personalizzato o semplicemente aggiungere un secondo controllo di caricamento immagini sotto quello personalizzato e usarlo come immagine al passaggio del mouse.

David Lee

18 feb 2017 18:31:34

Tutte le risposte alla domanda

Quando utilizzi add_theme_support('custom-logo'); l'uploader del logo che viene aggiunto alla sezione Identità del Sito utilizzerà WP_Customize_Image_Control che non supporta immagini multiple, è pensato solo per 1.

Soluzione più semplice:

Aggiungi un secondo controllo appena sotto quello predefinito di WordPress con questo codice:

function your_theme_customizer_setting($wp_customize) {
    // aggiunge un'impostazione
    $wp_customize->add_setting('your_theme_hover_logo');
    // Aggiunge un controllo per caricare il logo hover
    $wp_customize->add_control(new WP_Customize_Image_Control($wp_customize, 'your_theme_hover_logo', array(
        'label' => 'Carica Logo Hover',
        'section' => 'title_tagline', //questa è la sezione dove si trova il custom-logo di WordPress
        'settings' => 'your_theme_hover_logo',
        'priority' => 8 // mostra il controllo appena sotto il custom-logo
    )));
}

add_action('customize_register', 'your_theme_customizer_setting');

Usalo con get_theme_mod( 'your_theme_hover_logo' ).

Soluzione complessa:

Crea il tuo controllo personalizzato che accetti 2 immagini.

David Lee

3.94K

18 feb 2017 21:28:43

puoi avere solo un'immagine come logo di default, ma questo può essere esteso a due tramite un altro controllo personalizzato nel customizer di WordPress.

un'altra soluzione è usare un'unica immagine che contenga sia lo stato normale che quello hover. e controllare la visualizzazione con la proprietà CSS position come si faceva con le icone immagini nel vecchio modo.

ad esempio potresti avere un'immagine con altezza di 100px. I primi 50px conterranno il logo di default e gli altri 50px conterranno lo stato hover del logo. poi di default mostri la parte dell'immagine da 0px a 50px di altezza e quando è attivo o nello stato hover cambi la posizione dello sfondo a 50px-100px. il contenitore dell'immagine dovrebbe avere un'altezza di 50px con overflow:hidden

Anwer AR

1.01K

18 feb 2017 21:10:36

Commenti

modo interessante. Non avevo mai pensato o conosciuto il css in questo modo. Lo proverò :). Grazie

Tree Nguyen

19 feb 2017 01:02:09

Consiglio di evitare di utilizzare il customizer per questo. È più semplice trovare, sovrascrivere e modificare un logo che fa parte di un file CSS piuttosto che cercare di capire dove hai inserito l'opzione per controllarlo. La quantità di sforzo richiesta per codificare e testare una soluzione non ha giustificazione. Un ulteriore vantaggio è che tutto il codice può essere inserito sotto GIT e tenere traccia delle modifiche al logo.

(Ovviamente i temi che vengono distribuiti necessitano di tale opzione, ma secondo me per un tema specifico per un sito è una funzionalità inutile)

Mark Kaplun

23.7K

18 feb 2017 21:35:45

EBennett 316 · Accepted Answer · 2017-02-18T21:03:58Z

Presumo che con online e offline tu intenda gli stati attivi del logo. Penso ci siano diverse opzioni che puoi utilizzare. Le prime due opzioni possono essere usate all'interno del tuo tema e poi semplicemente cambiando il file immagine nella directory.

###Opzione Uno (senza usare WP): Puoi utilizzare un semplice effetto di trasparenza. Applica un effetto trasparente al logo e poi al passaggio del mouse, ripristina l'opacità completa. Esempio:

.logo {
    opacity: 0.75;
}

.logo:hover {
    opacity: 1;
}

// Se vuoi usare SASS:

.logo {
    opacity: 0.75;

    &:hover {
        opacity: 1;
    }
}

###Opzione Due (senza usare WP): Se hai bisogno di usare immagini invece di un effetto hover, puoi provare quanto segue (sempre usando classi):

.logo {
    background-image: url('percorso/alla/tua-immagine-off.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    width: 200px; // Devi impostare una larghezza/altezza affinché lo sfondo appaia
    height: 200px;
}

.logo:hover {
    background-image: url('percorso/alla/tua-immagine-on.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

// Se vuoi usare SASS:

.logo {
    background-image: url('percorso/alla/tua-immagine-off.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    width: 200px; // Devi impostare una larghezza/altezza affinché lo sfondo appaia
    height: 200px;

    &:hover {
        background-image: url('percorso/alla/tua-immagine-on.jpg');
        background-repeat: no-repeat;
        background-size: cover;
    }
}

###Opzione Tre (usando il customizer in WP): Preso dalla Documentazione del WP Customizer

Con questa opzione devi registrare l'impostazione usando il seguente codice:

function mytheme_customize_register( $wp_customize ) {
    //Tutte le nostre sezioni, impostazioni e controlli saranno aggiunti qui

    $wp_customize->add_section( 'my_site_logo' , array(
        'title'      => __( 'Logo del mio sito', 'mytheme' ),
        'priority'   => 30,
    ) );

    // Aggiungi un'impostazione per la seconda immagine del logo
    $wp_customize->add_setting('second_logo', array(
        'default' => '',
        'sanitize_callback' => 'esc_url_raw',
    ));

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

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

Il codice sopra andrebbe aggiunto nel file functions.php che dovrebbe trovarsi nella directory del tuo tema. Per recuperare l'immagine fai quanto segue:

get_theme_mod( 'my_site_logo_id' );

E poi dovresti rompere con la convenzione di usare lo stile inline per mostrare le due diverse opzioni per i loghi, al passaggio del mouse.

Per favore consulta il codex per verificare le varie opzioni che potresti avere per ottenere ciò che desideri.