웹사이트에서 특정 페이지에서만 CSS를 다르게 적용하고 싶을 때가 있다. 예를 들자면 모든 페이지에서 소셜 공유 버튼이 적용되어 있고 배경은 모두 흰색인데 단 하나의 페이지에서만 검은색으로 적용하고 싶은 경우이다.

워드프레스에서는 이를 아주 간단하게 적용할 수 있다. 모든 워드프레스의 post나 page는 id 값을 갖게 되며 이 특정 id 값을 css코드에 반영하면 된다.

CSS에 다음과 같이 적용되어 있다고 가정해보자.

.social-buttons {
    background: white;
}

예를 들어서 150이라는 id값을 가진 page만 social buttons 클래스의 배경을 검은색으로 만들고 싶다면 다음과 같이 적용하면 된다.

.page-id-150 .social-buttons {
   background : black;
}

현재 페이지의 id값을 확인하는 방법은?

1. ADMIN 편집 페이지에서는 URL에서 ‘post=’ 다음에 나오는 숫자를 확인
2. ADMIN 글 리스트 페이지에서는 제목에 마우스를 올리면 하단에 url이 표시되는데 위와 동일한 위치의 값을 찾는다. (아래 참고)

• css
• 워드프레스