abrudtkuhl
  • 0
Учитель

Включение CSS и JS на экране администратора параметров пользовательской темы

  • 0

Я создаю пользовательскую тему со страницей параметров темы.

Я хотел бы стилизовать страницу параметров и не хочу включать встроенные стили. Есть ли способ включить внешнюю таблицу стилей, скажем,

TEMPLATEPATH . '/css/admin.css'

Я также нашел этот фрагмент кода, и он, кажется, работает — ссылка

function admin_register_head() {
 $siteurl = get_option('siteurl');
 $url = $siteurl . '/wp-content/plugins/' . basename(dirname(__FILE__)) . '/yourstyle.css';
 echo "<link rel='stylesheet' type='text/css' href='$url' />\n";
}
add_action('admin_head', 'admin_register_head');

Каков наилучший способ?

Share
  1. Если вы создадите плагин темы администратора из шагов Кодекса, вы заметите, что в нем сказано не вставлять таблицы стилей, как указано выше, хотя вышеизложенное будет работать.

    Если вы поместите следующее в свой файл темы администратора, он будет служить той же цели, но использует подход wp_enqueue_styles :

    function add_admin_theme_styles() {
        wp_register_style($handle = 'mytheme-theme-admin-styles', $src = plugins_url('wp-admin.css', __FILE__), $deps = array(), $ver = '1.0.0', $media = 'all');
        wp_enqueue_style('mytheme-theme-admin-styles');}
        add_action('admin_print_styles', 'add_admin_theme_styles');
    
    • 0
  2. При регистрации страницы для админки, использования add_submenu_page или любых других add_{TYPE}_page функций четвертый параметр принимает уникальный идентификатор, этот идентификатор обозначает хук, который будет использовать ваша зарегистрированная страница.

    Если бы я зарегистрировал параметры, например:

    add_options_page( 'Example Plugin Options', 'Example Plugin', 'manage_options', 'example-plugin-identifier', 'example_plugin_options' );
    

    Затем для этой страницы доступны различные хуки, вот лишь несколько возможных действий для уже зарегистрированной страницы.

    // load-{HANDLE}
    add_action( 'load-example-plugin-identifier', 'example_plugin_callback' );
    // admin_head-{HANDLE}
    add_action( 'admin_head-example-plugin-identifier', 'example_plugin_callback' );
    // admin_print_scripts-{HANDLE}
    add_action( 'admin_print_scripts-example-plugin-identifier', 'example_plugin_callback' );
    // admin_print_styles-{HANDLE}
    add_action( 'admin_print_styles-example-plugin-identifier', 'example_plugin_callback' );
    
    function example_plugin_callback() {
    
        // Run your code here
    
    }
    

    Существует также admin_enqueue_scripts хук, который предоставляет имя текущего дескриптора в строке/переменной, которую он передает функциям обратного вызова.

    add_action( 'admin_enqueue_scripts', 'example_plugin_callback' );
    
    function example_plugin_callback( $handle ) {
    
        // If the handle is not the page registered earlier, return
        if( 'example-plugin-identifier' =! $handle )
            return;
    
        // Run your code here
    
    }
    

    Как правило, вам не нужно использовать admin_head, admin_print_scripts или admin_print_styles если у вас нет особых требований для таргетинга на каждую административную страницу или выполнения условной логики внутри обратного вызова для таргетинга на определенные зарегистрированные страницы.

    Надеюсь, это поможет..

    • 0
  3. WP предоставляет очереди для скриптов и стилей. Это позволяет изменять версии URL-адресов, автоматически загружать зависимости и т. д.

    Посмотрите wp enqueue style() в Кодексе, как правильно зарегистрировать свой стиль и загружать только там, где вам это нужно (на вашей пользовательской странице, а не во всей админке).

    • 0
  4. Да, я отвечаю на свой вопрос… но я заставил его работать.

    Добавьте это действие в файл functions.php вашей темы.

    function admin_register_head() {
        $url = get_bloginfo('template_directory') . '/css/admin.css';
        echo "<link rel='stylesheet' type='text/css' href='$url' />\n";
    }
    add_action('admin_head', 'admin_register_head');
    
    • 0

Оставить ответ

You must login to add an answer.