В современной веб-разработке использование различных окружений таких как: локальное, Development, тестовое (QA), Stage и Production, является стандартной практикой. Эти среды позволяют командам разрабатывать, тестировать и предварительно просматривать изменения перед их внедрением в рабочую версию сайта. Однако, несмотря на их важность в процессе разработки, довольно часто разработчики сталкиваются с проблемой путаницы между этими средами. Такая путаница может привести к ошибкам, например, к внесению изменений в Production среде вместо Development.
Как же минимизировать риск таких ошибок и повысить эффективность работы команды?
Важность разграничения сред
Перепутать среды разработки легко, особенно когда работа ведется под давлением сроков или на нескольких проектах одновременно или просто сыграет человеческий фактор.
К сожалению, даже малейшая ошибка может иметь серьезные последствия, включая потерю данных, нарушение работы сайта или нежелательные изменения в контенте, доступном пользователям. Компания может понести убытки, а вы или ваши сотрудники получат выговор. Визуальное различие между средами служит постоянным напоминанием о том, в какой среде в данный момент работает разработчик, и снижает риск случайных ошибок.
Эффективное решение проблемы путаницы сред разработки
Одним из эффективных способов решения этой проблемы является визуальное выделение админ панели WordPress различными цветами в зависимости от среды разработки. Данный подход не только повышает уровень внимательности разработчиков, но и способствует более быстрому и интуитивному различению сред, снижая вероятность ошибочных действий.
Реализация выделения цветом панели администратора
Для начала давайте определим какие цвета будут ассоциироваться с каждой средой. Например, можно использовать:
- стандартный черный цвет для локальной среды разработки
- cиний для QA (тестовой) и для development
- оранжевый для staging
- красный для production.
Далее, мы покажем, как с помощью простых функций и CSS-стилей применить эти цвета к административной панели WordPress, делая работу в различных средах не только безопаснее, но и более комфортной.
А так-же давайте добавим в admin-bar информацию, на каком окружении мы сейчас находимся
Это поможет быстрее адаптироваться команде с новой цветовой схемой, а так-же в будущем поможет новеньким на проекте.
Указываем наше текущее окружение
Выбор цвета будет указывать в константе окружения WordPress.
На каждом окружении (local, dev, qa, stage, prod), нужно будет добавить в wp-config.php константу WP_ENVIRONMENT_TYPE со своим значением. Выберите необходимую и добавьте в свой конфиг:
define( 'WP_ENVIRONMENT_TYPE', 'local' );
define( 'WP_ENVIRONMENT_TYPE', 'development' );
define( 'WP_ENVIRONMENT_TYPE', 'staging' );
define( 'WP_ENVIRONMENT_TYPE', 'production' );
Исходный код
Установить вы можете через композер следуя этой инструкции https://github.com/renakdup/colorize-wp-adminpanel-for-environments
Или скачать файл к себе по инструкции ниже.
Я бы порекомендовал сохранить его в файл /wp-content/mu-plugins/ . Если mu-plugins директории у вас нет — можете создать ее. adminpanel-env-color.php
<?php
/**
* Adminpanel environment color for WordPress.
* It helps to highlight environments in color. Developers, Content Managers,
* and others will never confuse the environment where they work.
*
* Author: Andrei Pisarevskii
* Author Email: renakdup@gmail.com
* Author Site: https://wp-yoda.com/en/
*
* Version: 0.3
* Source Code: https://gist.github.com/renakdup/36f4a8474d0cb13ecadf0393811d5330
*
* Licence: MIT License
*/
namespace Renakdup\AdminpanelEnvColor;
AdminpanelEnvColor::init();
final class AdminpanelEnvColor {
public static function init() {
add_action( 'admin_head', [ __CLASS__, 'add_admin_bar_style' ] );
add_action( 'wp_head', [ __CLASS__, 'add_admin_bar_style' ] );
add_action( 'admin_bar_menu', [ __CLASS__, 'add_admin_bar_env_item' ], 100 );
}
public static function add_admin_bar_style() {
$adminpanel_colors = apply_filters(
'renakdup/adminpanel_env_color/colors',
[
'local' => null, // default wp color
'development' => '#2271b1', // blue
'staging' => '#cc6f00', // orange
'production' => '#6d0d0f', // red
]
);
// phpcs:disable WordPress.CodeAnalysis.AssignmentInCondition.Found, Squiz.PHP.DisallowMultipleAssignments.FoundInControlStructure, WordPress.Security.EscapeOutput.OutputNotEscaped
if ( $color = $adminpanel_colors[ wp_get_environment_type() ] ) {
echo '<style>
#wpadminbar { background-color: ' . $color . '!important; }
#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu { background-color: ' . $color . '!important; }
</style>';
}
// phpcs:enable
echo '<style>.rd_adminpanel_env_color a {
box-shadow: inset 0 32px 5px rgba(0, 0, 0, 0.5) !important;
padding-left: 30px !important;
padding-right: 30px !important;
}
</style>';
}
/**
* @param $wp_admin_bar \WP_Admin_Bar
*
* @return void
*/
public static function add_admin_bar_env_item( $wp_admin_bar ) {
$args = [
'id' => 'rd_adminpanel_env_color',
'parent' => 'top-secondary',
'title' => 'ENV: ' . ucfirst( wp_get_environment_type() ),
'href' => '#',
'meta' => [
'class' => 'rd_adminpanel_env_color',
'title' => 'Your environment',
],
];
$wp_admin_bar->add_node( $args );
}
}
Код так-же можно взять на моем GitHub Gist.
Если хотите изменить цвета или названия окружений, можете использовать фильтр renakdup/adminpanel_env_color/colors .
Если потребуется отключить перекрашивание админки для опреденных ролей — можете использовать remove_filter() или слегка модифицировать исходный код.
Заключение
В заключение, выделение цветом панели администратора WordPress является не только эффективным решением проблемы путаницы сред разработки, но и ключевым инструментом для повышения продуктивности и безопасности работы разработчиков, позволяет командам с легкостью навигировать между проектами, минимизируя риск случайных ошибок.
Такие малые изменения в интерфейсе могут оказать значительное влияние на эффективность рабочих процессов, делая ежедневные задачи более интуитивно понятными и менее подверженными ошибкам.
Разработчики и администраторы WordPress, стремящиеся к оптимизации своих рабочих процессов, должны рассмотреть возможность внедрения цветового выделения административной панели как стандартную практику для всех своих проектов.
