如何在WordPress插件上添加html和脚本?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (324)

我正在考虑为我的网站创建一个简单的插件。我想在这里添加视频js脚本

 <?php
    /**
    Plugin Name: name
    Plugin URI: url
    Description: desc 
    Version: 1.1.1
    Author: auth
    Author URI: rul
    Text Domain: sulg
    */

这是我想要包含在WordPress插件上的html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="ISO-8859-1">
        <link rel="icon" href="/assets/icons/logo16.png">
        <link href="/assets/videojs/video-js.css" rel="stylesheet">
        <link href="/assets/videojs/videojs-download-button.css" rel="stylesheet">
        <link href="/assets/videojs/videojs-resolution-switcher.css" rel="stylesheet">

        <script src="/assets/videojs/video.js"></script>
        <script src="/assets/videojs/videojs-contrib-hls.js"></script>
        <script src="/assets/videojs/videojs-download-button.js"></script>
        <script src="/assets/videojs/videojs-resolution-switcher.js"></script>
        <script src="/assets/videojs/videojs.hotkeys.js"></script>
        <script src="/assets/videojs/videojs-components.js"></script>
        <script src="/assets/js/ResizeSensor.js"></script>

        <script src="/assets/js/onevideo.js"></script>
        <script src="/assets/js/oneVideoPlayer.js"></script>
        <script src="VidPlaySite.js"></script>
        <style>
            .reloadButton {
                display: block !important;
                z-index: 10000 !important;
                background-image: url('/assets/icons/reloadNormal.png') !important;
            }
            .reloadButton:hover {
                background-image: url('/assets/icons/reloadHover.png') !important;
            }
        </style>
    </head>
    <body style="overflow: hidden;background:#000000;position:absolute;left:0;top:0;right:0;bottom:0;">
        <video id="oneVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto"> 
            <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
        </video>
        <input type="file" id="srtSelector" accept=".vtt, .srt, .txt" style="display:none;visibility:hidden;width:0;height:0;">

    </body>
</html>

所以我想包括播放器的视频.js脚本,这对我来说很困难,所以我请求帮助。谢谢

提问于
用户回答回答于

要注册你的脚本,可以使用wp_enqueue_script()功能。wp_enqueue_script()函数采用5个参数。

  • $handle(字符串)(必需):脚本的名称。应该是独一无二的。
  • $src(String)(可选):脚本的完整URL,或脚本相对于WordPress根目录的路径。默认值:“
  • $deps(数组)(可选):一个已注册脚本数组处理此脚本取决于。默认值:Array()
  • $ver(Stringbool)(可选):String指定脚本版本号(如果有),它作为查询字符串添加到URL中,用于破坏缓存。如果版本设置为false,则自动添加等于当前安装的WordPress版本的版本号。如果设置为NULL,则不会添加任何版本。默认值:false
  • $in_footer(Bool)(可选):是否在此之前对脚本进行排队</body>而不是在<head>默认的“假”。默认值:false

例子:

function video_plugin_scripts() {
    wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/video.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'video_plugin_scripts' );

扫码关注云+社区

领取腾讯云代金券