WordPress의 스타일과 스크립트로드하는 조건부 태그

코어 포인트

WordPress는 조건부로드 스타일 시트 및 스크립트를 지원하여 이러한 파일이 필요할 때만로드되도록하여 웹 사이트로드 속도를 높이고 사용자를위한 불필요한 데이터 다운로드를 줄입니다.

스타일링 및 스크립트는 WordPress.org 코딩 표준에 권장되는 모범 사례에 따라로드되어야합니다. 표준 WordPress 방법을 사용하면 비 호환성 문제를 피하고 웹 사이트가 효율적으로 유지 될 수 있습니다.

WordPress는 각각 사용자 정의 스타일 시트와 JavaScript 파일을 포함하는 데 사용되는 및 기능을 제공합니다. 이 기능은 WordPress가 필요한 모든 스타일 시트 및 스크립트를 찾아 올바른 순서로 다운로드하도록합니다.
• WordPress는 특정 조건에서 적용 할 코드를 결정하기 위해
문과 함께 사용할 수있는 조건부 태그를 제공합니다. 이 태그는 특정 스타일 시트와 스크립트가 방문자가 웹 사이트의 특정 페이지를 방문 할 때만 다운로드되도록하는 데 사용될 수 있습니다.
• wp_enqueue_style 이 기사는 Siteground와 공동으로 만들어진 시리즈의 일부입니다. Sitepoint를 가능하게 한 파트너를 지원해 주셔서 감사합니다. wp_enqueue_script WordPress 사이트가 특정 페이지에서 특정 스타일 시트 또는 JavaScript 파일 만 사용하거나 제한된 조건에서만 사용하면 사이트의 모든 장소를로드 할 필요가 없습니다. </press> </li> 이 기사에서는 웹 사이트가 필요한 경우에만 CSS 스타일 및 스크립트를로드하는 방법에 대해 안내합니다. 이러한 방식으로 웹 사이트가 더 빠르게로드되며 추가 파일이 포함 된 페이지를 방문하지 않는 사용자는 브라우저에서 불필요한 데이터를 다운로드 할 필요가 없습니다. <li> <code>if...else</code> WordPress에 왜 스타일과 스크립트를 추가해야합니까? </li> <an> WordPress 개발에 반포가있는 경우 HTML 문서의 섹션에 및 <p> 태그를 추가하여 스타일 시트 및 JavaScript 파일을 별도로로드 한 다음 완료됩니다. <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173914804298539.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Conditional Tags to Load Styles and Scripts in WordPress "> WordPress 웹 사이트를 실행하려면 소프트웨어 자체의 스타일 시트 및 JavaScript 코드, 많은 플러그인 및 활성 테마를 사용하는 것이 포함됩니다. </p> 이는 테마 또는 플러그인 저자가 특정 설치를 위해 어떤 스타일과 스크립트가 실행될 것인지 사전에 또는 이러한 리소스가 필요한 순서를 미리 알 수 없음을 의미합니다. 예를 들어, jQuery 라이브러리를 예로 들어 봅시다. WordPress 자체는이 라이브러리를 사용하여 AJAX 요청 및 기타 작업을 처리 할 수 ​​있으며 여러 플러그인 및 활성 테마에서도 사용할 수도 있습니다. <p> <and> 플러그인 및 테마 저자에 해당 태그를 HTML 문서에 직접 추가하여 필요한 스타일 시트 및 스크립트를 포함하면 충돌, 여러 번로드되는 리소스 및/또는 잘못된 로딩 순서로 이어질 수 있습니다. <em> <you> 이것이 WordPress.org 인코딩 표준에 권장되는 모범 사례를 따라 항상 스타일과 스크립트를로드 해야하는 이유입니다.<blockquote> <work> 모든 것을 조화롭게 작동 시키려면 테마와 플러그인이 표준 WordPress 방법을 사용하여 스크립트 및 스타일 시트를로드하는 것이 중요합니다. 이를 통해 웹 사이트가 효율적으로 유지되고 비 호환성 문제가 없습니다. <p> <s>에는 CSS 및 JavaScript - 테마 설명서 가 포함됩니다 </s></p> <p> </p> 사용 방법 <to> 사용자 정의 스타일 시트를 테마에 포함시키는 기본 기능은 다음과 같습니다. <p> <two> 첫 두 매개 변수 만 필요하며 다른 매개 변수는 선택 사항입니다. <strong> <code>wp_enqueue_style</code> 매개 변수는 스타일 시트의 이름입니다. 파일의 목적에 따라 메인, 포트폴리오 등을 지정할 수 있습니다. JavaScript 플러그인의 스타일 시트를 포함하는 경우 플러그인의 이름을 사용하십시오. <code>wp_enqueue_script</code> </strong> 는 스타일 시트가있는 URL을 나타냅니다. </two></p> <p> 매개 변수는이 스타일 시트가 다른 스타일 시트에 의존하는지 여부를 지정합니다. </p> <pre class='brush:php;toolbar:false;'>wp_enqueue_style( $handle, $src, $deps, $ver, $media ); 스타일 시트의 버전 번호를 결정합니다.

  는 모두, 화면, 인쇄 등과 같은 스타일 시트에 적용되는 미디어 유형을 나타냅니다.

  예를 들어 WordPress 웹 사이트에 portfolio.css라는 스타일 시트를 추가하는 코드는 다음과 같습니다.
  • JavaScript 파일을 포함하려면 다음을 사용해야합니다 $handle 이 매개 변수는 의 일부를 배치할지 여부를 기준으로 True 또는 False 값을 설정하는 마지막 매개 변수를 제외하고 의 매개 변수와 유사합니다.
  웹 사이트에 portfolio.js를 추가하려고한다고 가정 해 봅시다. 코드는 다음과 같습니다.
  • 이 코드는 WordPress를 알려줍니다 $src Active Topic 디렉토리의 JS 하위 폴더에 위치한 포트폴리오 파일을 사용하려고합니다.
  WordPress는 Portfolio.js를로드하기 전에 jQuery를 다운로드해야합니다. 그렇지 않으면 후자는 제대로 작동하지 않습니다 (기본적으로 WordPress와 함께 jQuery를 가져올 필요가 없습니다).
  • WordPress는이 파일을 HTML 문서의 $deps 섹션에 추가해야합니다.
  • 여러 스타일 시트 또는 스크립트 파일을 포함시켜야 할 수도 있습니다.이 경우 하나의 기능에서 모든 통화를 $ver 및
  로 랩핑 한 다음이 기능을 적절한 WordPress 액션 훅업에 연결합니다.
  • 이것은 예입니다. WordPress 테마를 개발하는 경우 functions.php 파일에 추가 할 수 있습니다. $media
  이제 WordPress가 필요한 모든 스타일 시트와 스크립트를 찾아 올바른 순서로 다운로드 할 것이라고 확신 할 수 있습니다.
  조건 스타일 시트 및 스크립트의 로딩

  위의 코드는 잘 작동하며 WordPress 모범 사례를 따릅니다. 그러나 WordPress는 웹 사이트의 모든 장소에서 Portfolio.css 및 Portfolio.js를 모두 다운로드합니다. 방문자가 포트폴리오 페이지를 방문한 적이 없다면 불행한 일이지만 발생할 수 있으며 브라우저에는 두 개의 불필요한 파일을로드합니다.

  이제 방문자가 포트폴리오 섹션에 액세스하는 경우에만 WordPress에 Portfolio.css 및 Portfolio.js가 모두 포함되어 있는지 확인하십시오.

  WordPress 조건부 태그

  WordPress는 특정 조건에서 적용 할 코드를 쉽게 선택하기 위해 정기적 인

  문과 함께 사용되는 조건부 태그를 제공합니다. 예를 들어, 웹 사이트 및 기타 코드의 홈페이지에서만 일부 코드를 실행하려면 다음과 같은 내용을 작성할 수 있습니다. 대신 웹 사이트의 홈페이지 외부에 특정 코드를 실행하려면 다음을 작성합니다.

  WordPress는 많은 조건부 태그를 제공하며 테마 매뉴얼의 조건부 태그 섹션에서 전체 목록을 볼 수 있습니다.

  는 조건부 태그를 사용하여 WordPress가 방문자가 웹 사이트의 포트폴리오 페이지를 방문한 경우에만 Portfolio.css 및 Portfolio.js를 다운로드 할 수 있습니다. if...else 이 작업을 수행 할 수있는 몇 가지 방법을 확인해 봅시다.

  사용자 페이지 ID

  조건부 태그를 사용하여 사용자가 웹 사이트의 포트폴리오 페이지 ID를 사용하고 있는지 확인할 수 있습니다.

  페이지 ID를 이해하려면 다음을 수행하십시오

  wp_enqueue_style( $handle, $src, $deps, $ver, $media );

  WordPress 웹 사이트의 관리자 패널에 로그인하십시오.

  웹 사이트의 모든 페이지 목록에 액세스하려면 페이지를 클릭하십시오.

위 내용은 WordPress의 스타일과 스크립트로드하는 조건부 태그의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!