플러그인에 인라인 CSS를 포함해도 괜찮습니까?


21

일반적으로 플러그인에서는 wp_enqueue_style을 사용하여 스타일을 추가합니다. 그러나 현재 CSS 몇 줄만 필요한 플러그인을 만들고 있으며 요청을 저장하기 위해 인라인 스타일을 제공하는 것이 더 좋은지 궁금합니다. 분명히 wp_enqueue_style을 사용하면 많은 이점이 있지만 작은 CSS를 추가로 요청할 가치가 있습니까? 이 영역에 허용되는 '모범 사례'가 있습니까?

답변:


14

TL; DR; Enqueue

외부 스타일 시트 사용

  • PRO : 모든 스타일이 한 곳에 있습니다.
  • PRO : 웹 페이지 코딩을 줄입니다.
  • PRO : 쉽게 플러그인을 유지합니다.
  • PRO : 후크를 사용하여 파일 위치를 변경할 수 있습니다.
  • PRO : 후크를 사용하여 파일 대기열을 해제 할 수 있습니다.
  • PRO : 축소 스타일을 자동으로 사용할 수 있습니다.
  • CON : 추가 HTTP 요청을 추가 할 수 있습니다 (극복 가능).

인라인 스타일 사용

  • PRO : 적용된 스타일을 직접 볼 수 있습니다.
  • PRO : 추가 HTTP 요청이 없습니다.
  • 단점 : 후크를 사용하여 스타일을 변경할 수 없습니다.
  • CON : 스타일을 unqueue하는 후크를 사용할 수 없습니다.
  • 단점 : 스타일을 전혀 축소 할 수 없습니다.
  • CON : 필요 ! 스타일을 무시하는 것이 중요합니다

일반적으로 나는 말할 것입니다 : 물론, 당신이 그것을 사용하는 유일한 사람이라면, 계속해서 인라인으로하십시오. 그러나 플러그인 에 대해 이야기하고 있습니다 . 즉, 코드가 공개 되므로 확장 성을 목표로합니다. 현재 몇 줄의 스타일 만 있습니다.

  • CON : 그 수가 적어지면 어떨까요?
  • CON : 누군가 플러그인을 확장하면 어떻게 되나요?
  • CON : 누군가가 그것을 바꾸고 싶다면 어떻게해야합니까?
  • CON : 누군가 CSS 파일에서 검색하면 어떻게됩니까?
  • CON : 누군가 자동으로 축소하려는 경우 어떻게합니까?

따라서 대기열에 넣습니다. (바람직하게는 플러그인이 필요한 경우에만 조건부 로) JavaScript에도 동일하게 적용됩니다 . 그러나 가능하면 바닥 글에 포함되어야합니다.


백엔드에서 인라인 스타일을 사용해도 되나요?
shea

@bungeshea 누군가가 플러그인을 변경하려는 경우 백엔드를 너무 올바르게 변경하고 싶을 수도 있습니다.;) 백엔드에있을 때만 스크립트를 대기열에 추가하십시오. 예를 들어, function _your_enqueue( $hook )$ hook를 테스트하여 옵션 페이지에 있는지 확인할 수 있습니다. 또는 당신은 사용할 수 있습니다 current_screen()에 대한 간단한 속성. 문제는이 작업을 수행 할 수는 있지만 일반적으로 플러그인은 서버 측 코드 용 .php 파일로 구성되며 이미지, .js 및 .css 파일이 있거나 없을 수 있습니다.
Derk-Jan 1

1
추가 http 요청을 극복 할 수 있습니다.이를 명확히 할 수 있습니까?
더스틴

2
할 수는 없지만 플러그인 사용자는 할 수 있습니다. 페이지가 출력되기 직전에 여러 가지 플러그인과 함수가 작성되어 있으며, 모든 큐 스타일을 가져 와서 축소 된 결합 파일에 추가합니다. 추가 한 CSS 파일 수에 관계없이 뷰어에는 하나만 표시됩니다. 자바 스크립트와 동일합니다. 그러나 이것은 귀하의 경우 '문제'가 아닙니다. 필요하지 않은 최적화이며 imho, 여분의 HTTP 요청은 모든 PRO에 비해 부족합니다.
Derk-Jan

1
마지막 문장에 대해
-AFAIK

2

이것은 대답하기 어렵고 공식 답변이 있는지 확실하지 않습니다.

나는 요청을 저장하는 것에 대한 감정을 이해하지만 인라인 스타일은 거의 항상 승리합니다. 테마 또는 최종 사용자는 CSS를 변경하는 데 어려움을 겪을 것입니다.

이를 염두에두고 공개적으로 출시 된 플러그인 에서이 작업을 수행한다고 생각합니다 ...

  1. 예를 들어 슬라이드 쇼의 경우와 같이 CSS가 플러그인 의 기능 에 절대적으로 중요한 경우.

  2. 또는 플러그인에 필터를 포함시켜 인라인 CSS를 변경하거나 제거 할 수 있습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.