의존성으로 인해 wp enline 인라인 스크립트

인라인 스크립트에 wp_enqueue_script ()를 사용하는 방법이 있습니까?

인라인 스크립트가 다른 스크립트에 의존하기 때문에이 작업을 수행하고 있으며로드 된 후에 삽입하는 유연성을 원합니다.

또한 PHP 변수를 테마 경로와 같은 자바 스크립트에 전달하기 때문에 인라인 스크립트입니다.

미리 감사드립니다.

글쎄, 당신은 wp_localize_script ()를 가지고 있지만, 그것은 데이터를 전달하기위한 것입니다.

그렇지 않으면 다음을 수행 할 수 있습니다.

function print_my_inline_script() {
  if ( wp_script_is( 'some-script-handle', 'done' ) ) {
?>
<script type="text/javascript">
// js code goes here
</script>
<?php
  }
}
add_action( 'wp_footer', 'print_my_inline_script' );

아이디어는 당신이 당신의 인라인 스크립트가 인쇄되는에 의존하지해야한다는 것입니다 정확히 스크립트 이후에 의존하지만, 나중에.

인라인 스크립트로 만들지 말고 동적 매개 변수를 변수로 전달하십시오. 오토는 이를 효과적으로 수행하는 방법에 대한 훌륭한 가이드 를 작성했습니다 .

WordPress 3.3은 이것을 더 강력하게 만듭니다 : https://core.trac.wordpress.org/ticket/11520

이 솔루션은 @scribu의 답변 과 비슷 하지만의 형식을 따르며 wp_enquque_script()헤더에 종속성이 포함되어 있으면 스크립트를 헤더에 배치합니다.

/**
 * Enqueue inline Javascript. @see wp_enqueue_script().
 * 
 * KNOWN BUG: Inline scripts cannot be enqueued before 
 *  any inline scripts it depends on, (unless they are
 *  placed in header, and the dependant in footer).
 * 
 * @param string      $handle    Identifying name for script
 * @param string      $src       The JavaScript code
 * @param array       $deps      (optional) Array of script names on which this script depends
 * @param bool        $in_footer (optional) Whether to enqueue the script before </head> or before </body> 
 * 
 * @return null
 */
function enqueue_inline_script( $handle, $js, $deps = array(), $in_footer = false ){
    // Callback for printing inline script.
    $cb = function()use( $handle, $js ){
        // Ensure script is only included once.
        if( wp_script_is( $handle, 'done' ) )
            return;
        // Print script & mark it as included.
        echo "<script type=\"text/javascript\" id=\"js-$handle\">\n$js\n</script>\n";
        global $wp_scripts;
        $wp_scripts->done[] = $handle;
    };
    // (`wp_print_scripts` is called in header and footer, but $cb has re-inclusion protection.)
    $hook = $in_footer ? 'wp_print_footer_scripts' : 'wp_print_scripts';

    // If no dependencies, simply hook into header or footer.
    if( empty($deps)){
        add_action( $hook, $cb );
        return;
    }

    // Delay printing script until all dependencies have been included.
    $cb_maybe = function()use( $deps, $in_footer, $cb, &$cb_maybe ){
        foreach( $deps as &$dep ){
            if( !wp_script_is( $dep, 'done' ) ){
                // Dependencies not included in head, try again in footer.
                if( ! $in_footer ){
                    add_action( 'wp_print_footer_scripts', $cb_maybe, 11 );
                }
                else{
                    // Dependencies were not included in `wp_head` or `wp_footer`.
                }
                return;
            }
        }
        call_user_func( $cb );
    };
    add_action( $hook, $cb_maybe, 0 );
}

// Usage
enqueue_inline_script('test','alert(\'enqueue inline script test\');',array( 'jquery'));

참고 : 이것은 익명 함수를 사용하지만 5.3 이전의 PHP 버전의 경우 클래스로 쉽게 변환 할 수 있습니다.

WordPress 4.5부터 wp_add_inline_script () 사용할 수 있습니다 :

add_action( 'wp_enqueue_scripts', 'cyb_enqueue_scripts' );
function cyb_enqueue_scripts() {
   wp_enqueue_script( 'myscript', 'url/to/myscript.js', array(), '1.0' );
   wp_add_inline_script( 'myscript', 'Your inline javascript code gos here' );
}

내가 찾은 더 좋은 방법 wp_localize_script()은 @scribu가 제안한 것처럼을 사용하는 것 입니다.

일반적으로 스크립트에 PHP 변수를 제공해야했기 때문에 인라인 Javascript를 사용하기로 결정했습니다. 이것은로 해결할 수 있습니다 wp_localize_script(). 예를 들어 보겠습니다.

$aFoo몇 가지 옵션 이있는 배열 이 있으며이를 스크립트로 전달해야합니다.

$aFoo = array( 'option1' => $option1Value, 'option2' => $option2Value ); 

인라인 스크립트 사용 :

<script> 
    var oFoo = {};
    oFoo.option1 = <?php echo $aFoo['option1'] ?>;  
    oFoo.option2 = <?php echo $aFoo['option2'] ?>;            
    //do some stuff with oFoo
</script>

사용 wp_localize_script():

wp_register_script( 'script_name', 'pathToScript/script.js', array( 'jquery' )); //if jQuery is not needed just remove the last argument. 
wp_localize_script( 'script_name', 'object_name', $aFoo ); //pass 'object_name' to script.js
wp_enqueue_script( 'script_name' );    

그렇다면 pathToScript/script.js:

var oFoo = {};
oFoo.option1 = object_name.option1;   
oFoo.option2 = object_name.option2;            
//do some stuff with oFoo (no PHP needed)

이런 식으로 더 이상 인라인 스크립트가 필요하지 않습니다.

scribu는 절대적으로 정확합니다. 어쨌든 몇 가지 정보를 추가하고 싶습니다.

얼마나 자주 호출되는지에 관계없이 함수가 스크립트를 한 번 출력하기를 원합니다. 내용 관련 기능이므로 후크를 기다릴 수 없습니다. 나는 scribus 정보와 WP 코어를 읽어서 이것을 생각해 냈습니다.

function print_script_once() {
    if(!wp_script_is('my-handle', 'done')) {
        echo "<script>alert('once!');</script>";
        global $wp_scripts;
        $wp_scripts->done[] = 'my-handle';
    }
}
add_action('get_footer', print_script_once);

이 방법을 사용하면 인라인 스크립트를 한 번 인쇄 할 수 있습니다. 필자의 경우 공유 버튼을 만드는 기능이 있으며 모든 버튼에 대해 하나의 스크립트를 실행해야합니다. 그러나 한 번만.