HOME
워드프레스

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

on
2021-04-22

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

TAGS
5 Comments
  1. 응답

    요네

    2023-07-06

    포스트 넘버가 3655라면

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

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

    • 응답

      네오노마드제이(Neonomadj)

      2023-07-06

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

  2. 응답

    andrew

    2021-10-15

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

    • 응답

      Neonomadj

      2021-10-15

      post에만 적용될 수 있도록 css 선택자를 사용하면 되겠습니다. (테마에 따라서 사용해야 하는 선택자는 달라질 수도 있지만 개발자 도구로 확인 가능)

      변경을 주려는 css 선택자 앞에 .post 혹은 .single-post 등의 선택자를 먼저 써서 ‘post’에만 적용할 수도 있습니다.

      예를 들면 아래는 .single-post를 사용한 경우입니다.
      .single-post .inside-article .entry-title {
      text-align: center;
      }

  3. 응답

    df

    2021-06-03

    간단하군요

Comments

RELATED POSTS
검색하기