Este es el foro de soporte técnico de WPML, el plugin multilingüe de WordPress.

Todas las personas pueden leerlo pero solo los clientes de WPML pueden ingresar comentarios. El equipo de WPML responde en el foro 6 días a la semana, durante 22 horas por día.

Hoy no hay asistentes de soporte disponibles en el foro Spanish. Siéntase libre de enviar sus tiques y les daremos trámite tan pronto como estemos disponibles en línea. Gracias por su comprensión.

This thread is resolved. Here is a description of the problem and solution.

Problem: Poner el selector justo debajo de mi logo y centrado.

Solution: WPML por defecto permite poner el selector en el footer, área de widgets y menús. Para colocarlo fuera de esos lugares es necesario crear un selector personalizado y modificar las plantillas del tema. Para esto es necesario algo de código.

Relevant Documentation: https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/ https://wpml.org/documentation/getting-started-guide/language-setup/custom-language-switcher/

Etiquetado: 

This topic contains 17 respuestas, has 2 mensajes.

Last updated by Otto hace 3 años, 5 meses.

Assigned support staff: Otto.

Autor Mensajes
febrero 19, 2016 a las 10:25 am #818072

javierP-3

I am trying to:
Poner el selector justo debajo de mi logo y centrado.
I would like to set the language switcher below the logo and center.

URL of (my) website where problem appears:
hidden link

I expected to see:
see pic
Instead, I got:
see pic
Steps to duplicate the issue:

[removed]

febrero 19, 2016 a las 12:46 pm #818242

Otto
Supporter

Languages: Inglés (English ) Español (Español )

Timezone: America/Argentina/Buenos_Aires (GMT-03:00)

Hola,

Gracias por contactarte con el foro de soporte!

WPML por defecto permite poner el selector en el footer, área de widgets y menús:
https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/

Para colocarlo fuera de esos lugares es necesario crear un selector personalizado y modificar las plantillas del tema. Para esto es necesario algo de código.

Aquí tienes documentación al respecto:
https://wpml.org/documentation/getting-started-guide/language-setup/custom-language-switcher/

Dime si te ha resultado útil esta información por favor.

Un saludo cordial,

Otto

febrero 22, 2016 a las 7:26 am #819553

javierP-3

Buenas Otto,

Acabo de comprar el servicio de ayuda por tiempo indefinido, para momentos como este, me gustaría añadir el selector justo debajo del logo, seguro que ya habéis trabajado con el theme "avada" y hay alguien en vuestro equipo que me podría ayudar y decirme donde colocarlo dentro del código para que aparezca en esa posición.

Ya he configurado todo y se como funciona en el footer y en el menú, pero lo que quiero, es ponerlo justo debajo del logo y en horizontal.

Ruego tu ayuda y muchísimas gracias por adelantado.
Javier.

febrero 22, 2016 a las 1:42 pm #820054

Otto
Supporter

Languages: Inglés (English ) Español (Español )

Timezone: America/Argentina/Buenos_Aires (GMT-03:00)

Hola,

Entiendo que te interesa agregar el selector de idiomas solo con las banderas y dispuestas de forma horizontal, no?

Para ello tienes que agregar lo siguiente en el archivo functions.php de tu tema. Te sugiero que utilices un child theme ya que de otro modo, al actualizar el tema perderás los cambios (hidden link).

function my_flag_only_language_switcher() {
    $languages = apply_filters( 'wpml_active_languages', NULL, 'orderby=id&order=desc' );
 
    if ( !empty( $languages ) ) {
        foreach( $languages as $l ) {
            if ( !$l['active'] ) echo ' <a href="' . $l['url'] . '">';
            echo '<img src="' . $l['country_flag_url'] . '" height="12" alt="' . $l['language_code'] . '" width="18" />';
            if ( !$l['active'] ) echo '</a> ';
        }
    }
}

Una vez hecho esto, tienes que localizar dentro de tu tema en qué lugar se agrega el logo. Seguramente sea en el archivo header.php.

Justo debajo de donde se agrega el logo tienes que agregar esto:

<div id="flags_language_selector"><?php my_flag_only_language_switcher(); ?></div >

