搬码资源网广告位 搬码资源网广告位

WordPress小工具整合Aplayer音乐播放器

下面是搬码源码网 abnma.com 通过网络收集整理的代码片段。搬码源码网小编现在分享给大家,也给大家做个参考。

Aplayer 的音乐播放器界面确实好看,所以决定也弄一个,最终整合到侧边栏的小工具上,这样方便在不同的地方调用不同的音乐。

以下是制作 widget 小工具的全部代码,把以下代码存为:widget-aplayer.PHP

<?PHP

add_action(‘widgets_init’,’widgetaplayerInit’);

 

function widgetaplayerInit() {

register_widget(‘widgetaplayer’);

}

 

class widgetaplayer extends WP_Widget {

 

/**

  * widgetProfile setup

  */

function widgetaplayer() {

$widget_ops = array(‘classname’ => ‘widget-aplayer’,’description’ => ‘添加Aplayer播放器’);

// init widgetProfile

parent::__construct(‘widget-aplayer’,”Aplayer播放器”,$widget_ops);

}

 

/**

  * How to display the widgetProfile on the screen.

  */

function widget( $args,$instance ) {

extract( $args );

/* Our variables from the widget settings. */

$title = apply_filters(‘widget_name’,$instance[‘title’] );

$type = $instance[‘type’];

$gs = $instance[‘gs’];

$auto = $instance[‘auto’];

$auto = $instance[‘auto’];

$url = $instance[‘url’];

$pic = $instance[‘pic’];

$word = $instance[‘word’];

echo $before_widget;

echo $this->showWidget($title,$type,$gs,$auto,$url,$pic,$word);

echo $after_widget;

}

 

/**

  * Update the widget settings.

  */

function update( $new_instance,$old_instance ) {

$instance = $old_instance;

/* Strip tags for title and name to remove HTML (important for text inputs). */

$instance[‘title’] = strip_tags( $new_instance[‘title’] );

$instance[‘type’] = strip_tags( $new_instance[‘type’] );

$instance[‘gs’] = strip_tags( $new_instance[‘gs’] );

$instance[‘auto’] = strip_tags( $new_instance[‘auto’] );

$instance[‘url’] = strip_tags( $new_instance[‘url’] );

$instance[‘pic’] = strip_tags( $new_instance[‘pic’] );

$instance[‘word’] = strip_tags( $new_instance[‘word’] );

return $instance;

}

 

/**

  * Displays the widget settings controls on the widget panel.

  * Make use of the get_field_id() and get_field_name() function

  * when creating your form elements. This handles the confusing stuff.

  */

function form( $instance ) {

/* Set up some default widget settings. */

$defaults = array(

‘title’ => ”,

‘type’ => ‘true’,

‘gs’ => ‘true’,

‘auto’ => ”,

‘url’ => ”,

‘pic’ => ”,

‘word’ => ”

);

$instance = wp_parse_args( (array) $instance,$defaults ); ?>

<!– widget title: –>

<p>

<label for=”<?PHP echo $this->get_field_id( ‘title’ ); ?>”>显示标题</label>

<input type=”text” id=”<?PHP echo $this->get_field_id( ‘title’ ); ?>” name=”<?PHP echo $this->get_field_name( ‘title’ ); ?>” value=”<?PHP echo $instance[‘title’]; ?>” width:100%;” />

</p>

<p>

<label for=”<?PHP echo $this->get_field_id( ‘type’ ); ?>”>自动播放</label>

<select id=”<?PHP echo $this->get_field_id( ‘type’ ); ?>” name=”<?PHP echo $this->get_field_name( ‘type’ ); ?>” class=”widefat” width:100%;”>

<option value=”true” <?PHP if ( ‘true’ == $instance[‘type’] ) echo ‘selected=”selected”‘; ?>>开启</option>

<option value=”false” <?PHP if ( ‘false’ == $instance[‘type’] ) echo ‘selected=”selected”‘; ?>>关闭</option>

</select>

</p>

<p>

<label for=”<?PHP echo $this->get_field_id( ‘gs’ );?>”>开启歌词</label>

<select id=”<?PHP echo $this->get_field_id( ‘gs’ ); ?>” name=”<?PHP echo $this->get_field_name( ‘gs’ ); ?>” class=”widefat” width:100%;”>

<option value=”true” <?PHP if ( ‘true’ == $instance[‘gs’] ) echo ‘selected=”selected”‘; ?>>开启</option>

<option value=”false” <?PHP if ( ‘false’ == $instance[‘gs’] ) echo ‘selected=”selected”‘; ?>>关闭</option>

</select>

</p>

<p>

<label for=”<?PHP echo $this->get_field_id( ‘auto’ ); ?>”>歌唱者</label>

<input type=”text” id=”<?PHP echo $this->get_field_id( ‘auto’ ); ?>” name=”<?PHP echo $this->get_field_name( ‘auto’ ); ?>” value=”<?PHP echo $instance[‘auto’]; ?>” width:100%;” />

</p>

<p>

<label for=”<?PHP echo $this->get_field_id( ‘url’ ); ?>”>歌曲URL</label>

<input type=”text” id=”<?PHP echo $this->get_field_id( ‘url’ ); ?>” name=”<?PHP echo $this->get_field_name( ‘url’ ); ?>” value=”<?PHP echo $instance[‘url’]; ?>” width:100%;” />

</p>

<p>

<label for=”<?PHP echo $this->get_field_id( ‘pic’ ); ?>”>歌曲封面</label>

<input type=”text” id=”<?PHP echo $this->get_field_id( ‘pic’ ); ?>” name=”<?PHP echo $this->get_field_name( ‘pic’ ); ?>” value=”<?PHP echo $instance[‘pic’]; ?>” width:100%;” />

</p>

<p>

<label for=”<?PHP echo $this->get_field_id( ‘word’ ); ?>”>歌词</label>

<input type=”text” id=”<?PHP echo $this->get_field_id( ‘word’ ); ?>” name=”<?PHP echo $this->get_field_name( ‘word’ ); ?>” width:100%;” value=”<?PHP echo $instance[‘word’]; ?>” />

</p>

<?PHP

}

 

function showWidget($title,$word) {

?>

<link href=”<?PHP echo get_template_directory_uri().’/aplayer/APlayer.min.css’?>” rel=”stylesheet”>

<script src=”<?PHP echo get_template_directory_uri().’/aplayer/APlayer.min.js’?>”></script>

<div class=”widget-title”><?PHP echo $title ?></div>

<div id=”player1″>

<pre class=”aplayer-lrc-content”>

<?PHP echo $word ?>

</pre>

</div>

<script>

var ap = new APlayer

({

element: document.getElementById(‘player1’),

narrow: false,

autoplay: <?PHP echo $type ?>,

showlrc: <?PHP echo $gs ?>,

music: {

title: ‘<?PHP echo $title ?>’,

author: ‘<?PHP echo $auto ?>’,

url: ‘<?PHP echo $url ?>’,

pic: ‘<?PHP echo $pic ?>’

}

});

ap.init();

</script>

<?PHP }

}?>

