仅在插件页面 WordPress 上显示样式表答案

【问题标题】：Show Stylesheet only on Plugin page WordPress仅在插件页面 WordPress 上显示样式表
【发布时间】：2016-11-09 03:53:01
【问题描述】：

我的 WordPress 插件中有很多 CSS 脚本，它们可能会影响其他 WordPress 标签，例如 form：

.form {
    padding:30px;
    background-color:#fff;
}

我可以更改 CSS，但我想要一个只允许样式表显示在插件页面上的脚本。

所以要澄清一下，目前样式表 <link> 始终在管理面板的源代码中，但我想要一个脚本，当用户使用插件时，它只将样式表 <link> 放在源代码中页面。

【问题讨论】：

更好的做法是在您的正文标签中添加一个带有页面名称或其他内容的条件，并至少使用.pagename .form{}，然后它不是样式表的另一个连接。不要使用 php 插入 css 规则，查找此代码更新会很麻烦。

标签： php css wordpress plugins

【解决方案1】：

你可以使用get_current_screen:

$screen = get_current_screen();

if ( $screen->id == 'your_plugin_page' ) ){
    $custom_css = ".form {.....}";
    wp_add_inline_style( 'your_main_style_handle', $custom_css );
}

更新 1：

要将子菜单添加到您的管理菜单：

add_action( 'admin_menu', 'your_plugin_admin_menu' );
//Add this to register you styles
add_action( 'admin_init', 'your_plugin_admin_init' );

然后：

/**
 * Register your stylesheet.
 */
function wpdocs_plugin_admin_init() {
    wp_register_style('your-style', plugins_url('scripts/jquery-ui.css',__FILE__ ));

    wp_register_script( 'jquery-ui', plugins_url('scripts/jquery-ui.js',__FILE__ ));
}

/**
 * Register your plugin page and hook stylesheet loading.
 */
function your_plugin_admin_menu() {
    $page = add_submenu_page(...., 'your_plugin_manage_menu' );

    //Call 'your_plugin_admin_styles' only on the plugin’s options page
    add_action( "admin_print_styles-{$page}", 'your_plugin_admin_styles');
}

/**
 * Enqueue our stylesheet.
 */
function your_plugin_admin_styles() {
    wp_enqueue_style('your-style');
    wp_enqueue_script('jquery-ui');

    $custom_css = ".form {.....}";
    wp_add_inline_style( 'your-style', $custom_css );
}

/**
 * Output our admin page.
 */
function your_plugin_manage_menu() {
     // ...
}

【讨论】：

我建议内联 CSS 不是编码的好习惯，但如果需要，您可以使用此解决方案，它可以正常工作。
出于某种原因，这对我不起作用；我的 URL 是 options-general.php?page=maintenance，所以 maintenance 应该是我的 ID，然后我将 if ( $screen->id == 'maintenance' ) { 包裹在样式表周围，但这会完全删除样式。
确保在上述代码之前调用了wp_enqueue_style('your_main_style_handle', 'path/to/your/style.css')。
$screen->id 将toplevel_page_ 添加到menu slug，请您解释一下。

【解决方案2】：

您可以创建样式表，并为该样式表引用创建挂钩。然后，您可以在插件调用中使用 add_action() 添加 WordPress，您喜欢在其中调用该脚本。因此，它将根据需要在指定页面的页面头部引用。阅读更多 https://developer.wordpress.org/reference/functions/wp_enqueue_script/ https://developer.wordpress.org/reference/functions/add_action/

【讨论】：