Languages: English • 한국어 • (Add your language)
기본으로, 워드프레스에서 대부분의 목록 (및 목록 항목)은 id 또는 class 속성으로 식별되어, 쉽게 스타일링할 수 있다. style.css 파일을 간단하게 변경하면, 목록을 수직이 아닌 수평, 동적인 메뉴 강조 기능, 글머리 기호 변경 또는 순번 스타일 변경, 글머리 기호 제거, 또는 이 스타일들을 모두 조합하여 표시할 수 있다.
테마마다 다른 방식으로 목록의 서식을 정하고 있다. 워드프레스에서 사용자가 가장 많이 수정하고자 하는 목록은 사이드바 목록이다. 많은 사이드바에 중첩 목록이 있기 때문에, 이 목록을 심도 있게 살펴보자.
먼저 사용 중인 테마 폴더에 있는 style.css 파일을 검토해보자. 대부분의 워드프레스 테마는 사이드바 메뉴 섹션을 사이드바, 메뉴, 또는 이 둘을 혼합한 단어로 라벨을 붙이고 있다. 그러므로, 일반적으로 sidebar.php라는 사이드바 템플릿 파일을 살펴보자. 이것은 샘플sidebar.php 레이아웃이다; 여러분의 버전은 다를 수도 있지만, 개념을 같을 것이다.
<div id="sidebar">
<ul>
<li id="search"><form method="get" id="searchform"
action="/wordpress/index.php">
<div><input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
</div></form></li>
<li id="pagenav"><h2>Pages</h2>
<ul>
<li class="page_item">
<a href="http://www.examplesite.com/wordpress/?page_id=2"
title="About Us">About Us</a></li>
<li class="page_item">
<a href="http://www.examplesite.com/wordpress/?page_id=4"
title="Contact">Contact</a></li>
<li class="page_item">
<a href="http://www.examplesite.com/wordpress/?page_id=8"
title="Site Map">Site Map</a></li>
</ul></li>
<li><h2>Archives</h2>
<ul>
<li><a href='http://www.examplesite.com/wordpress/?m=200502'
title='February 2005'>February 2005</a></li>
<li><a href='http://www.examplesite.com/wordpress/?m=200501'
title='January 2005'>January 2005</a></li>
<li><a href='http://www.examplesite.com/wordpress/?m=200412'
title='December 2004'>December 2004</a></li>
<li><a href='http://www.examplesite.com/wordpress/?m=200411'
title='November 2004'>November 2004</a></li>
</ul></li>
<li><h2>Categories</h2>
<ul>
<li><a href="http://www.examplesite.com/wordpress/?cat=47"
title="Stories of our life">Stories</a></li>
<li><a href="http://www.examplesite.com/wordpress/?cat=48"
title="Computer Tips">Computer Tips</a></li>
<li><a href="http://www.examplesite.com/wordpress/?cat=6"
title="WordPress Tips">WordPress Tips</a></li>
<li><a href="http://www.examplesite.com/wordpress/?cat=28"
title="Web Page Design Advice">Web Page Design</a></li>
</ul></li>
</ul>
</div>
중첩 목록으로 작업을 하고 있고, 각 목록에 개별 스타일을 적용하고자 한다면, 스타일시트(style.css)에 "중첩(nest)"을 다시 만들어야 한다.
#sidebar ul {attributes}
#sidebar li {attributes}
#sidebar ul li {attributes}
#sidebar ul ul li {attributes}
#sidebar ul ul ul li {attributes}
#pagenav {attributes}
#pagenav ul {attributes}
#pagenav ul li {attributes}
카테고리 목록을 아카이브(Archives) 목록과 다르게 표시하기를 원하는가? 그러면index.php 또는 sidebar.php 열고, 조심스럽게 적절한 목록 항목에 다음 스타일 참조를 추가한다:
카테고리와 아카이브를 각각 사용자 정의하려면, 다음 코드를 스타일시트에 추가한다:
#categories {attributes}
#categories ul {attributes}
#categories ul li {attributes}
#archives {attributes}
#archives ul {attributes}
#archives ul li {attributes}
목록의 다른 섹션으로 이동하여, 스타일 참조 이름을 부여하고, 스타일시트에 이 이름을 추가한다. 목록의 어떤 부분이 목록의 어떤 면을 제어하는지 확인하였다면, 목록의 모양을 변경할 수 있다.
목록 스타일에 이미지를 적용하려면, 각 <li> 태그는 자신의 클래스(class) 또는 ID가 필요하다. Classy wp_list_pages 플러그인을 사용해보자.
목록에서 중요한 부분은 글머리 기호이다 - "이것은 목록이다"라고 알려주는 동그란 점, 반점, 또는 그래픽. 목록의 글머리 기호 스타일 또는 순번은 스타일시트에서 list-style-type 속성으로 지정한다. 기본 값은disc이다. 다른 기본 값으로는 circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, none이다. 기본 값을 square로 변경해보자.
#sidebar li {
list-style: square;
}
list-style-type을 입력하지 않고, 단축형인 list-style을 입력하고 있고, 기본 값 tt>disc</tt> 대신, small squares를 적용하고 있다.
그러나 모든 목록이 글머리 기호가 필요하지는 않다. 전체 레이아웃으로, 목록을 목록으로 알 수 있다. 글머리 기호를 제거하려면 스타일시트 다음과 같이 변경한다:
#sidebar li {
list-style: none;
}
이제, #sidebar ID의 DIV 안에 있는, 모든 <li> 태그는, 글머리 기호를 표시하지 않는다. 다른 값으로 변경해 보면서, 실행 결과를 살펴본다.
힌트: 접근성 측면에서, 순서 있는 목록은 순서 없는 목록보다 더 쉽게 탐색할 수 있다.
지루한 글머리 기호가 싫증이 나는가? 몇 가지 CSS 기술을 적용하여 지루함을 없애보자. 이 경우에는, 글머리 기호 대신 글머리 이미지를 사용한다고 브라우저에 알려 주기 위해, list-style-image를 사용한다.
재미 있는 글머리 그래픽을 찾아보고, 다음 코드를 추가하여, 목록에 화려한 글머리 기호를 추가한다:
#sidebar ul {
list-style-image: url(/wp-images/image.gif);
}
상대 링크 대신 절대 링크를 사용할 수 있다. 간단하게 url(/wp-images/image.gif )를 url(http://example.com/wp-images/image.gif)로 변경한다.
제목 다음에 밑줄과 같은 테두리를 추가하려면, 간단하게 제목 아래 <ul> 상단에 테두리 스타일을 추가할 수 있다. 제목 자체가 아니다.
#sidebar ul ul {...; border-top: solid 1px blue; ....}
한 단계 더 나가서, 목록 주위에 맨 위에 제목이 있는 전체 상자를 추가한다:
#sidebar ul ul {...; border: solid 1px blue; ....}
테두리와 함께 목록에 배경색을 추가한다:
#sidebar ul ul {...; border-top: solid 1px blue;
background:#CCFFFF; ....}
최종 결과는 다음과 같이 보일 것이다:
Category Two
Category Three아니면 실제로 아래와 같은 모양으로 만들어보자:
Category Two
Category Three
목록 글머리 기호와 목록 레이아웃이 재미있을 수 있다. 글머리 기호, 목록에 문제가 발생하면, 아래 자료를 확인해보고, 도움이 더 필요하면 워드프레스 지원 포럼을 방문한다.
중첩 목록에 문제가 발생하면, 다음의 해결책이 도움이 될 것이다. 또한 추가로 스타일링 도움이 필요하면,CSS 문제 해결를 참조한다.
중첩 목록 안의 첫째 에러 원인은 목록 구조의 잘못이다. 이것은 아주 간단하고, 정확한 중첩 목록 레이아웃이다. Note that when a (새) 중첩 목록이 시작할 때, 현재 목록 항목의 <li> 태그는 아직 닫혀지지 않는다. 중첩 목록이 완성될 때까지 태그가 열려 있고, 완성되면 닫힌다.
<ul>
<li>Category One</li>
<li>Category Two <----참고: 종료 List 태그가 없다
<ul>
<li>Sub-Category One</li>
<li>Sub-Category Two <----참고: 종료 LIST 태그가 없다
<ul>
<li>Sub-Sub-Category One</li>
<li>Sub-Sub-Category Two</li> <----참고: 종료 LIST 태그
</ul></li> <----참고: 중첩 목록 종료
<li>Sub-Category Three</li>
</ul></li> <----참고: 중첩 목록 종료
<li>Category Three</li>
</ul> <----참고: 전체 list 종료
목록을 표시하기 위해 사용되는 템플릿 태그마다 HTML list 태그를 사용하고, 의존하는 방법이 다르다. 일부 템플릿 태그는 자동으로 <ul>과 <li> 태그를 포함하므로, 별도로 목록에 이 템플릿 태그를 포함하기만 하면, 이것이 모든 작업을 한다. 다른 템플릿 태그는 이 태그 다음에 <ul> 이 적절하게 있어야 한다, 그러면 자신의 <li> 태그를 만들게 된다. 다른 템플릿 태그는 어떤 유형의 list 태그가 필요한지 지정해야 한다. 또는 태그의 매개변수에 나열하지 않으면, 아무 것도 사용하지 않는다.
wp_list_cats 또는 wp_list_pages와 같은 템플릿 태그를 사용할 때, 중첩 목록에 문제를 발생하면, list 태그 사용 방법을 알아보기 위해, 매개변수를 체크하고, 자신의 사용 방법과 비교해본다.
CSS 부모와 자식 관계에 논의된 바와 같이, 목록은 커다란 주제 중의 하나이다. 자식 항목의 스타일은 "부모"의 스타일이 적용된다. 부모의 목록 스타일이 "빨간"색이고, 자식은 "파란"색으로 표시하려면, 자식 목록 스타일을 "파랗게" 지정해서, 부모 스타일보다 우선 적용되게 하여야 한다.
워드프레스 사이드바 안의 중첩 목록은 일반적으로 링크를 포함하고 있다. 그러므로, 목록을 원하는 대로 스타일링할 수 있는 반면, 링크 스타일은 목록 스타일보다 우선 적용된다. 자신의 특정 스타일 클래스(class)를 부여하여, hover 속성을 포함한, 목록의 링크 표시 방법을 제어할 수 있다:
#sidebar a {attributes}
#sidebar a:hover {attributes}
#categories a {attributes}
#categories a:hover {attributes}
#archives a {attributes}
#archives a:hover {attributes}