以下是我的插件php代码:
<html>
<head>
<title>Grid Demo</title>
<link rel="stylesheet" href="css/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="js/fixtures.js"></script>
<script src="js/gridList.js"></script>
<script src="js/jquery.gridList.js"></script>
<script src="js/load.js"></script>
</head>
<?php
/*
Plugin Name: Testingplugin
Plugin URI: http://localhost
Description: Trying plugin for the first time.
Version: 1.0
Author: AIMS
Author URI: http://localhost
License: A "Slug" license name e.g. GPL2
*/
// Exampe is from the https://www.youtube.com/watch?v=GAwPa4fP90c
add_action('admin_menu', 'myfirstpluginactions');
function myfirstpluginactions(){
add_options_page('Title_of_the_plugin','name_of_submenu','manage_options', __FILE__,'display_menu_page');
}
function display_menu_page(){
?>
<body>
<div class="header">
<a href="#remove-row" class="button remove-row">-</a>
<a href="#add-row" class="button add-row">+</a>
<p>
<a class="github-button" href="https://github.com/hootsuite/grid" data-style="mega" data-count-href="/hootsuite/grid/stargazers" data-count-api="/repos/hootsuite/grid#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star hootsuite/grid on GitHub">GitHub</a>
</p>
</div>
<div class="grid-container">
<ul id="grid" class="grid">
<li class="position-highlight">
<div class="inner"></div>
</li>
</ul>
</div>
<script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
<?php
}
我正在使用Hootsuite Grid Repository 来使用插件显示可拖动元素。问题是我无法获得输出,也没有收到任何错误。我的猜测是包含 js 的问题。
我已将所有 js 包含在插件的 js 文件夹中。请让我知道可能是什么原因以及我可以做些什么来改进代码。
这是我在屏幕上得到的输出:
这就是我所期待的:
您想使用 wp_enqueue_script() 函数添加 JS,然后使用 plugins_url() 获取 JS 文件的路径。
类似于添加到您插件初始功能的内容:
wp_enqueue_script( 'custom-script-new-name-for-each-script', plugins_url( 'js/fixtures.js', FILE ), array( 'jquery', 'jquery-ui-core' ), time(), true );
还
wp_enqueue_style( plugins_url( 'css/style.css', FILE ) );
为您的 CSS。
对插件文件夹中的每个 JS 文件执行上述操作。删除您添加的标题 html,不需要 jquery 的东西,因为 WP 会将其添加为要求。
你的功能会变成:
function myfirstpluginactions(){
add_options_page('Title_of_the_plugin','name_of_submenu','manage_options', __FILE__,'display_menu_page');
wp_enqueue_style( plugins_url( 'css/style.css', FILE ) );
//Add this for each of your JS scripts
wp_enqueue_script( 'custom-script-new-name-for-each-script', plugins_url( 'js/fixtures.js', FILE ), array( 'jquery', 'jquery-ui-core' ), time(), true );
}
或者另一种方法是用 PHP 包装您当前的代码以获得正确的 JS 路径,例如更改
<script src="js/fixtures.js"></script>
至
<script src="<?php echo plugins_url( 'js/fixtures.js', FILE); ?>"></script>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句