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

2021-05-22 0 1,626 百度已收录

Aplayer的音乐播放器界面确实悦目,以是决议也弄一个,最终整合到侧边栏的小工具上,这样利便在差其余地方挪用差其余音乐。
WordPress小工具整合Aplayer音乐播放器
以下是制作widget小工具的所有代码,把以下代码存为:widget-aplayer.php

  1. <?php
  2. add_action('widgets_init', 'widgetaplayerInit');
  3.  
  4. function widgetaplayerInit() {
  5.     register_widget('widgetaplayer');
  6. }
  7.  
  8. class widgetaplayer extends WP_Widget {
  9.  
  10.     /**
  11.      * widgetProfile setup
  12.      */
  13.     function widgetaplayer() {
  14.         $widget_ops = array('classname' => 'widget-aplayer', 'description' => '添加Aplayer播放器');
  15.         // init widgetProfile
  16.         parent::__construct('widget-aplayer', "Aplayer播放器", $widget_ops);
  17.     }
  18.  
  19.     /**
  20.      * How to display the widgetProfile on the screen.
  21.      */
  22.     function widget( $args, $instance ) {
  23.         extract( $args );
  24.         /* Our variables from the widget settings. */
  25.         $title = apply_filters('widget_name', $instance['title'] );
  26.         $type = $instance['type'];
  27.         $gs = $instance['gs'];
  28.         $auto = $instance['auto'];
  29.         $auto = $instance['auto'];
  30.         $url = $instance['url'];
  31.         $pic = $instance['pic'];
  32.         $word = $instance['word'];
  33.         echo $before_widget;
  34.         echo $this->showWidget($title,$type,$gs, $auto, $url, $pic,$word);
  35.         echo $after_widget;
  36.     }
  37.  
  38.     /**
  39.      * Update the widget settings.
  40.      */
  41.     function update( $new_instance, $old_instance ) {
  42.         $instance = $old_instance;
  43.         /* Strip tags for title and name to remove HTML (important for text inputs). */
  44.         $instance['title'] = strip_tags( $new_instance['title'] );
  45.         $instance['type'] = strip_tags( $new_instance['type'] );
  46.         $instance['gs'] = strip_tags( $new_instance['gs'] );
  47.         $instance['auto'] = strip_tags( $new_instance['auto'] );
  48.         $instance['url'] = strip_tags( $new_instance['url'] );
  49.         $instance['pic'] = strip_tags( $new_instance['pic'] );
  50.         $instance['word'] = strip_tags( $new_instance['word'] );
  51.         return $instance;
  52.     }
  53.  
  54.     /**
  55.      * Displays the widget settings controls on the widget panel.
  56.      * Make use of the get_field_id() and get_field_name() function
  57.      * when creating your form elements. This handles the confusing stuff.
  58.      */
  59.     function form( $instance ) {
  60.         /* Set up some default widget settings. */
  61.         $defaults = array(
  62.             'title' => '',
  63.             'type' => 'true',
  64.             'gs' => 'true',
  65.             'auto'  => '',
  66.             'url'   => '',
  67.             'pic'   => '',
  68.             'word'  => ''
  69.         );
  70.         $instance = wp_parse_args( (array) $instance, $defaults ); ?>
  71.         <!-- widget title: -->
  72.         <p>
  73.             <label for="<?php echo $this->get_field_id( 'title' ); ?>">显示题目</label>
  74.             <input type="text" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo $instance['title']; ?>" style="width:100%;" />
  75.         </p>
  76.         <p>
  77.             <label for="<?php echo $this->get_field_id( 'type' ); ?>">自动播放</label>
  78.             <select id="<?php echo $this->get_field_id( 'type' ); ?>" name="<?php echo $this->get_field_name( 'type' ); ?>" class="widefat" style="width:100%;">
  79.                 <option value="true" <?php if ( 'true' == $instance['type'] ) echo 'selected="selected"'; ?>>开启</option>
  80.                 <option value="false" <?php if ( 'false' == $instance['type'] ) echo 'selected="selected"'; ?>>关闭</option>
  81.             </select>
  82.         </p>
  83.         <p>
  84.             <label for="<?php echo $this->get_field_id( 'gs' );?>">开启歌词</label>
  85.             <select id="<?php echo $this->get_field_id( 'gs' ); ?>" name="<?php echo $this->get_field_name( 'gs' ); ?>" class="widefat" style="width:100%;">
  86.                 <option value="true" <?php if ( 'true' == $instance['gs'] ) echo 'selected="selected"'; ?>>开启</option>
  87.                 <option value="false" <?php if ( 'false' == $instance['gs'] ) echo 'selected="selected"'; ?>>关闭</option>
  88.             </select>
  89.         </p>
  90.         <p>
  91.             <label for="<?php echo $this->get_field_id( 'auto' ); ?>">讴歌者</label>
  92.             <input type="text" id="<?php echo $this->get_field_id( 'auto' ); ?>" name="<?php echo $this->get_field_name( 'auto' ); ?>" value="<?php echo $instance['auto']; ?>" style="width:100%;" />
  93.         </p>
  94.         <p>
  95.             <label for="<?php echo $this->get_field_id( 'url' ); ?>">歌曲URL</label>
  96.             <input type="text" id="<?php echo $this->get_field_id( 'url' ); ?>" name="<?php echo $this->get_field_name( 'url' ); ?>" value="<?php echo $instance['url']; ?>" style="width:100%;" />
  97.         </p>
  98.         <p>
  99.             <label for="<?php echo $this->get_field_id( 'pic' ); ?>">歌曲封面</label>
  100.             <input type="text" id="<?php echo $this->get_field_id( 'pic' ); ?>" name="<?php echo $this->get_field_name( 'pic' ); ?>" value="<?php echo $instance['pic']; ?>" style="width:100%;" />
  101.         </p>
  102.         <p>
  103.             <label for="<?php echo $this->get_field_id( 'word' ); ?>">歌词</label>
  104.             <input type="text" id="<?php echo $this->get_field_id( 'word' ); ?>" name="<?php echo $this->get_field_name( 'word' ); ?>" style="width:100%;" value="<?php echo $instance['word']; ?>" />
  105.         </p>
  106.         <?php
  107.     }
  108.  
  109.     function showWidget($title,$type,$gs, $auto, $url, $pic, $word) {
  110.         ?>
  111.     <link href="<?php echo get_template_directory_uri().'/aplayer/APlayer.min.css'?>" rel="external nofollow"  rel="external nofollow"  rel="stylesheet">
  112.     <script src="<?php echo get_template_directory_uri().'/aplayer/APlayer.min.js'?>"></script>
  113.     <div class="widget-title"><?php echo $title ?></div>
  114.         <div id="player1">
  115.             <pre class="aplayer-lrc-content">
  116.                 <?php echo $word ?>
  117.             </pre>
  118.         </div>
  119.     <script>
  120.         var ap = new APlayer
  121.                 ({
  122.                     element: document.getElementById('player1'),
  123.                     narrow: false,
  124.                     autoplay: <?php echo $type ?>,
  125.                     showlrc: <?php echo $gs ?>,
  126.                     music: {
  127.                             title: '<?php echo $title ?>',
  128.                             author: '<?php echo $auto ?>',
  129.                             url: '<?php echo $url ?>',
  130.                             pic: '<?php echo $pic ?>'
  131.                             }
  132.                 });
  133.         ap.init();
  134.     </script>
  135.     <?php }
  136. }?>

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

  1. <link href="<?php echo get_template_directory_uri().'/aplayer/APlayer.min.css'?>" rel="external nofollow"  rel="external nofollow"  rel="stylesheet">
  2. <script src="<?php echo get_template_directory_uri().'/aplayer/APlayer.min.js'?>"></script>

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

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

在后台外观-小工具中选择Aplayer播放器
WordPress小工具整合Aplayer音乐播放器
这样一个小工具就做好了,可以放在侧边栏的任何位置,现在在设置歌曲的URL与封面时,都是手动粘地址,好想直接多媒体库中添加多好,暂时还不会怎么关联媒体库,有知道的肯请粘上代码。

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!3308869544
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有猫币奖励和额外收入!

主题镇 WP教程 WordPress小工具整合Aplayer音乐播放器 https://zhutizhen.com/14476.html

永远为用户服务的镇长!

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或联络我们。
查看详情

相关文章