Как я могу создать языковой переключатель для веб-сайта WordPress, который также фактически меняет язык меню? - PullRequest
Новая
       5

Как я могу создать языковой переключатель для веб-сайта WordPress, который также фактически меняет язык меню?

0 голосов
/ 02 марта 2020

У меня есть веб-сайт WordPress, который я должен перевести на английский sh и испанский sh. Я создал кнопку переключения, чтобы изменить язык контента, установив каждую языковую ссылку на страницу с различным содержанием (я знаю, что это, вероятно, глупо), но я просто не могу изменить язык боковых панелей, верхнего и нижнего колонтитула. Как мне это решить? Что я могу сделать, чтобы при нажатии кнопки была переведена вся моя страница?

К сожалению, я просто не могу использовать какие-либо плагины, я должен сделать это полностью вручную.

1 Ответ

0 голосов
/ 03 марта 2020

для прямого изменения ссылки на страницу на engli sh и spani sh страницы сети используют тег <base> (см. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base)

для текстов просто добавьте / удалите noDisplay соответствующий класс

для сохранения выбора языка для каждой страницы и следующего соединения используйте LocalStorage -> https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

пример кода ( Я использую его в объекте замыкания)
это просто стартовый код, вы должны заполнить его для своего собственного приложения 

const LangChooser = (function()
{
  const cLangElm  = document.querySelectorAll('.cLang')
    ,   langList  = ['EN', 'SP']  // english  or spanish pages pages 
    ,   defLang   = 'EN'
    ,   obj_ret   = {}
    ,   MemoLang  = 'LangChoosed'  // name value in local storage
    ;
  let idxLang = langList.indexOf(defLang) 
    ;
  function LangdSet(lang)
    {
    localStorage.setItem(MemoLang, lang )
      ;      
    cLangElm.forEach(Elm=>
      {
      if (Elm.classList.contains(lang)) 
        { Elm.classList.remove('noDisplay')}
      else 
        { Elm.classList.add('noDisplay')}
      })
    }
  obj_ret.LangInit = function()
    {
    let currentLang = localStorage.getItem(MemoLang)
      ;
    if (!currentLang)
      {
      currentLang = defLang
      }
    idxLang = langList.indexOf(currentLang) 
    LangdSet(currentLang) 
    }
  obj_ret.setLang = function(lang) 
    {
    let idx = langList.indexOf(lang)
    if (idx<0)
      {
      throw `${lang} language doesn't exist here !`;
      }
    idxLang = idx;
    LangdSet(lang)
    }
  obj_ret.toogleNextLang = function()
    {
    idxLang = ++idxLang %2
    LangdSet(langList[idxLang] )
    }
  obj_ret.getLang = function()
    {
    return langList[idxLang]
    }
  return obj_ret
})()
  ;
function configurePageLang()
  {
  let currentLang = LangChooser.getLang()

  // change bage..
  direction.textContent =' base = ' + currentLang
  pageLink.href = currentLang + '/'
  }

//on load...
LangChooser.LangInit()
configurePageLang()

btLang.onclick=()=>
  {
  LangChooser.toogleNextLang()
  configurePageLang()
  }
.noDisplay { display:none }
<base id="pageLink" href="EN/">

<p id="direction"> base = EN </p>

<button id="btLang"> page EN / SP </button>

<p>
  <a href="Page2.html"> a link to page 2</a>
  <!--  go to EN/Page2.html  or SP/Page2.html   -->
</p>

<p class="cLang EN"> This is text in English </p>
<p class="cLang SP noDisplay"> Este es texto en español </p>
...