특정 WordPress 페이지에만 JavaScript를 추가하는 방법

조건부 태그를 사용하여 특정 WordPress 페이지에 JavaScript 추가

이 접근 방식은 WordPress에 내장된 PHP의 조건부 태그를 활용하여 선택한 페이지에만 JavaScript 파일을 로드합니다. 이 기술은 WordPress에 매우 최적화되어 있습니다.

// functions.php - Adding JavaScript to a specific WordPress page
function load_custom_js_on_specific_page() {
    // Check if we are on a specific page by page ID
    if (is_page(42)) { // Replace 42 with the specific page ID
        // Enqueue the external JavaScript file
        wp_enqueue_script('custom-js', 'https://example.com/code.js', array(), null, true);
    }
}
// Hook the function to wp_enqueue_scripts
add_action('wp_enqueue_scripts', 'load_custom_js_on_specific_page');

단축 코드를 사용하여 특정 WordPress 페이지에서 JavaScript 실행

이 방법을 사용하면 WordPress 단축 코드를 사용하여 특정 페이지에 조건부로 JavaScript를 추가하여 스크립트가 활용되는 위치를 자유롭게 지정할 수 있습니다.

// functions.php - Using shortcodes to add JavaScript to a specific page
function add_js_via_shortcode() {
    // Return the script tag to be added via shortcode
    return '<script src="https://example.com/code.js" type="text/javascript"></script>';
}
// Register the shortcode [custom_js]
add_shortcode('custom_js', 'add_js_via_shortcode');
// Now, use [custom_js] in the page editor where the script should run

jQuery를 사용하여 URL 매개변수를 기반으로 JavaScript 로드

이 기술은 JavaScript를 조건부로 로드하고 jQuery를 사용하여 특정 URL 패턴을 식별합니다. 동적으로 타겟팅하는 페이지의 경우 이상적입니다.

<script type="text/javascript">
jQuery(document).ready(function($) {
    // Check if the URL contains a specific query string or slug
    if (window.location.href.indexOf('specific-page-slug') > -1) {
        // Dynamically load the JavaScript file
        $.getScript('https://example.com/code.js');
    }
});
</script>

템플릿 파일을 사용하여 특정 페이지에 JavaScript 추가

WordPress 페이지 템플릿 파일에 JavaScript를 직접 추가하면 해당 특정 페이지에만 스크립트가 로드됩니다.

// Inside page-specific template file (e.g., page-custom.php)
<?php get_header(); ?>
<!-- Page Content -->
<script src="https://example.com/code.js" type="text/javascript"></script>
<?php get_footer(); ?>

WordPress 페이지에 JavaScript 추가에 대한 일반적인 질문

1. 특정 페이지에서만 스크립트가 열리도록 하려면 어떻게 해야 합니까?
2. 페이지 ID 또는 슬러그를 기반으로 스크립트를 조건부로 로드하려면 is_page() 에서 기능 functions.php 테마 파일.
3. WordPress에 JavaScript를 추가하는 가장 좋은 방법은 무엇입니까?
4. WordPress에 JavaScript를 추가하려면 wp_enqueue_script() 기능은 권장되는 기술입니다. 종속성 및 스크립트 처리의 적절한 관리를 보장합니다.
5. 바닥글에 JavaScript를 로드할 수 있나요?
6. 예, 더 나은 성능을 위해 바닥글에 스크립트를 로드하려면 다음을 통과하세요. true 다섯 번째 인수로 wp_enqueue_script().
7. JavaScript 파일에 대한 캐시 무효화를 어떻게 처리합니까?
8. 최신 버전이 로드되었는지 확인하려면 다음의 버전 관리 옵션을 사용하여 스크립트의 URL에 버전 번호를 추가하세요. wp_enqueue_script().
9. 단축 코드를 사용하여 JavaScript를 추가할 수 있나요?
10. 예, 다음을 사용할 수 있습니다. add_shortcode() 페이지나 게시물의 특정 영역에 JavaScript를 추가할 수 있는 단축 코드를 생성합니다.

WordPress 페이지용 JavaScript 최적화에 대한 최종 생각

귀하의 JavaScript 코드가 특정 페이지를 대상으로 하는 경우 귀하의 웹사이트에서 더 잘 실행되고 사용자 경험이 향상됩니다. 스크립트는 다음과 같은 기능을 사용하여 필요한 위치에만 로드됩니다. is_페이지() 그리고 wp_enqueue_script(), 그러면 웹사이트의 다른 영역에 대한 로드 시간이 단축됩니다.

WordPress를 처음 사용하고 많은 코드를 몰라도 스크립트를 효율적으로 관리하고 싶다면 이 방법이 가장 좋습니다. 코드 실행 범위를 제한함으로써 특정 페이지에 JavaScript를 올바르게 구현하면 효율성은 물론 보안도 향상됩니다.