WordPress에 간단한 jQuery 스크립트를 어떻게 추가합니까?

Codex와 WordPress에서 jQuery를 사용하는 것에 대한 몇 가지 블로그 게시물을 읽었으며 매우 실망 스럽습니다. jQuery를로드하는 데까지있어functions.php파일에 데는 한계가 있지만 모든 가이드는 이미 많은 WordPress 경험이 있다고 가정하기 때문에 엉망입니다. 예를 들어, 그들은 이제 functions.php파일을 통해 jQuery를로드하고 있으므로 이제 jQuery를로드하기 만하면된다고 말합니다 .

정확히 어떻게해야합니까? 특히 어떤 파일에 코드를 추가합니까? 단일 WordPress 페이지에 정확히 어떻게 추가합니까?

나는 당신이 튜토리얼에 대해 무엇을 의미하는지 압니다. 방법은 다음과 같습니다.

먼저 스크립트를 작성해야합니다. 테마 폴더에서 'js'와 같은 폴더를 만듭니다. 해당 폴더에 자바 스크립트 용 파일을 만듭니다. 예 : your-script.js. 해당 파일에 jQuery 스크립트를 추가합니다 ( <script>.js 파일에는 태그가 필요하지 않음 ).

다음은 jQuery 스크립트 (wp-content / themes / your-theme / js / your-scrript.js에서)가 어떻게 보이는지에 대한 예입니다.

jQuery(document).ready(function($) {
  $('#nav a').last().addClass('last');
})

함수 시작 부분에 $가 아닌 jQuery를 사용합니다.

이제 테마의 functions.php 파일을 엽니 다. 이 wp_enqueue_script()함수 를 사용 하여 스크립트를 추가하는 동시에 WordPress에 jQuery에 의존한다고 알려줄 수 있습니다. 방법은 다음과 같습니다.

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_enqueue_script(
        'your-script', // name your script so that you can attach other scripts and de-register, etc.
        get_template_directory_uri() . '/js/your-script.js', // this is the location of your script file
        array('jquery') // this array lists the scripts upon which your script depends
    );
}

테마에 wp_head 및 wp_footer가 올바른 위치에 있다고 가정하면 작동합니다. 도움이 더 필요하면 알려주세요.

WordPress에 대한 질문은 WordPress Answers 에서 할 수 있습니다 .

많은 검색 끝에 마침내 최신 WordPress에서 작동하는 것을 발견했습니다. 따라야 할 단계는 다음과 같습니다.

1. 테마의 디렉터리를 찾고 사용자 지정 js ( 이 예에서는 custom_js)에 대한 디렉터리에 폴더를 만듭니다 .
2. 이 디렉토리 ( 이 예에서는 jquery_test.js) 의 .js 파일에 사용자 정의 jQuery를 넣습니다 .

3. 사용자 정의 jQuery .js가 다음과 같은지 확인하십시오.

   (function($) {
   $(document).ready(function() {
   $('.your-class').addClass('do-my-bidding');
   })
   })(jQuery);

4. 테마 디렉토리로 이동하여 functions.php를 엽니 다.

5. 다음과 같은 코드를 상단 근처에 추가합니다.

   //this goes in functions.php near the top
   function my_scripts_method() {
   // register your script location, dependencies and version
      wp_register_script('custom_script',
      get_template_directory_uri() . '/custom_js/jquery_test.js',
      array('jquery'),
      '1.0' );
    // enqueue the script
     wp_enqueue_script('custom_script');
     }
   add_action('wp_enqueue_scripts', 'my_scripts_method');

6. 사이트가 작동하는지 확인하십시오!

테마 에 스크립트를 추가 하기 위해 wordpress 자식 테마 를 사용하는 경우 get_template_directory_uri 함수를 get_stylesheet_directory_uri로 변경해야합니다. 예를 들면 다음과 같습니다.

부모 테마 :

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_register_script(
        'parent-theme-script', 
        get_template_directory_uri() . '/js/your-script.js', 
        array('jquery') 
    );

    wp_enqueue_script('parent-theme-script');
}

어린이 테마 :

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_register_script(
       'child-theme-script', 
       get_stylesheet_directory_uri() . '/js/your-script.js', 
       array('jquery') 
    );

    wp_enqueue_script('child-theme-script');
}

get_template_directory_uri : / your-site / wp-content / themes / parent-theme

get_stylesheet_directory_uri : / your-site / wp-content / themes / child-theme