Y finalmente, le puedes agregar los estilos que necesites aquí WPML > Idiomas > Opciones del selector de idiomas > CSS adicional

Dime si esta explicación te ha resultado útil.

Un saludo cordial,

Otto

febrero 23, 2016 a las 8:57 am #820789

javierP-3

Buenas de nuevo Otto, muchas gracias por tu ayuda y paciencia.

He realizado todo lo que me comentas, he creado un child theme y he añadido el código al archivo "functions.php", hasta ahí todo bien, el problema viene cuando añado el código del selector justo debajo del logo, ya que desaparece el logo, adjunto una imagen de como se ve antes y después de poner el código (como puedes ver el selector funciona perfectamente, pero no se visualiza el logotipo).

Adjunto este link para que puedas descargar los archivos de "header.php" y "functions.php".

hidden link

Muchas gracias de nuevo y un saludo, Javier.

febrero 23, 2016 a las 12:59 pm #821108

Otto
Supporter

Languages: Inglés (English ) Español (Español )

Timezone: America/Argentina/Buenos_Aires (GMT-03:00)

Hola,

He mirado la documentación del tema y al parecer tiene un hook que puede servirte.

Mira aquí:
hidden link

Quita lo que has agregado en header.php y agrega esto función en functions.php:

add_action( 'avada_logo_append', 'my_flag_only_language_switcher' );

Por favor dime si esto te ha servido.

Si no resulta, sería bueno que involucremos también al soporte del tema para solucionar el problema. Es posible?

Un saludo cordial,

Otto

febrero 24, 2016 a las 7:25 am #821811

javierP-3

Buenas de nuevo Otto,

Ya está colocado donde tiene que ir, gracias a tu última ayuda, sólo me queda colocarlo en horizontal, lo tengo definido así en la configuración pero sale vertical.

Adjunto una imagen de como se ve y como me gustaría que quedara, muchísimas gracias por tu ayuda de nuevo.

Un saludo, Javier.

febrero 24, 2016 a las 11:51 am #822200

Otto
Supporter

Languages: Inglés (English ) Español (Español )

Timezone: America/Argentina/Buenos_Aires (GMT-03:00)

Hola,

Me alegra que estemos progresando 🙂

Para alinear poner las banderas horizontal es necesario agregar algo de CSS aquí: WPML > Idiomas > Opciones del selector de idiomas > CSS adicional

Para poder ayudarte con eso necesitaría poder ver la página pero de momento el acceso está limitado. Solo necesito ver el front end. Podrías darme acceso para eso?

Marco la próxima respuesta como privada por si necesitas enviar credenciales.

Un saludo cordial,

Otto

febrero 24, 2016 a las 1:37 pm #822370

Otto
Supporter

Languages: Inglés (English ) Español (Español )

Timezone: America/Argentina/Buenos_Aires (GMT-03:00)

Hola,

Haz lo siguiente por favor:

-En la función que crea el selector añade una clase para las imágenes:

<img src="' . $l['country_flag_url'] . '" height="12" alt="' . $l['language_code'] . '" width="18"  class="my-flag"/>';

-Luego agrega este CSS en WPML > Idiomas > Opciones del selector de idiomas > CSS adicional:

.my-flag {
float: left;
padding: 10px 
}

Dime si funciona por favor.

Un saludo cordial,

Otto

febrero 25, 2016 a las 7:24 am #822934

javierP-3

Buenas Otto,

He añadido el css, pero no entiendo lo primero, ¿cómo y dónde añado este código?
<img src="' . $l['country_flag_url'] . '" height="12" alt="' . $l['language_code'] . '" width="18" class="my-flag"/>';

Si es el archivo functions.php, en que parte exactamente?, te pego el código que tengo de momento;

<?php

function theme_enqueue_styles() {
wp_enqueue_style( 'avada-parent-stylesheet', get_template_directory_uri() .

'/style.css' );
}

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

function avada_lang_setup() {
$lang = get_stylesheet_directory() . '/languages';
load_child_theme_textdomain( 'Avada', $lang );

}
add_action( 'after_setup_theme', 'avada_lang_setup' );

