워드프레스 특정 페이지 혹은 포스트에서만 Custom CSS 적용하기(초간단)
웹사이트에서 특정 페이지에서만 CSS를 다르게 적용하고 싶을 때가 있다. 예를 들자면 모든 페이지에서 소셜 공유 버튼이 적용되어 있고 배경은 모두 흰색인데 단 하나의 페이지에서만 검은색으로 적용하고 싶은 경우이다.
워드프레스에서는 이를 아주 간단하게 적용할 수 있다. 모든 워드프레스의 post나 page는 id 값을 갖게 되며 이 특정 id 값을 css코드에 반영하면 된다.
CSS에 다음과 같이 적용되어 있다고 가정해보자.
.social-buttons {
background: white;
}예를 들어서 150이라는 id값을 가진 page만 social buttons 클래스의 배경을 검은색으로 만들고 싶다면 다음과 같이 적용하면 된다.
.page-id-150 .social-buttons {
background : black;
}현재 페이지의 id값을 확인하는 방법은?
- ADMIN 편집 페이지에서는 URL에서 ‘post=’ 다음에 나오는 숫자를 확인
- ADMIN 글 리스트 페이지에서는 제목에 마우스를 올리면 하단에 url이 표시되는데 위와 동일한 위치의 값을 찾는다. (아래 참고)
최근 글(Recent Post / 最近的帖子)
TAGS
요네
포스트 넘버가 3655라면
.post-id-3655 .social-buttons {
background : black;
}
이게 맞나요?
저는 안되는데
네오노마드제이(Neonomadj)
정확한 값은 개발자 도구에서 봐야 알 수 있을 듯 합니다. .post-id-3655에서 id를 빼고 .post-3655로 해보실까요? 테마마다 차이가 약간 있을 수 있습니다. 대부분 테마가 두 가지 형식으로 div값을 넣어놓더라고요.
andrew
안녕하세요. 혹시 css를 포스트(글)에만 적용하는 방법이 있을까요? 즉, 페이지에는 적용하지 않고 싶은데 제가 왕초보라 방법을 모르겠네요 ㅠㅠ
Neonomadj
post에만 적용될 수 있도록 css 선택자를 사용하면 되겠습니다. (테마에 따라서 사용해야 하는 선택자는 달라질 수도 있지만 개발자 도구로 확인 가능)
변경을 주려는 css 선택자 앞에 .post 혹은 .single-post 등의 선택자를 먼저 써서 ‘post’에만 적용할 수도 있습니다.
예를 들면 아래는 .single-post를 사용한 경우입니다.
.single-post .inside-article .entry-title {
text-align: center;
}
df
간단하군요