Кнопку тебе — в навигацию!

Заказ­чик попро­сил доба­вить яркую, при­вле­ка­ю­щую вни­ма­ние кноп­ку на глав­ную стра­ни­цу сай­та. Но я поду­мал, что будет труд­но кра­си­во вста­вить новый, брос­кий эле­мент на Глав­ную, не раз­ру­шив общее впе­чат­ле­ние от сай­та. В голо­ву при­шла мысль сде­лать стиль­ную кноп­ку пря­мо в нави­га­ции сайта.

Мысль была тем удач­на, что не так дав­но я натолк­нул­ся на под­сказ­ку на попу­ляр­ном сай­те WPBeginner​.com. Там речь шла имен­но об этом. В нашем слу­чае, это реше­ние было ещё тем хоро­шо, что нави­га­ция была постро­е­на вер­ти­каль­но и кноп­ка не вос­при­ни­ма­лась как часть меню.

Ста­тья на сай­те WPBeginner реко­мен­ду­ет акти­ви­ро­вать в окне настрой­ки Меню в WordPress экран­ную опцию CSS Classes: кноп­ка Screen Options нахо­дит­ся в верх­нем пра­вом углу админки.

После это­го добав­ля­ет­ся новый пункт меню с нави­га­ци­ей на нуж­ную стра­ни­цу и это­му пунк­ту при­сва­и­ва­ет­ся класс, в учеб­ном вари­ан­те — menu-button.

После сохра­не­ния изме­не­ний в струк­ту­ре меню, надо перей­ти в настрой­ку темы — Appearance » Customize — и вста­вить в Additional CSS вот этот блок кода CSS:

.menu-button { 
background-color:#eb5e28;
border:1px;
border-radius:3px;
-webkit-box-shadow:1px 1px 0px 0px #2f2f2f;
-moz-box-shadow:1px 1px 0px 0px #2f2f2f;
box-shadow:1px 1px 0px 0px #2f2f2f;
}
.menu-button a,  .menu-button a:hover, .menu-button a:active { 
color:#fff !important;
}

Изме­не­ние цве­та кноп­ки про­из­во­дит­ся во вто­рой стро­ке, а цвет тек­ста — в послед­ней. Полу­чи­лось, по-мое­му, хоро­шо. Да и заказ­чик доволен!