티스토리 툴바

Daum
Tistory
로그인

[워드프레스 스킨 변환하기] #2.치환자 대입해주기(1)

2007/12/05 13:23 | BlogDesign/튜토리얼

13개의 댓글

지난번 포스팅이후 어렵다는 말들이 너무 많아서 솔직히 많이 고민됬습니다 ㅠㅠ. 다음 튜토리얼 부턴 이렇게
어렵게 안할테니 이 튜토리얼만 참아주세요 ...(응?) 제가 첫편에도 말했듯이 '삽'이 꼭 필요하답니다.... :)
저또한 노력하면서 쓸테니 잘 따라와주세요 :)

지난시간은 기본 레이아웃을 짜는 것에 대해 얘기했습니다. 이번 시간에는 그 기본 레이아웃에 태터툴즈용
치환자를 대입하는 작업입니다. 그러니까 일단은 우선 지난시간에 기본 레이아웃을 짜는것을 대충 마무리 해놓
아야 합니다. 저도 덕분에 열심히 하나 변환중입니다 :) 자. 대충 레이아웃을 다 베껴놓은것 같다 그러면 작업한
파일을 열어봅시다.
 

그래도 대충 어느정도 틀은 잡힌게 보이시나요 ? 혹시 제대로 했는데 스타일이 제대로 잡히지 않으셨다면
지난 시간에 원본파일에서 복사해온 Style.css와 images폴더가 skin.html의 같은 경로에 위치해있는지 확인 해
주세요. 원본과 비교해보며 살짝 이상한 부분을 수정해줍시다. 보통 저같은 경우는 id와 class를 헷갈려서
발생한 문제더군요. 어쨌든 이렇게 기본 레이아웃은 모두 완성됬습니다!

자 이제 저 한글부분을 태터툴즈용 치환자로 바꾸어야 합니다. 태터툴즈의 치환자 목록은 아래 링크에 있습니다.
태터툴즈 스킨 커뮤니티 : http://retro.tattertools.com/ko/skin/skinmanual04.php

매우 친절하게 이미지까지 보여주면서 설명을 해주고 있으니 치환자를 찾는데 큰 어려움은 없을 것입니다.
제가 까다로운 부분은 이제부터 하나씩 설명 해나가도록 하겠습니다. 먼저 본문에 입력될 부분입니다.

스킨의 본문 부분을 보면 총 '검색 결과 출력 부분, 지역로그, 태그 출력부분, 방명록, 공지사항 글, 보호글, 일반글'
이렇게 나누어져 있습니다. 스킨에 저 부분이 숨어있다가 적용될시 그때그때 상황에 따라서 저 부분중 하나가
출력되는 그런 메커니즘입니다. 복잡하시지요? 일단 검색결과, 태그출력부분, 방명록은 기본 스킨에 있는것
그대로 데려오기로 하겠습니다. 스킨 커뮤니티에 있는데 그대로 붙여 넣어주시면 됩니다. 혹은 다른 스킨의
소스를 그대로 붙여 오셔도 됩니다.

어디에 붙여넣어야 되나면 스킨의 본문이 출력되는 부분에 넣어주셔야 됩니다. 각각 스킨마다 클래스값이
너무 달라서 뭐라고 말씀드리진 못하겠습니다만 Firebug를 이용하시면 감이 잡히실 겁니다.


헤더부분과 본문의 상단을 손봤습니다. 미지의 언어들이 보이시죠? 저게 치환자입니다 :) 지금 본문위에 삽입한
부분은 스타일시트가 완벽히 적용되지 않았으므로 조금 깨져보이거나 마음에 안들수도 있습니다. 후에 고치심
됩니다. 만약 생각보다 이쁘게 나오셨다면 땡큐 갓! 하시고 그대로 쓰셔도 무방합니다 (무책임한놈)
(저는 저 부분을 다른 스킨에서 그대로 긁어왔습니다... 귀차니시스트들을 위한 최고의 방법이랄까요 )

이제 본문에서 남은것은 공지사항, 보호글, 본문입니다. 이 부분도 그대로 긁어오라면야 긁어 오지만 오리지날
스킨의 느낌을 제대로 살리지 못하기때문에 조금 심혈을 기울여 수정해보도록 하겠습니다.

본문이 삽입될 부분의 소스를 일단 가져와 봅시다. 저의 경우 밑에 소스와 같습니다.
<div class="item entry">
                <div class="itemhead">
                    <h3>글제목</h3>
                    <small class="metadata">
                        글 정보 출력부분
                    </small>
                </div>
                <div class="itemtext">
                그냥 바로 본문출력
                </div>
                </div>

이게 제 부분입니다. 일단 이것과 똑같은걸 2번더 복사해서 총 3개가 될수 있도록 합시다.
먼저 공지사항을 만들어 보도록 하겠습니다. 일단 첫문단 처음과 끝에  <s_notice_rep> </s_notice_rep>을
넣어 줍시다. 공지사항이 표시될 영역을 표시해주는 태그입니다. 그리고 스킨 커뮤니티 사이트를 참조해서
제목과 글정보와 본문 내용을 삽입해줍시다. 저의 소스입니다. 위와 비교해서 보도록 하세요.

<s_notice_rep>
                <div class="item entry">
                <div class="itemhead">
                    <h3><a href="">[/##_notice_rep_title_##]</a></h3>
                    <small class="metadata">
                        [/##_notice_rep_date_##]
                    </small>
                </div>
                <div class="itemtext">
                [/##_notice_rep_desc_##]
                </div>
                </div>
                </s_notice_rep>
치환자가 자꾸 먹혀서 [/##_으로 표시했습니다 원래는 [샾샾_ 이신거 알고 계시지요 ?

저렇게 길어졌습니다! 하하 :) (페이징 부분은 마지막 부분에만 삽입해주시면 되니 신경쓰지 마세요)
공지사항란은 완성되었습니다. 이와 비슷한 방법으로 다음 작업도 해나갈 것입니다. 글의 길이가 너무
길어졌기 때문에 여기서 (1)편은 줄이도록 하겠습니다. 다음시간엔 마저 본문작업을 마치고 사이드바 작업을
한 뒤 마무리하고 끝낼 예정입니다. 여기까지 오셨다면 80%는 이미 끝내신 겁니다 :) 화이팅입니다!


 현재 제가 작업한 파일의 모습입니다. 공지사항란까지 완성되있는게 보이시죠 ?
중간에 페이징리스트가 나온건 제 실수입니다 :) 무시해주세요 ㅠㅠ

이해가 안가는 부분이 있으시다면 질문해주세요. 제 한도내에서(?) 대답해드립니다 :)

Comments

« prev 1 ... 35 36 37 38 39 40 41 42 43 ... 61 next »