특정 페이지/게시물에 CSS를 적용하는 방법

게시 됨: 2022-01-04

워드프레스의 특정 페이지나 게시물에 CSS를 적용 할 수 있다는 사실을 알고 계셨나요? 예, WordPress의 CSS 친화적인 특성으로 인해 이것이 가능합니다. 그리고 이 가이드에서는 특정 페이지나 게시물에 CSS를 추가할 수 있는 다양한 방법을 보여줍니다.

모든 WordPress 테마는 일반적으로 각 콘텐츠 유형에 다른 스타일을 적용합니다. 게시물, 페이지, 분류, 프로필 및 기타 콘텐츠에는 각각 다른 스타일시트가 있습니다. 플러그인과 WordPress의 다른 모든 측면도 마찬가지입니다.

그러나 WordPress의 유연성으로 인해 특정 페이지 및 게시물 유형에 대해 다른 스타일시트를 사용할 수도 있습니다. 하지만 프로세스를 진행하기 전에 CSS를 추가해야 하는 이유를 살펴보겠습니다.

특정 페이지 또는 게시물에 CSS를 적용하는 이유

특정 페이지 및 게시물에 CSS를 추가하는 것은 웹사이트를 구축하거나 웹사이트를 디자인할 때 매우 유용합니다. CSS는 일반적으로 웹사이트의 시각적 모양을 사용자 정의하는 데 사용됩니다. 따라서 웹 사이트 전반에 CSS를 사용하면 웹 사이트 방문자에게 원하는 방식으로 웹 페이지를 정확하게 표시하는 데 매우 도움이 될 수 있습니다.

웹사이트의 다른 페이지나 게시물과 비교하여 독특한 디자인 이 필요한 특정 페이지나 게시물 유형이 있을 수 있습니다. 이 경우 가장 좋은 방법 중 하나는 특정 페이지나 게시물에 CSS를 적용하는 것입니다. 이러한 페이지나 게시물은 일반적으로 웹사이트 메뉴에 추가됩니다. 그러나 여기에는 상점 페이지, 제품 페이지 또는 홈 페이지와 같은 다른 고유 페이지 및 게시물도 포함될 수 있습니다.

예를 들어 QuadLayers에서도 Portfolio 및 About과 같은 특정 페이지에서 CSS를 사용하여 다른 페이지나 게시물 유형과 차별화했습니다. 이제 더 이상 고민하지 않고 프로세스를 진행해 보겠습니다.

특정 페이지 또는 게시물에 CSS를 적용하는 방법

특정 페이지나 게시물에 적용 CSS를 추가할 수 있는 다양한 방법이 있습니다. 그러나 다음은 가장 일반적인 3가지입니다 .

HTML ID 또는 클래스 사용
PHP 함수 추가
특정 페이지 또는 게시물에 CSS 파일 포함

이러한 모든 접근 방식은 CSS를 여러 목적으로 적용하는 데 사용할 수 있습니다. 적절한 단계별 자습서를 통해 이 문서에서 이러한 모든 접근 방식을 살펴보겠습니다.

1. HTML ID 또는 클래스 사용

이것은 특정 페이지나 게시물에 CSS를 적용하려는 경우 가장 일반적이고 널리 인정되는 접근 방식 중 하나입니다. 우리가 해야 할 일은 페이지나 게시물이 가질 고유한 식별자를 가져오는 것뿐입니다. 그런 다음 이 HTML 클래스 또는 ID를 사용하여 모든 CSS 스크립트를 원하는 페이지 또는 게시물로 타겟팅할 수 있습니다.

1.1. 페이지의 HTML 클래스 또는 ID 찾기

먼저 CSS 스크립트에 사용할 id 또는 class를 찾아야 합니다. 이것은 브라우저 검사 도구를 사용하여 쉽게 찾을 수 있습니다.

CSS를 적용할 페이지를 열고 편집하려는 요소를 마우스 오른쪽 버튼으로 클릭 하기만 하면 됩니다. 그런 다음 검사 를 클릭합니다.

