Ist es möglich, die Breite des WordPress Audio Players zu kontrollieren?

Ist es möglich, die Breite des WordPress 3.9 Audio Players zu kontrollieren? Ich mag die Einfachheit der Player-Steuerung und möchte eine Version mit schmaler Breite in eine Tabelle aufnehmen, die alle Songs in einem Album auflistet. So etwas wie:


 

Gibt es irgendwo eine Referenz, die erklärt, wie der Audio Player gestylt werden kann (colors, etc.)?

Vielen Dank im Voraus für jede Hilfe!

Solutions Collecting From Web of "Ist es möglich, die Breite des WordPress Audio Players zu kontrollieren?"

Wrapper für eine Untergruppe von Audio-Playern:

Hier ist eine Methode, die Sie verwenden können, wenn Sie einigen nativen Audio-Playern einen Wrapper hinzufügen möchten, aber nicht alle. Wenn Sie einen Wrapper hinzufügen möchten, der wie folgt aussieht:

Modifizierter Audioplayer

dann können Sie die folgenden zusätzlichen Attribute im Audio-Shortcode verwenden:

 [audio wrapper="on" wrapper_class="audio-mini" wrapper_style="width:182px; border: 1px solid black; padding: 10px; background-color: #888;" wrapper_width="182" wrapper_tag="div" mp3="http://example.com/mozart.mp3" ] 

Hinzufügen eines Wrappers mit einer bestimmten class , Stil . Tag und Breite .

Beachten Sie, dass Sie den Lautstärkeregler und den Lautstärkeregler mit CSS ausblenden müssen, wenn Sie den Player auf 120px verkleinern:

 .mejs-volume-button, .mejs-horizontal-volume-slider { display: none; } 

Um zu vermeiden, dass alle Audio-Player betroffen sind, können Sie eine benutzerdefinierte Wrapper-class verwenden, um die kleinen Player anzusprechen:

 .audio-mini .mejs-volume-button, .audio-mini .mejs-horizontal-volume-slider { display: none; } 

Um den Wrapper zu aktivieren, verwenden Sie das wrapper Attribut mit Werten wie on , yes , true oder 1 .

Die obige Methode ist mit Hilfe des folgenden Plugins möglich:

 /** * Plugin Name: Wrapper for Audio Player shortcode * Plugin URI: https://wordpress.stackexchange.com/a/143281/26350 * Author: birgire */ add_action( 'init', function(){ $mini = new WPSE_Audio_Player_Wrapper; $mini->init(); }); class WPSE_Audio_Player_Wrapper { protected $wrapper = FALSE; protected $tag = 'div'; protected $allowed_tags = array( 'div', 'p' ); protected $width = ''; protected $class = ''; protected $style = ''; public function init() { add_filter( 'wp_audio_shortcode_override' , array( $this, 'wp_audio_shortcode_override' ), 10, 2 ); } public function wp_audio_shortcode_override( $html, $attr ) { if( isset( $attr['wrapper'] ) ) $this->wrapper = filter_var( $attr['wrapper'], FILTER_VALIDATE_BOOLEAN ); if( isset( $attr['wrapper_width'] ) ) $this->width = $attr['wrapper_width']; if( isset( $attr['wrapper_class'] ) ) $this->class = $attr['wrapper_class']; if( isset( $attr['wrapper_style'] ) ) $this->style = $attr['wrapper_style']; if( isset( $attr['wrapper_tag'] ) && in_array( $attr['wrapper_tag'], $this->allowed_tags, TRUE ) ) $this->tag = $attr['wrapper_tag']; add_filter( 'wp_audio_shortcode', array( $this, 'wp_audio_shortcode' ) ); return $html; } function wp_audio_shortcode( $html ) { if( $this->wrapper ) { $s = ''; if( '' !== $this->class ) $s .= sprintf( ' class="%s"', esc_attr( $this->class ) ); if( '' !== $this->style ) $s .= sprintf( ' style="%s"', esc_attr( $this->style ) ); if( '' !== $this->width ) $s .= sprintf( ' width="%s"', esc_attr( $this->width ) ); $html = sprintf( '< %s%s>%s', $this->tag, $s, $html, $this->tag ); } return $html; } } 

Speichern Sie den Plugin-Code in der Datei /wp-content/plugins/wrapped-audio-player/wrapped-audio-player.php und aktivieren Sie ihn.

Vorherige Antwort:

Der Standardstil für den Audioplayer ist width:100% Sie können also im Inhalts-Editor immer einen div-Wrapper um Ihren Shortcode hinzufügen:

 
[audio mp3="myfile.mp3]

Es sieht so aus, als könnten Sie den Standardstil nicht überschreiben mit:

  [audio mp3="myfile.mp3 style="width:120px;"] 

weil das style Attribut des Audio-Tags fest codiert ist. Ich bin mir nicht sicher, ob das absichtlich oder ein Fehler ist.

Die unterstützten Shortcode-Attribute sind src , loop , autoplay und preload .

Hier sind einige andere Ideen, wie Sie versuchen könnten, die Breite auf 120px zu 120px :

120px Audioplayer

Sie sind nicht gut getestet, aber hoffentlich können Sie weiter damit arbeiten und sich an Ihre Bedürfnisse anpassen:

Idee 1:

Du könntest es umgehen, indem du deinen eigenen Shortcode erstellst, der das obige Div um den Audio-Shortcode herumlegt.

Idee 2:

Verwenden Sie den wp_audio_shortcode Filter, um ihn zu ersetzen:

 /** * Change the width of the audio player from 100% to 120px via replace * */ function wpse_143272_wp_audio_shortcode_a( $html ) { return str_ireplace( 'width: 100%', 'width: 120px', $html ); } add_filter( 'wp_audio_shortcode', 'wpse_143272_wp_audio_shortcode_a' ); 

Idee 3:

Wickeln Sie ein div Tag mit Hilfe des wp_audio_shortcode Filters um:

 /** * Change the width of the audio player from 100% to 120px with a div wrapper * */ function wpse_143272_wp_audio_shortcode_b( $html ) { return sprintf( '
%s
', $html ); } add_filter( 'wp_audio_shortcode', 'wpse_143272_wp_audio_shortcode_b' );

Idee 4:

Passen Sie es mit CSS an:

 /** * Change the width of the audio player from 100% to 120px with CSS * */ function wpse_143272_wp_head() { echo ''; } add_action( 'wp_head', 'wpse_143272_wp_head' ), 

oder füge es einfach direkt zu deinem Stylesheet hinzu 😉

Wiedergabeliste:

Um die Liste aller Songs anzuzeigen, möchten Sie stattdessen den [playlist] Shortcode verwenden, aber dann müssen Sie die Audiodateien in Ihre WordPress Media Library hochladen. Wenn Sie externe Audiodateien mit der Wiedergabeliste verwenden möchten, können Sie diese Lösung ausprobieren.