Выделение цветом панели администратора WordPress для различных оружений

Выделение цветом панели администратора WordPress для различных оружений

В современной веб-разработке использование различных окружений таких как: локальное, Development, тестовое (QA), Stage и Production, является стандартной практикой. Эти среды позволяют командам разрабатывать, тестировать и предварительно просматривать изменения перед их внедрением в рабочую версию сайта. Однако, несмотря на их важность в процессе разработки, довольно часто разработчики сталкиваются с проблемой путаницы между этими средами. Такая путаница может привести к ошибкам, например, к внесению изменений в Production среде вместо Development.

Как же минимизировать риск таких ошибок и повысить эффективность работы команды?

Важность разграничения сред

Перепутать среды разработки легко, особенно когда работа ведется под давлением сроков или на нескольких проектах одновременно или просто сыграет человеческий фактор.

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

Эффективное решение проблемы путаницы сред разработки

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

Реализация выделения цветом панели администратора

Для начала давайте определим какие цвета будут ассоциироваться с каждой средой. Например, можно использовать:

  • стандартный черный цвет для локальной среды разработки
  • cиний для QA (тестовой) и для development
  • оранжевый для staging
  • красный для production.
Выделение цветом панели администратора WordPress для различных оружений - local environment
Локальная среда разработки
Выделение цветом панели администратора WordPress для различных оружений - development/QA environment
Development или QA (тестовый) оружение
Выделение цветом панели администратора WordPress для различных оружений - staging environment
Staging окружение
Выделение цветом панели администратора WordPress для различных оружений - production environment
Production окружение

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

А так-же давайте добавим в admin-bar информацию, на каком окружении мы сейчас находимся

Выделение цветом панели администратора 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/adminpanel-env-color.php . Если mu-plugins директории у вас нет — можете создать ее.

<?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, стремящиеся к оптимизации своих рабочих процессов, должны рассмотреть возможность внедрения цветового выделения административной панели как стандартную практику для всех своих проектов.

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

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