douhu2131 2019-01-26 16:17
浏览 201

如何在Wordpress插件中加载多个css，js和CDN

I am trying to understand how to include multiple css, javascript and CDN in my wordpress plugin to create a dashboard. I have a file called index.html that creates the dashboard of my plugin. If I run the file in the browser all the css, CDN and javascript are loaded. Now I would like to use this index.html as the UI for a plugin in wordpress.

I have managed to include the html file in the main PHP file of my plugin(myplugin.php). Now I would like to load all the css, CDN and javascript that would normally be located in the <head> of my index.html as in the following example. How can I do it?

<head>
    <meta charset="utf-8" />
    <link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
    <link rel="icon" type="image/png" href="../assets/img/favicon.ico">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> Dashboard</title>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
    <!--     Fonts and icons     -->
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />
    <!-- CSS Files -->
    <link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
    <link href="../assets/css/light-bootstrap-dashboard.css?v=2.0.1" rel="stylesheet" />
    <!-- Chart.js CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
    <!--   Core JS Files   -->
    <script src="../assets/js/core/jquery.3.2.1.min.js" type="text/javascript"></script>
    <script src="../assets/js/core/popper.min.js" type="text/javascript"></script>
    <script src="../assets/js/core/bootstrap.min.js" type="text/javascript"></script>
    <!--  Plugin for Switches, full documentation here: http://www.jque.re/plugins/version3/bootstrap.switch/ -->
    <script src="../assets/js/plugins/bootstrap-switch.js"></script>
    <!--  Google Maps Plugin    -->
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
    <!--  Chartist Plugin  -->
    <script src="../assets/js/plugins/chartist.min.js"></script>
    <!--  Notifications Plugin    -->
    <script src="../assets/js/plugins/bootstrap-notify.js"></script>
    <!-- Control Center for Light Bootstrap Dashboard: scripts for the example pages etc -->
    <script src="../assets/js/light-bootstrap-dashboard.js?v=2.0.1" type="text/javascript"></script>
<script src="../assets/js/demo.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        // Javascript method's body can be found in assets/js/demos.js 
        demo.initDashboardPageCharts();                               
        demo.showNotification();                                                                                         
    });
</script>
</head>
  • 写回答

1条回答 默认 最新

  • douzuan2814 2019-01-27 05:04
    关注

    Add this to your main plugin file:

    function add_my_plugin_script() {

  $plugin_url = plugin_dir_url( __FILE__ );

  // css
  wp_enqueue_style( 'plugin-style-1', $plugin_url. '/css/plugin-style-1.css' );

  // js
  wp_enqueue_script( 'plugin-script-1', $plugin_url. '/js/plugin-style-1.js' );

}
add_action('admin_enqueue_scripts', 'add_my_plugin_script');
    评论

报告相同问题？

悬赏问题

  • ¥15 BP神经网络控制倒立摆
  • ¥20 要这个数学建模编程的代码 并且能完整允许出来结果 完整的过程和数据的结果
  • ¥15 html5+css和javascript有人可以帮吗？图片要怎么插入代码里面啊
  • ¥30 Unity接入微信SDK 无法开启摄像头
  • ¥20 有偿 写代码 要用特定的软件anaconda 里的jvpyter 用python3写
  • ¥20 cad图纸，chx-3六轴码垛机器人
  • ¥15 移动摄像头专网需要解vlan
  • ¥20 access多表提取相同字段数据并合并
  • ¥20 基于MSP430f5529的MPU6050驱动，求出欧拉角
  • ¥20 Java-Oj-桌布的计算