web-dev-qa-db-fra.com

Comment puis-je localiser localement le fichier mediaelement.js dans un thème wordpress

Je convertis un modèle HTML et CSS en un thème wordpress. Lorsque j'ouvre les fichiers HTMl et CSS, le lecteur audio fonctionne normalement, mais lorsque je convertis un thème wordpress, il ne fonctionne pas. le mediaelement-and-player.min.js aime ça

function music_theme_js() {

    wp_enqueue_script( 'mep_js' , get_template_directory_uri() . '/js/mediaelement-and-player.min.js' , array( 'jquery' ) , '', true);

toujours rien ne montre. S'il vous plaît aider!

Il se présente normalement lorsqu'il est ouvert via un fichier HTML et CSS normal

Mais casse lorsque je convertis en thème wordpress Voici le wp_enqueue_script

<?php

function flexing_theme_styles() {

      /* theme's primary style.css file */
  wp_enqueue_style( 'main-css' , get_stylesheet_uri() );


  wp_enqueue_style( 'bootstrap_css' , get_template_directory_uri() . '/css/bootstrap.css' );

  wp_enqueue_style( 'font-awesome_css' , get_template_directory_uri() . '/font-awesome/css/font-awesome.min.css' );

  wp_enqueue_style( 'main_css' , get_template_directory_uri() . '/css/main.css' );



}


add_action( 'wp_enqueue_scripts' , 'flexing_theme_styles' );


function flexing_theme_js() {

    wp_enqueue_script( 'bootstrap_js' , get_template_directory_uri() . '/js/bootstrap.js' , array( 'jquery' ) , '', true);

    wp_enqueue_script( 'jssor.slider_js' , get_template_directory_uri() . '/js/jssor.slider-21.1.6.mini.js' , array( 'jquery' ) , '', true);

    wp_enqueue_script( 'mediaelement_js' , get_template_directory_uri() . '/js/mediaelement-and-player.min.js' , array( 'jquery' ) , '', true);

    wp_enqueue_script( 'main_js' , get_template_directory_uri() . '/js/main.js' , array( 'jquery' ) , '', true);

}


add_action( 'wp_enqueue_scripts' , 'flexing_theme_js' );

?>
theme-development
2
Jay

Vous devez initialiser le MediaElement.js en faisant-

Pour vidéo ou audio tag-

<script>
// using jQuery
$('video,audio').mediaelementplayer(/* Options */);
</script>

Et pour la coutume div-

<script>
// JavaScript object for later use
var player = new MediaElementPlayer('#player',/* Options */);
// ... more code ...
player.pause();
player.setSrc('mynewfile.mp4');
player.play();
</script>

Il suffit de jeter un coup d’œil sur MediaElement.js wesite.

Et il serait préférable d'écrire la ligne main_js en file d'attente comme ci-dessous -

wp_enqueue_script( 'main_js' , get_template_directory_uri() . '/js/main.js' , array( 'mediaelement_js', 'jquery' ) , '', true);

Parce que, autant que je sache, vous avez mis du code JavaScript personnalisé dans ce fichier. Donc, mieux le mettre en file d'attente après MediaElement.js.

Et dans votre fichier HTML cela fonctionne car je pense qu'ils l'ont appelé dans un fichier HTML à l'intérieur de la balise <script></script>. Et dans votre thème, cela ne fonctionne pas car l'initiation de MediaElement.js a lieu avant le chargement de MediaElement.js. Il est donc préférable de déplacer ce code dans votre fichier de script personnalisé (tel que main.js) et de l'appeler après MediaElement.js.

J'espère que cela pourra aider.

1
CodeMascot