web-dev-qa-db-fra.com

Personnalisation du lecteur Mediaelement par défaut

Bonjour/après-midi à tous.

Joué avec le lecteur par défaut de wordpress mediaelement et je l'adore vraiment.

J'ai réussi à personnaliser un peu la mise en page en remplaçant certaines valeurs CSS dans la feuille de style de mon thème enfant.
Mais je n'aime pas le faire, car au fond, je ne fais qu'ajouter quelques règles !important css, qui ne devraient pas nécessairement être appliquées à toutes les pages de mon site Web.

À la recherche d'un moyen alternatif de le faire, j'ai trouvé: http://wpsites.net/web-design/how-to-deregister-dequeue-style-sheets/

Ma question est donc la suivante: serait-il possible de retirer de la file d'attente/désenregistrer le wp-mediaelement.css stylesheet (situé dans le répertoire /wp-includes/js/mediaelement/) et enregistrer/mettre en file d'attente une feuille de style personnalisée?

Si oui, où/comment puis-je obtenir le $handle de feuilles de style css wp-incluses afin que je puisse mettre en file d'attente mes propres styles? Existe-t-il une liste de ces $ handles similaires à celle-ci pour les scripts js dans le codex wp?


De plus, pendant que je jouais avec la fonction de liste de lecture de fichiers audio, je l’ai remarqué dans le code html de ma page:

<div class="wp-playlist-next"></div>
<div class="wp-playlist-prev"></div>

Et en ajoutant ceci au css:

.wp-playlist-prev {
width: 30px;
height: 30px;
background: red;}

.wp-playlist-next {
width: 30px;
height: 30px;
background: green;}

Une boîte verte et une boîte rouge apparaissent finalement sous la barre de commandes. Un clic sur celle-ci lit la chanson suivante/précédente.
Mais quel serait le processus pour intégrer de manière transparente cette fonctionnalité dans la barre de contrôle?

Merci de m'avoir lu, ceci est mon premier post ici, espérons que je le fais de la bonne façon.

customizationcssmediachild-themeaudio
1
nvby

D'accord, j'ai donc réussi à ajouter des fichiers CSS personnalisés de manière sélective sur les pages qui chargent le lecteur multimédia en ajoutant ceci à mon fichier functions.php :

function custom_player() {
    wp_enqueue_style(
        'custom-player',
        get_stylesheet_directory_uri() . '/wp-mediaelement.css'
    );
        $custom_css = "
                /*here goes the css*/
                ";
        wp_add_inline_style( 'custom-player', $custom_css );
}

add_action( 'wp_enqueue_scripts', 'custom_player' );

Comme cela en utilisant wp_add_inline_style(), je n'ai pas besoin d'ajouter des css !important dans la feuille de style de mon thème.
Est-ce une façon appropriée de le faire?

[MODIFIER]
J'ai essayé d'utiliser la méthode dequeue/deregister ci-dessus avec 'wp-mediaelement' comme $ handle, mais cela casse totalement la mise en page. Je pense que cela pourrait être dû au fait que, lorsque les fichiers mediaelement sont chargés, il ne contient aucun fichier .css, mais uniquement des scripts .js. Donc, en utilisant la méthode dequeue/deregister, je ne peux charger que du css supplémentaire ... et cela ne fonctionne pas bien.
Mais maintenant, comment cela peut-il être possible? Les fichiers CSS par défaut ne devraient-ils pas être mis en file d'attente quelque part?

2
nvby