Intereting Posts
Как получить класс из области виджетов Существует ли ограничение на размер страницы WP? Как я могу динамически добавлять сообщение в пользовательский тип сообщения, который использует настраиваемое поле? Учетные записи, имеющие несколько полей после метаданных Использование файла javascript для доступа к массиву get posts WPML – автоматическая повторяющаяся проблема с сообщением Скрытие постов по умолчанию в данной категории, за исключением некоторых случаев Есть хороший плагин для социальных закладок на сайте для WordPress Как отключить многократное создание миниатюр? Отображение пользовательского содержимого пост-типа на странице с одним продуктом. Woocommerce – удалить продукт из категории Использование контактной формы 7 с помощью easy fancybox Передача значений между закрывающимися и закрытыми кодами PHP для программного удаления файла Различные пользовательские заголовки на разных страницах

Можно ли управлять шириной звукового проигрывателя 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. Если вы хотите использовать внешние аудиофайлы с плейлистом, вы можете попробовать это решение .