구글 웹사이트 번역 플러그인 커스텀 > 그누보드5 팁자료실

그누보드5 팁자료실

구글 웹사이트 번역 플러그인 커스텀 정보

구글 웹사이트 번역 플러그인 커스텀

첨부파일

img.zip (7.2K) 684회 다운로드 2017-04-19 09:40:18

본문

어제 이걸 올리려다 아래와 같은 구글 정책이 보여 '팁'게시판에서 삭제를 했었는데 아침에 생각을 해보니 방식에 대한 정책이 아닌 '로고 명시'라는 의미로 생각되어져 다시 올려봅니다.

------------------
"플러그인을 포함하는 웹사이트에 게시되어 있는 Google 로고를 가리거나 삭제 또는 변경하지 마세요."
------------------


[ 설 치 법 ]
① 아래 주석 '[s] ~ [e]'까지를 복사해 표시하고 싶은 위치에 배치.(보통은 'head_sub.php'?)
② 첨부되어진 'img.zip'의 압축을 해제하여 './img/'폴더에 업로드.
③ 현재 페이지의 하단 '좋아요'를 가열차게 클릭!


※번역에 대한 정확도를 따진다면 '번역 API'를 사용할 이유가 없겠지만 번역기의 문장도 단어와 단어를 유추해 읽다 보면 대강의 의미 전달은 가능한 수준까지 발전하였고 계속적으로 보완되고 있다니 외국인 방문자의 편의를 위해 달아 놓으시는 것도 그리 나쁜 선택은 아닐듯 합니다.


<!--구글 웹사이트 번역 플러그인 [s] -->
<style type="text/css">
iframe.goog-te-banner-frame { display: none !important; } /* 상단 플로팅 바 옵션 가리기 */
body { position: static !important; top:0px !important; }
.goog-logo-link { display:none !important; }
.goog-te-gadget { color: transparent !important; }
</style>
<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'ko', includedLanguages: 'de,en,ja,ko,zh-CN', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false, multilanguagePage: true}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script type="text/javascript">
$(window).load(function () {

    $('.translation-icons').css('visibility', 'visible');

        $('.translation-icons a').click(function(e) {
            e.preventDefault();
            var placement = $(this).data('placement');
            var lang_num = $('.translation-icons a').length;
            var $frame = $('.goog-te-menu-frame:first');

            if (!$frame.size()) {
                alert("Error: Could not find Google translate frame.");
                return false;
            }

            var langs = $('.goog-te-menu-frame:first').contents().find('a span.text');

            if(langs.length != lang_num) placement = placement+1;

            langs.eq(placement).click();
            return false;
        });
});ko
</script>
<div id="google_translate_element" style="visibility: hidden; position: absolute; top: 0px;"></div>
<div class="translation-icons" style="visibility: hidden; position: relative; text-align: right; margin:0 auto; padding-right: 15px; width: 970px; zoom:1">
    <img src="<?php echo G5_IMG_URL?>/google_translate_logo.png" alt='구글 번역 api'/>
    <a href="#" class="ko" data-placement="0"> <img src="<?php echo G5_IMG_URL?>/KR.png" alt='한국'/></a>
    <a href="#" class="gm" data-placement="1"> <img src="<?php echo G5_IMG_URL?>/GM.png" alt='독일'/></a>
    <a href="#" class="us" data-placement="2"> <img src="<?php echo G5_IMG_URL?>/US.png" alt='미국'/></a>
    <a href="#" class="jp" data-placement="3"> <img src="<?php echo G5_IMG_URL?>/JP.png" alt='일본'/></a>
    <a href="#" class="cn" data-placement="4"> <img src="<?php echo G5_IMG_URL?>/CN.png" alt='중국'/></a> 
</div>
<!--구글 웹사이트 번역 플러그인 [e] -->




참조1: https://support.google.com/translate/answer/2534601?hl=ko
참조2: https://translate.google.com/manager/website/




p.s... 지저분한 css 인라인 부분은 각자가 알아서 깔끔하게! 굿~잡~!
추천
21

댓글 35개

작은 팁에 댓글과 '좋아요'를 주셔서 감사합니다. 앞으로도 더~더~더~더~! 많이~많이~많이~! 부탁드립니다.

<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'ko', multilanguagePage: true, gaTrack: true, gaId: '고객번호'}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

저는에는 이렇게 사용했는데,  묵공님의 팁을 적용하니 더 깔끔하게 되네요.  고유번호를 넣지 않아도 되고 ^^
묵공님, 노고에 감사 드립니다 !!

익스에서 번역을 하고나면 상단에 40px 정도가 아래로 밀고 공백이 생깁니다.
크롬에서는 전혀 밀리지않고 아주 정상입니다 ^^!

그누G4 버젼인데, 아무리 살펴봐도 관련 CSS 를 적용하는 부분은 없네요....
암튼, 고맙게 자~알 사용하겠습니다 ^^
js 적용 후 스타일 시트가 풀려버리는 것 같습니다. '<style>~</style>' 이 부분이 몇 줄이 되지 않으니 중복된 id, class 값이 없는지 확인하신 후 'html'에 표기된 inline css 부분의 속성들도 조정해보시기 바랍니다. 감사합니다.
한가지 문제점이 발견되었습니다.
번역을 눌러서 변환된후에 그것이 원본표시 기능이 작동되지 않습니다.

<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'ko', multilanguagePage: true, gaTrack: true, gaId: '고객번호'}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

의 경우에는 "원본 표시" 버튼이 추가로 떠서 원상복구가 되지만,,,,
묵공님의 팁에는 그것이 뜨지 않네요.  뭔가 추가되어야 하지 않을까 싶습니다.
좋은 자료 감사합니다. 'Error: Could not find Google translate frame.' 오류가 떠서 문의 드립니다.
사이트 접속을해서 번역을 클릭하면 위 문구가 뜨고 새로고침해서 다시 번역하면 잘작동하는데 해결 방법이 있을까요?
전체 2,426 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT