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

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

下面是内存溢出 jb51.cc 通过网络收集整理的代码片段。内存溢出小编现在分享给大家，也给大家做个参考。

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' ); ?>" 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' ); ?>" 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 ><?PHP echo $Title ?></div>

<div ID="player1">

<pre >

<?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 与封面时，都是手动粘地址，好想直接多媒体库中添加多好，暂时还不会怎么关联媒体库，有知道的肯请粘上代码。

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

总结

以上是内存溢出为你收集整理的WordPress小工具整合Aplayer音乐播放器全部内容，希望文章能够帮你解决WordPress小工具整合Aplayer音乐播放器所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。