How to load multiple css, js and CDN in Wordpress plugin
Question
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 answers
solution1
0 2019-01-27 05:04:34
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');
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.