Intereting Posts
Безопасный WordPress: Изменить admin Тема WordPress (или плагин), которая использует свойство Contenteditable Как создать отдельную страницу для каждого автора? Как использовать add_action для пользовательского виджета? Отправлять данные из настроек пользовательского интерфейса в предварительный просмотр с настраиваемым контролем get_categories для настраиваемого типа сообщений и фильтрации по пользовательской таксономии (бренду) и перечислить дочерние категории определенной категории Разрешить пользователям редактировать свой профиль? Всегда ли требуется wp_reset_postdata? Как добавить ссылки на названия виджетов? Почему фильтры / действия требуют подсчета аргументов? Показать название таксономии Blubrry PowerPress против PodPress? Как отключить уведомления электронной почты WordPress? Загрузка сообщений через AJAX в скрытом div с обновленным URL? Меню разделения WordPress

Можно ли управлять шириной звукового проигрывателя WordPress?

Можно ли управлять шириной проигрывателя WordPress 3.9? Мне нравится простота управления проигрывателем и хотелось бы включить его в узкую ширину в таблице, в которой перечислены все песни в альбоме. Итак, что-то вроде:

 

Кроме того, есть ли где-то ссылка, которая объясняет, как можно использовать аудиоплеер (цвета и т. Д.)?

Заранее благодарю за любую помощь!

Solutions Collecting From Web of "Можно ли управлять шириной звукового проигрывателя WordPress?"

Обертка для подмножества аудиоплееров:

Вот метод, который вы можете использовать, если хотите добавить оболочку к некоторым из родных аудиоплеер, но не все из них. Если вы хотите добавить оболочку, которая выглядит так:

Модифицированный аудиоплеер

то вы можете использовать следующие дополнительные атрибуты в коротком кодексе аудио:

 [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" ] 

добавить оболочку с заданным классом , стиль . тег и ширина .

Обратите внимание, что если вы уменьшите проигрыватель до 120px , вам нужно будет скрыть кнопку 120px громкости и ползунок громкости с помощью CSS:

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

Чтобы не влиять на все аудиоплееры, вы можете использовать собственный класс-оболочку для таргетинга маленьких игроков:

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

Чтобы активировать оболочку, вы используете атрибут wrapper со значениями, такими как on , yes , true или 1 .

Вышеуказанный метод возможен с помощью следующего плагина:

 /** * 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</%s>', $this->tag, $s, $html, $this->tag ); } return $html; } } 

Сохраните код плагина в файле /wp-content/plugins/wrapped-audio-player/wrapped-audio-player.php и активируйте его.

Предыдущий ответ:

Стиль по умолчанию для аудиоплеера – width:100% поэтому вы всегда можете добавить обертку div вокруг своего короткого кода в редакторе содержимого:

 <div style="width:120px;"> [audio mp3="myfile.mp3] </div> 

Похоже, вы не можете перезаписать стиль по умолчанию:

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

потому что атрибут стиля звукового тега жестко закодирован. Я не уверен, что это намеренно или ошибка.

Поддерживаемые атрибуты shortcode: src , loop , autoplay и preload .

Вот несколько других идей, как можно попытаться изменить ширину на 120px :

Проигрыватель 120px

Они не очень хорошо протестированы, но, надеюсь, вы сможете работать с ним дальше и приспосабливаться к вашим потребностям:

Идея 1:

Вы можете обойти это, сделав свой собственный короткий код, который обертывает вышеуказанный div вокруг короткого кода аудио.

Идея 2:

Используйте фильтр wp_audio_shortcode для его замены:

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

Идея 3:

Оберните тег div вокруг него с помощью фильтра wp_audio_shortcode :

 /** * 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( '<div style="width: 120px">%s</div>', $html ); } add_filter( 'wp_audio_shortcode', 'wpse_143272_wp_audio_shortcode_b' ); 

Идея 4:

Откорректируйте его с помощью CSS:

 /** * Change the width of the audio player from 100% to 120px with CSS * */ function wpse_143272_wp_head() { echo '<style>.wp-audio-shortcode { width: 120px !important; }</style>'; } add_action( 'wp_head', 'wpse_143272_wp_head' ), 

или просто добавьте его прямо в таблицу стилей 😉

Плейлист:

Чтобы отобразить список всех песен, вы хотите использовать короткий [playlist] , но тогда вам придется загружать аудиофайлы в медиа-библиотеку WordPress. Если вы хотите использовать внешние аудиофайлы с плейлистом, вы можете попробовать это решение .