테마의 function.php 파일에 jQuery 또는 javascript를 추가 할 수 있습니다. 코드는 다음과 같습니다.

add_action( 'wp_enqueue_scripts', 'add_my_script' );

function add_my_script() {
wp_enqueue_script(
    'your_script_name', // your script unique name 
    get_template_directory_uri().'/js/your-script.js', //script file location
    array('jquery') //lists the scripts upon which your script depends
);
}

자세한 내용은이 자습서를 참조하십시오 . http://www.codecanal.com/add-simple-jquery-script-wordpress/

함수를 통해 스크립트를 삽입하는 것 외에도 헤더, 바닥 글에 링크 (링크 rel 태그)를 포함 할 수 있습니다. 경로가 올바른지 확인하기 만하면됩니다. 나는 이와 같은 것을 사용하는 것이 좋습니다 (당신이 당신의 테마 디렉토리에 있다고 가정).

<script type="javascript" href="<?php echo get_template_directory_uri();?>/your-file.js"></script>

본문 닫기 태그 바로 앞이나 바닥 글 바로 앞에이 내용을 포함하는 것이 좋습니다. php include 또는이 파일을 가져 오는 몇 가지 다른 방법을 사용할 수도 있습니다.

<script type="javascript"><?php include('your-file.js');?></script>

** # Method 1 : ** jquery 코드를 별도의 js 파일에 넣으십시오.

이제 해당 스크립트를 functions.php 파일에 등록하십시오.

function add_my_script() {
    wp_enqueue_script(
      'custom-script', get_template_directory_uri() . '/js/your-script-name.js', 
        array('jquery') 
    );
}
add_action( 'wp_enqueue_scripts', 'add_my_script' );

이제 끝났습니다.

함수에 스크립트를 등록 <head>하면 페이지가로드 될 때 섹션 에서 제공 되므로 항상 header.php의 일부입니다. 따라서 새 html 콘텐츠를 작성할 때마다 코드를 반복 할 필요가 없습니다.

# 방법 2 :<script> 태그 아래 페이지 본문 안에 스크립트 코드를 넣습니다 . 그러면 함수에 등록 할 필요가 없습니다.

이 플러그인을 사용하여 사용자 정의 javascript 또는 jquery를 추가 할 수 있습니다.
https://wordpress.org/plugins/custom-javascript-editor/

jQuery를 사용할 때 jquery noconflict 모드를 사용하는 것을 잊지 마십시오.

페이지에 포함 할 스크립트를 추가하는 방법에 대한 많은 자습서와 답변이 여기에 있습니다. 그러나 내가 찾을 수 없었던 것은 코드가 제대로 작동하도록 구조화하는 방법입니다. 이것은 $가 이러한 형태의 JQuery에서 사용되지 않기 때문입니다.

여기에 제 코드가 있으며이를 템플릿으로 사용할 수 있습니다.

jQuery(document).ready(function( $ ){
  $("#btnCalculate").click(function () {
        var val1 = $(".visits").val();
        var val2 = $(".collection").val();
        var val3 = $(".percent").val();
        var val4 = $(".expired").val();
        var val5 = $(".payer").val();
        var val6 = $(".deductible").val(); 
        var result = val1 * (val3 / 100) * 10 * 0.25;
        var result2 = val1 * val2 * (val4 / 100) * 0.2;
        var result3 = val1 * val2 * (val5 / 100) * 0.2;
        var result4 = val1 * val2 * (val6 / 100) * 0.1;
        var val7 = $(".pverify").val();
        var result5 = result + result2 + result3 + result4 - val7;
        var result6 = result5 * 12;
        $("#result").val("$" + result);
        $("#result2").val("$" + result2);
        $("#result3").val("$" + result3);
        $("#result4").val("$" + result4);
        $("#result5").val("$" + result5);
        $("#result6").val("$" + result6);
  });
});

여기에서 답변 : https://premium.wpmudev.org/blog/adding-jquery-scripts-wordpress/

WordPress가 한동안 사용되어 왔고 테마와 플러그인에 스크립트를 추가하는 방법은 수년 동안 동일 했음에도 불구하고 스크립트를 정확히 어떻게 추가해야하는지에 대해서는 여전히 약간의 혼란이 있습니다. 그래서 그것을 정리합시다.

jQuery는 여전히 가장 일반적으로 사용되는 Javascript 프레임 워크이므로 테마 또는 플러그인에 간단한 스크립트를 추가하는 방법을 살펴 보겠습니다.

