워드프레스 에서 가상객체 번역하기

[ 이글은 2020년 11월 25일에 최종 수정되었습니다. ]
§

[이 글은 다국어 사이트 용 워드프레스 테마 제작을 해야하는 개발자 분들에게 유용한 글 입니다.]

[pseudo elements 를 한국어로 가상요소, 가상 클래스, 가상선택자 등으로 번역되는 것 같은데, 저는 객체라고 번역합니다. 그 이유는, css 의 pseudo elements 는 자스 (javascript)의 object 과 같은 개념이기 때문입니다. “요소” 가 많이 쓰이는 것 같은데, 구글번역기 영향인 것 같습니다.]

A node is any DOM object. An element is one specific type of node. 이의제기 하고 싶으신 분들은 이 stackoverflow 글로 go go go.

저는 주로 navigation UI 를 짤때 checkbox hack 기법을 많이 쓰고 (자스로 짜도 되지만 아무래도 css 가 더 가벼우니까요), 그래서 이런 경우 가상객체를 쓰게 됩니다. (가상객체를 안써도 되는데, 가상객체를 안쓰면 html 마크업이 더 복잡/지저분 해지겠죠.)

<span class="toggle-text">login</span>
#nav-toggle:checked+#slideout>label::before {content: "close";}

이런식으로 메뉴 버튼을 짜는 경우, “login” 이라는 단어는 단순한 text string 이기 때문에 워드프레스 의 __() function 을 이용해 “로그인” 으로 번역해 주면 됩니다.

예: echo __('login', 'hackya' ); 혹은 echo 를 짧게 줄여서 _e('login', 'hackya' ); 이렇게 써도 됩니다.

그리고 버튼을 눌렀을때는 “close” 라는 단어가 “login” 이란 단어를 대체하는 로직입니다.

그런데 위에서 보시다시피 이 “close” 라는 단어는 html 의 text 가 아닌, css 의 가생객체 에서 생성해 주고 있기 때문에, 이 “close” 라는 단어를 번역해야 하는 경우가 발생하면 대략 난감해 질 수 있습니다.

물론 자스 (js) 로 css 의 가상객체를 찝을 수 없지는 않습니다. 방법이 있습니다. 이런식으로 하면 됩니다.

var addRule = (function (style) {
    var sheet = document.head.appendChild(style).sheet;
    return function (selector, css) {
        var propText = typeof css === "string" ? css : Object.keys(css).map(function (p) {
            return p + ":" + (p === "content" ? "'" + css[p] + "'" : css[p]);
        }).join(";");
        sheet.insertRule(selector + "{" + propText + "}", sheet.cssRules.length);
    };
})(document.createElement("style"));

addRule("p:before", {
    display: "block",
    width: "100px",
    height: "100px",
    background: "red",
    "border-radius": "50%",
    content: "''"
});

[출처: https://stackoverflow.com/questions/7330355/javascript-set-css-after-styles/7330454#7330454]

ㅋㅋㅋ checkbox hack 을 쓰는 이유가 js 사용을 줄여서 페이지 로딩을 최대한 가볍게 만들기 위해서 인데, 그 checkbox hack 의 가상객체 번역 때문에 js 를 쓴다?

암튼 방법이 없는건 아니지만 (가상객체를 찝은다음에 그 가상객체의 attribute 을 바꿔주면 되겠죠.) 매우 바보같은 짓 입니다.

이제 워드프레스의 기능을 이용해 간단하게 이 가상객체를 번역하는 방법을 알려 드리겠습니다.

각 워드프레스 사이트의 고유 언어는, 테마의 header.php 에서 language_attributes() 으로 지정해 줄 수 있습니다.

<html <?php language_attributes(); ?>>

이러면, 각 사이트의 언어에 따라 output 은 이렇게 표현 됩니다.

<html lang="ko-KR">

한국어

<html dir="rtl" lang="ar">

아랍어

그리고 이 “close” 라는 단어는 이제 한국어 “닫기” 라는 단어로 이렇게 번역될 수 있습니다.

#nav-toggle:checked+#slideout>label:lang(ko-KR)::before { content: "닫기";}

아랍어인 경우는 이렇게.

#nav-toggle:checked+#slideout>label:lang(ar)::before { content: "أغلق";}

:lang() 은 css 의 가상객체 종류 중 하나 입니다. 그리고 이렇게 언어별 style 을 표시하는데 사용됩니다. 물론 번역 뿐 만 아니라, 각 언어에 따라서 틀어지는 레이아웃이나 특정언어의 고유 폰트 모습이나 크기 때문에 css 를 미세조정 해야할때 유용하게 사용하실 수 있는 가상객체 입니다.

가상객체로 생성된 string 은 가상객체로 수정/번역 하는게 가장 간단하다. – 오늘 이 글의 주제였습니다. ㅋㅋㅋ

사이트 로딩 optimization tip 을 하나 드리자면,

이 언어별 css 코딩들도 하나의 stylesheet 에 다 포함하면 용량이 꽤 크게 늘어납니다. 특히 아랍어는 레이아웃이 완전 180도 뒤집어 지기때문에 많은 css 코딩이 수반됩니다. 그리고, 수정 + 번역되어야 하는 css 가 한두개 언어정도면 기존 테마 style.css 에 포함시켜도 괜찮지만, 수십개의 국가/언어 가 번역되어야 하는 상황이라면 별도의, 언어별 css 파일을 만들어서, (kr.css, cn.css, ar.css 이렇게 언어코드를 따르는 파일이 좋겠죠?) 그 언어 페이지에만 개별적 언어 css 파일이 로딩 되도록 로직을 짜주면 각 언어 사이트 가 가벼워 집니다.

선택적 css 로딩은 enqueue/dequeue 를 conditionally declare 하셔서 해도 되는데, 저는 이게 너무 복잡/지저분 해져서 (수십개 국가의 css 를 enqueue/dequeue 하면 정말 지저분 해지겠죠?) 그냥 자스 switch statement 로 간단하게 로직을 만들어 씁니다.

hackya 는

Attorney, front-end developer, digital media artist, WordPress enthusiast, & a father of 4 wonderful children.

Tags: , ,

카테고리: , ,

Ω

Leave a Reply

Your email address will not be published. Required fields are marked *