워드프레스

워드프레스 특정 페이지 혹은 포스트에서만 Custom CSS 적용하기(초간단)

2021년 4월 22일

네오노마드제이(Neonomadj)

웹사이트에서 특정 페이지에서만 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이 표시되는데 위와 동일한 위치의 값을 찾는다. (아래 참고)

1428이 id값이 된다.

태그 · css, 워드프레스

같은 카테고리의 글

댓글 5개

요네

2023.07.06

포스트 넘버가 3655라면

.post-id-3655 .social-buttons {
background : black;
}

이게 맞나요?
저는 안되는데

답글
1. 네오노마드제이(Neonomadj)
  
  2023.07.06
  
  정확한 값은 개발자 도구에서 봐야 알 수 있을 듯 합니다. .post-id-3655에서 id를 빼고 .post-3655로 해보실까요? 테마마다 차이가 약간 있을 수 있습니다. 대부분 테마가 두 가지 형식으로 div값을 넣어놓더라고요.
  
  답글
andrew

2021.10.15

안녕하세요. 혹시 css를 포스트(글)에만 적용하는 방법이 있을까요? 즉, 페이지에는 적용하지 않고 싶은데 제가 왕초보라 방법을 모르겠네요 ㅠㅠ

답글
1. Neonomadj
  
  2021.10.15
  
  post에만 적용될 수 있도록 css 선택자를 사용하면 되겠습니다. (테마에 따라서 사용해야 하는 선택자는 달라질 수도 있지만 개발자 도구로 확인 가능)
  
  변경을 주려는 css 선택자 앞에 .post 혹은 .single-post 등의 선택자를 먼저 써서 ‘post’에만 적용할 수도 있습니다.
  
  예를 들면 아래는 .single-post를 사용한 경우입니다.
  .single-post .inside-article .entry-title {
  text-align: center;
  }
  
  답글
df

2021.06.03

간단하군요

답글

댓글 남기기 취소