최근 Polylang이 설치된 다국어 사이트가 문제를 일으켜서 최신 버전으로 업데이트하는 작업을 수행했습니다. 오랫동안 업데이트하지 않은 경우, 최신 버전으로 업데이트하면 사이트에 에러가 발생할 우려가 있습니다. 먼저 클라우드웨이즈에 테스트 사이트를 만들어 작업한 후에, 자잘한 문제 몇 가지를 확인하여 수정한 후에 실 사이트에서 업데이트를 단행했습니다.
업데이트 후에 클라이언트께서 홈페이지를 방문할 경우 모든 사용자를 영문 홈페이지로 리디렉션시켜 줄 것을 요구하여 자바스크립트로 원하는 대로 구현했습니다. 하지만 브라우저 언어를 체크하지 않고 모든 사용자를 무조건 특정 언어 사이트(예: 영어 사이트 혹은 한국어 사이트)로 리디렉션하는 것은 그다지 좋은 아이디어 같지는 않습니다.
워드프레스 다국어 사이트 리디렉션 (feat. 자바스크립트)
WPML의 경우 자체적으로 브라우저 언어 감지 기능이 제공됩니다. Polylang의 경우 살펴보니 Polylang – Country Detection이라는 별도의 플러그인을 사용하면 브라우저 언어를 감지하여 적절한 언어 페이지로 리디렉션시켜 주는 것 같습니다.
다만, 워드프레스 포럼 글을 보니 Polylang 브라우저 언어 감지는 전면 페이지가 캐싱되지 않는 경우에만 작동한다고 합니다. 어떤 사용자는 사이트 전체에서 캐시 플러그인을 비활성화하니 작동한다고 하네요.
Polylang browser language detection redirects visitors to the correct language of frontpage by looking at language preference of browser. This only works if the frontpage is not cached.
캐시 플러그인이 설치된 경우 Polylang의 브라우저 언어 감지 기능이 제대로 작동하는지 체크해보시기 바랍니다.
이전 글에서 멀티사이트로 만든 다국어 사이트에서 언어 리디렉션을 설정하는 코드를 소개한 적이 있습니다.
간단하게 한국어 버전과 영어 버전, 두 가지만 있고, 전면 페이지(홈페이지)를 방문했을 때 모든 사용자를 영문 사이트로 리디렉션하고 싶은 경우 다음과 같은 자바스크립트 코드를 헤더 부분에 추가할 수 있습니다.
<script>
function setCookie(name, value) {
document.cookie = name + "=" + (value || "") + "; path=/";
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
(function() {
var currentURL = window.location.href;
var homePageURL = 'https://example.com/';
if (currentURL === homePageURL) {
// Check if the user has visited the homepage before
var visited = getCookie('visited');
if (visited === null) {
// If the user has not visited before, redirect to the English version
window.location.href = 'https://example.com/eng/';
setCookie('visited', 'true');
} else {
// If the user has visited before, show the current page (https://example.com/)
}
}
})();
</script>브라우저 언어가 한국어인 경우에는 그대로 두고, 브라우저 언어가 한국어가 아닌 경우에만 전면 페이지에서 리디렉션이 발생하도록 하려면 다음과 같은 코드를 시도해볼 수 있습니다.
<script>
function setCookie(name, value) {
document.cookie = name + "=" + (value || "") + "; path=/";
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
(function() {
var currentURL = window.location.href;
var homePageURL = 'https://example.com/';
if (currentURL === homePageURL) {
// Check if the user has visited the homepage before
var visited = getCookie('visited');
if (visited === null) {
var language = navigator.language || navigator.userLanguage;
var isKorean = language.slice(0, 2).toLowerCase() === 'ko';
if (!isKorean) {
// If the user has not visited before and the browser language is not Korean, redirect to the English version
window.location.href = 'https://example.com/eng/';
}
setCookie('visited', 'true');
} else {
// If the user has visited before, show the current page (https://example.com/)
}
}
})();
</script>조금 더 정교하게, 첫 방문 페이지가 전면 페이지일 때에만 리디렉션이 발생하도록 하려면 다음과 같은 코드를 시도할 수 있습니다. (만약 다른 페이지를 방문한 다음에 전면 페이지로 이동할 때에는 리디렉션이 발생하지 않음.)
<script>
function setCookie(name, value) {
document.cookie = name + "=" + (value || "") + "; path=/";
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
(function() {
var currentURL = window.location.href;
var homePageURL = 'https://example.com/';
var referrer = document.referrer;
var isExternalReferrer = !referrer.startsWith(homePageURL);
if (currentURL === homePageURL && isExternalReferrer) {
// Check if the user has visited the homepage before
var visited = getCookie('visited');
if (visited === null) {
var language = navigator.language || navigator.userLanguage;
var isKorean = language.slice(0, 2).toLowerCase() === 'ko';
if (!isKorean) {
// If the user has not visited before and the browser language is not Korean, redirect to the English version
window.location.href = 'https://example.com/eng/';
}
setCookie('visited', 'true');
} else {
// If the user has visited before, show the current page (https://example.com/)
}
}
})();
</script>만약 언어 개수가 많아지면 코드가 조금 복잡해 질 것입니다. 상황에 따라 코드를 적절히 응용하여 수정할 수 있습니다.
상기 코드에서는 세션 쿠키를 이용했지만 쿠키 시간을 1일로 설정하고 싶은 경우에는 다음과 같이 코드를 변형할 수 있습니다.
<script>
function setCookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
(function() {
var currentURL = window.location.href;
var homePageURL = 'https://example.com/';
var referrer = document.referrer;
var isExternalReferrer = !referrer.startsWith(homePageURL);
if (currentURL === homePageURL && isExternalReferrer) {
// Check if the user has visited the homepage before
var visited = getCookie('visited');
if (visited === null) {
var language = navigator.language || navigator.userLanguage;
var isKorean = language.slice(0, 2).toLowerCase() === 'ko';
if (!isKorean) {
// If the user has not visited before and the browser language is not Korean, redirect to the English version
window.location.href = 'https://example.com/eng/';
}
setCookie('visited', 'true', 1); // Set the cookie to expire in 1 day
} else {
// If the user has visited before, show the current page (https://example.com/)
}
}
})();
</script>쿠키 시간을 2일로 변경하고 싶다면 setCookie('visited', 'true', 1)에서 "1"을 "2"로 바구면 됩니다.
댓글 남기기