jQuery의 호환성 모드

WordPress에 스크립트를 첨부하기 전에 jQuery의 호환성 모드를 살펴 보겠습니다. WordPress는 코드와 함께 사용해야하는 jQuery 사본과 함께 미리 패키지로 제공됩니다. WordPress의 jQuery가로드되면 다른 언어 라이브러리와의 충돌을 방지하는 메커니즘 인 호환성 모드를 사용합니다.

이것이 귀결되는 것은 다른 프로젝트 에서처럼 달러 기호를 직접 사용할 수 없다는 것입니다. WordPress 용 jQuery를 작성할 때 대신 jQuery를 사용해야합니다. 내가 의미하는 바를 보려면 아래 코드를 살펴보십시오.

내가 본 솔루션은 테마에 자바 스크립트 기능을 추가하는 관점에서 나온 것입니다. 그러나 OP는 구체적으로 "어떻게 정확히 하나의 WordPress 페이지에 합니까?"라고이것은 개별 게시물이 다른 자바 스크립트 기반 "위젯"을 가질 수있는 내 Wordpress 블로그에서 자바 스크립트를 사용하는 방법처럼 들립니다. 예를 들어 게시물은 사용자가 변수 (슬라이더, 체크 박스, 텍스트 입력 필드)를 변경하고 결과를 플로팅하거나 나열하도록 할 수 있습니다.

JavaScript 관점에서 시작 :

1. 별도의 ".js"파일에 JavaScript 함수 작성

게시물의 html에 중요한 JavaScript를 포함하는 것을 생각하지 마십시오. 코드로 JavaScript 파일 또는 파일을 만드십시오.

2. 게시물의 HTML과 JavaScript 인터페이스

JavaScript 위젯이 html 컨트롤 및 필드와 상호 작용하는 경우 JavaScript에서 해당 요소를 쿼리하고 설정하는 방법과 UI 요소가 JavaScript 함수를 호출하도록하는 방법을 이해해야합니다. 다음은 몇 가지 예입니다. 첫째, JavaScript에서 :

var val = document.getElementById(“AM_Freq_A_3”).value;

그리고 html에서 :

<input type="range" id="AM_Freq_A_3" class="freqSlider" min="0" max="1000" value="0" oninput='sliderChanged_AM_widget(this);'/>

3. jQuery를 사용하여 JavaScript 위젯의 초기화 함수 호출

페이지가 준비되면 JavaScript 위젯을 구성하고 그리는 함수 이름을 사용하여 .js 파일에 추가합니다.

jQuery(document).ready(function( $ ) {
    your_init_function();
});

4. 게시물의 HTML 코드에서 게시물에 필요한 스크립트를로드합니다.

Wordpress 코드 편집기에서 일반적으로 게시물 끝에 스크립트를 지정합니다. 예를 들어, 기본 디렉토리에 스크립트 폴더가 있습니다. 내부에는 일부 게시물이 공유 할 수있는 공통 JavaScript가있는 유틸리티 디렉토리가 있습니다.이 경우에는 제 자신의 수학 유틸리티 함수와 flotr2 플로팅 라이브러리가 있습니다. 예를 들어 미디어 관리자를 사용하는 대신 날짜를 기반으로하는 하위 디렉터리를 사용하여 게시물 별 JavaScript를 다른 디렉터리에 그룹화하는 것이 더 편리하다는 것을 알았습니다.

<script type="text/javascript" src="/scripts/utils/flotr2.min.js"></script>
<script type="text/javascript" src="/scripts/utils/math.min.js"></script>
<script type="text/javascript" src="/scripts/widgets/20161207/FreqRes.js"></script>

5. jQuery 대기열에 넣기

Wordpress는 jQuery를 등록하지만 대기열에 넣어 필요하다고 Wordpress에 알리지 않는 한 사용할 수 없습니다. 그렇지 않으면 jQuery 명령이 실패합니다. 많은 소스에서이 명령을 functions.php에 추가하는 방법을 알려 주지만 다른 중요한 세부 사항을 알고 있다고 가정합니다.

첫째, 테마를 편집하는 것은 좋지 않습니다. 향후 테마를 업데이트하면 변경 사항이 지워집니다. 어린이 테마를 만드십시오. 방법은 다음과 같습니다.

https://developer.wordpress.org/themes/advanced-topics/child-themes/

