仅将我的自定义 CSS 用于我的 WordPress 插件设置页面，如何？

Question

我正在开发我的第一个 WordPress 插件。我需要为我为插件创建的设置页面使用自定义 CSS，但是当我将样式表文件排入队列时，它会影响整个 WordPress 后端，而不仅仅是我的插件的设置页面。 有可能解决这个问题吗？怎么样？

Answer 1

当您想在 WordPress 中添加样式或脚本时，您可以使用钩子将它们排入队列。对于管理员而言，您正在寻找的钩子称为admin_enqueue_scripts。

你可以添加类似的东西

/**
 * Register and enqueue a custom stylesheet in the WordPress admin.
 */
function wpdocs_enqueue_custom_admin_style() {
        wp_register_style( 'custom_wp_admin_css', plugin_dir_url( __FILE__ ) . 'css/woo-solo-api-admin.css', false, '1.0.0' );
        wp_enqueue_style( 'custom_wp_admin_css' );
}

add_action( 'admin_enqueue_scripts', 'wpdocs_enqueue_custom_admin_style' ); 

您只需要小心正确地指定要入队的 css 脚本的 url。

希望这会有所帮助。

哦，https://developer.wordpress.org 页面非常适合了解 WordPress 功能、核心功能、挂钩等。

还可以查看插件手册：https://developer.wordpress.org/plugins/ 在那里可以找到大量有用的信息:)

编辑：

admin_enqueue_scripts 有一个参数可以使用read more

/**
 * Register and enqueue a custom stylesheet in the WordPress admin.
 */
function wpdocs_enqueue_custom_admin_style( $hook ) {
    if ( $hook === 'edit.php' ) {
        wp_register_style( 'custom_wp_admin_css', plugin_dir_url( __FILE__ ) . 'css/woo-solo-api-admin.css', false, '1.0.0' );
        wp_enqueue_style( 'custom_wp_admin_css' );        
    }
}

add_action( 'admin_enqueue_scripts', 'wpdocs_enqueue_custom_admin_style' ); 

这将仅在编辑帖子屏幕上加载脚本。

您可以通过添加来查看屏幕上加载了什么钩子

error_log( print_r( $hook, true ) );

在你的wpdocs_enqueue_custom_admin_style 函数之前的条件。在您的wp-config.php 中启用调试日志，您将获得自定义帖子屏幕挂钩的名称。

或者，您可以定位 $current_screen 以匹配 CPT 的屏幕。这将仅在该页面上加载脚本。