Logo multiplu pentru temă

Question

Logo multiplu pentru temă

18 feb. 2017, 17:42:33

Vizualizări: 16.9K

Voturi: 4

Site-ul meu are un logo și acest logo are 2 stări (de exemplu online și offline). Fiecare dintre ele are o imagine care va fi încărcată în media. Ceea ce încerc să realizez este ca, la hover, starea logo-ului să se schimbe (acest lucru poate fi făcut destul de ușor). Totuși, pentru a putea urmări cu ușurință imaginea logo-ului, mă gândesc să permit temei să suporte custom_logo prin add_theme_support. Acest lucru funcționează parțial, în sensul că în prezent pot controla doar una dintre imagini. Există vreo metodă prin care să pot permite adăugarea a 2 imagini diferite din personalizarea temei (custom logo) și să le afișez? Mulțumesc anticipat.

Tree Nguyen

153

teme logo

Comentarii

Logo-ul personalizat integrat în temă acceptă doar 1 imagine, va trebui să creați propriul control personalizat sau pur și simplu să adăugați un al doilea control pentru încărcare de imagini sub cel existent și să-l folosiți ca imagine la hover.

David Lee

18 feb. 2017 18:31:34

Toate răspunsurile la întrebare

Când folosești add_theme_support('custom-logo'); uploaderul de logo care este adăugat în secțiunea Identitatea Site-ului va folosi WP_Customize_Image_Control care nu suportă multiple imagini, este doar pentru una.

Soluție simplă:

Adaugă un al doilea control chiar sub cel oferit de WordPress cu acest cod:

function your_theme_customizer_setting($wp_customize) {
// adaugă un setting 
    $wp_customize->add_setting('your_theme_hover_logo');
// Adaugă un control pentru încărcarea hover logo
    $wp_customize->add_control(new WP_Customize_Image_Control($wp_customize, 'your_theme_hover_logo', array(
        'label' => 'Încarcă Logo pentru Hover',
        'section' => 'title_tagline', //aceasta este secțiunea unde se află custom-logo din WordPress
        'settings' => 'your_theme_hover_logo',
        'priority' => 8 // afișează-l chiar sub custom-logo
    )));
}

add_action('customize_register', 'your_theme_customizer_setting');

folosește-l cu get_theme_mod( 'your_theme_hover_logo' ).

Soluție Complexă:

Creează propriul tău control personalizat care va accepta 2 imagini.

David Lee

3.94K

18 feb. 2017 21:28:43

în mod implicit poți avea o singură imagine ca logo, dar aceasta poate fi extinsă la două printr-un alt control personalizat în personalizatorul WordPress.

o altă soluție este să folosești o singură imagine care conține atât starea normală cât și cea de hover, și să controlezi afișarea cu proprietatea CSS position, la fel ca în metoda veche de a folosi icoane din imagini.

de exemplu, ai putea avea o imagine cu înălțimea de 100px. primii 50px vor conține logo-ul implicit, iar următorii 50px vor conține starea de hover a logo-ului. apoi, în mod implicit, se va afișa porțiunea de la 0px la 50px a imaginii, iar când este activ sau în starea de hover, se va schimba poziția de fundal la 50px până la 100px. containerul imaginii ar trebui să aibă o înălțime de 50px cu overflow:hidden

Anwer AR

1.01K

18 feb. 2017 21:10:36

Comentarii

interesantă abordare. Nu m-am gândit niciodată sau nu am știut de CSS în acest fel. O să testez :). Mulțumesc

Tree Nguyen

19 feb. 2017 01:02:09

Sfatul este să nu te deranjezi cu Customizer-ul pentru asta. Este mai ușor să găsești, să suprascrii și să schimbi un logo care face parte dintr-un fișier CSS decât să încerci să-ți dai seama unde ai pus opțiunea pentru a-l controla. Cantitatea de efort necesară pentru a codifica și testa o soluție nu are justificare.

Un avantaj suplimentar este că tot codul poate fi pus sub GIT și să urmărești modificările logo-ului.

(Evident, temele care sunt distribuite au nevoie de o astfel de opțiune, dar IMHO pentru o temă specifică unui site, este o caracteristică inutilă)

Mark Kaplun

23.7K

18 feb. 2017 21:35:45

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

Presupun că prin online și offline vă referiți la stările active ale logo-ului. Cred că există mai multe opțiuni pe care le puteți utiliza. Primele două opțiuni pot fi folosite în cadrul temei dumneavoastră și apoi pur și simplu schimbați fișierul imagine în director.

###Opțiunea Unu (fără a folosi WP): Puteți utiliza o simplă transparență. Aplicați un efect transparent logo-ului și apoi la hover, faceți opacitatea completă. De exemplu:

.logo {
    opacity: 0.75;
}

.logo:hover {
    opacity: 1;
}

// Dacă doriți să folosiți SASS:

.logo {
    opacity: 0.75;

    &:hover {
        opacity: 1;
    }
}

###Opțiunea Doi (fără a folosi WP): Dacă aveți nevoie să folosiți imagini în loc de un efect hover, atunci puteți încerca următoarele (din nou folosind clase):

.logo {
    background-image: url('calea/catre/logo-off.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    width: 200px; // Trebuie să setați o lățime/înălțime pentru ca fundalul să apară
    height: 200px;
}

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

// Dacă doriți să folosiți SASS:

.logo {
    background-image: url('calea/catre/logo-off.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    width: 200px; // Trebuie să setați o lățime/înălțime pentru ca fundalul să apară
    height: 200px;

    &:hover {
        background-image: url('calea/catre/logo-on.jpg');
        background-repeat: no-repeat;
        background-size: cover;
    }
}

###Opțiunea Trei (folosind Customizer în WP): Preluat din Documentația WP Customizer

Cu această opțiune trebuie să înregistrați setarea folosind următoarele:

function mytheme_customize_register( $wp_customize ) {
    //Toate secțiunile, setările și controalele noastre vor fi adăugate aici

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

    // Adăugați o setare pentru a doua imagine 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'      => __( 'Încărcați un logo', 'theme_name' ),
               'section'    => 'my_site_logo',
               'settings'   => 'my_site_logo_id'
            )
        )
    );

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

Codul de mai sus ar fi adăugat în fișierul functions.php care ar trebui să se afle în directorul temei dumneavoastră. Pentru a prelua imaginea faceți următoarele:

get_theme_mod( 'my_site_logo_id' );

Și apoi ar trebui să încălcați convenția de a folosi stiluri inline pentru a afișa cele două opțiuni diferite pentru logo-uri, la hover.

Vă rugăm să consultați codex-ul pentru a verifica diferitele opțiuni pe care le aveți pentru a obține ceea ce doriți.