最新活动:电脑PC端+手机端+微网站+自适应网页多模板选择-建站388元起价!!!
当前位置:主页 > 网站建设 > 制作widget小工具| 整合Aplayer.js音乐播放器到小工

制作widget小工具| 整合Aplayer.js音乐播放器到小工

时间:2023-05-28 19:05:28 阅读: 文章分类: 网站建设 作者: 网站编辑员

导读:建站文章建站文章    function widgetaplayer() {$widget_ops = array('classname' = 'widget-aplayer'网站推广优化seoseo网站优化培训。

网站推广优化seoseo网站优化培训

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

先看看效果图:

制作widget小工具| 整合Aplayer.js音乐播放器到小工具–爱CSS-每多学一点知识就少写一行代码

 

 

 

 

 

 

 

Aplayer.js

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 <?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']; ?>" style="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" style="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" style="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']; ?>" style="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']; ?>" style="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']; ?>" style="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' ); ?>" style="width:100%;" value="<?php echo $instance['word']; ?>" />         </p>         <?php     }     function showWidget($title,$type,$gs, $auto, $url, $pic, $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网站推广优化seo 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 ?>,                     mu建设网站sic: {                             title: '<?php echo $title ?>',                             author: '<?php echo $auto ?>',                             url: '<?php echo $url ?>',                             pic: '<?php echo $pic ?>'                             }                 });         ap.init();     </script>     <?php } }?>

关键词标签: 小工具 widget 音乐播放器

声明: 本文由我的SEOUC技术文章主页发布于:2023-05-28 ,文章制作widget小工具| 整合Aplayer.js音乐播放器到小工主要讲述widget,小工具,音乐播放器网站建设源码以及服务器配置搭建相关技术文章。转载请保留链接: https://www.seouc.com/article/web_11592.html

我的IDC 网站建设技术SEOUC.COM
专注网站建设,SEO优化,小程序设计制作搭建开发定制网站等,数千家网站定制开发案例,网站推广技术服务。
  • 5000+合作客服
  • 8年从业经验
  • 150+覆盖行业
  • 最新热门源码技术文章