블로그 테마 스위처

블로그에 새로운 테마를 추가했습니다. 태터툴즈의 iS-text 스킨을 텍스트패턴에 맞게 바꾼 테마로, 아래 링크를 클릭하면 새 테마와 기존 테마를 바꿔가며 볼 수 있습니다.

새 테마로 전환하기

새 테마는 모든 메뉴와 메시지를 한글로 출력합니다. 기존에 사용하던 seevaa 님의 스킨을 기반으로 해서 바꿔보려고 했는데 전체적인 디자인이 너무 많이 달라지더군요. 그래서 한글로 된 새 테마를 만들어서 기존 테마와 같이 사용하기로 마음 먹었습니다.

텍스트패턴 리소스 사이트에 테마 스위처 플러그인에 관한 정보가 있더군요. 그런데 단순히 페이지에 적용되는 CSS만 바꿔주는 플러그인이라서 제가 원하는 한글화에 사용하기에는 부족한 점이 있었습니다. 대신 플러그인 정보에 있는 A List Apart 사이트에서 해답을 찾았지요.

이 사이트에서 소개하고 있는 PHP 스위처의 작동 원리는 간단합니다. 먼저 방문자가 선택한 테마가 어느 것인지를 방문자 PC에 쿠키를 만들어서 저장합니다. 그러면 언제든지 쿠기에 저장된 값을 가져와서 이용할 수 있으니까요. 그러면 하나씩 설명 해보겠습니다.

style.php 스크립트

먼저 style.php라는 이름으로 파일을 만들어야 합니다. 쿠키를 만드는 역할을 담당하는 파일이지요. 소스 코드는 아래와 같습니다.

<?php 
setcookie("txp_stylesheet", $_GET['set'], time()+3600*24*31, "/", $_SERVER['SERVER_NAME'], "0");
header("Location: $_SERVER[HTTP_REFERER]");
?>

소스가 A List Apart 사이트의 것과 약간 차이가 있습니다. PHP 설정에 따라서 실행이 안될 수 있으니 위의 소스를 사용하는 것이 보다 안전합니다. 먼저 첫 번째 행이 실행되면 방문자 PC에 쿠키를 만들게 되는데 setcookie 함수의 첫 번째 인자가 테마에 관한 정보를 보관하는 변수이고 두 번째 인수에 그 값이 들어갑니다. 세 번째 인수는 쿠기가 만료될 때 까지의 시간을 나타내는데 위의 예에서는 1년으로 지정했습니다. 네 번째 인자는 쿠키가 영향을 미치는 범위인데 도메인 전체에서 값을 읽을 수 있도록 루트 경로(/)로 지정했습니다. 그 다음 인자로 사이트 도메인을 넘기는데 자신이 사용하는 도메인을 직접 적어주셔도 됩니다. 마지막 인자는 쿠키의 보안 문제를 다루는데 특별한 경우(https 사용)가 아니면 위의 값을 그대로 쓰시면 됩니다.

쿠키가 만들어지면 다음 행이 실행되면서 즉시 이 style.php 파일을 실행하기 전의 주소로 돌아가게 됩니다.

쿠키 값을 바꿔주는 링크

위에 설명한 쿠키가 만들어지려면 먼저 txp_stylesheet 변수에 들어갈 값을 지정해주어야 합니다. 이것을 담당하는 링크는 아래와 같습니다.

http://blog.wystan.net/style.php?set=blog

style.php?set= 다음에 오는 값이 위에서 만든 쿠키의 txp_stylesheet 변수에 저장됩니다. 자신이 저장한 style.php 파일에 맞게 경로를 지정해주는 것 잊지 마시고요.

CSS 링크

마지막으로 쿠키의 값을 가져와서 선택적으로 CSS를 불러올 수 있도록 해줘야겠지요? 간단한 PHP 구문을 사용하면 됩니다. 페이지의 헤더 부분에 적용되는 예를 들어보지요.

<?php
if ($_COOKIE['txp_stylesheet'] == 'blog_new')
	echo '<link rel="stylesheet" type="text/css" href="/blog_new.css" />';
else
	echo '<link rel="stylesheet" type="text/css" href="/blog.css" />';
?>

쿠키의 txp_stylesheet 변수 값이 blog_new일 경우에만 blog_new.css 파일을 읽어들이고, 쿠키가 없거나 변수의 값이 다를 경우에는 blog.css 파일을 불러오게 됩니다.

사이트 디자인(레이아웃)에 적용하기

위의 if… else 문에서 사용한 $_COOKIE['txp_stylesheet'] 변수는 사이트 내의 모든 PHP 코드에서 바로 불러올 수 있는 변수입니다. 따라서 블로그 테마가 PHP로 작성되는 텍스트패턴이나 워드프레스 같은 블로깅 툴에서는 위의 구문을 이용해서 자유롭게 화면 출력을 제어할 수 있습니다. 텍스트패턴 사용자라면 간단한 플러그인을 만들어서 조금 더 쉽게 처리할 수 있는데 예를 들어서 아래와 같은 함수를 만들어주면 됩니다.

function if_newtheme($atts, $thing)	
{
	return parse(EvalElse($thing, ($_COOKIE['txp_stylesheet'] == 'blog_new')));
}

테마(페이지 또는 폼)에 적용할 때에는 다음과 같이 사용합니다.

<txp:if_newtheme>
<link rel="stylesheet" type="text/css" href="/blog_new.css" />
<txp:else />
<link rel="stylesheet" type="text/css" href="/blog.css" />
</txp:if_newtheme>

제한 사항

간단하고 다양하게 적용할 수 있는 방법이지만 단점도 있습니다. 먼저 사용자가 쿠키를 거부할 경우에는 테마를 바꿔주는게 불가능하지요. 또 다른 문제는 페이지 캐싱(caching)을 사용할 경우에 제대로 작동하지 않을 수 있다는 점입니다. 일부 브라우저는 페이지가 변경되었는지를 검사해서 바뀐 것이 없으면(페이지 수정 시간이 동일하면) 페이지를 다시 읽지 않고 사용자 PC에 저장된 사본을 그대로 보여주는데 CSS를 바꿔도 페이지 자체의 HTML 코드가 달라지지 않으면 새로운 테마가 적용되지 않을 수 있습니다. 물론 대부분의 블로깅 툴이 실시간으로 페이지를 생성하는 방식을 사용하고, 점유율이 가장 높은 익스플로러 브라우저에서 문제가 발생하지 않으므로(확신할 수는 없습니다^^;) 치명적인 단점은 아닙니다.

충분히 테스트하지 않아서 다른 문제가 생길지도 모르겠네요. 혹시라도 문제점이 생기면 꼭 알려주시길 바랍니다. 댓글은 항상 열려 있어요^^;

마치며

테마 수정하는게 조금 번거롭기는 해도 두 개 이상의 테마를 선택적으로 사용할 수 있다는 점은 꽤 매력적입니다. :-)

제가 사용하는 seevaa 님의 테마는 디자인을 우선적으로 고려해서 컨버팅했고, iS 님의 테마는 가독성 중심으로 바꿨는데 상황에 따라서 바꿔볼 수 있으니까요. 좋은 스킨을 사용할 수 있도록 허락해주신 seevaa 님과 iS 님께 다시 한 번 감사의 마음 전하며 글 마칩니다.

태그: , ,

댓글이 닫혔습니다.