وردپرس

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

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

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

Navigation menu with a button

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

Add a link to WordPress menu

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

Show CSS classes in Screen Options

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

Add custom CSS class to a link

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

Menu button preview

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

بهروز فیض

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

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا
118GROUP
Rated 5/ 5 based on 5 customer reviews
برانکس | Branex
45 متری صدوقی - 20 متری حضرت ابوالفضل - پلاک 69 قم, قم
Phone: 00989109810338