其中这二句是引用了 Aplayer 的 JS 与 CSS

<link href=”<?PHP echo get_template_directory_uri().’/aplayer/APlayer.min.css’?>” rel=”stylesheet”>

<script src=”<?PHP echo get_template_directory_uri().’/aplayer/APlayer.min.js’?>”></script>

这二句我是放在我的主题文件夹下的,你也可以直接引用官方的 Aplayer 的 js 与 css 最后在 function.PHP 引用这个文件:widget-aplayer.PHP

include(TEMPLATEPATH.’/template-parts/widget/widget-aplayer.PHP’);

在后台外观-小工具中选择 Aplayer 播放器

这样一个小工具就做好了,可以放在侧边栏的任何位置,目前在设置歌曲的 URL 与封面时,都是手动粘地址,好想直接多媒体库中添加多好,暂时还不会怎么关联媒体库,有知道的肯请粘上代码。

以上是搬码源码网(abnma.com)为你收集整理的全部代码内容,希望文章能够帮你解决所遇到的程序开发问题。如果觉得搬码源码网网站内容还不错,欢迎将搬码源码网网站推荐给程序员好友。

声明:
本站发布的文章及附件仅限用于学习和研究目的;不得将上述内容用于商业或非法用途,否则后果请用户自负。
本站资源来自网络收集,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。
如果您喜欢该程序,请支持正版软件,得到更好的正版服务。
本文链接:https://www.abnma.com/11143.html,转载请注明出处。
如有侵权,请邮件联系我们删除处理。

0
搬码资源网广告位

评论0

请先

没有账号? 注册  忘记密码?