이전 글에서 테마수정을 시작해서 계속 이어집니다. 예전에 테마옵션 설정하던 중 글이 없거나 페이지가 없는 URL을 클릭해서 워드프레스 블로그에 연결된 경우 아래 그림처럼 페이지를 찾을 수 없다는 메시지를 입력했습니다.
글자의 크기나 높이를 수정해줘야하는 상황이죠. 그리고 이런 페이지를 방문자가 접했을 때 막연하게 안내문구만 나오게 하는 것 보다는 다른 글로 가거나 검색해서 원하는 글을 찾을 수 있도록 배려하는 것이 좋습니다. 이런 상황이 벌어지는 이유는 글의 고유주소가 변경됐다거나 글이 제거돼서 URL을 찾을 수 없는 경우에 발생합니다. 그러니 해당 글을 찾을 수 있도록 도와주는 것이 좋겠죠.
위에서 검색박스를 이용해서 검색하라고 했는데 검색박스가 없죠. 그래서 404 페이지 템플릿을 설정할 때는 사이드바에 검색박스나 다른 글을 클릭하도록 카테고리 박스를 배치하는 것이 좋습니다. 여기서는 위 안내 문구 바로 아래에 검색박스를 배치해도록 해보겠습니다.
1. 글자의 수정
수정하기 위해서 선택자를 찾아야죠. 요소검사를 하면 error라는 선택자에 스타일스트가 설정돼있습니다. 글자의 굵기인 font-weight는 부모 선택자에 설정돼있습니다.
.error { line-height:1.5; }
스타일시트 편집창에서 위와같이 입력해줍니다. line-height는 글의 줄높이를 설정하는 속성으로 값은 픽셀을 입력해도 되지만 글자의 줄높이를 설정할 때는 대부분의 경우 배율로 설정하는 것이 좋습니다. 단위가 없이 숫자만 넣으면 폰트 사이즈의 배율로 정해집니다. 위 스타일시트 창에서 아래로 스크롤해서 내려가다보면 body 태그에 28픽셀로 설정돼있는 것을 위 선택자가 상속을 받으므로 이 수치의 1.5배니까 28+14=42픽셀의 줄높이가 됩니다. 폰트의 크기가 너무 크다 싶으면 아래처럼 추가해줍니다.
.error {
line-height:1.5;
font-size:24px;
}
그런데 글자가 중앙정렬돼있어서 보기 좋지 않습니다. 좌측정렬해주려면 다음과 같이 설정하면 됩니다.
.error {
line-height:1.5;
font-size:24px;
text-align:left;
}
2. 검색박스 추가하기
워드프레스의 기능은 대부분이 함수로 만들어지는데 워드프레스의 코어파일에 이미 존재하고 있습니다. 이러한 함수를 사용하려면 일종의 기호처럼 생긴 것을 사용하며 이러한 것을 템플릿 태그라고 합니다. 워드프레스가 php 프로그래밍 언어로 만들어져서 템플릿 태그도 php 를 사용합니다. 아래와 같은 코드를 보면 반갑지 않은데 사실 알고보면 아무것도 아닙니다. 그래서 기호라고 칭했는데 하나의 역할을 하고 있으며 워드프레스에서 사용하는 모든 템플릿 태그는 이처럼 생겨서 특정한 역할을 하는 것을 적재적소에 배치하면 해당 역할을 하는 것이죠. 티스토리 블로그 프로그램의 치환자와 같다고 생각하면 됩니다.
편집기 화면에서 404 템플릿을 열고 위와같이 <?php get_search_form( ); ?>를 입력하고 저장한 다음 블로그 화면에서 보면 다음과 같이 나옵니다. 이 파일을 열때는 마우스 오른쪽 클릭해서 다른 탭에 열어야 스타일시트를 나중에 수정할 수 있습니다.
너무 길게 나오죠. 이를 수정하려면 몇가지 코드를 사용합니다.
<div id="search-box-404">
<?php get_search_form( ); ?>
</div>
검색 템플릿 태그에는 위처럼 div 태그로 감싸주고 아이디 선택자에 이름을 독특하게 입력합니다. 선택자의 이름은 숫자로 시작할 수 없습니다. 독특하게 이름을 짓는 것은 혹시라도 다른 곳에서 같은 이름을 사용할 수도 있기 때문입니다.
#search-box-404 {
width:200px;
margin:20px 0 0 0;
}
스타일시트 편집기에는 위와 같이 입력합니다. 폭은 200픽셀로 하고 마진을 주는데 4가지 숫자를 사용합니다. 상, 우, 하, 좌 의 순서입니다. 위에만 마진을 주는 것이므로 속성을 margin-top: 20px;로 해도 마찬가지입니다. 그러면 다음과 같이 나옵니다.
적당한 크기죠?
이처럼 워드프레스의 템플릿 태그는 코드 몇가지만 입력해도 기능을 추가할 수 있습니다. 실제로 작동하는지 검색해서 확인해보세요.
검색을 안해봤으면 그냥 지나칠뻔 했습니다. 워드프레스로 검색을 하니 위와같이 이미지가 어긋나 있습니다. 수정하려면 요소검사를 해서 선택자를 찾아서 스타일시트에 아래와 같이 입력하면 수정됩니다. 글자를 입력할 때는 항상 단어 사이에 있는 것이 대시( - )인지 밑줄( _ )인지 확인해야합니다.
.post_container {
overflow:hidden;
}
이것은 글이 이미지를 감싸도록 사용한 float 라는 속성 때문인데 float는 말 그대로 어떤 요소를 띄우는 역할을 하기 때문에 아래에 있던 요소가 위로 올라와서 그렇습니다. php 파일을 열고 <div class="clear"></div>을 이미지와 글이 나오게 하는 템플릿 태그 아래에 삽입하고 스타일시트에서는 .clear { clear:both; } 라고 설정해줘야하지만 위처럼 간단하게 스타일시트에서만 설정해줘도 됩니다.
다음 글에서는 푸터의 내용을 변경해보겠습니다. 현재의 테마에는 테마 제작사의 로고가 있죠. 이것을 제거하고 내 홈페이지의 제목을 입력하고 링크를 걸어보겠습니다.
테마 수정 코드-->
테마수정코드1122.txt
