1. David Wu首页
  2. WordPress
  3. WordPress安装教程

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

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().'https://img.2kss.com/aplayer/APlayer.min.css'?>" rel="stylesheet">
  112.     <script src="<?php echo get_template_directory_uri().'https://img.2kss.com/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. }?>

原创文章,作者:DavidWu,如若转载,请注明出处:https://www.davidwu.net/archives/98822

服务项目 服务内容 收费标准(元)
开发定制 WordPress主题/插件开发定制 (以最终需求为准)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

邮箱地址不会被公开。 必填项已用*标注