여러분의 블로그에 번역기가 설치되어 있나요? 없다면 어느 위치에 설치하는게 좋을까요? 얼마전에 오른쪽 사이드바에 GTranslate 번역기를 추가하는 방법을 소개해 드렸고, 오늘은 워드프레스 Onepress 테마의 블로그 제목 옆에 GTranslate 번역기를 붙이는 방법에 대해 알아보겠습니다.
워드프레스 Onepress 테마의 블로그 제목 옆에 GTranslate 번역기를 붙이는 방법
얼마전 Onepress 테마를 적용한 워드프레스 블로그의 사이드바 상단에 플러그인 없이 GTranslate 번역기를 설치하는 방법에 대해 소개한 적이 있었습니다. (아래 링크와 그림 참조)
워드프레스 블로그 Onepress 테마에 플러그인 없이 GTranslate 번역기 설치하는 방법
위 그림과 같이 한동안 사이드바에 번역기를 추가해 놓았다가 공간의 낭비가 있는 것 같아서, 지금은 아래 그림과 같이 블로그 홈페이지 상단에 있는 블로그 제목 바로 옆에 GTranslate 번역기가 추가되도록 변경해 놓은 상태입니다.
그렇게 한 이유가 있는데,
- 첫번째는 방금 말씀드린 것처럼 사이드바의 공간을 광고 삽입등 보다 효율적으로 사용하기 위해서 이고
- 두번째는 블로그 제목 옆이 빈 공간임에도 다른 용도로 활용하기 어렵기 때문입니다.
워드프레스 Onepress 테마를 사용하시는 분들 중 혹시 저와 같은 생각을 하시는 분들을 위해, 블로그 제목 바로 옆에 GTranslate 번역기를 추가하는 방법을 소개해 드리도록 하겠습니다.
블로그 제목 바로 옆에 GTranslate 번역기를 추가하는 방법은 다음 두 단계를 거치게 됩니다.
- GTranslate 사이트에서 번역기를 Popup 형태로 설정한 후 코드 복사
- <head> ~ </head> 에 필요한 자바스크립트 추가
먼저 GTranslate 번역기 홈페이지에서 코드를 복사하는 방법은 위에서 소개한 ‘워드프레스 블로그 Onepress 테마에 플러그인 없이 GTranslate 번역기를 설치하는 방법’ 포스팅 글을 참고하여 코드를 복사하되, 아래와 같이 WIDGET LOOK은 ‘Popup’으로 선택하고, FLAG SIZE는 ‘24px’로 선택합니다. (테스트를 해보니 24px가 가장 적절했습니다. 좀 더 크게 하거나 혹은 작게 하고 싶다면 다른 크기를 선택하셔도 됩니다.)
위와 같이 선택한 후, 화면을 조금 아래로 스크롤해서 POSITION을 ‘Inline’으로 선택합니다. 이렇게 몇 가지 설정을 변경하면 아래와 같이 생성된 코드에 ‘popup.js’ 가 추가 되는데, 이 코드를 복사해서 사용하면 됩니다.
<div class="gtranslate_wrapper"></div>
<script>window.gtranslateSettings = {"default_language":"ko","languages":["ko","en","es","de","fr","ja"],"wrapper_selector":".gtranslate_wrapper","flag_size":24,"alt_flags":{"en":"usa"}}</script>
<script src="https://cdn.gtranslate.net/widgets/latest/popup.js" defer></script>GTranslate 번역기의 코드 준비가 되었다면, 다음으로 `<head>` `</head>` 사이에 추가할 자바스크립트를 만들도록 하겠습니다. 프로그래밍에 대해 어느 정도 이해하고 있는 분이 아니라면, 아래 제가 제공해 드리는 코드에서 필요한 부분만 수정해서 사용하시는 것이 좋겠습니다.
아래 코드에서 수정해야 할 곳은 두 곳으로, 첫 번째는 `languages` 부분이고, 두 번째는 `flag_size`입니다. 저와 같은 languages와 flag size를 선택하셨다면 코드 수정 없이 그대로 사용하시면 되고, 다르다면 위의 코드(GTranslate 사이트에서 복사한 코드)에서 해당 부분을 복사한 후, 아래 코드에서 찾아 대체하시면 됩니다.
<script>
document.addEventListener('DOMContentLoaded', function() {
// 사이트 로고에 클래스 추가 및 공백 처리
var siteTextLogo = document.querySelector('.site-text-logo');
if (siteTextLogo) {
siteTextLogo.classList.add('gtranslate_wrapper');
var titleText = siteTextLogo.textContent;
siteTextLogo.textContent = titleText + ' ';
var wrapperDiv = document.createElement('div');
wrapperDiv.className = 'gtranslate_wrapper';
}
window.gtranslateSettings = {
"default_language":"ko",
"native_language_names":true,
"languages":["ko","en","es","ja","fr","de"],
"wrapper_selector":".gtranslate_wrapper",
"flag_size":24,
"alt_flags":{"en":"usa"}
};
var script = document.createElement('script');
script.src = 'https://cdn.gtranslate.net/widgets/latest/popup.js';
script.defer = true;
document.body.appendChild(script);
});
</script><head> </head> 사이에 위에서 만든 자바스크립트를 추가하신 후, 블로그에 들어가 보면 아래와 같이 블로그 제목 옆에 GTranslate 번역기가 추가된 것을 보실 수 있으실 겁니다.
위 화면에서 GTranslate 번역기를 클릭하면, 아래와 같이 번역될 언어를 선택할 수 있는 팝업 메뉴가 표시되는데, 여기서 원하는 언어를 선택하면 해당 언어로 블로그가 번역됩니다.
<head> </head> 사이에 자바스크립트를 추가하는 방법을 모르신다면 아래 글을 참고하세요.
워드프레스 블로그 개설을 위한 모든 것 – Head&Footer Code 플러그인
오늘은 워드프레스의 Onepress 테마에서 블로그 제목 옆에 GTranslate 번역기를 추가하는 방법을 소개해 보았습니다. 번역기를 추가함으로써 블로그 공간을 효율적으로 활용하면서도 사용자에게 인상적인 경험을 제공할 수 있습니다. 처음에는 다소 복잡해 보일 수 있지만, 실제로 해보면 생각보다 어렵지 않음을 알게 될 것입니다. 이 글이 여러분의 블로그 운영에 도움이 되었으면 합니다.