플러그인 CSS를 재정의하는 가장 좋은 방법은 무엇입니까?

36

현재 CSS 스타일을 사용하여 플러그인 스타일을 재정의합니다. 플러그인을 업데이트 할 때 두통을 덜 겪기 때문에 이것을 편집하는 것이 좋습니다.

내 스타일 시트가 플러그인 다음에로드되면 좋을 것이므로 더 구체적이지 않아야합니다. 이렇게하면 스타일 시트가 훨씬 더 예쁘게됩니다.

plugins css

— 마일드 퍼즈
소스

1

CSS 특이성에 대해 가르쳐 주셔서 감사합니다. 질문 전에는 들어 본 적이 없으며 많은 도움이되었습니다.

— luke_mclachlan

21

제안한 바와 같이 가장 세련된 방법은 플러그인에서 CSS를 삽입 한 후 CSS 재정의를로드하는 것입니다. 이것은 달성하기가 매우 쉽습니다 . 스타일 시트를 참조하기 전에 header.php전화를 걸기 만하면됩니다 wp_head().

<head>
    <!-- all the usual preamble stuff goes here -->

    <?php wp_head(); ?>

    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
</head>

— 팀 코 울터
소스

하위 테마를 사용하는 경우 어떻게해야합니까? 부모 테마의 header.php를 재정의하고 싶지 않습니다.

— Jules

19

플러그인이 CSS를 처리 할 수있는 몇 가지 방법이 있습니다.

가장 좋은 경우 : 플러그인은 CSS를 대기열에 넣고 비활성화 할 수있는 옵션을 제공합니다 (비활성화, CSS 코드를 스타일 시트에 복사하고 행복).
좋은 경우 : 플러그인은 스타일을 큐에 넣는 함수를 후크합니다 (후크 해제 기능, 필요한 경우 개조로 자신의 후크).
일반적인 경우 : 플러그인은 CSS를 직접 큐에 넣습니다. 스크립트를 대기열에서 빼는 방법을 참조하십시오 . (스타일에도 적용됨). 짧은 버전-향후 WP 릴리스에는 큐 제거 기능이 있습니다.wp_deregister_*
나쁜 경우 : 플러그인은 다른 것들 중에서 CSS를 에코합니다. 사례별로...

전반적으로 개별 스타일 시트를 비활성화하고 자신의 스타일 시트를 통합하여 문제를 최소화하고 성능을 향상시키는 것이 좋습니다 (파일을 덜 가져옵니다).

— 갈증
소스

그것이 무엇인지 어떻게 알 수 있습니까?

— IanEdington

1

코드를 주로 보면서. :)

— Rarst

1

"기꺼이하지 않는"플러그인 CSS의 사본을 테마 폴더에 저장하고 추가하여 테마 CSS로 가져옵니다.

@import url('name-of-the-plugin-css.css');

그것에 (물론, 내가 주입 한 .css의 이름을 바꿉니다). 그런 다음 테마 폴더에서 CSS 사본을 수정하고 다른 파일과 마찬가지로 서버에 저장합니다. 예, 때때로 ID 또는 클래스에 "! 중요"를 할당하여 변경된 "네일"이 필요할 수 있습니다.

이것이 최신 기술인지는 모르겠지만 해를 끼치 지 않으며 정상적으로 작동합니다.

— 스벤 노치
소스

1

또 다른 우아한 방법은 CSS의 특수성을 사용하는 것입니다.

플러그인의 CSS가 다음과 같이 말하는 경우 :

div.product div.images img {
  ......
}

당신은 당신의 CSS에서 정의합니다 :

body div.product div.images img {
  ......
}

비슷한 질문에 대해서는 Michael Rader 의 답변을 참조하십시오 .

— 안드레아스
소스

고마워요 이것은 나를 위해 받아 들여지는 대답입니다. 일반적인 style.css를 사용하고 특이성은 빛처럼 작동합니다!

— Luca Reghellin

0

이미 특이성과! important를 사용하고 있던 플러그인 CSS를 재정의하기 위해 클래스를 재정의하기 위해 id를 사용했습니다. 이것은 내 코드를 약간 정리했습니다. 물론 요소뿐만 아니라 클래스에 ID가 할당 된 경우에만 작동한다는 점에서 완벽한 솔루션은 아닙니다.

이론적으로 속성 선택기를 사용할 수도 있습니다. 그러나 나는 그 이론을 아직 시험해 보지 않았다.

— 숀 H. 스미스
소스

0

내 맞춤 CSS에! important를 사용하고 문제가있는 플러그인의 스타일을 재정의했습니다. 플러그인 개발자는 플러그인 CSS에서! important를 사용하고 있었기 때문에! important 없이는 덮어 쓸 수 없었습니다.

body {
font-family: "Open Sans", Arial, sans-serif !important;
font-weight: 300 !important;    
}

— 랜디 D
소스

-1

이미 특이성과! important를 사용하고 있던 플러그인 CSS를 재정의하기 위해 클래스를 재정의하기 위해 id를 사용했습니다. 이것은 내 코드를 약간 정리했습니다. 물론 요소뿐만 아니라 클래스에 ID가 할당 된 경우에만 작동한다는 점에서 완벽한 솔루션은 아닙니다.

이론적으로 속성 선택기를 사용할 수도 있습니다. 그러나 나는 그 이론을 아직 시험해 보지 않았다.

— dsdsd
소스