Кастомные CSS стили в админке WordPress — как и зачем?

  •   05.02.2018
  •   Комментариев нет
  •   WordPress

Бывают случаи, когда нужно добавить свои CSS-стили не только для фронтэнда, но и для админки сайта. Это достаточно просто сделать, и в этой заметке вы узнаете, как именно. А если вы не понимаете, зачем может понадобиться правка CSS в админке, то я заодно покажу вам реальный кейс использования этой штуки.

Кастомные CSS стили в админке WordPress — как и зачем?

Как добавить свои кастомные CSS-стили в админке WordPress

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

Шаг первый — создайте новый отдельный CSS-файл. Назовите его, к примеру, admin.css и положите его в корень папки с вашей WordPress-темой.

Шаг второй — добавьте несколько строк в файл functions.php вашей темы:

/**
 * Update CSS within in Admin
 */

function admin_style() {
  wp_enqueue_style('admin-styles', get_stylesheet_directory_uri() . '/admin.css');
}
add_action('admin_enqueue_scripts', 'admin_style');

Всё, теперь стили из файла admin.css будут автоматически подгружаться в админке.

Есть и другой, альтернативный способ добавления своих кастомных кодов — при помощи плагина. Например, плагин Simple Custom CSS and JS позволяет подгружать пользовательские стили не только во фронтэнде, но и в админке сайта. При использовании плагина вам не нужно создавать отдельный файл стилей и вносить изменения в functions.php — редактировать стили можно прямо в админке.

Для чего все это нужно? Кейсов использования может быть множество, я подскажу вам всего один, но очень полезный — при помощи кастомных стилей вы можете скрывать ненужные блоки в админке WordPress.

Скрывание лишних (рекламных) блоков в админ-панели WordPress

Ну вы ведь поняли, о чем речь, да? Многие бесплатные плагины для WordPress имеют также премиум-версии с дополнительным функционалом. Причем в этом случае основное предназначение бесплатных версий часто заключается в рекламе платных.

Нет, я понимаю, что разработчикам нужно кушать и что реклама премиум-версии в бесплатном плагине имеет право быть. Просто часто бывает, что рекламные блоки занимают по площади значительно больше места, чем полезный контент. Например, в плагине «Nelio Content» на три строчки полезного функционала имеется целый экран нефункциональных блоков. И полезный функционал теряется на фоне этого буйства. Но теперь мы можем легко скрыть подобные блоки, сделав админку чистой и аккуратной.

Ниже привожу примеры CSS-кода для скрытия рекламных и нефункциональных блоков у некоторых популярных плагинов.

Скрытие рекламы в Yoast SEO

/* Hide unwanted Yoast SEO blocks */

.wp-admin .wpseo-admin-page #sidebar-container,
.wp-admin #wpseo_meta .wpseo-metabox-buy-premium {
    display: none !important;
}

Скрытие рекламы в Shield Security

/* Hide unwanted Shield Security blocks */

.wp-admin .icwp-options-page .row-fluid iframe,
.wp-admin .icwp-options-page #side_widgets {
    display: none;
}

Скрытие рекламы в Simple Custom CSS and JS

/* Hide unwanted Simple Custom CSS and JS blocks */

.wp-admin #poststuff #postbox-container-1 #custom-code-options .ccj_only_premium,
.wp-admin #poststuff #postbox-container-1 #custom-code-options .ccj_opaque,
.wp-admin #poststuff #postbox-container-2 .ccj_only_premium,
.wp-admin #poststuff #postbox-container-2 #previewdiv,
.wp-admin #poststuff #postbox-container-2 #url-rules,
.wp-admin #poststuff #postbox-container-2 #revisionsdiv {
	display: none;
}

Скрытие рекламы в Nelio Content

/* Hide unwanted Nelio Content blocks */

.wp-admin .nc-social-timeline .nc-timeline-overview-wrapper,
.wp-admin .nc-social-timeline .nc-timeline,
.wp-admin .nc-social-timeline .nc-upgrade,
.wp-admin .nc-dialog .nc-social-message-editor .nc-date-and-time,
.wp-admin .nc-social-timeline .nc-timeline-sections .nc-next-day,
.wp-admin .nc-social-timeline .nc-timeline-sections .nc-week,
.wp-admin .nc-social-timeline .nc-timeline-sections .nc-month,
.wp-admin .nc-social-timeline .nc-timeline-sections .nc-later {
    display: none;
}

.wp-admin .nc-analytics-page .nc-top-posts .nc-top-post-social .nc-top-post-metric,
.wp-admin .nc-analytics-page .nc-top-posts .nc-top-post-social .nc-top-post-metric,
.wp-admin .nc-analytics-page .nc-top-posts .nc-top-post-social .nc-analytics-count,
.wp-admin .nc-analytics-page .nc-top-posts .nc-top-post-social .nc-share {
    display: none;
}

.wp-admin .nc-analytics-page .nc-top-posts .nc-top-post-social .nc-analytics-published {
    font-size: 2em;
    line-height: 3.4em;
}

По тому же принципу вы можете вносить в стили админки любые другие нужные вам изменения.


Оставить комментарий

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *