티스토리 툴바

Daum
Tistory
로그인

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

2007/12/08 10:50 | BlogDesign/튜토리얼

4개의 댓글

네, 오늘은 지난시간에 이어 치환자를 대입하는 작업을 마저 모두 끝내도록 하겠습니다. 오늘 치환자를 대입해줄
부분은 본문 보호글부터 일반글까지, 사이드바의 설정법에 대해 알아보고 또 만들어보겠습니다.

먼저 지난시간에 작업해온 파일을 텍스트에디터로 열어주시고, 공지사항밑부분을 열어주세요. 아직 치환자가
대입되지 않은 본문덩어리가 2개 있을겁니다. 이제 '보호글'부분을 만들어줄 부분입니다.
스킨 커뮤니티 가이드를 참고하시면 쉽게 할 수 있습니다. 각자 스킨의 양식에 맞춰서 작성해주심 됩니다.
저의 스킨 예제를 보여드리겠습니다.
                <div class="item entry">
                <div class="itemhead">
                    <h3>글제목</h3>
                    <small class="metadata">
                        글 정보 출력부분
                    </small>
                </div>
                <div class="itemtext">
                그냥 바로 본문출력
                페이지 링크
                </div>
                </div>

이게 기본 틀이구요, 치환자를 아래와 같이 대입해줬씁니다. 이해가 가시나요 ?
                <s_article_protected>
                <div class="item entry">
                <div class="itemhead">
                    <h3><a href="[/##_article_rep_link_##]">[/##_article_rep_title_##]</a></h3>
                    <small class="metadata">
                        [/##_article_rep_date_##]
                    </small>
                </div>
                <div class="itemtext">
                    <p>보호되어 있는 글입니다. 내용을 보시려면 비밀번호를 입력하세요.</p>
                    <p><label for="password">비밀번호 ::</label>
                    <input type="password" maxlength="16" id="password" name="[/##_article_password_##]" value="" onkeydown="if (event.keyCode == 13)[/##_article_dissolve_##]" />
                    <input type="button" class="submit" value="submit" onclick="[/##_article_dissolve_##]" />
                </div>
                </div>
                </s_article_protected>
먼저 중요한것은 <s_article_protected>로 감싸주신후 나머지 치환자를 넣어주시면 됩니다. 어려우시면 그냥
있는 그대로 베껴 쓰셔도 아무 문제 없습니다.

이제 작업할 분량이 꽤 되는 일반본문입니다. 본문말고도 하단에 태그, 트랙백, 코멘트, 페이징 부분 등이
추가되어야 합니다. 많이 어렵지 않습니다. 일단 일반 본문까지는 여기까지 오신분이라면 식은죽먹기로
끝내실수 있다고 생각합니다. 그 하단작업부터 설명하겠습니다.

제가 작업한 방법은 이렇습니다. 일단 스킨 커뮤니티에서 나온대로 순서대로 카피해서 붙이기를 합니다.
그럼 기능은 제대로 작동은 할터인데 스타일시트명이 맞질 않아서 예쁘게 출력되지 않습니다. 원래의 스킨을
파이어버그로 보면서 스타일시트의 class값이나 id 값을 맞춰줍니다. 그럼 자동으로 스타일시트에서 적용됩니다.
워드프레스의 특성상 없는기능이 있어서 스타일시트도 누락된 부분이 있는데 이 부분은 다른스킨등에서
가져와서 css파일에 적어 넣어주시면 됩니다. 클래스나 아이디 명은 알아서 매치시켜 주시구요 :)

제가 작업해서 몰래 꽁쳐놓은 블로그에 적용시킨 모습은 하단과 같습니다.


꽤나 워드프레스 스킨다우면서도 예쁘게 나온것 같습니다. 저혼자만 그런가요 ㅠㅠ? 본문까지 끝내셨음
하단의 카피라이트 부분은 덤으로 적어줍니다. 원래 스킨이 WP니 저는 WP라고 적었습니다.

이제 재미난(?) 사이드바 작업입니다. 현재 제가 작업중인 스킨은 3단입니다. 왼쪽에 사이드바와 오른쪽에 사이
드바가 존재합니다. 별로 어려운 작업은 아니지만 작업량이 많습니다. 천천히 해보시면 됩니다. 한가지만 예제를
들어드리겠습니다. 보고 잘 따라와보세요 :)

태터툴즈내에서는 '사이드바 관리'라 그래서 자유롭게 이동 시킬수 있는 툴이 존재합니다. 코딩할때 조금만
신경써 주시면 이 기능을 활용해서 차후 수정이 무척이나 용이합니다.

먼저 사이드바라고 정해줄 부분을 <s_sidebar>~</s_sidebar> 로 정의시켜 줍니다.
<!-- 보기편하게 주석을 넣어주시면 좋습니다. -->
<div id="leftbar">
<s_sidebar>
사이드바 내용물
</s_sidebar>
</div>
이렇게 하시면 됩니다. 사이드바가 여러개인경우 각각 사이드바 마다 저렇게 해주시면 됩니다 :)
이젠 저 내용물을 채워줄 부분입니다. 이 페이지를 토대로 하나를 예제로 추가시켜 보겠습니다.
<!-- 사이드바 주석이름 -->
<div id="leftbar">
<s_sidebar>
<s_sidebar_element>
<!-- 사이드바 엘리먼트 이름 -->
<div class="blogImage">
<div class="blogImage"><img src="[/##_image_##]" alt="" /></div>
<div class="blogDesc">[/##_desc_##] <span class="userID">[/##_blogger_##]</span></div>
</div>
</s_sidebar_element>
</s_sidebar>
</div>
다음과 같이 되겠지요 ? 저런식으로 <s_sidebar>안에서 <s_sidebar_element>를 여러게 추가해주심 됩니다.
참 쉽지요 :)? 모두 스킨 커뮤니티 가이드에 나와있으니 참고하시면 금방하십니다.

하단의 그림은 제가 사이드바까지 모두 설정한 이후의 캡쳐입니다.


스타일시트의 누락된 부분을 다른부분에서 데려오느냐고 꽤나 삽질좀 했습니다. 캘린더는 실용성도 낮고
줄만 차지해서 과감히 빼버렸습니다...쿨럭 왼쪽에 이미지가 깨진것은 아직 업로드를 안해놓은 상태라 그럽니다.

여기까지 따라오신 여러분 축하드립니다! 빵빠라 빵빵빠~~!! 이제 실질적인 스킨변환은 99%끝났다고 볼 수
있습니다. 하지만 마지막남은 부분이 있는데요 바로 '마무리'하기 부분입니다. 실제로 적용시켜보고 작동이
잘 되지 않는 부분을 찾아서 고치고 또 마지막으로 xml파일을 생성해 낼 것 입니다. 그럼 다음시간에
마무리 하기로 만납시다 :) 여러분 모두 화이팅!

Comments

« prev 1 ... 32 33 34 35 36 37 38 39 40 ... 61 next »