{"id":139533,"date":"2013-07-03T11:13:40","date_gmt":"2013-07-03T11:13:40","guid":{"rendered":"http:\/\/wpml.org\/documentazione\/guida-introduttiva\/configurazione-della-lingua\/selettore-di-lingua-personalizzato\/"},"modified":"2024-05-22T06:18:22","modified_gmt":"2024-05-22T06:18:22","slug":"selettore-di-lingua-personalizzato","status":"publish","type":"page","link":"https:\/\/wpml.org\/it\/documentazione\/guida-introduttiva\/configurazione-della-lingua\/opzioni-del-selettore-di-lingua\/selettore-di-lingua-personalizzato\/","title":{"rendered":"Selettore personalizzato delle lingue"},"content":{"rendered":"\n<p class=\"lead\">Quando sviluppi siti multilingue con WPML, potresti aver bisogno di un selettore delle lingue personalizzato. Scopri come farlo con alcuni semplici PHP e CSS.<\/p>\n\n<p>WPML ti permette di aggiungere <a href=\"https:\/\/wpml.org\/it\/documentazione\/guida-introduttiva\/configurazione-della-lingua\/opzioni-del-selettore-di-lingua\/\">selettori delle lingue<\/a> ai tuoi menu, Widget, pi\u00e8 di pagina e ai siti utilizzando l&#8217;Editor del sito (precedentemente noto come Full Site Editing) completo di opzioni di personalizzazione e bandiere personalizzate. Ma potresti aver bisogno di qualcosa di pi\u00f9 speciale per il tuo sito.<\/p>\n\n<p>In questo tutorial ti mostreremo come aggiungere un selettore flottante delle lingue. Un selettore delle lingue fluttuante ha un aspetto fantastico e rende pi\u00f9 facile per i tuoi clienti visualizzare il tuo sito nella loro lingua.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-media tb-image-frame-none aligncenter\" data-toolset-blocks-image=\"e8d3c6ca07234ec9fa3135e60e594db6\"><a href=\"https:\/\/wpml.org\/wp-content\/uploads\/2020\/08\/language-switcher-gif.gif\"><img decoding=\"async\" width=\"768\" height=\"400\" loading=\"lazy\" src=\"https:\/\/wpml.org\/wp-content\/uploads\/2020\/08\/language-switcher-gif.gif\" alt=\"\" class=\"wp-image-6779285\"\/><\/a><figcaption><div class=\"tb-image-caption\">Un sito che utilizza il selettore fluttuante delle lingue<\/div><\/figcaption><\/figure>\n<\/div>\n<p>Segui questi tre passaggi principali:<\/p>\n\n<ol class=\"wp-block-list\">\n<li>Aggiungi il codice PHP che visualizza il selettore delle lingue<\/li>\n\n\n\n<li>Crea il tuo selettore delle lingue con i CSS<\/li>\n\n\n\n<li>Aggiornare le impostazioni del selettore delle lingue<\/li>\n<\/ol>\n\n<h2 class=\"wp-block-heading\">La parte PHP<\/h2>\n\n<p>Il primo passo consiste nell&#8217;aggiungere il codice PHP responsabile del rendering del selettore delle lingue sulla tua pagina. Per questo, crea una funzione che aggiunge un contenitore <strong>div<\/strong> con il selettore delle lingue al suo interno. Possiamo utilizzare il metodo<em> <\/em><strong>wpml_add_language_selector<\/strong> per rendere il selettore delle lingue.  <\/p>\n\n<p>In questo esempio, vogliamo che il nuovo selettore delle lingue venga visualizzato nel pi\u00e8 di pagina, quindi utilizziamo la nostra nuova funzione con il gancio <strong>wp_footer<\/strong> di WordPress.<\/p>\n\n<p>Il codice PHP completo avr\u00e0 il seguente aspetto.  <\/p>\n\n                    <div class='codesnipdiv' id='53731'>\n                    <a class='language-switcher-PHP' data-titleselector='language-switcher-php' data-randspinner ='53731' data-sniphost='139533' title='Click to Expand or Minimize' id='codesnipfrontend'><img src='https:\/\/wpml.org\/wp-content\/plugins\/code-snips\/res\/img\/code_icon.png' \/>Language switcher PHP<\/a>\n                    <div id='53731_innerdiv' class='clearfix'>\n                    <pre class='brush:php;'>\/\/WPML - Add a floating language switcher to the footer\r\n add_action(&#039;wp_footer&#039;, &#039;wpml_floating_language_switcher&#039;); \r\n \r\n function wpml_floating_language_switcher() { \r\n    echo &#039;&lt;div class=&quot;wpml-floating-language-switcher&quot;&gt;&#039;;\r\n        \/\/PHP action to display the language switcher (see https:\/\/wpml.org\/documentation\/getting-started-guide\/language-setup\/language-switcher-options\/#using-php-actions)\r\n        do_action(&#039;wpml_add_language_selector&#039;);\r\n    echo &#039;&lt;\/div&gt;&#039;; \r\n}<\/pre>\n                    <script>\n                    if ('undefined' === typeof cacheObj_open) {\n                        window.cacheObj_open = {};\n                    }\n                    if (typeof SyntaxHighlighter !== 'undefined') SyntaxHighlighter.highlight();\n                    <\/script>\n                    <input type='hidden' id='53731_minimize' value='Minimize'>\n                    <input type='hidden' id='53731_cachedstartopen' value='cachedstartopen'>\n                    <\/div>\n                    <\/div>\t\t\t\n                    <script>\t\t\t\t\t\t\t\t \t\t\t\n                    cacheObj_open['53731_language-switcher-php']='<pre class=\"brush: php;\">\\\/\\\/WPML - Add a floating language switcher to the footer\\r\\n add_action(&#039;wp_footer&#039;, &#039;wpml_floating_language_switcher&#039;); \\r\\n \\r\\n function wpml_floating_language_switcher() { \\r\\n    echo &#039;&lt;div class=&quot;wpml-floating-language-switcher&quot;&gt;&#039;;\\r\\n        \\\/\\\/PHP action to display the language switcher (see https:\\\/\\\/wpml.org\\\/documentation\\\/getting-started-guide\\\/language-setup\\\/language-switcher-options\\\/#using-php-actions)\\r\\n        do_action(&#039;wpml_add_language_selector&#039;);\\r\\n    echo &#039;&lt;\\\/div&gt;&#039;; \\r\\n}<\/pre>';            \n                    <\/script>\n\n<p>Puoi copiarlo e aggiungerlo al file <strong>functions.php<\/strong> del tuo tema (child).<\/p>\n\n<h2 class=\"wp-block-heading\">La parte dello styling<\/h2>\n\n<p>Con il codice precedente, abbiamo gi\u00e0 aggiunto un nuovo selettore delle lingue nel pi\u00e8 di pagina del nostro sito web. Ora \u00e8 il momento di personalizzarlo in modo che fluttui nell&#8217;angolo in basso a destra del sito web. Puoi farlo utilizzando l&#8217;attributo CSS <strong>position: fixed<\/strong>.<\/p>\n\n<p>Utilizza i seguenti passaggi per aggiungere il codice CSS:<\/p>\n\n<ol class=\"wp-block-list\">\n<li>Vai a <strong>WPML \u2192 Lingue<\/strong>.<\/li>\n\n\n\n<li>Scorri verso il basso fino a<strong> Opzioni selettore delle lingue <\/strong>ed espandi la sezione <strong>CSS aggiuntivi <\/strong>.<\/li>\n<\/ol>\n\n<p>In alternativa, puoi aggiungere questo codice CSS andando su<strong> Aspetto \u2192 Personalizzato <\/strong>e cliccando su<strong> CSS aggiuntivo<\/strong>.<\/p>\n\n<p>L&#8217;esempio seguente aggiunge alcune personalizzazioni extra come i bordi arrotondati e il box-shadow. Ovviamente puoi personalizzarlo come vuoi.<\/p>\n\n                    <div class='codesnipdiv' id='59b21'>\n                    <a class='language-switcher-styling' data-titleselector='language-switcher-styling' data-randspinner ='59b21' data-sniphost='139533' title='Click to Expand or Minimize' id='codesnipfrontend'><img src='https:\/\/wpml.org\/wp-content\/plugins\/code-snips\/res\/img\/code_icon.png' \/>Language Switcher Styling<\/a>\n                    <div id='59b21_innerdiv' class='clearfix'>\n                    <pre class='brush:css;'>\/*Removing some default CSS from our language switcher*\/\r\n.wpml-floating-language-switcher .wpml-ls-statics-shortcode_actions {\r\n  margin-bottom: 0;\r\n}\r\n \r\n.wpml-floating-language-switcher  .wpml-ls-statics-shortcode_actions a {\r\n  background-color: transparent !important;\r\n}\r\n \r\n.wpml-floating-language-switcher .wpml-ls-legacy-list-horizontal a {\r\n  padding: 5px;\r\n}\r\n \r\n \r\n\/*Customize this if you want*\/\r\n.wpml-floating-language-switcher {\r\n  position: fixed;\r\n  bottom: 10px;\r\n  right: 10px;\r\n  background: #f8f8f8; \/*background color*\/\r\n  border: 1px solid; \/*border settings*\/\r\n  border-color: #eee; \/*color of the border*\/\r\n  padding: 0px; \/*padding of container*\/\r\n  border-radius: 6px; \/*rounded border*\/\r\n  \/*Box Shadow*\/\r\n  -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);\r\n  -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);\r\n  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);\r\n}<\/pre>\n                    <script>\n                    if ('undefined' === typeof cacheObj_open) {\n                        window.cacheObj_open = {};\n                    }\n                    if (typeof SyntaxHighlighter !== 'undefined') SyntaxHighlighter.highlight();\n                    <\/script>\n                    <input type='hidden' id='59b21_minimize' value='Minimize'>\n                    <input type='hidden' id='59b21_cachedstartopen' value='cachedstartopen'>\n                    <\/div>\n                    <\/div>\t\t\t\n                    <script>\t\t\t\t\t\t\t\t \t\t\t\n                    cacheObj_open['59b21_language-switcher-styling']='<pre class=\"brush: css;\">\\\/*Removing some default CSS from our language switcher*\\\/\\r\\n.wpml-floating-language-switcher .wpml-ls-statics-shortcode_actions {\\r\\n  margin-bottom: 0;\\r\\n}\\r\\n \\r\\n.wpml-floating-language-switcher  .wpml-ls-statics-shortcode_actions a {\\r\\n  background-color: transparent !important;\\r\\n}\\r\\n \\r\\n.wpml-floating-language-switcher .wpml-ls-legacy-list-horizontal a {\\r\\n  padding: 5px;\\r\\n}\\r\\n \\r\\n \\r\\n\\\/*Customize this if you want*\\\/\\r\\n.wpml-floating-language-switcher {\\r\\n  position: fixed;\\r\\n  bottom: 10px;\\r\\n  right: 10px;\\r\\n  background: #f8f8f8; \\\/*background color*\\\/\\r\\n  border: 1px solid; \\\/*border settings*\\\/\\r\\n  border-color: #eee; \\\/*color of the border*\\\/\\r\\n  padding: 0px; \\\/*padding of container*\\\/\\r\\n  border-radius: 6px; \\\/*rounded border*\\\/\\r\\n  \\\/*Box Shadow*\\\/\\r\\n  -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);\\r\\n  -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);\\r\\n  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);\\r\\n}<\/pre>';            \n                    <\/script>\n\n<h2 class=\"wp-block-heading\">La parte delle impostazioni<\/h2>\n\n<p>Infine, devi regolare alcune impostazioni in modo che il selettore delle lingue visualizzi solo le bandiere.<\/p>\n\n<p>Utilizza i seguenti passaggi:<\/p>\n\n<ol class=\"wp-block-list\">\n<li>Vai a <strong>WPML \u2192 Lingue<\/strong>.<\/li>\n\n\n\n<li>Scorri in basso fino a <strong>Selettori personalizzati delle lingue<\/strong> e clicca su <strong>Abilita<\/strong>.<\/li>\n\n\n\n<li>Clicca sul pulsante <strong>Personalizza<\/strong>.<\/li>\n\n\n\n<li>Per <strong>Cosa includere nel selettore delle lingue<\/strong>, seleziona <strong>Bandiera<\/strong> e deseleziona le altre opzioni.<\/li>\n\n\n\n<li>Clicca su <strong>Salva<\/strong>.<\/li>\n<\/ol>\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-media tb-image-frame-none aligncenter\" data-toolset-blocks-image=\"f9bdd36b2fe8b9672acc349bff2be10f\"><a href=\"https:\/\/wpml.org\/wp-content\/uploads\/2020\/08\/language-switcher-options-1.png\"><img decoding=\"async\" width=\"1024\" height=\"527\" loading=\"lazy\" src=\"https:\/\/wpml.org\/wp-content\/uploads\/2020\/08\/language-switcher-options-1-1024x527.png\" alt=\"Language switcher options\" class=\"wp-image-6779489\" srcset=\"https:\/\/wpml.org\/wp-content\/uploads\/2020\/08\/language-switcher-options-1-1024x527.png 1024w, https:\/\/wpml.org\/wp-content\/uploads\/2020\/08\/language-switcher-options-1-300x154.png 300w, https:\/\/wpml.org\/wp-content\/uploads\/2020\/08\/language-switcher-options-1-150x77.png 150w, https:\/\/wpml.org\/wp-content\/uploads\/2020\/08\/language-switcher-options-1-768x395.png 768w, https:\/\/wpml.org\/wp-content\/uploads\/2020\/08\/language-switcher-options-1.png 1504w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption><div class=\"tb-image-caption\">Visualizzare solo la bandiera nel selettore fluttuante delle lingue<\/div><\/figcaption><\/figure>\n<\/div>\n<p>Ecco fatto! Ora dovresti avere un bel selettore delle lingue personalizzato sul sito web:<\/p>\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-media tb-image-frame-none aligncenter\" data-toolset-blocks-image=\"354de0be796fda96feaeae7b6e1f3e13\"><a href=\"https:\/\/wpml.org\/wp-content\/uploads\/2020\/08\/horizontal-language-switcher.png\"><img decoding=\"async\" width=\"1024\" height=\"626\" loading=\"lazy\" src=\"https:\/\/wpml.org\/wp-content\/uploads\/2020\/08\/horizontal-language-switcher-1024x626.png\" alt=\"Horizontal language switcher\" class=\"wp-image-6779515\" srcset=\"https:\/\/wpml.org\/wp-content\/uploads\/2020\/08\/horizontal-language-switcher-1024x626.png 1024w, https:\/\/wpml.org\/wp-content\/uploads\/2020\/08\/horizontal-language-switcher-300x183.png 300w, https:\/\/wpml.org\/wp-content\/uploads\/2020\/08\/horizontal-language-switcher-150x92.png 150w, https:\/\/wpml.org\/wp-content\/uploads\/2020\/08\/horizontal-language-switcher-768x469.png 768w, https:\/\/wpml.org\/wp-content\/uploads\/2020\/08\/horizontal-language-switcher.png 1504w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption><div class=\"tb-image-caption\">Il selettore delle lingue sul Frontend<\/div><\/figcaption><\/figure>\n<\/div>\n<h2 class=\"wp-block-heading\">Bonus: selettore verticale fluttuante delle lingue<\/h2>\n\n<p>Potresti anche creare un selettore verticale delle lingue, come nella schermata qui sotto:<\/p>\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-media tb-image-frame-none aligncenter\" data-toolset-blocks-image=\"9406b1ca7ecb5dd9b2c55d1bd64d7156\"><a href=\"https:\/\/wpml.org\/wp-content\/uploads\/2020\/08\/vertical-language-switcher.png\"><img decoding=\"async\" width=\"1024\" height=\"626\" loading=\"lazy\" src=\"https:\/\/wpml.org\/wp-content\/uploads\/2020\/08\/vertical-language-switcher-1024x626.png\" alt=\"Vertical language switcher\" class=\"wp-image-6779537\" srcset=\"https:\/\/wpml.org\/wp-content\/uploads\/2020\/08\/vertical-language-switcher-1024x626.png 1024w, https:\/\/wpml.org\/wp-content\/uploads\/2020\/08\/vertical-language-switcher-300x183.png 300w, https:\/\/wpml.org\/wp-content\/uploads\/2020\/08\/vertical-language-switcher-150x92.png 150w, https:\/\/wpml.org\/wp-content\/uploads\/2020\/08\/vertical-language-switcher-768x469.png 768w, https:\/\/wpml.org\/wp-content\/uploads\/2020\/08\/vertical-language-switcher.png 1504w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption><div class=\"tb-image-caption\">Selettore verticale delle lingue<\/div><\/figcaption><\/figure>\n<\/div>\n<p>Per questo, basta sostituire il CSS precedente con il seguente codice:<\/p>\n\n                    <div class='codesnipdiv' id='e7df7'>\n                    <a class='vertical-language-switcher' data-titleselector='vertical-language-switcher-css' data-randspinner ='e7df7' data-sniphost='139533' title='Click to Expand or Minimize' id='codesnipfrontend'><img src='https:\/\/wpml.org\/wp-content\/plugins\/code-snips\/res\/img\/code_icon.png' \/>Vertical Language Switcher CSS<\/a>\n                    <div id='e7df7_innerdiv' class='clearfix'>\n                    <pre class='brush:css;'>\/*Removing some default CSS our language switcher*\/\r\n.wpml-floating-language-switcher .wpml-ls-statics-shortcode_actions {\r\n  margin-bottom: 0;\r\n}\r\n \r\n.wpml-floating-language-switcher  .wpml-ls-statics-shortcode_actions a {\r\n  background-color: transparent !important;\r\n}\r\n \r\n.wpml-floating-language-switcher .wpml-ls-legacy-list-horizontal a {\r\n  padding: 5px;\r\n}\r\n \r\n.wpml-floating-language-switcher .wpml-ls-item {\r\n  display: block;\r\n}\r\n \r\n\/*Customize this if you want*\/\r\n.wpml-floating-language-switcher {\r\n  position: fixed;\r\n  bottom: 20px;\r\n  right: 0px;\r\n  background: #f8f8f8; \/*background color*\/\r\n  border: 1px solid; \/*border settings*\/\r\n  border-color: #eee; \/*color of the border*\/\r\n  padding: 0px; \/*padding of container*\/\r\n  border-radius: 6px 0 0 6px; \/*rounded border*\/\r\n  \/*Box Shadow*\/\r\n  -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);\r\n  -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);\r\n  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);\r\n  z-index: 999;\r\n}<\/pre>\n                    <script>\n                    if ('undefined' === typeof cacheObj_open) {\n                        window.cacheObj_open = {};\n                    }\n                    if (typeof SyntaxHighlighter !== 'undefined') SyntaxHighlighter.highlight();\n                    <\/script>\n                    <input type='hidden' id='e7df7_minimize' value='Minimize'>\n                    <input type='hidden' id='e7df7_cachedstartopen' value='cachedstartopen'>\n                    <\/div>\n                    <\/div>\t\t\t\n                    <script>\t\t\t\t\t\t\t\t \t\t\t\n                    cacheObj_open['e7df7_vertical-language-switcher-css']='<pre class=\"brush: css;\">\\\/*Removing some default CSS our language switcher*\\\/\\r\\n.wpml-floating-language-switcher .wpml-ls-statics-shortcode_actions {\\r\\n  margin-bottom: 0;\\r\\n}\\r\\n \\r\\n.wpml-floating-language-switcher  .wpml-ls-statics-shortcode_actions a {\\r\\n  background-color: transparent !important;\\r\\n}\\r\\n \\r\\n.wpml-floating-language-switcher .wpml-ls-legacy-list-horizontal a {\\r\\n  padding: 5px;\\r\\n}\\r\\n \\r\\n.wpml-floating-language-switcher .wpml-ls-item {\\r\\n  display: block;\\r\\n}\\r\\n \\r\\n\\\/*Customize this if you want*\\\/\\r\\n.wpml-floating-language-switcher {\\r\\n  position: fixed;\\r\\n  bottom: 20px;\\r\\n  right: 0px;\\r\\n  background: #f8f8f8; \\\/*background color*\\\/\\r\\n  border: 1px solid; \\\/*border settings*\\\/\\r\\n  border-color: #eee; \\\/*color of the border*\\\/\\r\\n  padding: 0px; \\\/*padding of container*\\\/\\r\\n  border-radius: 6px 0 0 6px; \\\/*rounded border*\\\/\\r\\n  \\\/*Box Shadow*\\\/\\r\\n  -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);\\r\\n  -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);\\r\\n  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);\\r\\n  z-index: 999;\\r\\n}<\/pre>';            \n                    <\/script>\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Quando sviluppi siti multilingue con WPML, potresti aver bisogno di un selettore delle lingue personalizzato. Scopri come farlo con alcuni semplici PHP e CSS. WPML ti permette di aggiungere selettori delle lingue ai tuoi menu, Widget, pi\u00e8 di pagina e ai siti utilizzando l&#8217;Editor del sito (precedentemente noto come Full Site Editing) completo di opzioni [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1154722,"menu_order":11,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"ep_exclude_from_search":false,"footnotes":""},"related-projects-category":[],"class_list":["post-139533","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wpml.org\/it\/wp-json\/wp\/v2\/pages\/139533","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpml.org\/it\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wpml.org\/it\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wpml.org\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpml.org\/it\/wp-json\/wp\/v2\/comments?post=139533"}],"version-history":[{"count":7,"href":"https:\/\/wpml.org\/it\/wp-json\/wp\/v2\/pages\/139533\/revisions"}],"predecessor-version":[{"id":15653378,"href":"https:\/\/wpml.org\/it\/wp-json\/wp\/v2\/pages\/139533\/revisions\/15653378"}],"up":[{"embeddable":true,"href":"https:\/\/wpml.org\/it\/wp-json\/wp\/v2\/pages\/1154722"}],"wp:attachment":[{"href":"https:\/\/wpml.org\/it\/wp-json\/wp\/v2\/media?parent=139533"}],"wp:term":[{"taxonomy":"related-projects-category","embeddable":true,"href":"https:\/\/wpml.org\/it\/wp-json\/wp\/v2\/related-projects-category?post=139533"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}