Как загрузить CSS стили только в админку WordPress?

Question

Как загрузить CSS стили только в админку WordPress?

2 мар. 2012 г., 01:32:38

Просмотры: 18.9K

Голосов: 8

Я пытаюсь загрузить CSS файл для области постов в WordPress, но безрезультатно. Изучив функцию wp_enqueue_style, я написал следующий код, но он не работает. Возможно, я упустил какой-то тег или символ. У меня есть кастомная панель публикации, которую я хочу стилизовать с помощью CSS файла. Буду благодарен за помощь.

Вот что у меня в файле functions.php темы:

function mytheme_add_init() {
    // Получаем URL директории текущей темы
    $file_dir = get_bloginfo('template_directory');
    // Подключаем CSS файл
    wp_enqueue_style("functions", $file_dir."/scripts/custom.css", false, "1.0", "all");
    // Подключаем JS файл
    wp_enqueue_script("rm_script", $file_dir."/scripts/custom.js", false, "1.0");
}

Kurt Bunch

83

админ панель css

Все ответы на вопрос

Поздний ответ: Поскольку предыдущие ответы демонстрировали устаревшие, неполные или сложные способы, вот обновленная версия, которая работает для WordPress 3.5+.

Что изменилось?

Вот список изменений:

Первое, что мы делаем — используем хук admin_enqueue_scripts. Этот хук
Последний аргумент wp_enqueue_style() — это целевой медиа-тип, и по умолчанию он установлен в all. Нет необходимости добавлять его.
Мы используем функцию get_template_directory_uri() для получения URL нашего файла стилей. Нет необходимости проверять значение опции template_directory здесь.
Затем мы используем возвращаемое значение get_template_directory() для получения пути и оборачиваем его в вызов filemtime(), чтобы получить время последнего изменения файла стилей. Таким образом, мы добавляем номер версии в качестве аргумента запроса и заставляем браузер перезагружать стили при их обновлении. Нет необходимости принудительно перезагружать страницу с помощью Ctrl + F5.
Важно добавить правильные зависимости, чтобы ваши стили не перезаписывались с более высокой специфичностью файлами wp-admin.css, ie (что еще хуже) или цветовой схемой. Самая сложная часть — проверить цветовую схему, так как этот файл содержит большую часть стилей админки и является пользовательской настройкой. Мы хотим добавить его как зависимость.
Последнее, что мы делаем — оборачиваем вызов добавления хука в другую функцию, которая привязана к контекстному хуку admin_head-*, где * — это слаг страницы. Мы добавляем его дважды, чтобы учесть как новые, так и редактируемые записи.

Вот код для вашего файла functions.php.

add_action( 'admin_head-post.php', 'wpse44135AttachAdminStyle' );
add_action( 'admin_head-post-new.php', 'wpse44135AttachAdminStyle' );
function wpse44135AttachAdminStyle()
{
    add_action( 'admin_enqueue_scripts', 'wpse44135EnqueueAdminStyle' );
}
function wpse44135EnqueueAdminStyle()
{
    $scheme = get_user_meta(
        get_current_user_id(),
        'admin_color',
        true
    );

    wp_enqueue_style(
        "admin_style",
        get_template_directory_uri()."/scripts/custom.css",
        array( 'wp-admin', 'ie', "colors-{$scheme}" ),
        filemtime( get_template_directory()."/scripts/custom.css" ),
        "all"
    );
}

Альтернативы?

Если вы просто хотите добавить стили в визуальный редактор TinyMCE, вы можете использовать add_editor_style() для регистрации таблицы стилей вашей темы в текстовом редакторе админки. Путь, который вы указываете в качестве аргумента, относителен к корню вашей темы. В вашем файле functions.php:

add_editor_style( '/scripts/custom.css' );

Это так просто.

kaiser

50.8K

13 февр. 2013 г. 10:56:01

Комментарии

Я получаю ошибку "Fatal error: Cannot redeclare wpse44135_enqueue_admin_style() (previously declared " при попытке сделать это.

markratledge

9 дек. 2013 г. 21:12:14

@songdogtech Ошибка "Cannot redeclare" означает, что функция, метод и т.д. уже была объявлена/установлена. Проблема была в том, что я использовал одно и то же имя функции дважды. На будущее: пожалуйста, просто погуглите простые ошибки PHP и файл и [редактирование]. Спасибо.

kaiser

9 дек. 2013 г. 21:25:37

Я не знал, как исправить ошибку, поэтому и оставил комментарий.

markratledge

9 дек. 2013 г. 22:04:01

Вот быстрый способ добавить стили в шапку админки. Надеюсь, это поможет:

add_action('admin_head', 'my_custom_fonts');
function my_custom_fonts() {
  echo '<style>
    body, td, textarea, input, select {
    font-family: "Lucida Grande";
    font-size: 12px;
  } 
</style>';
}

Chandan Kumar Thakur

183

24 мая 2019 г. 09:07:43

Chip Bennett 55.1K · Accepted Answer · 2012-03-02T01:45:27Z

Просто подключите ваш колбэк к admin_print_styles, например:

add_action( 'admin_print_styles', 'mytheme_add_init' );

Альтернативно, вы можете добавить условие is_admin() внутрь вашего колбэка и подключиться к wp_enqueue_scripts:

function mytheme_add_init() {
    if ( is_admin() ) {
        $file_dir=get_bloginfo('template_directory');
        wp_enqueue_style("functions", $file_dir."/scripts/custom.css", false, "1.0", "all");
        wp_enqueue_script("rm_script", $file_dir."/scripts/custom.js", false, "1.0");
    }
}
add_action( 'wp_enqueue_scripts', 'mytheme_add_init' );

Но абсолютно лучшим подходом будет подключение к странице администрирования вашей темы через admin_print_styles-appearance_page_{pagename}:

add_action( 'admin_print_styles-appearance_page_{pagename}', 'mytheme_add_init', 11 );

Это специальный хук, созданный именно для страницы внешнего вида, определённой через вызов add_theme_page().