El plugin qtranslate es una herramienta para Wordpress muy interesante, pues permite que un sitio web puedas ser visualizado en varios idiomas. El funcionamiento del plugin es bastante sencillo, pues solo es necesario elegir los idiomas que queremos incorporar en nuestro sitio web y señalar un idioma principal para la página de inicio.
Una vez elegidos los idiomas y nos dirigimos para añadir una página nueva, vemos que una después de tener instalado el plugin aparecen más campos y pestañas para editar cada página con los idiomas que vamos a utilizar.
También existen opciones para incluir la url que más nos interese, esto es genial para el posicionamiento pues podemos tener un sitio web y posicionar los contenidos en distintos idiomas para aumentar las posibilidades de negocio si incluye productos o servicios a nivel nacional e internacional.
Hasta aquí todo perfecto. El problema suele ser cuando queremos poner los enlaces o las banderas en el header o la cabecera de nuestro sitio web, ya que este es el lugar más lógico donde poner dichos enlaces. Pero vamos a intentar que este no sea un problema y poder incluir las banderas en su lugar sin demasiados esfuerzos por nuestra parte.
El plugin trae un widget una vez instalado contiene las banderas o enlaces para poner en el sitio web. Esto esta bien, pero solo lo podemos poner en las zonas de widgets que soporte nuestro tema, con el problema añadido que las banderas aparecen en forma vertical en vez de horizontal que sería la forma correcta para poner en el header. Vemos a continuación como solucionar esto:
Si queremos añadir enlaces, banderas o enlaces con banderas tenemos que añadir los siguientes códigos en nuestro archivo header.php de nuestro theme, o en algún lugar habilitado para esto si nuestra plantilla lo tiene.
Este código es para añadir las banderas que hemos seleccionado en las opciones del plugin:
<?php echo qtrans_generateLanguageSelectCode('image'); ?>
Si quieres las banderas y el texto pon el siguiente:
<?php echo qtrans_generateLanguageSelectCode('both'); ?>
Para texto sin iconos el siguiente:
<?php echo qtrans_generateLanguageSelectCode('text'); ?>
Y si lo que queremos en mostrar un desplegable pon el siguiente:
<?php echo qtrans_generateLanguageSelectCode('dropdown'); ?>
A continuación lo que vamos a hacer es añadir el siguiente código a nuestro archivo style.css de nuestro tema
#qtranslate-chooser li { float:right; margin-right:20px ; } .qtrans_language_chooser .qtrans_flag { height: 40px; width: 60px; }
Con estas lineas de código se van a alinear las banderas de forma horizontal, podemos ponerla a izquierda o derecha en «float» y cambiar el margen modificando los px. En .qtrans_frag podemos cambiar el tamaño de las banderas a nuestro gusto.
Si queremos cambiar las banderas por otra imagen puedes modificarlo mediante ftp y encontrar los archivos donde están alojadas las imágenes de las banderas, es.png para idioma español y gb.png para el inglés por ejemplo. La ruta para encontrar las imágenes es la siguiente plugins > qtranslate > flags.
Ahora ya puedes mostrar las banderas o enlaces en la cabecera/header de nuestro sitio web con Worpress, y poder diseñar los iconos a nuestro gusto. Para cualquier duda como siempre puedes utilizar los comentarios.
miriam dice
Muchas gracias por el tutorial, la verdad es que es muy útil y se agradece que alguien explique cómo modificar estos aspectos. Sin embargo por alguna razón a mi no me ha funcionado. Buscaba aumentar el tamaño de las banderas y han permanecido en el tamaño original. No entiendo porqué
Pedro Mendez dice
Hola Miriam, recuerda que tienes que cambiar las imágenes de las banderas que se encuentran en los archivos del plugin. Por ejemplo la bandera es.png es la de España. Debes de cambiar esa imagen e incluir otra con el tamaño que necesitas y con el mismo nombre que la imagen anterior. Una vez hecho esto debes ir probando con el código css del artículo los px para que queden con el tamaño y el sitio que necesitas.
Hola.. esta viendo como poder colocar las banderas en el header pero no logro hacerlo?
tienes otro tutorial?
saludos
Hola. Debería de funcionar con este tutorial. La verdad es que no tengo mas, pero sigue realizando pruebas que seguro que funciona
Muy buenas, muchas gracias por el tutorial Pedro era esto lo que estaba buscando,
aunque tengo un problema con las banderas no consigo ponerlas a la derecha y en horizontal, al modificar el archivo style.css no me hace nada.. Ayuda por favor!!
Hola Carlos ¿has incluido todo el código CSS debajo del archivo style.css? si es así prueba a borrar la caché del navegador por si ese el motivo por el que no se ven los cambios
Muchas gracias Pedro se solucionó borrando la caché. Estoy tratando de ser autodidacta.. pero es un camino largo.. gracias por tu ayuda!!
De nada hombre. Me alegro de que se haya solucionado el problema. Un abrazo
Buenos días,
A mi me gustaría poner las banderas en horizontal en una zona widget.
Primero las puse en el header y salió todo bien, pero ahora queremos cambiar y ponerlas en una zona widget i me salen verticales.
Muchas gracias!
Hola Mireia. ¿Con el código CSS incluido en el archivo style.css salen verticales? Como dije en el comentario anterior borra la caché del navegador y prueba de nuevo a ver que pasa
Ui… perdona! ya lo solucioné!! muchas gracias. Ahora me salen muy juntas al menú, como añado un espacio inferior?
Muchísimas gracias!
Modificando los px a tu gusto en esta linea height: 40px
Hola Pedro, pues yo he borrado caché y no me aparecen en horizontal… alguna solucion mas? Gracias!
Hola David, si has seguido todos los pasos de forma correcta no debería de haber problemas. Ya sería necesario ver tu sitio web y ver que es lo que pasa
Hola Pedro, te hago una consulta ya que estoy haciendo mi pagina en wordpress y utilizo dicho plug in, me gustaría saber si es factible hacer al estilo de esta pagina el botón para cambiar de idioma.
http://www.vtcreative.fr
saludos
Si, puedes poner el botón que tu quieras. Solo debes cambiar la imagen de las banderas entrando en los archivos del plugin y subir la imagen que mas te guste con el mismo nombre de archivo que la bandera anterior
Hola, muy buena información. Solo una pregunta. ¿cómo puedo ajustar las banderas en cuanto a la altura con respecto a la parte superior de la web?
gracias,
Un saludo
Jesús
Hola Jesus. Puedes ir probando modificando el número «height: 40px» del código CSS hasta encontrar el sitio que deseas.
Hola
Gracias por el post, pero ¿no es más facil añadir al archivo style.css del theme (o child theme) el estilo correspondiente y no tocar header.php?
.qtrans_language_chooser li {
list-style: none;
display: inline-block;
margin: 0 10px 0 20px;
}
.qtrans_language_chooser .qtrans_flag {
height: 35px;
width: 35px;
}
Saludos
Si ese código CSS va incluido en el archivo style.css, pero en el header.php hay que incluir el código php para que aparezcan las banderas o los enlaces y poder cambiar de idiomas
Buenas.
He tratado de poner el codigo en el header (la linea unica para ver las imagenes) pero me dale un error de ‘llamada a funcion indefinida qtrans_generateLanguageSelectCode()
¿como puedo solucionarlo?. Gracias
Es posible que no tengas el código bien copiado o que no lo tengas en su lugar correspondiente
Cual es el lugar correspondiente?
Hola Pedro, me había centrado tanto en colocar las banderas donde quería que no había advertido que no linkan bien con los idiomas, además de no aparecer por orden de selección. Yo tengo Español, Inglés y Francés y en las banderas aparece Francés, Inglés y Español, además de ni ir como decía bien a las páginas, sin embargo el widget colocado en el sidebar (y que quiero quitar de ahí, ese es el objetivo) sin funciona bien además de tener el orden correcto
¿qué puede estar pasando?
Muuuuuchas gracias
Jesús
Hola Jesus. Pues para ver cual es el problema tendría que hacer unas pruebas para ver si es por el theme o por el código que no está bien insertado.
Vaya, bueno pues nada iré viendo que puede ser o buscar otra solución .
Muchas gracias Pedro
A ti Jesus. Si lo solucionas se agradece que lo compartas con nosotros. Abrazos
hola pedro por mas que inserto código y borro cache no soy capaz de poner las banderas en linea . A que altura hay que incluir el código en el style.css? Un saludo
Hola David. La altura da igual pero hay que incluirlo todo correctamente, que el código empiece y cierre con sus respectivos signos sin que falte o sobre nada
Hola Pedro. Yo tenía qtranslate y al final se me desconfiguró por una actualización de wordpress y lo he terminado quitando. He hecho tres subdominios en los tres idiomas del blog (español, catalán y aleman). Ahora querría poner las mismas banderitas que tenía en qtranslate para ir de un subdominio a otro pero no me llegan los conocimientos que tengo sobre código. Estoy seguro que deber ser algo muy parecido al código de qtranslate pero buscando por internet no doy con ello. ¿Sería mucho pedirte si tú sabes hacerlo?.
Muchas gracias y perdona por el abuso, pero veo que sabes bastante de código.
Un saludo
Hola Angel. Lo que comentas se puede hacer incluyendo las imágenes de las banderas al servidor y mas adelante insertando el código HTML en el header con los links a cada imagen. Se hace sin problemas
Muchas gracias por contestar Pedro. Sé que es abusar pero ¿tú me podrías decir qué secuencia de código debería poner y dónde?. si es mucho «follón», no te preocupes, lo entenderé. De cualquier manera muchas gracias.
Sin problemas Angel. Pues mira debes incluir por ejemplo este código en tu archivo style.css de tu theme o tu child theme
Código CSS:
y en el archivo header.php incluyes este código:
Código HTML:
El enlace del sitio web y el enlace de la imagen son un ejemplo. Debes de poner tus enlaces de los subdominios y el enlace de las imágenes de las banderas. En el primer código del CSS puedes cambiar la ubicación de las banderas modificando los px.
Hola Pedro de nuevo. Muchísimas gracias por tu generosidad. La verdad es que si tuviera que pagarte ya tendría una buena factura. 🙂
Como habrás adivinado no tengo mucho idea de todo esto. Me lo voy haciendo todo poco a poco ayudado por gente maja como tú. Esto de ser autodidacta es lento y a veces pesado.
Te voy a hacer mi última (lu juro, jeje) pregunta. He logrado poner la banderita en la cabecera. No veas la ilusión que me ha hecho verla. Pero ahora no logro que funcione el enlace y no sé qué es lo que estoy haciendo mal. Te pongo lo que yo he escrito en el código que tú me has pasado:
ca.dantaimallorca.com es el subdominio al que yo quiero ir cuando pinche en la bandera. Y la url de la imagen creo que está correcta. No logro seguir.
50ypico.com es un blog de prueba donde tengo instalado el mismo tema de dantaimallorca.com. NO quiero hacerlo en el blog directamente hasta no estar seguro de lo que estoy haciendo sea lo correcto. Perdona por el tiempo que te he quitado y otra vez muchísimas gracias.
Si ese es tu subdominio debes de poner el código de la siguiente forma:
Recuerda cambiar la url de la imagen por la de tu bandera. A ver si ahora tienes mas suerte 😉
No se ha pegado el código. Sorry. Bueno. Creo que lo dejo así y seguiré probando. De nuevo muchas gracias por toda la información que me has dado. Un cordial saludo desde Mallorca
Hola pedro, sería posible crean un desplegable pero en vez de texto con las imagenes de las banderas?
¿Como seria el código para ello.?
Muchas gracias.
Podría ser posible programando php y diseñando con CSS pero no dispongo de ningún código para esa función en concreto
Al poner las banderas en el header se me han colocado en orden inverso a como lo tenia en las preferencias, es decir las que quiero las primeras enpieza el orden de atras a alante. ¿Como puedo evitarlo?
gracias
Hola Virginia. Para arreglar ese problema tendría que ver tu caso en concreto. Te puedo recomendar mas tutoriales en ingles que es donde mas información se puede encontrar. Te dejo este con otra forma de añadir las banderas arriba http://www.themesandco.com/snippet/add-qtranslate-flags-navbar-widget/ . Espero que te sirva
Hola, me funcionó pero tengo un problema, el texto queda sobre la imagen de la bandera, si me puedes ayudar me sería de mucha utilidad, Saludos.
Te dejo una captura de mi problema.
http://pruebasdetemaish.netne.net/wp-content/uploads/2014/05/foto-qtranslate.jpg
Hola Fernando. Ve jugando con los px de los CSS hasta encontrar el ancho deseado
hola.
me gustaria poner el codigo en una sola pagina de la web. Hacer una pagina solo para esto. Que cuando ponga el sitio web primero aparezca seleccionar idioma y despues entramos en la web . gracies!
Hola Noelia. Eso se puede hacer de diferentes formas. Por ejemplo lo puedes hacer incluyendo el widget de qtranslate en una parte de la página de tu tema, siempre y cuando tu tema soporte widgets dentro de una página. Si no soporte lo puedes hacer incluyendo este plugin https://reinspirit.com/como-incluir-un-widget-dentro-de-una-pagina-o-entrada-en-wordpress/. Otra forma seria incluyendo el código php de arriba en una página en concreto utilizando el plugin https://wordpress.org/plugins/php-code-for-posts/
Hola Pedro.
He puesto las banderitas en el header pero me sale «un punto» delante de cada bandera.
Se puede sacar?
Gracias
Esta es la web: http://www.milviatges.com
Hola Jordi. No veo el punto que me comentas ¿Lo has arreglado ya?
Hola Pedro, al igual que Jordi, tengo el mismo problema, si bien aparece en la cabecera horizontal las imagenes de los paises, estos aparecen viñeteados….
Favor si me puedes ayudar… web: http://www.suitesart.cl
Saludos y gracias por tu respuesta.
Hola Mauricio. Yo los veo bien ahora mismo
Un contenido muy útil e interesante, muchas gracias Pedro.
Una pregunta, ¿sabes por casualidad si las nuevas versiones se actualizan cada cierto tiempo?
Es que tengo la última version de Wordpress (3.9.1) y las compatibilidades con este plugin qTranslate no estan comprovadas al 100%
http://www.qianqin.de/qtranslate/download/
Gracias a ti Marc. Si el plugin es compatible con las últimas versiones de WordPress y el desarrollador actualiza cada cierto tiempo
Buenas,
tengo un problemilla con el qTranslate: le he conseguido poner las banderas correctamente a mi pàgina, pero cada vez que pulsas en una de ellas te lleva a la página de inicio del idioma correspondiente, no sé si me explico; si estás, por poner un ejemplo, en el formulario de contacto en la versión castellana y pulsas la bandera inglesa, lo deseable (pienso yo) seria que te llevara al mismo formulario pero en inglés, no a la pàgina de inicio de la versión inglesa de la página.
Lo pregunto porqué lo mismo es solo cambiar una tontería y no encuentro el qué, e igual podéis darme alguna pista.
Saludos y gracias de antemano.
Hola Ricard. ¿Cual es tu sitio web?
Buenas:
Disculpa la tardanza en contestar, pero es que en el curro he pasado una racha tremenda que casi no me daba tiempo para nada más… Uf!!
Sobre tu pregunta, la cuestión es que todavía estoy desarrollando mi sitio web en local, esperando terminarlo y colgarlo definitivamente a un servidor. Preguntaba por si se conocía alguna solución genérica a esta problemática…. vamos, yo por lo menos lo veo como un problema, un problema menor, eso sí, pero si hubiera alguna solución me gustaría conocerla.
Muchas gracias y disculpas de nuevo por haber tardado tanto.
Hola Ricard. Si lo tienes en local no puedo acceder a tu web y mirar lo que ocurre. En muchas ocasiones existen problemas en local que no ocurren en line. Cuando la tengas online se puede ver si funciona
Hola Pedro,
No consigo poner las banderas en horizontal y en la parte de arriba del header donde yo quiero, ¿puedes decirme porque me pasa si en la hoja de estilos he puesto el cógido que pone en la web oficial, que es similar al tuyo de esta página?
La web en la que estoy implementando el plugin es esta:
http://autocastellmar.com/
Fíjate que las banderas no quedan como yo quiero una al lado de la otra en horizontal, además de que intento poner las banderas entre el correo y los iconos sociales del header y tampoco me deja, hay un div que las pone debajo, ya no se como ponerlas y en que me he podido equivocar, te lo agradeceria muchisimo.
Gracias de antemano, porque tu entrada del blog es muy buena y muy bien explicada, pero debo ser un cazurro que no he hecho algo bien.
Hola Marc. ¿Has puesto el código CSS de esta entrada en el archivo style.css de tu theme?
Si Pedro, tal cual! por eso no entiendo porque no se ponen en horizontal
Mira Marc. Después de inspeccionar el código con Firebug veo que no has incluido este código
Si lo añades verás las banderas en tu web de esta forma:
No lo entiendo, en la hoja de estilo style.css esta puesto ese código, no lo entiendo.
Saludos Pedro excelente tutorial, sabes que active y seguí los pasos y conseguí hacerlo el detalle esta en que se sale de cuadro, es decir se va al extremo derecho al ras de la imagen del fondo como puedo solucionar esto amigo quizá sea con un código CSS HELP PLEASSE
Si eso lo puedes modificar cambiando la posición mediante los números de los px en el código CSS
amigo gracias me sirve mucho este tutorial pregunto me sales subrrayado y con punto como puedo eliminar esto para que no salga así o códigos se deben aumentar gracias
Buenas tardes, no he podido instalar las banderas de qtranslate. Tengo un theme de themify y realmente no sé donde ubicar el código. Es decir, lo tengo que agregar en algún lugar en especial o es al final. Muchas gracias por su ayuda
Hola Luigi. Lo mejor es que te pongas en contacto con las personas de soporte de themifiy y le expliques lo que necesitas. Saludos
Hola Pedro! Tengo un problema y es que he conseguido poner las banderas y que me salgan bien y en su posición pero resulta que se añaden unos puntos antes de cada bandera y no consigo quitarlos. Alguna sugerencia? Gracias!!
Hola Beatriz. ¿Cual es tu sitio web?
Hola Pedro, genial el artículo.
Me queda una duda, con este plugin puedo cambiar también el idioma de los menús o ya me tendría que ir por código.
Gracias y un saludo.
Hola Oscar. El idioma de los menús se traduce de forma automática. No hace falta tocar nada de código ni de configuración. Saludos!
Me ha funcionado de maravilla, gracias Pedro por tan excelente aporte.
Saludos
Gracias a ti Andres por comentar
Hola, me ha funcionado, el problema es que me quedan muy pegadas al margen de arriba, he probado modificando los valores i solo puedo cambiarlos a lo ancho, otra cosa pero es que me salen solo las banderas pero no son un link, son como si solo estuviera la imagen.
Saludos y muchas gracias
Hola Alex. ¿Cual es tu sitio web?
masnautica.es
es la web que estoy intentando crear, soy nuevo por estos mundos y estoy trasteando… jejej
en la hoja de estilos tengo esto:
#qtranslate-chooser li {
float:right;
margin-right:20px ;
margin-top:20px ;
}
.qtrans_language_chooser .qtrans_flag {
height: 40px;
width: 60px;
}
Si quito el » margin-top:20px ;» si que funcionan los links, pero asi como esta no funcionan…
Gracias por contestar Pedro, un saludo.
Estoy alucinando, he cambiado el estilo de la plantilla
Layout
Layout type:
de «Boxed» a «Full witch» y ahora si que funciona, pero de la otra forma no, supongo que sera algun fallo de la plantilla o algo, me parece muy raro, da igual lo dejare asi mientras funcione… jejeje
Gracias
Estupendo Alex. Ni se te ocurra de tocar nada 😀
hola
no consigo poner la linea de codigo del header en el sitio correcto,seggun la pongo en una parte del codigo u otro da disitinto fallos pero nunca aaparecen las banderas,me puedes ayudar?
gracias por tu tiempo
Hola, estoy intentando poner en un header las banderas de qTranslate X, porque el qTranslate no me funciona … sabes qué codigo tengo que poner?
Hola Tristan. Prueba con el código de este post. A ver que pasa
Buenas Pedro, tengo el problema de que las banderitas no cambian de sitio, se siguen quedando en el lado de la izquierda y no puedo moverlas de ahí, Puedo cambiar la separación y demás pero no cambiarlas de lado. Dime como puedo solucionarlo. Gracias
Hola Alejandro. Eso es fácil. Solo tienes que cambiar el número en el css. Por ejemplo:
Donde pone 60 incluye 600 o otro número para ir probando donde queda mejor
Hola Pedro, ya que te veo tan majo te voy a hacer una pregunta más genérica.
Soy diseñador así que no tengo mucha idea de temas técnicos y ahora me han encargado una web para Europa, en tres idiomas. Ya he realizado alguna con wordpress pero sin multi-idioma, y con esto estoy superperdido.
Llevo varios días dando vueltas por foros y creo que me estoy liando más. Algunos explican como crear traducciones con WPML, otros hablan de internalización, otros de SEO, otros de child themes, dominios, éste de colocación de los controles…
Sabes decirme algún lugar donde se explique los pasos que tengo que seguir, de modo sencillo y concretando, la mejor opción y pasito a pasito de principio a fin de cómo hacer un sitio worpress internacional con cambio de idioma? Un poco de guía que tengo un lio…
Mira, por ejemplo, me gusta este theme pero no sé que tendría que hacer con ello o si me serviría (sí, compatible con WPML, pero no creo que sea tan sencillo como instalar, traducir y listo): http://themeforest.net/item/betheme-responsive-multipurpose-wordpress-theme/7758048
Muchísimas gracias de antemano! Un saludo,
Roberto
Hola Roberto. Pues es tan sencillo como buscar un tutorial de configurar el plugin que vayas a utilizar. Si es el plugin WPML por ejemplo, ellos mismos te facilitan toda la documentación para configurar el plugin correctamente
Buenas tardes,
he leído el artículo y era justo lo que estaba buscando, el problema es que no se exactamente donde tengo que copiar el código dentro del heard.php y tampoco donde tengo que copiar el otro código en el CSS
1
2
3
4
5
6
7
8
9
10
#qtranslate-chooser li {
float:right;
margin-right:20px ;
}
.qtrans_language_chooser .qtrans_flag {
height: 40px;
width: 60px;
}