유저 입맞에 맞게 워드프레스 스타일 선택

워드프레스에도 하나의 테마에 여러개의 css 파일을 적용하는 팁입니다. 물론 워드프레스 뿐만이 아닌 테터툴즈라던지 모든 페이지에 가능합니다.

지금 적용이된 예제를 제 WP 페이지에 가시면 오른쪽 위의 사각형들을 클릭하며 테스트 할 수 있습니다. 클릭 후엔 쿠키로 정보를 남겨서 다음 접속시에도 적용이 되어 나오게 됩니다. 물론 CSS 파일만 다를뿐 index.php을 비롯한 모든 파일은 동일합니다. 파일 하나로 변신하는 효과입니다. 내용과 스타일이 분리된 강력한 CSS와 XHTML 의 장점입니다.

많은 경우 테마를 복사해서 테마를 하나 더 만든 후 안에 있는 css 파일만 바꾸어 테마를 두개 세개 변환하는 방법들이 대부분 이었기에 단순히 css 스타일링 파일 하나만 바꾸어 주는 방법을 찾아보는데 시간이 걸렸습니다. 힘들었던 만큼 직접 적용하고 보니 괜찮습니다.

거창한 플러그인은 아니고 간단히 index 파일에 코드 몇줄만 추가하는 간단한 방법입니다.

준비: 새롭게 만들어진 CSS 파일. 혹은 파일들.

파일을 다운로드 합니다. 다운로드된 styleswitcher.js 파일을 테마폴더에 넣습니다. 그리고 올리는 김에 새롭게 만든 CSS 파일(들)도 같이 폴더에 넣어줍니다.
header.php 에다 방금 올린 파일의 경로를 넣어줍니다. <script type=”text/javascript” src=”파일경로/styleswitcher.js”></script> 주의: styleswitcher 경로를 넣을 때에 맞는지 확인을 잘 해주셔야 합니다. 간단하게는 직접 http://주소를 넣어도 됩니다.
그리고 그 다음줄에 스타일시트 경로들을 적습니다. 기본(원본) css , 새로만든 css 등등을 순서대로 적어 넣으면 됩니다.원본경로 <link rel=”stylesheet” type=”text/css” href=”원본.css” title=”default” /> 주의: title 값이 나중에 링크할때의 값이 되니 잘 적어주세요 스타일시트적용후 전혀 적용된거 같지 않게 나온다면 경로가 틀린것이니 잘 확인바랍니다. 새로만든 css 경로 <link rel=”alternate stylesheet” type=”text/css” href=”새로운.css” title=”green” /> 주의: 빨간 글씨로 적혀진것들이 다르니 잘 확인하시고 적으세요 title을 green 이라고 임의로 정했습니다. 이 경로는 여러개로 만들어 넣어도 됩니다.<link rel=”alternate stylesheet” type=”text/css” href=”새로운1.css” title=”green” /> <link rel=”alternate stylesheet” type=”text/css” href=”새로운2.css” title=”blue” />
그리고 이제 직접 유저가 클릭할수 있는 링크를 넣고 싶은곳에 <a href=”#” onclick=”setActiveStyleSheet(‘green’); return false;”>바꾸려면클릭</a> 이렇게 넣으시면 끝납니다.

From: David Appleyard

주의!! 순서가 중요합니다. <script> 부분이 절대 스타일시트보다 위에 위치하면 안됩니다. 그럴 경우에는 언제나 default가 먼저 보인 후에 다른 css 파일이 적용됩니다.

DavidAppleyard 에서 참고를 했습니다. 링크따라 가시면 직접 헤더와 헤더사이에 일일이 새로운 css 링크들을 적지 않아도 알아도 찾아주는 php 코드가 있습니다.

Go WordPress.

웹표준화에 참여합시다.