Logotipo múltiple para tema WordPress

Question

Logotipo múltiple para tema WordPress

18 feb 2017, 17:42:33

Vistas: 16.9K

Votos: 4

Mi sitio web tiene un logotipo y este logotipo tiene 2 estados (por ejemplo, en línea y fuera de línea). Cada uno de ellos tiene una imagen que se subirá a la biblioteca multimedia. Lo que estoy tratando de lograr es que, al pasar el ratón, el estado del logotipo cambie (esto se puede hacer fácilmente). Sin embargo, para poder gestionar fácilmente la imagen del logotipo, estoy pensando en permitir que el tema admita custom_logo a través de add_theme_support. Esto funciona a medias, ya que actualmente solo puedo controlar 1 de las imágenes. ¿Hay alguna manera de permitir agregar 2 imágenes diferentes desde la personalización del tema (logotipo personalizado) y mostrarlas? Gracias de antemano.

Tree Nguyen

153

temas logotipo

Comentarios

El logotipo personalizado integrado en el tema solo admite 1 imagen, tendrías que crear nuestro propio control de personalización o simplemente agregar un segundo control de carga de imágenes debajo del personalizado y usarlo como imagen de hover.

David Lee

18 feb 2017 18:31:34

Todas las respuestas a la pregunta

Cuando utilizas add_theme_support('custom-logo'); el cargador de logos que se añade a la sección de Identidad del Sitio usará WP_Customize_Image_Control el cual no soporta múltiples imágenes, es solo para 1.

Solución más simple:

Añade un segundo control justo debajo del que viene con WordPress usando este código:

function your_theme_customizer_setting($wp_customize) {
// añade un ajuste
    $wp_customize->add_setting('your_theme_hover_logo');
// Añade un control para cargar el logo hover
    $wp_customize->add_control(new WP_Customize_Image_Control($wp_customize, 'your_theme_hover_logo', array(
        'label' => 'Subir Logo Hover',
        'section' => 'title_tagline', //esta es la sección donde está el custom-logo de WordPress
        'settings' => 'your_theme_hover_logo',
        'priority' => 8 // muéstralo justo debajo del custom-logo
    )));
}

add_action('customize_register', 'your_theme_customizer_setting');

úsalo con get_theme_mod( 'your_theme_hover_logo' ).

Solución Compleja:

Crea tu propio control personalizado que acepte 2 imágenes.

David Lee

3.94K

18 feb 2017 21:28:43

puedes tener solo una imagen como logo por defecto, pero esto se puede extender a dos mediante otro control personalizado en el personalizador de WordPress.

otra solución es usar una sola imagen con ambos estados, activo y hover, dentro de ella. y controlar la vista con la propiedad de posición css como la antigua forma de usar iconos de imagen.

por ejemplo, podrías tener una imagen con una altura de 100px. 50px contendrán el logo por defecto y otros 50px contendrán el estado hover del logo. luego, por defecto, muestra los 0px a 50px de altura de la imagen y cuando esté activo o en estado hover, cambia la posición del fondo a 50px a 100px. el contenedor de la imagen debe tener una altura de 50px con overflow:hidden

Anwer AR

1.01K

18 feb 2017 21:10:36

Comentarios

forma interesante. Nunca había pensado o conocido el css de esa manera. Lo probaré :). Gracias

Tree Nguyen

19 feb 2017 01:02:09

Se recomienda evitar molestarse con el personalizador para esto. Es más fácil encontrar, sobrescribir y cambiar un logo que es parte de un archivo CSS que intentar averiguar dónde pusiste la opción para controlarlo. La cantidad de esfuerzo requerido para codificar y probar una solución no tiene justificación.

Una ventaja adicional es que todo el código puede colocarse bajo GIT y rastrear los cambios del logo.

(Obviamente, los temas que se distribuyen necesitan dicha opción, pero en mi opinión, para un tema específico de un sitio, es una función inútil)

Mark Kaplun

23.7K

18 feb 2017 21:35:45

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

Asumo que por online y offline te refieres a los estados activos del logo. Creo que hay varias opciones que puedes utilizar. Las dos primeras opciones se pueden usar dentro de tu tema y luego simplemente cambiar el archivo de imagen dentro del directorio.

###Opción Uno (sin usar WP): Puedes utilizar un simple efecto de transparencia. Aplica un efecto transparente al logo y luego al pasar el mouse, haz que la opacidad sea completa. Ejemplo:

.logo {
    opacity: 0.75;
}

.logo:hover {
    opacity: 1;
}

// Si quieres usar SASS:

.logo {
    opacity: 0.75;

    &:hover {
        opacity: 1;
    }
}

###Opción Dos (sin usar WP): Si necesitas usar imágenes en lugar de un efecto hover, entonces puedes probar lo siguiente (nuevamente usando clases):

.logo {
    background-image: url('ruta/a/tu-imagen-off.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    width: 200px; // Hay que establecer un ancho/alto para que el fondo aparezca
    height: 200px;
}

.logo:hover {
    background-image: url('ruta/a/tu-imagen-on.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

// Si quieres usar SASS:

.logo {
    background-image: url('ruta/a/tu-imagen-off.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    width: 200px; // Hay que establecer un ancho/alto para que el fondo aparezca
    height: 200px;

    &:hover {
        background-image: url('ruta/a/tu-imagen-on.jpg');
        background-repeat: no-repeat;
        background-size: cover;
    }
}

###Opción Tres (usando el personalizador en WP): Tomado de la Documentación del Personalizador de WP

Con esta opción tienes que registrar el ajuste usando lo siguiente:

function mytheme_customize_register( $wp_customize ) {
    //Todas nuestras secciones, ajustes y controles se añadirán aquí

    $wp_customize->add_section( 'my_site_logo' , array(
        'title'      => __( 'Logo de Mi Sitio', 'mytheme' ),
        'priority'   => 30,
    ) );

    // Añadir un ajuste para la segunda imagen 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'      => __( 'Subir un logo', 'theme_name' ),
               'section'    => 'my_site_logo',
               'settings'   => 'my_site_logo_id' 
            )
        )
    );

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

El código anterior se añadiría al archivo functions.php que debería estar en el directorio de tu tema. Para recuperar la imagen harías lo siguiente:

get_theme_mod( 'my_site_logo_id' );

Y luego tendrías que romper con la convención de usar estilos en línea para mostrar las dos opciones diferentes de los logos al pasar el mouse.

Por favor revisa el codex para ver las distintas opciones que puedes tener para lograr lo que buscas.