여기서 body HTML 태그를 확인합니다. 이것은 사용 중인 테마에 따라 다릅니다.

다음 예제에서는 모두 Twenty Twenty 테마를 사용했습니다. 따라서 Twenty Twenty 테마를 사용하여 웹사이트의 홈 페이지를 검사하면 다음과 같이 표시됩니다.

위의 스크린샷에서 홈 페이지의 고유 식별자는 " home " 클래스입니다. 따라서 일부 CSS 규칙을 홈페이지에만 적용하려면 선택기에서 이 클래스를 사용해야 합니다.

예를 들어 홈페이지의 로고에만 스타일을 적용하고 싶다고 가정해 보겠습니다. 그런 다음 홈 클래스 외에도 로고 이미지 선택기가 필요합니다. 다시 말하지만 이것은 브라우저 검사 도구에서 얻을 수 있습니다.

이 경우 "사용자 정의 로고" 클래스 를 사용하여 로고에 스타일을 적용합니다. 이제 이전 단계에서 잡은 클래스와 함께 넣어봅시다. 마지막으로 다음 CSS 선택기를 사용하여 홈 페이지에만 스크립트를 적용할 수 있습니다.

 .home .custom-logo{ /*your CSS here */}

참고: 모든 HTML 태그를 따라 선택기에 포함할 필요는 없습니다. 스타일을 지정하려는 요소가 고유한 페이지 선택기에서 멀리 떨어져 있더라도 모두 건너뛸 수 있습니다.

물론 더 구체적인 선택기가 필요한 경우 전체 CSS 경로 선택기를 사용할 수 있습니다. 그러나 이것은 매우 압도적이며 대부분의 경우 필요하지 않습니다.

예를 들어, 이것은 이전에 본 것과 동일한 로고 요소의 스타일을 지정하기 위한 매우 구체적인 선택기입니다.

 html body.home div#page.site header#masthead div.site-branding div.site-logo span.custom-logo-link img.custom-logo{ /*your CSS here */}

1.2. 게시물의 HTML 클래스 또는 ID 찾기

페이지와 마찬가지로 각 게시물에도 고유한 HTML 클래스가 있어야 합니다. 다시 말하지만, 브라우저 개발자 도구를 사용하여 CSS를 적용하려는 게시물의 요소를 검사하면 됩니다. 그러면 postid 속성과 마찬가지로 고유 식별자를 볼 수 있습니다.

Twenty Twenty 테마의 다음 게시물에서 이 게시물을 식별하는 클래스는 postid -557입니다.

게시물 ID 검사 특정 페이지 게시물에 CSS 적용

마찬가지로 웹 사이트의 다른 페이지에서도 동일한 작업을 수행할 수 있습니다. 페이지를 식별하는 고유 클래스를 사용합니다. 다음 스크린샷을 보면 페이지를 식별하는 클래스가 page-id-357 임을 알 수 있습니다.

페이지 ID 검사 특정 페이지 게시물에 CSS 적용

마지막으로 사용자 정의 로고 예제와 같이 웹사이트의 필요에 맞는 CSS 선택기를 생성합니다. 그런 다음 모양 > 사용자 정의 > 추가 CSS 에서 추가하여 특정 페이지 또는 게시물에 CSS를 적용할 수 있습니다. 도움이 더 필요한 경우 WordPress에 CSS를 적용하거나 브라우저 개발자 도구를 사용하여 CSS를 적용하는 방법에 대한 가이드를 볼 수 있습니다.

2. PHP 기능 추가

이전 방법은 사용자 정의 CSS를 특정 게시물이나 페이지에 적용하는 데 적합합니다. 필요한 대부분의 사용자 지정에 충분합니다. 그러나 어떤 경우에는 다음과 같은 제한 사항이 있을 수 있습니다.

테마에 스타일을 지정해야 하는 콘텐츠에 대한 고유한 HTML 클래스 또는 ID가 없습니다.
CSS 규칙 목록이 많으며 별도의 파일에 저장해야 합니다.
현재 페이지 외에 다른 조건을 적용하려고 합니다.

