为自定义 wordpress 插件加载 js 和 css 文件答案

【问题标题】：Load js and css files for custom wordpress plugin为自定义 wordpress 插件加载 js 和 css 文件
【发布时间】：2014-04-04 03:46:27
【问题描述】：

在我的wp-contents/pugins 文件夹中，我有program-registration。在这个插件里面我有js/registration.js和css/registration.css。

为什么这个js文件中定义的函数不可访问？

<?php

/*
*   Plugin Name: Program Registration
*   Plugin URI: http://www.test.com/
*   Description: Program Registration plugin for wordpress.
*   Version: 1.0.0
*   Author: Admin
*   Author URI: http://test.com/
*/

global $wpdb;
global $success;
global $error;

define('PROGRAM_REGISTRATION_TABLE', $wpdb->prefix . "program_registration");

/*
|--------------------------------
| Process Registration Form
|--------------------------------
*/

if( isset($_POST['program_register']) ) { 

    try {

        if ( !empty($_POST['candidate_name']) && !empty($_POST['candidate_address']) && !empty($_POST['candidate_phone']) && !empty($_POST['program']) ) {

            $rows_affected = $wpdb->insert(PROGRAM_REGISTRATION_TABLE, array('candidate_name' => $_POST['candidate_name'],'address' => $_POST['candidate_address'], 'email' => $_POST['candidate_email'], 'phone' => $_POST['candidate_phone'], 'program' => $_POST['program'], 'ip' => $_SERVER['REMOTE_ADDR']) );

            if($rows_affected == 1) {
                $success = "You are successfully registered, you will get informed!";
            } else {
                $error   = "Something went wrong!";
            }
//echo $wpdb->last_query;

        } else {

            if( empty($_POST['candidate_name']) ) {
                throw new Exception("Candidate Name cannot be empty!");
            } elseif ( empty($_POST['candidate_address']) ) {
                throw new Exception("Address cannot be empty!");
            } elseif( empty($_POST['candidate_phone']) ) {
                throw new Exception("Phone cannot be empty!");
            } else {
                throw new Exception("Program cannot be empty!");
            }

        }

    } catch (Exception $e) {
        $error = $e->getMessage();
    }

}

/*
|--------------------------------
| Activate Plugin
|--------------------------------
*/

function program_registration_activation() {

    $registration_table = "CREATE TABLE ".PROGRAM_REGISTRATION_TABLE."(
        id int not null auto_increment,
        candidate_name varchar(100),
        address varchar(250),
        email varchar(50),
        phone varchar(20),
        program varchar(250),
        ip varchar(100),
        request_time timestamp,
        primary key(id)
    );";

    require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
    dbDelta($registration_table);
}

register_activation_hook(__FILE__, 'program_registration_activation');

/*
|--------------------------------
| Deactivate Plugin
|--------------------------------
*/

function program_registration_deactivation() {

}

register_deactivation_hook(__FILE__, 'program_registration_deactivation');

/*
|--------------------------------
| Stylesheets
|--------------------------------
*/

add_action('wp_enqueue_scripts', 'registration_styles');

function registration_styles() {  
    wp_register_style('program_style', plugins_url('css/registration.css', __FILE__));  
    wp_enqueue_style('program_style');  
}

/*
|--------------------------------
| Scripts
|--------------------------------
*/

add_action('wp_enqueue_scripts', 'registration_scripts');

function registration_scripts() {  

    wp_register_script('registrationjs_init', plugins_url('js/registration.js', __FILE__));  
    wp_enqueue_script('registrationjs_init');

}

/*
|--------------------------------
| Shortcode
|--------------------------------
*/

add_shortcode('registration_form', 'registration_form_function');

