집 >CMS 튜토리얼 >Word누르다 >WordPress의 스타일과 스크립트로드하는 조건부 태그

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

Christopher Nolan원래의: 2025-02-10 08:40:39654검색

Conditional Tags to Load Styles and Scripts in WordPress

코어 포인트

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

스타일링 및 스크립트는 WordPress.org 코딩 표준에 권장되는 모범 사례에 따라로드되어야합니다. 표준 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" 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"><code class="language-php">wp_enqueue_style( $handle, $src, $deps, $ver, $media );</code> 스타일 시트의 버전 번호를 결정합니다.
는 모두, 화면, 인쇄 등과 같은 스타일 시트에 적용되는 미디어 유형을 나타냅니다.
조건 스타일 시트 및 스크립트의 로딩
위의 코드는 잘 작동하며 WordPress 모범 사례를 따릅니다. 그러나 WordPress는 웹 사이트의 모든 장소에서 Portfolio.css 및 Portfolio.js를 모두 다운로드합니다. 방문자가 포트폴리오 페이지를 방문한 적이 없다면 불행한 일이지만 발생할 수 있으며 브라우저에는 두 개의 불필요한 파일을로드합니다.
이제 방문자가 포트폴리오 섹션에 액세스하는 경우에만 WordPress에 Portfolio.css 및 Portfolio.js가 모두 포함되어 있는지 확인하십시오.
WordPress 조건부 태그
WordPress는 특정 조건에서 적용 할 코드를 쉽게 선택하기 위해 정기적 인
문과 함께 사용되는 조건부 태그를 제공합니다. 예를 들어, 웹 사이트 및 기타 코드의 홈페이지에서만 일부 코드를 실행하려면 다음과 같은 내용을 작성할 수 있습니다. 대신 웹 사이트의 홈페이지 외부에 특정 코드를 실행하려면 다음을 작성합니다.
WordPress는 많은 조건부 태그를 제공하며 테마 매뉴얼의 조건부 태그 섹션에서 전체 목록을 볼 수 있습니다.
는 조건부 태그를 사용하여 WordPress가 방문자가 웹 사이트의 포트폴리오 페이지를 방문한 경우에만 Portfolio.css 및 Portfolio.js를 다운로드 할 수 있습니다. if...else 이 작업을 수행 할 수있는 몇 가지 방법을 확인해 봅시다.
사용자 페이지 ID
조건부 태그를 사용하여 사용자가 웹 사이트의 포트폴리오 페이지 ID를 사용하고 있는지 확인할 수 있습니다.
페이지 ID를 이해하려면 다음을 수행하십시오
```
<code class="language-php">wp_enqueue_style( $handle, $src, $deps, $ver, $media );</code>
```
WordPress 웹 사이트의 관리자 패널에 로그인하십시오.
웹 사이트의 모든 페이지 목록에 액세스하려면 페이지를 클릭하십시오.
관심있는 페이지의 제목을 클릭하여 편집기에서 열 수 있습니다. <pre class="brush:php;toolbar:false"><code class="language-php">wp_enqueue_style( 'portfolio', get_template_directory_uri() . '/css/portfolio.css',false,null,'screen');</code></pre> <now> 이제 페이지가 편집기에서 열려 있습니다. 브라우저 주소 표시 줄에서 URL을 확인하십시오. Post = + 숫자와 같은 것을 볼 수 있습니다. 이 번호는 페이지 ID입니다. <p> </p> <know> 이제 페이지 ID를 알았으므로 조건부 태그를 사용하여 아래에 표시된 것처럼 이전에 테마 스타일 시트 및 스크립트를 포함한 코드를 수정할 수 있습니다. <p> </p> 페이지 제목을 사용하십시오 <p> <condition> 페이지의 조건부 레이블은 페이지 제목에도 적용됩니다. 포트폴리오 페이지가 "내 포트폴리오"라는 제목이 있다면 코드는 다음과 같을 수 있습니다 (Brevity의 조건부 섹션을 추가했습니다) : </condition></p> <p> <strong> 페이지 별칭 </strong> 사용 <the> 페이지의 사용자 친화적 인 URL 인 페이지 별칭으로 조건부 태그를 사용할 수 있습니다. 다음은 실제 응용 프로그램에서 보이는 것입니다 : </the></p> 결론 <p> </p> 이 기사에서는 WordPress 웹 사이트에 조건부 방식으로 스타일 시트와 스크립트 파일을 포함시키는 방법에 대해 논의합니다. 경우에 따라 추가 스타일의 수가 작기 때문에 전용 스타일 시트를 만드는 것은 의미가 없습니다. 웹 사이트에 필요하지 않은 HTTP 요청 만 생성됩니다. <p><appropriate> 그러나 적절한 조건에서, 예를 들어, 페이지 또는 테마 영역의 디자인은 웹 사이트의 나머지 부분과 다르기 때문에 스타일 시트 및 스크립트의 선택적 으로드는 WordPress 모범 사례를 따르고 방문자의 브라우저가 디스플레이 만 다운로드하는지 확인합니다. 필요한 컨텐츠에 필요한 데이터 금액. <p> <include> WordPress 사이트에 맞춤형 스크립트와 스타일을 어떻게 포함합니까? 아래 주석 상자를 클릭하여 공유하십시오. </include></p> WordPress의 조건부 태그 및 로딩 스타일 및 스크립트에 대한 FAQ (FAQ) (FAQ). <condition> WordPress의 조건부 태그는 무엇이며 어떻게 작동합니까? <p> <tag> WordPress의 조건부 태그는 테마 파일에 사용되는 PHP 기능으로 페이지가 만족하는 조건에 따라 특정 페이지에 표시된 컨텐츠를 변경하기 위해 사용됩니다. 특정 기능을 실행하기 전에 특정 조건이 충족되는지 여부를 결정하는 데 사용됩니다. 예를 들어, 조건부 태그를 사용하여 특정 사이드 바를 표시하기 전에 페이지가 단일 게시물인지 확인할 수 있습니다. </tag></p> <condition> WordPress의 스타일과 스크립트를로드하기 위해 조건부 태그를 사용하는 방법은 무엇입니까? <p> <al> 조건부 태그를 사용하여 WordPress에 스타일과 스크립트를로드하려면 테마의 functions.php 파일에 스크립트와 스타일을 추가해야합니다. 조건부 태그와 함께 및 <strong> 함수를 사용할 수 있습니다. 예를 들어, 홈페이지에 스크립트를로드하려면 </strong> 조건부 태그를 사용할 수 있습니다. </al></p> <common> WordPress의 일반적인 조건부 태그는 무엇입니까? <h3> <used> WordPress에서 일반적으로 사용되는 일부 조건 태그에는 </used> </h3>, <p>, , </p>, <h3>, , 등이 포함됩니다. 각 태그는 페이지가 단일 게시물, 특정 페이지, 홈페이지, 홈페이지, 카테고리 페이지, 태그 페이지 또는 작성자 페이지인지와 같은 특정 기준을 확인합니다. </h3> <condition> WordPress에서 조건부 코드 스 니펫을 만드는 방법은 무엇입니까? <p> <condition> WordPress에서 조건부 코드 스 니펫을 만들려면 php 문에서 조건부 태그를 사용해야합니다. 문의 코드는 조건이 충족 될 때만 실행됩니다. 예를 들어, 홈페이지에만 코드 스 니펫을 표시하려면 명령문에서 <code>wp_enqueue_script</code> 조건부 태그를 사용할 수 있습니다. <code>wp_enqueue_style</code> <style> 왜 내 스타일이 WordPress에서로드되지 않습니까? <code>is_home() <is> 당신의 스타일이 WordPress에서로드되지 않으면 여러 가지 이유 때문일 수 있습니다. 가장 일반적인 이유는 스타일 파일이 functions.php 파일에 올바르게 등록되지 않기 때문입니다. <🎜 🎜> 기능을 올바르게 사용했는지 확인하십시오. 또한 파일 경로와 종속성이 올바른지 확인하십시오. 조건부 태그를 사용하는 경우 조건이 충족되었는지 확인하십시오. </style></condition></p> <condition> WordPress에서 조건부 CSS를 올바른 방법으로로드하는 방법은 무엇입니까? <h3> <al> WordPress에 조건부 CSS를로드하려면 </al> </h3> 함수를 사용하여 테마의 functions.php 파일에 CSS 파일을 등록해야합니다. 조건 탭을 사용하여 CSS 파일을로드 해야하는 조건을 지정할 수 있습니다. 예를 들어, 홈페이지에만 CSS 파일을로드하려면 <p> 조건부 태그를 사용할 수 있습니다. <code>is_single()</code><multiple> WordPress에서 여러 조건부 태그를 사용할 수 있습니까? <h3> 예, WordPress에서 여러 조건부 태그를 사용할 수 있습니다. (&&) 및 (||)와 같은 논리 연산자를 사용하여 결합 할 수 있습니다. 예를 들어, 페이지가 단일 게시물이고 홈페이지가 아닌지 확인하려면 </h3> 및 <p> 조건부 태그를 사용할 수 있습니다. <code>is_single()</code> <the> WordPress의 다른 페이지에 대해 다른 스타일을로드하기 위해 조건부 태그를 사용하는 방법은 무엇입니까? <code>!is_home()</code> WordPress의 다른 페이지에 대해 다른 스타일을로드하려면 테마의 functions.php 파일에서 조건부 태그를 사용할 수 있습니다. 각 스타일에 대해 함수를 사용하고 특정 페이지의 조건부 태그를 확인하십시오. 예를 들어, 홈페이지의 특정 스타일을로드하고 단일 게시물에 대해 다른 스타일을로드하려면 </the></p> 및 <h3> 조건부 태그를 사용할 수 있습니다. </h3> WordPress에서 <difference>와 <p>의 차이점은 무엇입니까? <code>wp_enqueue_style</code> WordPress의 조건부 태그는 홈페이지가 표시되는지 확인하는 반면 <code>is_home()</code> 조건부 태그는 홈페이지가 표시되는지 확인합니다. 최신 게시물을 표시하도록 홈페이지를 설정 한 경우 두 태그 모두 TRUE를 반환합니다. 그러나 정적 페이지를 홈페이지로 설정 한 경우 <code>is_single()</code>는이 페이지에 대해 true를 반환하고 </p>는 게시물 페이지로 설정된 페이지에 대해 true를 반환합니다. <h3> <condition> WordPress에서 루핑 밖에서 조건부 태그를 사용할 수 있습니까? <code>is_home()</code> <can> 예, WordPress에서 루핑 외부에서 조건부 태그를 사용할 수 있습니다. 그러나 일부 조건부 태그 (예 : <code>is_front_page()</code> 및 )는 루프 전에 사용될 때 예상대로 작동하지 않을 수 있습니다. WordPress는 루프가 시작된 후 쿼리의 세부 사항 만 알고 있기 때문입니다. 따라서 일반적으로 루프가 시작된 후 또는 후에 이러한 조건부 레이블을 사용하는 것이 좋습니다. </can></condition> </h3></difference></multiple></p></condition></condition></common></condition></condition></appropriate></p></know></now>

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

php JavaScript jquery css ajax html print 运算符逻辑运算符 if 循环 Conditional JS 样式表 http WordPress

성명：

이전 기사：WordPress에 대한 Brotli 압축의 효과 측정다음 기사：WordPress에 대한 Brotli 압축의 효과 측정