묵공님 구글 웹사이트 번역 플러그인 커스텀 https://sir.kr/g5_tip/5410
본문
며칠전 SIR에서 묵공님이 오픈하신 구글 구글 웹사이트 번역 플러그인 커스텀을
아미나 빌더에 적용중인데요.
PC버전에서는 잘적용이 되는데 모바일버전에서는 전혀 적용이 안되네요
아래는 PC버전 적용한 코드입니다.
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
include_once(THEMA_PATH.'/assets/thema.php');
?>
<div id="thema_wrapper" class="wrapper <?php echo $is_thema_layout;?> <?php echo $is_thema_font;?>">
<!-- LNB -->
<aside class="at-lnb">
<div class="at-container">
<!-- LNB Left -->
<div class="pull-left">
<ul>
<li><a href="javascript:;" id="favorite">즐겨찾기</a></li>
<li><a href="<?php echo $at_href['rss'];?>" target="_blank">RSS 구독</a></li>
<?php
$tweek = array("일", "월", "화", "수", "목", "금", "토");
?>
<li><a><?php echo date('m월 d일');?>(<?php echo $tweek[date("w")];?>)</a></li>
</ul>
</div>
<!--구글 웹사이트 번역 플러그인 [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-center: 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] -->
<!-- LNB Right -->
<div class="pull-right">
<ul>
<?php if($is_member) { // 로그인 상태 ?>
<li><a href="javascript:;" onclick="sidebar_open('sidebar-user');"><b><?php echo $member['mb_nick'];?></b></a></li>
<?php if($member['admin']) {?>
<li><a href="<?php echo G5_ADMIN_URL;?>">관리</a></li>
<?php } ?>
<?php if($member['partner']) { ?>
<li><a href="<?php echo $at_href['myshop'];?>">마이샵</a></li>
<?php } ?>
<li class="sidebarLabel"<?php echo ($member['response'] || $member['memo']) ? '' : ' style="display:none;"';?>>
<a href="javascript:;" onclick="sidebar_open('sidebar-response');">
알림 <b class="orangered sidebarCount"><?php echo $member['response'] + $member['memo'];?></b>
</a>
</li>
<?php } else { // 로그아웃 상태 ?>
<li><a href="<?php echo $at_href['login'];?>" onclick="sidebar_open('sidebar-user'); return false;">로그인</a></li>
<li><a href="<?php echo $at_href['reg'];?>">회원가입</a></li>
<li><a href="<?php echo $at_href['lost'];?>" class="win_password_lost">정보찾기 </a></li>
<?php } ?>
<?php if(IS_YC) { // 영카트 사용하면 ?>
<?php if($member['cart'] || $member['today']) { ?>
<li>
<a href="<?php echo $at_href['cart'];?>" onclick="sidebar_open('sidebar-cart'); return false;">
쇼핑 <b class="blue"><?php echo number_format($member['cart'] + $member['today']);?></b>
</a>
</li>
<?php } ?>
<li><a href="<?php echo $at_href['change'];?>"><?php echo (IS_SHOP) ? '커뮤니티' : '쇼핑몰';?></a></li>
<?php } ?>
<li><a href="<?php echo $at_href['connect'];?>">접속 <?php echo number_format($stats['now_total']); ?><?php echo ($stats['now_mb']) ? ' (<b class="orangered">'.number_format($stats['now_mb']).'</b>)' : ''; ?></a></li>
<?php if($is_member) { ?>
<li><a href="<?php echo $at_href['logout'];?>">로그아웃 </a></li>
<?php } ?>
</ul>
</div>
<div class="clearfix"></div>
</div>
</aside>
<!-- PC Header -->
<header class="pc-header">
<div class="at-container">
<!-- PC Logo -->
<div class="header-logo">
<a href="<?php echo $at_href['home'];?>">
PELLECURE
</a>
<span class="header-desc">
세상을 바꾸는 작은힘 - AMINA
</span>
</div>
<!-- PC Search -->
<div class="header-search">
<form name="tsearch" method="get" onsubmit="return tsearch_submit(this);" role="form" class="form">
<input type="hidden" name="url" value="<?php echo (IS_YC) ? $at_href['isearch'] : $at_href['search'];?>">
<div class="input-group input-group-sm">
<input type="text" name="stx" class="form-control input-sm" value="<?php echo $stx;?>">
<span class="input-group-btn">
<button type="submit" class="btn btn-sm"><i class="fa fa-search fa-lg"></i></button>
</span>
</div>
</form>
<div class="header-keyword">
<?php echo apms_widget('basic-keyword', 'basic-keyword', 'q=소개,페레쿠레,에스테틱,반영구화장'); // 키워드 ?>
</div>
</div>
<div class="clearfix"></div>
</div>
</header>
<!-- Mobile Header -->
<header class="m-header">
<div class="at-container">
<div class="header-wrap">
<div class="header-icon">
<a href="javascript:;" onclick="sidebar_open('sidebar-user');">
<i class="fa fa-user"></i>
</a>
</div>
<div class="header-logo en">
<!-- Mobile Logo -->
<a href="<?php echo $at_href['home'];?>">
<b>AMINA</b>
</a>
</div>
<div class="header-icon">
<a href="javascript:;" onclick="sidebar_open('sidebar-search');">
<i class="fa fa-search"></i>
</a>
</div>
</div>
<div class="clearfix"></div>
</div>
</header>
<!-- Menu -->
<nav class="at-menu">
<!-- PC Menu -->
<div class="pc-menu">
<!-- Menu Button & Right Icon Menu -->
<div class="at-container">
<div class="nav-right nav-rw nav-height">
<ul>
<?php if(IS_YC) { //영카트 ?>
<li class="nav-show">
<a href="<?php echo $at_href['cart'];?>" onclick="sidebar_open('sidebar-cart'); return false;"<?php echo tooltip('쇼핑');?>>
<i class="fa fa-shopping-bag"></i>
<?php if($member['cart'] || $member['today']) { ?>
<span class="label bg-green en">
<?php echo number_format($member['cart'] + $member['today']);?>
</span>
<?php } ?>
</a>
</li>
<?php } ?>
<li>
<a href="javascript:;" onclick="sidebar_open('sidebar-response');"<?php echo tooltip('알림');?>>
<i class="fa fa-bell"></i>
<span class="label bg-orangered en"<?php echo ($member['response'] || $member['memo']) ? '' : ' style="display:none;"';?>>
<span class="msgCount"><?php echo number_format($member['response'] + $member['memo']);?></span>
</span>
</a>
</li>
<li>
<a href="javascript:;" onclick="sidebar_open('sidebar-search');"<?php echo tooltip('검색');?>>
<i class="fa fa-search"></i>
</a>
</li>
<li class="menu-all-icon"<?php echo tooltip('전체메뉴');?>>
<a href="javascript:;" data-toggle="collapse" data-target="#menu-all">
<i class="fa fa-th"></i>
</a>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<?php include_once(THEMA_PATH.'/menu.php'); // 메뉴 불러오기 ?>
<div class="clearfix"></div>
<div class="nav-back"></div>
</div><!-- .pc-menu -->
<!-- PC All Menu -->
<div class="pc-menu-all">
<div id="menu-all" class="collapse">
<div class="at-container table-responsive">
<table class="table">
<tr>
<?php
$az = 0;
for ($i=1; $i < $menu_cnt; $i++) {
if(!$menu[$i]['gr_id']) continue;
// 줄나눔
if($az && $az%$is_allm == 0) {
echo '</tr><tr>'.PHP_EOL;
}
?>
<td class="<?php echo $menu[$i]['on'];?>">
<a class="menu-a" href="<?php echo $menu[$i]['href'];?>"<?php echo $menu[$i]['target'];?>>
<?php echo $menu[$i]['name'];?>
<?php if($menu[$i]['new'] == "new") { ?>
<i class="fa fa-bolt new"></i>
<?php } ?>
</a>
<?php if($menu[$i]['is_sub']) { //Is Sub Menu ?>
<div class="sub-1div">
<ul class="sub-1dul">
<?php for($j=0; $j < count($menu[$i]['sub']); $j++) { ?>
<?php if($menu[$i]['sub'][$j]['line']) { //구분라인 ?>
<li class="sub-1line"><a><?php echo $menu[$i]['sub'][$j]['line'];?></a></li>
<?php } ?>
<li class="sub-1dli <?php echo $menu[$i]['sub'][$j]['on'];?>">
<a href="<?php echo $menu[$i]['sub'][$j]['href'];?>" class="sub-1da<?php echo ($menu[$i]['sub'][$j]['is_sub']) ? ' sub-icon' : '';?>"<?php echo $menu[$i]['sub'][$j]['target'];?>>
<?php echo $menu[$i]['sub'][$j]['name'];?>
<?php if($menu[$i]['sub'][$j]['new'] == "new") { ?>
<i class="fa fa-bolt sub-1new"></i>
<?php } ?>
</a>
</li>
<?php } //for ?>
</ul>
</div>
<?php } ?>
</td>
<?php $az++; } //for ?>
</tr>
</table>
<div class="menu-all-btn">
<div class="btn-group">
<a class="btn btn-lightgray" href="<?php echo $at_href['main'];?>"><i class="fa fa-home"></i></a>
<a href="javascript:;" class="btn btn-lightgray" data-toggle="collapse" data-target="#menu-all"><i class="fa fa-times"></i></a>
</div>
</div>
</div>
</div>
</div><!-- .pc-menu-all -->
<!-- Mobile Menu -->
<div class="m-menu">
<?php include_once(THEMA_PATH.'/menu-m.php'); // 메뉴 불러오기 ?>
</div><!-- .m-menu -->
</nav><!-- .at-menu -->
<div class="clearfix"></div>
<?php if($page_title) { // 페이지 타이틀 ?>
<div class="at-title">
<div class="at-container">
<div class="page-title en">
<strong<?php echo ($bo_table) ? " class=\"cursor\" onclick=\"go_page('".G5_BBS_URL."/board.php?bo_table=".$bo_table."');\"" : "";?>>
<?php echo $page_title;?>
</strong>
</div>
<?php if($page_desc) { // 페이지 설명글 ?>
<div class="page-desc hidden-xs">
<?php echo $page_desc;?>
</div>
<?php } ?>
<div class="clearfix"></div>
</div>
</div>
<?php } ?>
<div class="at-body">
<?php if($col_name) { ?>
<div class="at-container">
<?php if($col_name == "two") { ?>
<div class="row at-row">
<div class="col-md-<?php echo $col_content;?><?php echo ($at_set['side']) ? ' pull-right' : '';?> at-col at-main">
<?php } else { ?>
<div class="at-content">
<?php } ?>
<?php } ?>
그런데 모바일 버전에서는 나오지 않아 할 수 없이아래와 같이 적용 시켜보니
<!-- Mobile Header -->
<header class="m-header">
<div class="at-container">
<div class="header-wrap">
<div class="header-icon">
<a href="javascript:;" onclick="sidebar_open('sidebar-user');">
<i class="fa fa-user"></i>
</a>
</div>
<!--구글 웹사이트 번역 플러그인 [s] -->
<br>
<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:<?php echo (G5_IS_MOBILE) ? '320px' : '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] -->
<div class="header-logo en">
<!-- Mobile Logo -->
<a href="<?php echo $at_href['home'];?>">
<b>PELLECURE</b>
</a>
</div>
<div class="header-icon">
<a href="javascript:;" onclick="sidebar_open('sidebar-search');">
<i class="fa fa-search"></i>
</a>
</div>
</div>
<div class="clearfix"></div>
</div>
</header>
국기가 나오고 해서 버튼을 터치해보니 번역이 제각각이고 한국 ->독일, 일본->중국.....
이런식으로 제멋대로 번역이 되고 PC버전에서도 제각각으로 번역이 되서 뒤죽박죽이 되네요.
맨처음에는 스크립트에서 오류인가 해서 몇번을 지웠다 적용 했다가 다시 한번 잘살펴보니 PC버전에만 적용하면 잘되고
모바일버전에 같이 위와 같이 적용하면 뒤죽박죽이 되는것을 알게 되었습니다.
이걸 어떻게 하면 될까요 ?
고수님들 도와 주세요
위코드중 첫번째에 적용하면 될거 같은데 모바일버전에 적용이 안되니 어쩔수 없이
두번째 같이 <!-- Mobile Header -->에 넣으니 서로 충돌하는거 같은데
방법을 모르겠네요.