특정 페이지나 포스트에 CSS를 적용하고자 할 때 비슷한 문제가 발생한다면 PHP 기능을 사용하는 것이 더 나을 것입니다.

그러나 시작하기 전에 WordPress 웹 사이트를 백업하거나 이 접근 방식에 대한 하위 테마를 만들어야 합니다. 귀하의 웹사이트에서 일부 민감한 파일을 편집할 것입니다. 따라서 불필요한 변경으로 인해 웹 사이트에 추가 문제가 발생할 수 있습니다.

도움이 필요한 경우 WordPress용 최고의 하위 테마 플러그인 중 하나를 사용하여 하위 테마를 만들 수도 있습니다.

2.1. 페이지/게시물 ID 찾기

첫 번째 단계는 스타일을 적용하려는 페이지 또는 게시물의 ID를 확인하는 것입니다. id 값이 이전 단계의 값과 동일함을 알 수 있습니다. 그러나 이것은 이전에 사용한 것과 동일한 HTML ID가 아닙니다.

지금 언급하고 있는 id는 게시물과 페이지를 식별하는 PHP 변수입니다. 반면에 이전 접근 방식의 id는 HTML 클래스를 식별합니다.

고맙게도 웹사이트에서 페이지와 게시물 ID를 찾는 것은 매우 쉽습니다. 편집기를 열면 백엔드 관리 대시보드에서 페이지 및 게시물의 ID를 볼 수 있습니다. 게시물 또는 페이지 ID는 브라우저의 URL에 언급되어 있습니다.

페이지 ID URL 특정 페이지 게시물에 CSS 적용

페이지 또는 게시물의 ID를 얻는 또 다른 방법은 하위 테마의 functions.php 파일에서 다음 스크립트를 사용하는 것입니다. Appearance > Theme Editor 로 이동하여 functions.php 파일을 엽니다.

그런 다음 편집기에 다음 스니펫을 붙여넣고 파일을 업데이트 합니다. 프런트 엔드에 페이지 ID를 인쇄합니다.

 add_action('wp_head',함수(){
    $page_id = get_queied_object_id();
    에코 $page_id;
});

페이지 ID 프런트 엔드 특정 페이지/게시물에 CSS를 적용하는 방법

CSS를 적용해야 하는 게시물이나 페이지의 PHP 식별자를 알고 나면 머리에 CSS를 인쇄하기만 하면 됩니다. 이전에 사용한 것과 동일한 후크, 즉 wp_head() 를 사용할 수 있습니다.

다시 한 번 functions.php 파일에 다음 스니펫을 붙여넣으세요.

 add_action('wp_head','my_head_css');
함수 my_head_css(){
    $page_id = get_queied_object_id();
    if($page_id==97){
        echo "<style> /* 여기에 CSS를 */ </style>";
    }
}

"여기에 CSS" 섹션에 CSS를 추가하고 파일을 업데이트 했는지 확인합니다.

3. 특정 페이지 또는 게시물에 CSS 파일 포함

이전 방법은 특정 게시물이나 페이지에 필요한 기본 사용자 지정을 위해 작은 CSS 조각을 추가하는 데 적합합니다. 그러나 더 큰 CSS 스크립트의 경우 모범 사례를 따라 분리된 CSS 파일을 업로드해야 합니다. 모든 사용자 정의 CSS가 수집되어야 하는 위치.

3.1. 코드 편집기를 사용하여 CSS 파일 만들기

먼저 코드 편집기를 사용하여 필요한 모든 CSS 스크립트로 분리된 CSS 파일을 만들어야 합니다. Visual Studio Code, Sublime 텍스트 또는 CSS 파일을 지원하는 기타 편집기를 사용할 수 있습니다.

그런 다음 CSS 확장자를 사용하여 새 파일을 만들고 여기에 코드를 붙여넣습니다. 이 튜토리얼에서는 파일 이름을 my-style.css 로 지정했습니다.

