Question

我当前的PHP代码正在按照我想要的方式设置我的“主题选项”页面（位于WP API外观菜单下），但是......

CSS样式表也应用于WP仪表板中的每个其他菜单（例如影响“设置＆gt;常规选项”）页面。我如何才能将样式表仅应用于我的“主题选项”页面，而不是篡改其他任何内容？

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

<?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＆amp; JS文件与我的页面的构建块分开（就在该函数的上方）。代码现在是里面我的页面构建功能，我现在得到了我想要的结果。

此前：

...
// 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">

        ...
        ...

Answer 2

如果当前页面是checking the page之前的特殊页面，您只能添加css文件，例如：

if (is_page('Theme Options')) { // check post_title, post_name or ID here
    add_action( 'admin_menu', 'admin_enqueue_scripts' );
}

=== UPDATE ===

或许最好检查一下这个功能：

<?php
// Add our CSS Styling
add_action( 'admin_menu', 'admin_enqueue_scripts' );
function admin_enqueue_scripts() {
    if (is_page('Theme Options')) { // check post_title, post_name or ID here
        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' );   
}

仅在Wordpress中将CSS应用于“主题选项”页面

2 个答案: