[워드프레스] 페이지 네비게이션 꾸미기

by

#wordpress #generatepress #커스터마이징 #디자인변경

안녕하세요, 배곧동개발자 입니다.

워드프레스를 시작하면서 가장 먼저 추천 받은 테마, generatePress. 블로그 형태로 만들꺼면 이게 최고라고 하여 만들었으나 이것저것 바꿀께 참 많죠? 이전 글들을 보시면 정말 많은 것들을 바꾸고 있는데요!

오늘은 리스트페이지에서 가장 하단에 위치한 페이지 네비게이션 부분을 바꿔볼까합니다.

1. 페이지 네비게이션

자, 그러면 왜 바꿔야 할까? generatePress에서 기본으로 제공하는 페이징 네비게이션을 한번 볼까요?

허허, 정말 별로죠? 그러므로 바꿔야합니다. 가장 먼저 이것을 이루고 있는 클래스가 뭔지 찾아봅시다.

paging-navigation 이라는 클래스로 만들어져있는거 보이시죠? 이제 우리는 이 친구를 조작해서 조금은 더 이쁘게 만들어줄까합니다.

2. 중앙 정렬

보통 이런거는 가운데에 와있잖아요? 가장 먼저 간단하게 중앙으로 정렬 시켜봅시다.

.paging-navigation{
	text-align:center;
	font-size:20px;
}

이렇게 text-align:center를 이용해서 paging-navigation 안에 있는 페이지숫자들을 가운데 정렬을 해준 다음 크기를 조금 키워줍니다.

그러면 이렇게 정렬이 변경된거 보이실겁니다. 쉽죠?

3. 색깔 및 밑줄 제거

이런 페이징 네이게이션의 경우 기본적으로 a태그로 입혀져있습니다. a태그의 상징이 뭐죠? 바로 파란색과 밑줄이지요! 우리는 그걸 없애볼겁니다.

.paging-navigation a{
	color: gray;
	text-decoration:none;
}

paging-navigation 아래에 a태그들, 즉 숫자들에 색깔을 변경해주고 밑줄도 삭제해버리라는 뜻입니다. 이렇게 해주면 아래처럼 바뀌게 됩니다.

4. 선택된 페이지번호 디자인

현재 1번페이지가 선택되어있는데 구분이 잘 안가시죠? 저걸 조금 더 명확히 볼 수 있도록 바꿔볼까합니다.

현재 선택 된 번호를 특정하려고 보니까 page-number는 모두를 포함하므로 current 를 참조해야겠습니다.

.paging-navigation .current{
	background-color :#FFB520;
	padding : 10px;
	border-radius:5px;
	color: white;
}

이렇게 넣어줌으로써 배경색을 입혀주고 네모난 모양으로 표현해봤습니다. 공대생의 미적감각이 이정도입니다.

5. 페이지숫자 hover

거의 다왔습니다. 내가 원하는 페이지에 마우스를 올렸을 때(hover) 좀 더 명확히 알려주기 위해서 hover시 색깔을 변경해줍시다.

.paging-navigation a:hover{
	color: #FFB520;
}

6. 텍스트 변경

마지막단계입니다. 기본적으로 generatePress는 이전페이지는 previous, 다음페이지는 next로 표현되어있습니다. 이걸 이전, 다음으로 바꿔볼까합니다.

클래스는 prev, next로 아주 명확하군요. 이렇게 문구수정의 경우 css의 수정으로는 불가능하고 자바스크립트를 사용해야합니다.

$("a.next").html("다음");
$("a.prev").html("이전");

정말 간단하게 이렇게만 해줘봅니다. 안에 화살표를 위해 span이니 뭐니 있지만, 사실 필요없어요. 그냥 header에 저렇게 넣어주시면 아래처럼 바뀝니다.

7. 정리

여기까지 하면 완성입니다. 그러면 위에 했던 모든것을 모아볼까요?

.paging-navigation{
	text-align:center;
	font-size:20px;
}
.paging-navigation a{
	color: gray;
	text-decoration:none;
}
.paging-navigation .current{
	background-color :#FFB520;
	padding : 10px;
	border-radius:5px;
	color: white;
}
.paging-navigation a:hover{
	color: #FFB520;
}
$("a.next").html("다음");
$("a.prev").html("이전");

위에는 추가CSS에 넣어주시면 되고 아래는 header에 넣어주시면 됩니다. 어려우시면 이해하려고 안하셔도 됩니다. 그냥 복사 붙혀넣기 하시고 적용해보세요!

어떠신가요? 하나하나 바꿔가는 재미가 있지 않나요? 색깔이라던지 넓이등등은 직접 바꿔보시면서 맘에드는거 찾으시길 바래요! 궁금한거는 언제든 댓글로 남겨주시면 답변 드리겠습니다.

이만, 배곧동개발자 였습니다.

Leave a Comment