자식의 functions.php 파일은 같은 이름의 부모 테마 파일을 덮어 쓰지 않고 추가합니다. 하위 테마 자습서는 상위 및 하위 style.css 파일을 대기열에 추가하는 방법을 제안합니다. 이 함수에 다른 줄을 추가하여 jQuery를 대기열에 추가 할 수 있습니다. 다음은 하위 테마에 대한 전체 functions.php 파일입니다.

<?php
add_action( 'wp_enqueue_scripts', 'earlevel_scripts_enqueue' );
function earlevel_scripts_enqueue() {
    // styles
    $parent_style = 'parent-style';
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );

    // posts with js widgets need jquery
    wp_enqueue_script('jquery');
}

WordPress 사전 정의 기능을 사용하여 WordPress 플러그인에 스크립트 파일을 추가 할 수 있습니다.

wp_enqueue_script( 'script', plugins_url('js/demo_script.js', __FILE__), array('jquery'));

WordPress 플러그인에서 jQuery 및 CSS를 얼마나 쉽게 구현할 수 있는지 이해하는 데 도움이 되는 게시물 을 보십시오 .

함수를 통해 스크립트를 삽입하는 것 외에도 헤더, 바닥 글에 링크 (링크 rel 태그)를 포함 할 수 있습니다.

아니요. WordPress에서 이와 같은 외부 스크립트에 대한 링크를 추가해서는 안됩니다. functions.php 파일을 통해 이들을 대기열에 넣으면 스크립트가 올바른 순서로로드됩니다.

대기열에 넣지 않으면 스크립트가 올바르게 작성되었지만 작동하지 않을 수 있습니다.

다른 파일에 스크립트를 작성할 수 있으며 스크립트 이름이 image-ticker.js.

wp_enqueue_script( 'image-ticker-1', plugins_url('/js/image-ticker.js', __FILE__), array('jquery', 'image-ticker'), '1.0.0', true ); 

대신 /js/image-ticker.jsjs 파일 경로를 입력해야합니다.

WordPress에서 웹 사이트에 스크립트를 포함하는 올바른 방법은 다음 기능을 사용하는 것입니다.

wp_register_script( $handle, $src )
wp_enqueue_script( $handle, $src )

이러한 함수는 후크 내부에서 호출됩니다 wp_enqueue_script.

자세한 내용과 예제는 wp_register_script 및 wp_enqueue_script를 사용하여 Wordpress에서 JS 파일 추가 를 확인할 수 있습니다.

예:

function webolute_theme_scripts() {
    wp_register_script( 'script-name', get_template_directory_uri() . '/js/example.js', array('jquery'), '1.0.0', true );
    wp_enqueue_script( 'script-name' );
}
add_action( 'wp_enqueue_scripts', 'webolute_theme_scripts' );

"Google이 있습니다"cit. 워드 프레스 내부에서 스크립트를 올바르게 사용하려면 호스팅 된 라이브러리를 추가하면됩니다. Google 처럼

사용자 정의 스크립트 전에 링크해야하는 라이브러리를 선택한 후 : exmpl

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

그리고 자신의 스크립트 뒤에

<script type="text/javascript">
    $(document).ready(function () {
        $('.text_container').addClass("hidden");
    });
</script>

jquery 만로드하면됩니까?

1) 다른 가이드에서 말했듯이 다음과 같이 functions.php 파일에 스크립트를 등록하십시오.

// register scripts
if (!is_admin()) {
    // here is an example of loading a custom script in a /scripts/ folder in your theme:
    wp_register_script('sandbox.common', get_bloginfo('template_url').'/scripts/common.js', array('jquery'), '1.0', true);
    // enqueue these scripts everywhere
    wp_enqueue_script('jquery');
    wp_enqueue_script('sandbox.common');
}

2) jQuery는 이미 코어에 있으므로 등록 할 필요가 없습니다. footer.php에서 wp_footer ()가 호출되고 header.php (스크립트 태그가 출력되는 곳)에서 wp_head ()가 호출되었는지 확인하고 jQuery는 모든 페이지에서로드됩니다. WordPress에 jQuery를 추가하면 "충돌 없음"모드가되므로 $ 대신 jQuery를 사용해야합니다. 원하는 경우 jQuery를 등록 취소하고 wp_deregister_script ( 'jquery')를 수행하여 자신의 것을 다시 등록 할 수 있습니다.

function xyz_scripts() {
    wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'xyz_scripts');