Plugin qTranslate: Allineare le bandierine orizzontalmente

lingue-mondoIn un precedente articolo abbiamo presentato il plugin qTranslate come valida soluzione per rendere multilingua un sito in WordPress, oggi completiamo la presentazione suggerendo come disporre le bandierine da verticali in orizzontale.

Infatti graficamente allineare le bandierine della scelta del linguaggio orizzontalmente è più gradevole, soluzione questa ricercata sovente dai webmaster ma purtroppo non inclusa di default nel widget del plugin.

La soluzione a questo problema consiste nell'inserire nel file style.css del template in uso alcune righe di codice che comandino la formattazione.

Se c'è installato solo qTranslate è sufficiente mettere nel file style.css del template in uso questo codice:

 

Mentre se è installato anche il plugin qTranslate slug (per le url personalizzate a secondo della lingua) è necessario aggiungere, sempre nel file style.css del proprio template, questo altro codice:

 

L'effetto cambia come da immagini qui sotto:

flag-verticale

 

flag-orrizontale

 

 

 

 

 

Se questi appunti vi sono stati utili, un commento o un "mi piace" è per noi una gradita ricompensa 🙂

 

30 comments

Skip to comment form

    • Laura on 9 novembre 2013 at 12:42
    • Reply

    Ho copiato il codice nel mio style.css ma purtroppo non ha funzionato… Ha qualche consiglio da darmi?
    Grazie!

    1. Ciao, qual’è il tuo sito?

    • silvia on 14 gennaio 2014 at 16:43
    • Reply

    Grazie mille!! funziona perfettamente! sono impazzita con quelle bandierine!! grazieeeee

    1. Sono lieto che questo post sia stato utile 🙂

    • Mario on 16 gennaio 2014 at 19:04
    • Reply

    Grazie mille: utilissimo articolo!!!

    1. Grazie per l’apprezzamento 🙂

    • Debora on 30 gennaio 2014 at 13:47
    • Reply

    Grazie mille dell’articolo!! sai se è possibile posizionare le bandierine nel nav-menu?

    1. Credo che dipenda da template a template, non saprei darti suggerimenti particolari

    • gingy80 on 19 settembre 2014 at 12:10
    • Reply

    Ciao, grazie per la dritta! Mi hai risolto un bel problemino!! 🙂

    A me però fa vedere la scritta “Italiano English ” invece della bandiera.

    Il sito lo sto facendo in locale, ma posso mandarti delle schermate se preferisci.
    Grazie!!

    1. Ciao, dovrebbe esserci una funzione nel plugin che seleziona o le scritte o le bandierine

    • gingy80 on 19 settembre 2014 at 13:01
    • Reply

    Sì, c’è. Io ho inserito questo nel header e poi la tua stringa per avere le bandiere allineate.
    Non so dove sbaglio! :S

    1. Hai provato ad attivare il modulo (il widget) nativo di qtraslate?

    • gingy80 on 19 settembre 2014 at 16:31
    • Reply

    Sì, ce l’ho nel footer, solo con le bandiere

    • Marco on 23 settembre 2014 at 15:21
    • Reply

    Salve a tutti ho un ulteriore problemino con queste benedette bandiere.

    Con il tuo codice sono riuscito a renderle orizzontali, ma quello che davvero mi serve è poterle spostare da in mezzo della mia pagina. Purtroppo non riesco a trovare il modo.

    1. Ciao, puoi provare a scrivere direttamente il codice:

      < ?php qtrans_generateLanguageSelectCode('both');?>

      che richiama la funzione del linguaggio, scrivendolo all’interno del template usato dove ti sembra meglio (spero di essermi spiegato…)

      1. Completo l’elenco del codice che richiama la selezione delle lingue:

        Codice per le sole immagini:
        < ?php echo qtrans_generateLanguageSelectCode('image'); ?>

        Codicee per il solo testo:
        < ?php echo qtrans_generateLanguageSelectCode('text'); ?>

        Codice per immagini e testo:
        < ?php echo qtrans_generateLanguageSelectCode('both'); ?>

    • Marco on 24 settembre 2014 at 13:56
    • Reply

    Se riusciresti ad essere più preciso nel dirmi dove inserire il codice php te ne sarei grato,
    oltretutto ormai che ci sono volevo chiederti se c’è modo di ingrandirle quelle bandiere!!

    Grazie mille dell’attenzione!!

    1. Ti riferisci al codice per allineare le bandierine o al codice su dove posizionarle? nel primo caso ci sono le indicazioni nell’articolo, basta aggiungere il codice in fondo al codice che si trova già all’interno dei file css; nell’altro caso, il codice che ho indicato nella risposta al commento va inserito all’interno dei file che gestiscono il tempalte, non saprei in quale posizione perchè ciascun template è diverso da un’altro.
      Non ti è possibile usare il widget di qtranslate? deve essere proprio incluso in un posto della pagina che non può essere gestita da un widget?

    2. Riguardo le dimensioni delle bandierine, dovrebbero essere quelle che trovi nel file:

      /wp-content/plugins/qtranslate/qtranslate_hooks.php

      nella riga di codice:

      $css .=”.qtrans_flag { height:12px; width:18px; display:block }\n”;

    • Texcs on 20 ottobre 2014 at 16:07
    • Reply

    Ciao io sto usando come plug-in di lingua mq traslate che dovrebbe essere l’aggiornamento di qtraslate e vorrei mettere le bandierine di scelta della lingua in orizontale alla estrema destra sulla stessa riga del menu di navigazione, mi puoi aiutare ti ringrazio in anticipo!!

    1. Ciao,
      non abbiamo ancora esaminato questo nuovo plugin, tuttavia penso che sia una questione di formattazione del tema in uso e non tanto di formattazione del plugin.

    • Francesco on 7 novembre 2014 at 12:36
    • Reply

    ciao!
    io ho inserito il codice nel file style.css del template ma non funziona 🙁
    mi potresti aiutare?

    grazie mille!

    1. Dovrebbe funzionare… hai anche installato qTranslate slug? se lo si ha installato il codice è il secondo, altrimenti il primo

    • Francesco on 7 novembre 2014 at 13:45
    • Reply

    qtranslate Slug non lho istallato, o meglio lo avevo istallato ma richiedeva la versione più aggiornata di altri plugin che non avevo.

    comunque ho istallato qtransate plus e non va questo codice 🙁

    1. Il codice è stato testato su qtranslate, non su qtranslate plus, forse vi sono delle differenze tra i due plugin.

    2. Prova con questo codice:


      /** flags horizontal */
      #flaggenmast {heigth: 12px; width: 56px; margin: 0; padding: 0; float: right; clear: right;}
      ul.ppqtrans_language_chooser { list-style: none; margin: 0; padding: 0; }
      ul.ppqtrans_language_chooser li { display: inline-block; float: left; position: relative; margin: 0; padding: 0; }
      a.ppqtrans_flag { margin-left: 10px; margin-top: 20px }

  1. Ciao, qualcuno sa come nascondere le icone delle bandiere e lasciare solo il testo “ENGLISH” e “ITALIANO”?

  2. CIAO

    NON RIESCO AH INSERIRE LE BANDIERINE NEL MIO SITO E QUESSTO MI RODE MOLTO, NON SO DOVE COPIARE IL TESTO CHE TU CONSIGLI. PUOI DARMI UNA MANO?

    GRAZIE STRAMILLE

    LUCA

    • Massimiliano on 10 ottobre 2016 at 13:51
    • Reply

    ciao in quale punto bisogna inserire il codice per fare apparire solo le bandierine in orizzontale?
    grazie

    1. nel file style.css del proprio tema si può copiare il codice in fondo, lo si può mettere ovunque purchè non interrompa altro codice, quindi per facilitare il tutto basta metterlo in fondo.

Lascia un commento

Your email address will not be published.

*

Login

Register | Lost your password?