Бывают случаи, когда нужно добавить свои CSS-стили не только для фронтэнда, но и для админки сайта. Это достаточно просто сделать, и в этой заметке вы узнаете, как именно. А если вы не понимаете, зачем может понадобиться правка CSS в админке, то я заодно покажу вам реальный кейс использования этой штуки.
Как добавить свои кастомные 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;
}
По тому же принципу вы можете вносить в стили админки любые другие нужные вам изменения.
Оставить комментарий