web-dev-qa-db-fra.com

Est-il possible de mettre en file d'attente le script API Youtube ou faut-il qu'il soit en ligne?

Le code ci-dessous est la partie principale d'une fonction de mon fichier functions.php qui renvoie un div et un script qui génèrent finalement une API youtube iframe au modèle à partir duquel le code a été appelé. Pour le moment ça fonctionne bien; Cependant, je voudrais mettre le javascript en file d'attente, ou du moins le sortir de mon code PHP. Je me suis fatigué de le déplacer vers mon fichier JavaScript principal (qui est mis en file d'attente dans le pied de page), mais cela ne fonctionne pas lorsque je le déplace. Edit : J'avais codé les vars pour éviter d'avoir à utiliser wp_localize_script afin de sortir de l'image .

Il existe sûrement un meilleur moyen (ou un moyen WordPress) de le faire?

$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

Tout d’abord, assurez-vous que le YT api est enqueued() et qu’il est ajouté au pied de page.

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' );

Ensuite, affichez votre div quelque part sur la page.

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

Ensuite, connectez-vous à wp_footer et assurez-vous de définir une priorité supérieure à 20. À ce moment-là, le script doit être rendu sur la page et vous pouvez vérifier avec 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