web-dev-qa-db-ja.com

Youtube APIスクリプトをエンキューすることは可能ですか、それともインラインにする必要がありますか？

以下のコードはmy functions.phpの中の関数の主要部分で、コードが呼び出されたテンプレートに最終的にYouTube API iframeを出力するdivとscriptを返します。現時点ではうまく機能しています。ただし、JavaScriptをエンキューするか、少なくともPHPコードから削除します。私はそれを私のメインのJavaScriptファイル（フッターにエンキューされている）に移動するのに疲れましたが、そこに移動してもうまくいきません。編集：画像の外に出るためにwp_localize_scriptを使わなくて済むようにvarsをハードコードしました。

確かにこれを行うより良い方法（またはWordPressの方法）はありますか？

$return = '

    <div id="' . $postid . 'player"></div>

    <script> var tag = document.createElement("script"); tag.src = "http://www.youtube.com/player_api";
    var firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    var player;
    function onYouTubePlayerAPIReady() {
        player = new YT.Player("'. $postid .'player", {
            height: "315",
            width: "560",
            videoId: "'. $videoID .'",
        });
    }
    </script>

    ';

return $return;
javascriptwp-enqueue-scriptapiyoutube
5
byronyasgur

まず、YTapiが enqueued() であり、フッターに追加されていることを確認してください。

function wp_enqueue_scripts__youtube_api() {
    wp_enqueue_script( 'yt-player-api', 'http://www.youtube.com/player_api', array(), false, true );
}

add_action( 'wp_enqueue_scripts', 'wp_enqueue_scripts__youtube_api' );

次に、divをページのどこかに出力します。

<div id="' . $postid . 'player"></div>

次に、 wp_footer にフックして、20より高い優先順位を設定してください。それまでに、スクリプトはページ上にレンダリングされるはずです。そして wp_script_is() で二重チェックすることができます。

function wp_footer__youtube_api() {
    if ( wp_script_is( 'yt-player-api', 'done' ) ) {
        $postid  = 123;
        $videoID = 123;
        ?>
        <script id="yt-player-api-ready" type="text/javascript">
            var player;
            function onYouTubePlayerAPIReady() {
                player = new YT.Player("<?php echo $postid; ?>player", {
                    height: "315",
                    width: "560",
                    videoId: "<?php echo $videoID ?>"
                });
            }
        </script>
        <?php
    }
}

add_action( 'wp_footer', 'wp_footer__youtube_api', 20 );
2
jgraup