اضافه کردن دکمه دلخواه در هدر سایت وردپرسی

گاهی اوقات برای مشخص کردن یک موضوع خاص یا مثلا خدمت خاص لازم است در هدر سایت در کنار منوها یک منو با طرح دکمه اضافه کنیم، مثلا تماس فوری پشتیبانی یا ارسال درخواست. برای این موضوع در وردپرس کافیست دو مرحله کار انجام دهید. مرحله نخست گرافیکی و با چند کلیک است، مرحله دوم کمی کد نویسی لازم دارد. پس در ادامه با من همراه باشید.

می خواهیم مانند تصویر زیر یک دکمه نارنجی رنگ در انتهای منو سایت در هد اضافه کنیم.

برای این کار وارد فهرست در بخش نمایش شوید. منویی که می خواهید به صورت دکمه به هدر سایت خود اضافه کنید را به منو اضافه کنید. مثلا در مثال زیر buy now را اضافه می کنیم.

سپس از تنظیمات نمایش صفحه گزینه مربوط به تنظیمات CSS را اضافه کنید. بعد از کلیک برروی تنظیمات نمایش در بالا صفحه می توانید گزینه CSS Classes را مشاهده کنید. تیک آن را بزنید تا آن فعال شود.

سپس منوی Buy Now که اضافه کردید را باز کنید و نام کلاس CSS را برای آن به دلخواه وارد کنید ما در مثال خود menu-button وارد کردیم. توجه کنید که این نام را در بخش کد های CSS باید فرابخوانید.

حالا وارد بخش شخصی سازی قالب خود شوید. بعد از باز شدن حالت شخصی سازی کافیست در بخش اضافه کردن کد های CSS اضافی یا به انگلیسی 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;
}

در نهایت برروی انتشار یا Publish کلیک کنید تا تغییرات داخل سایت شما منتشر شوند.

امیدوارم این آموزش به کار شما بیاید. اگر می خواهید رنگ آمیزی را تغییر دهید با کدهای رنگ در کدها بازی کنید.