Как стилизовать под себя GTranslate dropdown?
Использую плагин GTranslate для перевода на другие языки, проблема в том что когда я беру исходный код дропдауна сгенерированного плагином и пытаюсь подставить элементы дропдауна в свой кастомный дропдаун который сделан через nice-select библиотеку, он отказывается напрочь работать, может я что-то не так делаю.
Код дропдауна сгенерированный плагином:
<div class="gtranslate_wrapper gt_container--fgkql4" id="gt-wrapper-41379844"><!-- GTranslate: https://gtranslate.com --><select class="gt_selector notranslate" aria-label="Select Language"><option value="">Select Language</option><option value="uk|en" data-gt-href="#" selected="">English</option><option value="uk|uk" data-gt-href="#">Ukrainian</option></select><div id="google_translate_element2"><div class="skiptranslate goog-te-gadget" dir="ltr" style=""><div id=":0.targetLanguage"></div>Технологии <span style="white-space:nowrap"><a class="VIpgJd-ZVi9od-l4eHX-hSRGPd" href="https://translate.google.com" target="_blank"><img src="https://www.gstatic.com/images/branding/googlelogo/1x/googlelogo_color_42x16dp.png" width="37px" height="14px" style="padding-right: 3px" alt="Google Переводчик">Переводчик</a></span></div></div></div> |
<div class="gtranslate_wrapper gt_container--fgkql4" id="gt-wrapper-41379844"><!-- GTranslate: https://gtranslate.com --><select class="gt_selector notranslate" aria-label="Select Language"><option value="">Select Language</option><option value="uk|en" data-gt-href="#" selected="">English</option><option value="uk|uk" data-gt-href="#">Ukrainian</option></select><div id="google_translate_element2"><div class="skiptranslate goog-te-gadget" dir="ltr" style=""><div id=":0.targetLanguage"></div>Технологии <span style="white-space:nowrap"><a class="VIpgJd-ZVi9od-l4eHX-hSRGPd" href="https://translate.google.com" target="_blank"><img src="https://www.gstatic.com/images/branding/googlelogo/1x/googlelogo_color_42x16dp.png" width="37px" height="14px" style="padding-right: 3px" alt="Google Переводчик">Переводчик</a></span></div></div></div>
Вот изменённый код:
<div class="gtranslate_wrapper gt_container--fgkql4" id="gt-wrapper-41379844"> <div id="google_translate_element2"> <div class="skiptranslate goog-te-gadget" dir="ltr" style=""> <div id=":0.targetLanguage"></div>Технологии <span style="white-space:nowrap"><a class="VIpgJd-ZVi9od-l4eHX-hSRGPd" href="https://translate.google.com" target="_blank"><img src="https://www.gstatic.com/images/branding/googlelogo/1x/googlelogo_color_42x16dp.png" width="37px" height="14px" style="padding-right: 3px" alt="Google Переводчик">Переводчик</a></span> </div> </div> <select class="dropdown dropdown-lang gt_selector notranslate" aria-label="Select Language"> <option value="uk|uk" data-gt-href="#" selected="">Ukrainian</option> <option value="uk|en" data-gt-href="#">English</option> </select> </div> |
<div class="gtranslate_wrapper gt_container--fgkql4" id="gt-wrapper-41379844"> <div id="google_translate_element2"> <div class="skiptranslate goog-te-gadget" dir="ltr" style=""> <div id=":0.targetLanguage"></div>Технологии <span style="white-space:nowrap"><a class="VIpgJd-ZVi9od-l4eHX-hSRGPd" href="https://translate.google.com" target="_blank"><img src="https://www.gstatic.com/images/branding/googlelogo/1x/googlelogo_color_42x16dp.png" width="37px" height="14px" style="padding-right: 3px" alt="Google Переводчик">Переводчик</a></span> </div> </div> <select class="dropdown dropdown-lang gt_selector notranslate" aria-label="Select Language"> <option value="uk|uk" data-gt-href="#" selected="">Ukrainian</option> <option value="uk|en" data-gt-href="#">English</option> </select> </div>
Дополнительно:
Ответы:
и не будет работать. Потому что основной div GTranslate , только почему ... element2, обычно id="google_translate_element", находится внутри . В стилях и скрипте gtranslate указан путь, к примеру .site или body #google_translate_element, то если стоит припятствие типа gtranslate_wrapper то такого в настройках gtranslate нет, посему ничего отображается не будет, он не напрочь отказывается работать, а просто его вообще фактически нет. Поэтому не испытывайте судьбу а напрямую поставьте gtranslate без всяких nice-select. Если в он должен быть в хидере, в header.php вставьте <?php echo do_shortcode('[gtranslate]'); ?>. Все дела.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
GTranslate dropdown нельзя безопасно “пересобрать” простым копированием HTML в кастомный nice-select. Плагин привязывает свою логику к конкретному
select, значениям option, событиям change и скрытому элементу Google Translate. Когда Вы заменяете select на кастомную разметку, плагин больше не получает ожидаемое событие.Самый безопасный путь — оставить оригинальный
select.gt_selectorв DOM, а стилизовать его CSS-ом настолько, насколько нужно. Например:.gtranslate_wrapper .gt_selector { height: 42px; border: 1px solid #d8e1f0; border-radius: 8px; padding: 0 36px 0 12px; background: #fff; color: #1a2b4c; }
Если всё-таки нужен свой dropdown, он должен не заменять GTranslate, а управлять оригинальным select: при выборе пункта в кастомном меню меняете значение оригинального select и вызываете
change.document.querySelectorAll('.custom-lang-item').forEach((item) => { item.addEventListener('click', function () { const select = document.querySelector('.gt_selector'); if (!select) return; select.value = this.dataset.value; select.dispatchEvent(new Event('change', { bubbles: true })); }); });document.querySelectorAll('.custom-lang-item').forEach((item) => { item.addEventListener('click', function () { const select = document.querySelector('.gt_selector'); if (!select) return; select.value = this.dataset.value; select.dispatchEvent(new Event('change', { bubbles: true })); }); });
Кастомный пункт должен хранить то же значение, что и option GTranslate, например
uk|enилиuk|uk. Если значение не совпадает, перевод не запустится.Nice Select часто прячет оригинальный select и генерирует свою структуру. Для обычных форм это нормально, но для сторонних переводчиков может ломать события. Поэтому сначала проверьте: если вручную в консоли выполнить
document.querySelector('.gt_selector').value = 'uk|en'и отправить change, перевод срабатывает? Если да — кастомный dropdown можно сделать как управляющую оболочку. Если нет — плагин ждёт дополнительные действия, и лучше не заменять его UI.