Question

以下是我的插件的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存储库来使用插件显示可拖动元素。问题是我无法获得输出，也没有收到任何错误。我的猜测是包含js的问题。

我已将所有j包含在我的插件的js文件夹中。请允许，让我知道可能是什么原因以及我可以做些什么来改进代码。

以下是我在屏幕上显示的输出：

这就是我所期待的：

Answer 1

您想使用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>

编写Wordpress插件时没有错误没有执行

1 个答案: