블로그 구글 번역기

나의 워드프레스 블로그 Link :

lunablog.duckdns.org/2024/07/01/001/

블로그 구글 번역기

최근 들어 내가 운용하는 워드프레스 블로그

호스팅서버가 간혈적으로 자주 셧다운 이 되어서

계속 블로그 리모델링 하는 사태가 발생한다.

⠀

그리고 최근들어 내가 중요하다고 생각되는

타 블로그 나 향간에 돌아다니는

게시글이나 유튜브 영상 자료들을 번역 해야겠다는

생각이 강하게 들기 시작했다,

(주로 영어·일본어·스페인어[주로 중남미계열이 자주보여서 언급]·히브리어)

⠀

그러나 유감이게도 나는 아직까지

자력으로 할 능력도 주변여건이 되지를 않아

이 워드프레스 블로글에다 구글번역 기능을 추가했다.

아래와 같이 (구)구글번역 API와HTML코드 로 구성되어있다.

⠀

Code

<div class=“box_aside”>
    <!—->
    <!– “새 번역 링크 UI” –>
    <ul class=“translation-links”>
        <li>🇺🇸<a href=“javascript:void(0)” class=“english” data-lang=“en”><span class=“flag en”></span><span>English</span></a></li>
        <li>🇪🇸<a href=“javascript:void(0)” class=“spanish” data-lang=“es”><span class=“flag es”></span><span>Spanish(español)</span></a></li>
        <li>🇯🇵<a href=“javascript:void(0)” class=“japanese” data-lang=“ja”><span class=“flag ja”></span><span>Japanese(日本語)</span></a></li>
        <li>🇮🇱<a href=“javascript:void(0)” class=“Hebrew” data-lang=“iw”><span class=“flag iw”></span><span>Hebrew(עברית)</span></a></li>
        <li>🇦🇪<a href=“javascript:void(0)” class=“Arabic” data-lang=“ar”><span class=“flag ar”></span><span>Arabic(العربية)</span></a></li>
        <li>🇹🇼<a href=“javascript:void(0)” class=“Arabic” data-lang=“zh-TW”><span class=“flag zh-TW”></span><span>Taiwanese(中文(繁體))</span></a></li>
    </ul>
<div id=“google_translate_element” style=“display:block;”></div>
    <script src=“https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit”></script>
    <script type=“text/javascript”>
        /* 구글 번역 초기화 */
        function googleTranslateElementInit() {new google.translate.TranslateElement({pageLanguage: ‘ko’,autoDisplay: true}, ‘google_translate_element’);}
    </script>
    <script type=“text/javascript”>
        /* 새 UI 선택 클릭 이벤트가 발생하면
        감춤 처리한 구글 번역 콤보리스트에
        선택한 언어를 적용해 변경 이벤트를 발생시키는 코드  */
        document.querySelector(‘.translation-links’).addEventListener(‘click’,function(event) {
            let el = event.target;
            if(el != null){
                while(el.nodeName == ‘FONT’ || el.nodeName == ‘SPAN’){el = el.parentElement;}//data-lang 속성이 있는 태그 찾기
                const tolang = el.dataset.lang; // 변경할 언어 코드 얻기
                const gtcombo = document.querySelector(‘.goog-te-combo’);
                if (gtcombo == null) {
                    alert(“Error: Could not find Google translate Combolist.”);
                    return false;
                }
                gtcombo.value = tolang; // 변경할 언어 적용
                gtcombo.dispatchEvent(new Event(‘change’)); // 변경 이벤트 트리거
            }
            return false;
        });
    </script>
</div>