3.2. CSS 파일을 하위 테마 폴더에 업로드

이제 생성한 CSS 파일을 하위 테마 디렉토리에 업로드해야 합니다. 이를 위해 FileZilla와 같은 FTP 클라이언트를 사용하여 파일을 업로드할 수 있습니다. 메인 하위 테마 디렉토리 자체에 업로드할 수도 있습니다.

3.2. 사용자 정의 CSS 파일을 대기열에 추가

이제 functions.php 파일에 코드 스니펫을 추가하여 사용자 정의 CSS 파일을 WordPress 웹사이트에 추가할 수 있습니다.

다음 스크립트에서는 CSS 파일을 WP 웹사이트에 적용하는 올바른 방법인 wp_enqueue_script() 후크를 사용할 것입니다. 함수 내에서 조건이 충족되는 경우에만 CSS 파일( my-styles.css )을 등록하고 대기열에 넣습니다. 이전 예제와 동일한 사용법입니다.

그런 다음 get_queried_object_id() 함수는 현재 페이지 또는 게시물의 ID를 검색합니다. 다음 스크립트를 functions.php 파일에 다시 한 번 추가하고 업데이트 하기만 하면 됩니다.

 add_action( 'wp_enqueue_scripts', 'my_theme_styles' );

함수 my_theme_styles() {
    if(get_queied_object_id()==97){
        wp_register_style( 'my-styles', get_stylesheet_directory_uri() . '/my-styles.css');
        wp_enqueue_style( 'my-styles', get_stylesheet_directory_uri() . '/my-styles.css');
    }
}

참고: 위의 샘플 스크립트에서는 이전 예제에서 사용한 것과 동일한 ID 참조인 97을 참조합니다.

CSS 파일 추가에 대한 자세한 내용은 CSS를 WordPress에 적용하기 위한 자세한 가이드를 참조하세요.

결론

이것은 CSS를 특정 페이지나 게시물에 적용할 수 있는 다양한 방법입니다. 웹 사이트의 특정 페이지 및 게시물에 대한 독특한 디자인을 만드는 데 많은 도움이 될 수 있습니다. 요약하자면 특정 페이지 및 게시물에 CSS를 추가하는 가장 일반적인 3가지 방법이 있습니다.

HTML ID 또는 클래스 사용
PHP 함수 추가
특정 페이지 또는 게시물에 CSS 파일 포함

그 중 가장 간단한 접근 방식은 CSS 선택기에 HTML ID 또는 클래스를 사용하는 것입니다. 그러나 테마에 제한 사항이 있는 경우 다음으로 가장 좋은 방법은 CSS를 적용하는 PHP 기능을 추가하는 것입니다. 마지막으로 특정 페이지나 게시물에 큰 CSS 스크립트를 적용해야 하는 경우 CSS 파일에 포함시키는 것이 가장 적합한 방법입니다.

웹사이트에서 더 많은 CSS를 사용하려는 경우 CSS로 Divi 메뉴를 사용자 정의하거나 프로그래밍 방식으로 WooCommerce 상점을 편집하는 자습서도 있습니다. 유사하게, 프로그래밍 방식으로 게시물과 페이지를 생성하고, 게시물을 페이지로 전환하고, 맞춤형 게시물 유형을 생성하거나, WordPress의 페이지에 게시물을 추가하는 가이드의 도움으로 페이지와 게시물을 훨씬 더 사용자 정의할 수도 있습니다.

이제 CSS를 특정 페이지나 게시물에 적용할 수 있습니까? 이 튜토리얼이 도움이 되었나요? 의견에 알려주십시오. 그 동안 방문하고 싶은 기사가 몇 개 더 있습니다.

WordPress에서 게시물 유형을 변환/변경하는 방법
프로그래밍 방식으로 WordPress 사용자 정의 게시물 유형 만들기
WooCommerce 장바구니 페이지를 사용자 정의하는 방법