php - 仅在 Wordpress 中将 CSS 应用于 "Theme Options"页面

Question

我当前的 PHP 代码正在运行，并且按照我希望的方式设置我的“主题选项”页面(位于 WP API 外观菜单下)，但是......

CSS 样式表也被应用于 WP 仪表板中的所有其他菜单(例如影响“设置 > 常规选项”)页面。我如何才能将样式表仅应用于我的“主题选项”页面而不篡改其他任何内容？

我的样式表名为“theme-options.css”，位于名为“include”> include/theme-options.css 的文件夹中。下面的代码位于“theme-options.php”页面中。

<?php
// Add our CSS Styling
add_action( 'admin_menu', 'admin_enqueue_scripts' );
function admin_enqueue_scripts() {
    wp_enqueue_style( 'theme-options', get_template_directory_uri() . '/include/theme-options.css' );
    wp_enqueue_script( 'theme-options', get_template_directory_uri() . '/include/theme-options.js' );   
}   

Answer 1

我将 CSS 和 JS 文件与页面的构建 block 分开放置(就在该功能上方)。代码现在在我的页面构建函数中，我现在得到了我想要的结果。

之前:

...
// Add our CSS Styling
function theme_admin_enqueue_scripts( $hook_suffix ) {
    wp_enqueue_style( 'theme-options', get_template_directory_uri() . '/include/theme-options.css', false, '1.0' );
    wp_enqueue_script( 'theme-options', get_template_directory_uri() . '/include/theme-options.js', array( 'jquery' ), '1.0' );     

// Build our Page
function build_options_page() {

ob_start(); ?>
    <div class="wrap">
        <?php screen_icon();?>

        <h2>Theme Options</h2>

        <form method="post" action="options.php" enctype="multipart/form-data">

        ...
        ...

解决方法:

// Build our Page
function build_options_page() {

// Add our CSS Styling
wp_enqueue_style( 'theme-options', get_template_directory_uri() . '/include/theme-options.css' );
wp_enqueue_script( 'theme-options', get_template_directory_uri() . '/include/theme-options.js' ); 

ob_start(); ?>
    <div class="wrap">
        <?php screen_icon();?>

        <h2>Theme Options</h2>

        <form method="post" action="options.php" enctype="multipart/form-data">

        ...
        ...