function my_flag_only_language_switcher() {

$languages = apply_filters( 'wpml_active_languages', NULL,

'orderby=id&order=desc' );

if ( !empty( $languages ) ) {

foreach( $languages as $l ) {

if ( !$l['active'] ) echo ' <a href="' . $l['url'] . '">';

echo '<img src="' . $l['country_flag_url'] . '" height="12" alt="'

. $l['language_code'] . '" width="18" />';

if ( !$l['active'] ) echo '</a> ';

}

}

}

add_action( 'avada_logo_append', 'my_flag_only_language_switcher' );

Muchas gracias de nuevo y un saludo, Javier.

febrero 25, 2016 a las 12:16 pm #823293

Otto
Supporter

Languages: Inglés (English ) Español (Español )

Timezone: America/Argentina/Buenos_Aires (GMT-03:00)

Hola,

Discúlpame por no haber sido lo suficientemente claro.

Tienes que reemplazar esta línea:

<img src="' . $l['country_flag_url'] . '" height="12" alt="' . $l['language_code'] . '" width="18"/>';

por esta:

<img src="' . $l['country_flag_url'] . '" height="12" alt="' . $l['language_code'] . '" width="18"  class="my-flag"/>';

Es igual, solo le agregamos: class="my-flag", para que sea fácil seleccionarla para aplicarle el estilo.

Dime si te ha funcionado por favor.

Un saludo cordial,

Otto

febrero 25, 2016 a las 12:48 pm #823336

javierP-3

Muchísimas gracias Otto,

Es exactamente lo que quería, lo único si es posible, que quede centrado, he intentado añadiendo al css;

margin: 0;
o
align: center;
o
float: left; align: center;
o
align content: center;

Pero ninguna ha funcionado (adjunto ejemplo de como debería de quedar).

Muchas gracias de nuevo por toda tu ayuda y un saludo, Javier.

febrero 25, 2016 a las 2:20 pm #823461

Otto
Supporter

Languages: Inglés (English ) Español (Español )

Timezone: America/Argentina/Buenos_Aires (GMT-03:00)

Hola,

Reemplaza la función por esta:

function my_flag_only_language_switcher() {
    $languages = apply_filters( 'wpml_active_languages', NULL, 'orderby=id&order=desc' );

    echo '<div id="my-lang-switcher">';
    if ( !empty( $languages ) ) {
        foreach( $languages as $l ) {
            if ( !$l['active'] ) echo ' <a href="' . $l['url'] . '">';
            echo '<img src="' . $l['country_flag_url'] . '" height="12" alt="' . $l['language_code'] . '" width="18" />';
            if ( !$l['active'] ) echo '</a> ';
        }
    }
    echo '</div>';
}

He agregado un tag "div" para agrupar a las banderas.

Intenta entonces centrar ese div agregando este código CSS:

#my-lang-switcher {
margin-left: 50%;
}

Dime por favor si ha funcionado.

Un saludo cordial,

Otto

febrero 26, 2016 a las 7:25 am #823920

javierP-3

Buenas Otto,

Perdona el mareo, parece que ya estamos cerca, ahora está alineado al centro, pero se muestra en vertical, en lugar de horizontal (adjunto foto ej).

Muchas gracias de nuevo y un saludo, Javier.

febrero 26, 2016 a las 12:13 pm #824317

Otto
Supporter

Languages: Inglés (English ) Español (Español )

Timezone: America/Argentina/Buenos_Aires (GMT-03:00)

Hola,

Lo siento, creo que el problema es que cuando te pedí que reemplaces la función olvidé el agragado que le hicimos:

<img src="' . $l['country_flag_url'] . '" height="12" alt="' . $l['language_code'] . '" width="18"  class="my-flag"/>';

O sea, le quitamos el class="my-flag". Podrías volver a agregarlo?

Si esto no lo soluciona, podrías darme acceso por FTP así lo pruebo en el sitio?

Haz un back up confiable y que puedas restaurar de tu sitio y base de datos antes de hacerlo.

Marco la próxima respuesta como privada.

Un saludo cordial,

Otto