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

时间:2017-08-24 14:39:30

标签: php css wordpress

解决

我需要致电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
    • From.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;
}

1 个答案:

答案 0 :(得分:2)

使用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动作挂钩。

用于在管理页面上排队的

ws_load_css()动作挂钩。

<强>更新

此外,您必须使用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代替{{1}}。