function registration_form_function() {

    global $success;
    global $error;

    $form  = "";
    if(isset($success) && $success != '') {
        $form .= "<div class='alert alert-success'>
                    <button class='close' data-dismiss='alert' type='button'>×</button>
                    <strong>Well done! </strong>";
        $form .= $success."</div>";
    } elseif(isset($error) && $error != '') {
        $form .= "<div class='alert alert-danger'>
                    <button class='close' data-dismiss='alert' type='button'>×</button>
                    <strong>Error! </strong>";
        $form .= $error."</div>";
    }

    $form .= "<form method='POST' name='program_registration_form' action=''>
                <label for='candidate_name' class='registration_label'>Candidate Name:</label>
                <input type='text' name='candidate_name' class='txbx' required/> 
                <label for='candidate_address' class='registration_label'>Address:</label>
                <textarea name='candidate_address' class='txbx' required></textarea>
                <label for='candidate_email' class='registration_label'>E-mail:</label>
                <input type='email' name='candidate_email' class='txbx'/> 
                <label for='candidate_phone' class='registration_label'>Phone:</label>
                <input type='text' name='candidate_phone' class='txbx' required/> 
                <label for='program' class='registration_label'>Interested Program:</label>
                <input type='text' name='program' class='txbx' required/> 
                <input type='submit' name='program_register' value='Register' class='button blue small'/> 
            </form>";
    return $form;
}

/*
|--------------------------------
| Admin Settings Menu
|--------------------------------
*/

function program_plugin_settings() {
    // add_management_page
    add_menu_page( 'Program Registration', 'Program Registration', 'administrator', 'program_settings', 'program_settings_display');
}

add_action('admin_menu', 'program_plugin_settings');


/*
|--------------------------------
| Admin Settings Page
|--------------------------------
*/

function program_settings_display() {

    $html = '<h2>Program Registration Panel</h2>
            <table>
                <tr>
                    <th>S.No.</th>
                    <th >Candidate Name</th>
                    <th >Address</th>
                    <th >E-mail</th>
                    <th >Phone</th>
                    <th >Requested Program</th>
                    <th >Action</th>
                </tr>';
    $sql  = "SELECT * FROM ".PROGRAM_REGISTRATION_TABLE.""; 

    $result = mysql_query($sql);
    $i = 1;
    while($row = mysql_fetch_object($result)) {
        $html .= '<tr>
                    <td>'.$i.'</td>
                    <td>'.$row->candidate_name.'</td>
                    <td>'.$row->address.'</td>
                    <td>'.$row->email.'</td>
                    <td>'.$row->phone.'</td>
                    <td>'.$row->program.'</td>
                    <td><a href="javascript:void(null);" onclick="delete_registration('.$row->id.');">Delete</a></td>
                </tr>';
                $i++;
    }       

    $html .= '</table>';
    echo $html;
}

【问题讨论】：

如果你查看生成页面的源码，你的registration.js是否出现在
@Hobo 我的 js 或 css 文件没有出现在生成的源代码中，firebug 控制台中没有错误。
好的，这有帮助。我假设您已经在管理控制台中激活了插件？您的 PHP 日志中有任何错误吗？可能导致问题的一件事是函数名称冲突 - 请参阅 codex.wordpress.org/…
@Hobo 没有错误，我可以在管理面板访问插件，我可以在这里看到删除功能链接（program_settings_display()）。
抱歉，不知道。我下载了您的代码的 zip，将其解压缩到我昨天提到的相同设置中，激活它，我可以在生成的页面源中看到 css 和 js 文件。如果我将 js 文件更改为仅包含 alert("Test"); 我会在页面加载时收到警报。据我所知，插件很好。而且您无法在没有插件和标准主题的全新安装中看到它们？

标签： javascript html css wordpress

【解决方案1】：

要在wordpress管理面板插件设置中加载js和css文件，我们需要像这样调用admin_enqueue_scripts，

原来是这样，

function registration_scripts() {  

    wp_register_script('registrationjs_init', plugins_url('js/registration.js', __FILE__));  
    wp_enqueue_script('registrationjs_init');

}

add_action( 'admin_enqueue_scripts', 'registration_scripts' );

【讨论】：