WordPress의 스타일과 스크립트로드하는 조건부 태그
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/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173914804298539.jpg" 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> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>wp_enqueue_style( $handle, $src, $deps, $ver, $media ); 로그인 후 복사로그인 후 복사
<🎜 🎜> <<>는 모두, 화면, 인쇄 등과 같은 스타일 시트에 적용되는 미디어 유형을 나타냅니다.
-
예를 들어
-
JavaScript 파일을 포함하려면 다음을 사용해야합니다 $handle
이 매개 변수는 <🎜 🎜>의 일부를 배치할지 여부를 기준으로 True 또는 False 값을 설정하는 마지막 매개 변수를 제외하고 <🎜 🎜>의 매개 변수와 유사합니다. -
이 코드는 WordPress를 알려줍니다
$src
WordPress는 Portfolio.js를로드하기 전에 jQuery를 다운로드해야합니다. 그렇지 않으면 후자는 제대로 작동하지 않습니다 (기본적으로 WordPress와 함께 jQuery를 가져올 필요가 없습니다). -
WordPress는이 파일을 HTML 문서의 $deps
섹션에 추가해야합니다. -
여러 스타일 시트 또는 스크립트 파일을 포함시켜야 할 수도 있습니다.이 경우 하나의 기능에서 모든 통화를 $ver
및 로 랩핑 한 다음이 기능을 적절한 WordPress 액션 훅업에 연결합니다. -
이것은 예입니다. WordPress 테마를 개발하는 경우 functions.php 파일에 추가 할 수 있습니다. $media
<🎜 🎜>
<🎜 🎜> <<> WordPress 조건부 태그
<🎜 🎜> WordPress는 특정 조건에서 적용 할 코드를 쉽게 선택하기 위해 정기적 인 문과 함께 사용되는 조건부 태그를 제공합니다.
예를 들어, 웹 사이트 및 기타 코드의 홈페이지에서만 일부 코드를 실행하려면 다음과 같은 내용을 작성할 수 있습니다.
if...else
<🎜 🎜>
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
wp_enqueue_style( 'portfolio', get_template_directory_uri() . '/css/portfolio.css',false,null,'screen');
페이지 제목을 사용하십시오
페이지 별칭 사용
이 기사에서는 WordPress 웹 사이트에 조건부 방식으로 스타일 시트와 스크립트 파일을 포함시키는 방법에 대해 논의합니다. 경우에 따라 추가 스타일의 수가 작기 때문에 전용 스타일 시트를 만드는 것은 의미가 없습니다. 웹 사이트에 필요하지 않은 HTTP 요청 만 생성됩니다.
, ,
, , , 등이 포함됩니다. 각 태그는 페이지가 단일 게시물, 특정 페이지, 홈페이지, 홈페이지, 카테고리 페이지, 태그 페이지 또는 작성자 페이지인지와 같은 특정 기준을 확인합니다.
wp_enqueue_script
조건부 태그를 사용할 수 있습니다. wp_enqueue_style