WordPress 将样式表添加到插件菜单页面

Question

已解决

我需要打电话给new Form()，虽然我在 WebSecurity.php 中打过电话

array(__CLASS__,'ws_page_render') //I though this would call new Form()

---

我正在尝试在 WordPress 插件中将样式表添加到我的菜单页面。我阅读了文档并应用了它，但它仍然没有显示在标题中。所有资源均已添加。我希望有人可以帮助我。

我需要在标题中添加style.css，以便request_form.php可以在网页上呈现css。

我已经用正确的方法添加了样式表：

我已经更新了 Form 类

    function __construct()
    {   
        //browser finds the style sheet
        // output: http://cms.local/wordpress/wp-content/plugins/web_security_extension/includes/resources/css/ws-style.css
        echo plugin_dir_url( __FILE__ ) . 'resources/css/ws-style.css';

        add_action( 'admin_enqueue_scripts', array($this, 'ws_load_css_1') );

        include_once WSS_EXTESION_DIR . '/includes/views/request_form.php';
    }

    function ws_load_css_1() 
    {
          wp_register_style( 'ws_css', plugin_dir_url( __FILE__ ) . 'resources/css/ws-style.css');
          wp_enqueue_style( 'ws_css' );
    }

项目结构

根插件

• 包括
  • 资源
    • CSS
      • ws-style.css
  • 查看次数
    • request_form.php
  • 来自.php
• init.php
• WebSecurity.php

init.php

<?php

/*
Plugin Name: websecurityscan
Description:
Version: 0.1
Author: 
*/

define('WSS_EXTESION', __FILE__);

define('WSS_EXTESION_DIR', untrailingslashit( dirname(WSS_EXTESION) ));

require_once WSS_EXTESION_DIR . '/WebSecurity.php';

WebSecurity.php

<?php

require_once WSS_EXTESION_DIR . '/includes/Form.php'; 

class WebSecurity
{

    function __construct()
    {
        add_action('admin_menu', array($this, 'ws_add_menu'));
    }

    function ws_add_menu()
    {

        add_menu_page(
            'Web Application Scanner', 
            'Web App Scanner', 
            'manage_options', 
            'Web_App_Scanner_menu',
            array(__CLASS__,'ws_page_render')
            );

    }

    function ws_page_render()
    {
        new Form();
    }

}

new WebSecurity();

?>

Form.php

<?php

class Form
{

    function __construct()
    {   
        //browser finds the style sheet
        echo plugin_dir_url( __FILE__ ) . 'resources/css/ws-style.css';

        add_action( 'admin_enqueue_scripts', array($this, 'ws_load_css_1') );

        include_once WSS_EXTESION_DIR . '/includes/views/request_form.php';
    }

    function ws_load_css_1() 
    {
          wp_register_style( 'ws_css', plugin_dir_url( __FILE__ ) . 'resources/css/ws-style.css');
          wp_enqueue_style( 'ws_css' );
    }    
}

request_form.php

<html>
    <body>

        <div class="wrapper">
            <form action="request_form.php" method="post">

                <label>Naam</label>
                <input type="text" name="naam">

                <label>Bedrijf</label>
                <input type="text" name="bedrijf">

                <label>Email</label>
                <input type="email" name="email">

                <input type="submit" name="submit" value="verstuur">

            </form>
        </div>

    </body>
</html>

style.css

.wrapper{
    margin: auto;
    width: 50%;
    padding: 10px;
}

Answer 1

使用admin_enqueue_scripts 钩子而不是wp_enqueue_scripts 在管理面板中排队资产。编辑Form 类构造函数，如下所示：

function __construct()
{   
     add_action('admin_enqueue_scripts',array($this, 'ws_load_css'));
     include_once WSS_EXTESION_DIR . '/includes/views/request_form.php';
}

wp_enqueue_scripts 用于在首页排队的操作挂钩。

admin_enqueue_scripts 用于在管理页面上排队的操作挂钩。

更新

您还必须使用 css 文件 url 而不是路径。编辑您的 ws_load_css() 函数并使用 plugin_dir_url() 函数，如下所示：

function ws_load_css()
{
  wp_enqueue_style('style',  plugin_dir_url( __FILE__ ) . 'resources/css/ws-style.css');
} 

对于您的代码的新版本，请编辑您的 load_custom_wp_admin_style() 函数，如下所示：

function load_custom_wp_admin_style() {
        wp_register_style( 'custom_wp_admin_css', plugin_dir_url( __FILE__ ) . 'resources/css/ws-style.css');
        wp_enqueue_style( 'custom_wp_admin_css' );
    }

注意：使用resources/css/ws-style.css而不是/resources/css/ws-style.css。