dqw70970
2012-06-03 15:37
浏览 41
已采纳

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

My current PHP code is working and styling my "Theme Options" page (located under the WP API Appearance menu) the way I want it to look, however...

The CSS stylesheet is also being applied to every other menu in the WP dashboard (such as affecting the "Settings > General-Options") page too. How am I able to go about applying the stylesheet just to my "Theme Options" page only and not tamper with anything else?

My stylesheet is named 'theme-options.css", located within a folder called "include" > include/theme-options.css. The code below is placed within a "theme-options.php" page.

<?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' );   
}   
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • drx3157 2012-06-03 16:40
    已采纳

    I was placing the CSS & JS files separately from the building blocks of my page (just above that function). The code is now inside my page build function and I am now getting the results I was after.

    Previously:

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

    Solution:

    // 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">
    
            ...
            ...
    
    打赏 评论
  • dqvzfp6468 2012-06-03 15:50

    You could only add the css file if the current page is your special page by checking the page before, e.g.:

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

    === UPDATE ===

    Maybe it is better to check in the function:

    <?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' );   
    }  
    
    打赏 评论

相关推荐 更多相似问题