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

Для всех пользователей, которые спрашивают у меня "как записать свои стили в админку WordPress" или "изменение стиля админки WordPress через тему" решил написать этот пост.

И так, предположим что нам нужно чуток подправить стили отображения нашей админки WordPress, с чего начнем? Ну собственно начать надо с написания этих самых стилей.

Существует много способов добавления стилей в админку WordPress, я расскажу и покажу вам только два способа.

В связи с изменениями произошедшими с CMS wordpress добавился еще один способ подключения стилей. Думаю о нем стоить рассказать в самом начале поста, так как его рекомендуют для использования в плагинах и новых темах.

Важно: остальные способы, не рекомендованные к использованию. Если вы делаете тему или плагин для WP, с целью выложить в репозиций то вас попросят изменить код.

Правильно добавляем стили на сайт WordPress

Предлагаю вашему вниманию самый правильный вариант для добавления стилей на сайт WordPress и его админку (так советуют делать разработчики CMS WordPress).

Краткое руководство: как подключить стили в wordpress

  1. Открываем админку.
  2. Заходим во Внешний вид - Редактор.
  3. Открываем для правки файл functions.php и забрасываем туда вот такой код:
add_action( 'wp_enqueue_scripts', 'my_stylesheet' );
function my_stylesheet(){
wp_enqueue_style("style-1",get_bloginfo('stylesheet_directory')."/css/mystyle.css");
}

Только что ми подключили файл стилей с именем mystyle.css, который должен находится в вашей теме, в папке css,  для клиентской части сайта. (Не забудьте создать файл с таким именем и каталог css, если его еще нет, и загрузить это все на сервер)

То есть стили CSS будут доступны только на самом сайте но не в админке Вордпресс.

Если вам нужно записать стили динамически, то есть вам нужно выводить стили css на PHP, то в этом вам поможет функция wp_add_inline_style. Единственный момент, ее нельзя использовать просто так. Надо зарегистрировать хотя бы одно имя. Код будет следующим:

add_action( 'wp_enqueue_scripts', 'my_stylesheet' );
function my_stylesheet(){
$my_style_line=".clInSite{clear:both; margin:5px 0px 20px 0px;}";
wp_enqueue_style("style-1",get_bloginfo('stylesheet_directory')."/css/mystyle.css");
wp_add_inline_style('style-1',$my_style_line);
}

Этим кодом мы опять подключили стили mystyle.css + дописали к ним, по идентификатору "style-1" еще один класс стилей, в нашем случае для clInSite.

 

Как правильно подключить стили для админки wordpress

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

Предположим у нас есть файл стилей style-admin.css для админки сайта, который находится в папке темы css.

Открываем файл functions.php и записываем туда вот такой код:

function my_stylesheet1(){
wp_enqueue_style("style-admin",get_bloginfo('stylesheet_directory')."/css/style-admin.css");
}
add_action('admin_head', 'my_stylesheet1');

Вот и все, только что мы правильно подключили стили для админки сайта WordPress.

Аналогично делается с линейными стилями, смотрите пример выше.

 

Добавление стилей в админку WordPress через файл темы functions.php

Этот способ добавления стилей заключается в том, чтоб записать стили CSS прямо в PHP код function.php, конечно править такие стили не очень удобно, но зато они всегда под рукой. Вот код добавления стилей CSS в админку WordPress:

add_action('admin_head', 'moi_novii_style');
function moi_novii_style() {
print '<style>
/*Стили в админку*/
body #cft dt{margin-left:0px; display:none;}
body #cft dd{clear:both; margin:5px 0px 20px 0px;}
</style>';
}

Этим кодом я выравнивал пользовательские поля (дополнительные поля) в посте WordPress. Для использования вставьте этот код в начало файла function.php и замените мои стили своими. Теги "<style>" и "</style>" должны присутствовать обязательно.

 

Подключить файл стилей CSS к админке WordPress через файл темы functions.php

Второй способ немного проще. Для начала нужно создать файл стилей CSS например my-wp-admin-style.css и загрузить его внутрь вашей темы. Потом открыть файл function.php и в начало записать вот такие строчки:

add_action('admin_head', 'mystylesheet');
function mystylesheet(){
echo '<link href="'.get_bloginfo( 'stylesheet_directory' ).'/my-wp-admin-style.css" rel="stylesheet" type="text/css">';
}

Стили для админки WordPress из файла my-wp-admin-style.css подключены, теперь вы всегда сможете их править с редактора или по фтп.

 

Пару слов о том, как не нужно или нельзя править стили админки WordPress.

Нельзя править CSS самого WordPress или стили его плагинов, так как при обновлении эти все стили просто потеряются. Если у вас не получается добавить стили одним из способов описанных выше, посмотрите в свои стили может там ошибка, или просто силы CSS не хватает для их применения. В таком случае используйте приставку !important, например вот так: body #cft dt{margin-left:0px !important; display:none !important;}

 

Если после прочтения этого поста у вас всё равно не получается добавить свои стили CSS в админку WordPress напишите мне свой вопрос в разделе Вопрос/Ответ.

Комментарии к записи «Как записать свои стили CSS в админку WordPress»:
  1. Роман:

    Спасибо за пост!

Сделать заказ
Онлайн помощь по WordPress