css - 将样式表添加到我的选项页面

Question

我的文件名是YPE-Options.php，文件根是panel/YPE-Options.php，我的样式表根是panel/css/bootstrap.min.css。我想在下面的代码中添加/加载或注册这个样式表

我该怎么做？

<?php

class YPE_Admin_Panel {

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

    public function YPE_add_menu_page() {
        //add_menu_page( $page_title, $menu_title, $capability, $menu_slug, $function, $icon_url, $position );
        add_menu_page(
            'YALLANPE', 
            'YALLANPE', 
            'manage_options',
            'YPE_menu_page_options', 
            array($this,'YPE_display_admin_panel_options'), 
            '' 
        );
    }

    public function YPE_display_admin_panel_options() {
    ?>
        <h2>Yallanpe Blog Theme Settings</h2>
    <?php
    }

}

$YPE_Admin_Panel = new YPE_Admin_Panel();

Answer 1

函数add_menu_page()返回用于跟踪我们的自定义页面的 Hook 名称。它可以像这样使用:

$hook = add_menu_page( $arguments );
add_action( "admin_print_scripts-$hook", 'my_enqueue_callback' );

但是admin_print_scripts()建议仅打印内联脚本。要排队，有 admin_enqueue_scripts()它接收 $hook 作为参数。

完整示例:

class YPE_Admin_Panel 
{
    public $plugin_url;
    public $plugin_path;
    private $hook;

    public function __construct() 
    {
        $this->plugin_url    = plugins_url( '/', __FILE__ );
        $this->plugin_path   = plugin_dir_path( __FILE__ );
        add_action('admin_menu', array($this, 'menu_page'));
    }

    public function menu_page() 
    {
        $this->hook = add_menu_page(
            'YALLANPE', 
            'YALLANPE', 
            'manage_options',
            'YPE_menu_page_options', 
            array( $this,'display_panel' ), 
            '' 
        );
        add_action( 'admin_enqueue_scripts', array( $this, 'enqueue' ) );
    }

    public function display_panel() 
    {
        ?><h2>Yallanpe Blog Theme Settings</h2><?php
    }

    public function enqueue( $hook )
    {
        // Not our page, bail out
        if( $hook !== $this->hook )
            return;

        wp_enqueue_style( 'my-style', $this->plugin_url . 'css/custom.css' );
    }
}

$YPE_Admin_Panel = new YPE_Admin_Panel();