یکی از اصلی‌ترین روش های افزایش ترافیک و افزایش زمان ماندگاری کاربر در سایت، بهبود جذابیت و زیبایی ظاهر سایت است. عوامل مختلفی به مانند تصاویر، المان‌ها، رنگ‌ها و … هستند که می‌توانند تاثیر مستقیم بر روی زیبایی سایت شما بگذارند که یکی از مهم‌ترین آنها، دکمه‌ها (Button) هستند.
دکمه‌ها علاوه بر اینکه می‌توانند باعث افزایش زمان ماندگاری کاربر شوند، می‌تواند به کاهش بانس ریت (نرخ پرش) نیز کمک کنند. چون اگر این دکمه‌ها در جای مناسب و به خوبی طراحی شوند، می‌توانند کاربران را ترغیب کنند که بر روی آنها کلیک کنند.
در وردپرس شما به راحتی می‌توانید از دکمه‌ها و در هر جای سایت خودتان استفاده کنید؛ ولی قابلیت اضافه کردن دکمه‌ها به هدر سایت، به صورت پیشفرض در وردپرس وجود ندارد. برای همین، در این مقاله ما تصمیم گرفتیم تا مراحل افزودن دکمه به منوی هدر در وردپرس را به شما آموزش دهیم.
آموزش افزودن دکمه به منوی هدر
در مرحله اول شما باید ابتدا لینک مورد نظر خودتان که قصد دارید تا آن را تبدیل به دکمه کنید را به فهرست سایت خودتان اضافه کنید. برای اینکار باید ابتدا از بخش منو سمت راست پنل پیشخوان وردپرس، مسیر نمایش>فهرست‌ها را طی کنید.
در صفحه جدید و از بخش “افزودن گزینه‌های فهرست“، باید صفحه مدنظر خودتان را به انتخاب و سپس بر روی دکمه “افزودن به فهرست” کلیک کنید تا صفحه مدنظر شما، به فهرست سایت شما اضافه شود.
سپس از بخش بالا وردپرس، بر روی گزینه “تنظیمات صفحه” کلیک کنید و بخش “کلاس CSS” را برای فهرست‌های سایت خودتان فعال کنید.
حالا بر روی صفحه مدنظر خودتان که آن را به فهرست اضافه کردید کلیک کنید تا تنظیمات بیشتر آن، به شما نمایش داده شود؛ در این قسمت شما یک فیلدی با نام “کلاس‌های CSS” را مشاهده می‌کنید. در این فیلد شما باید یک کلاس منحصربفردی را فراخوانی کنید که ما برای مثال، این بخش را برابر با menu-button می‌گذاریم.
تا اینجا فعالیت‌های مربوط به بخش فهرست‌ها در وردپرس وردپرس تمام شده؛ برای همین بر روی “ذخیره فهرست” کلیک کنید تا تنظیمات اعمال شده، ذخیره شوند.
همچنین برای دریافت اطلاعات بیشتر درباره بخش فهرست‌ها می‌توانید به مقاله مدیریت فهرست‌ها مراجعه کنید.
سپس باید از بخش “نمایش“ در منوی سمت راست پنل پیشخوان وردپرس، بر روی “سفارشی سازی” کلیک کنید. در صفحه جدید باید به دنبال بخشی به نام “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;
}بعد از اینکه این کدها را جایگذاری کردید، فورا و به صورت خودکار، پیشنمایش تغییرات به شما نشان داده می‌شود که اگر از تغییرات به وجود آمده راضی بودید، می‌توانید بر روی دکمه “انتشار” کلیک کنید تا تغییرات در سایت شما اعمال شود.
جمع بندی
همه می‌دانند که زیبایی و جذابیت جزو اصلی‌ترین دلایل پیشرفت هر کسب و کار اینترنتی به شمار می‌رود. البته خیلی‌ها به اشتباه فکر می‌کنند که دکمه کارایی خاصی ندارند؛ ولی همانطور که در بالا هم گفتیم، شما فقط لازم است که دکمه‌ها را در جای مناسب و در به شکل مناسب طراحی کنید تا متوجه اثرات مثبت دکمه‌ها در سایت شوید.
در این مقاله آموزش ما سعی کردیم تا مراحل افزودن دکمه به منوی هدر در وردپرس را به شما آموزش دهیم؛ اگر هر سوالی درباره این آموزش داشتید، می‌توانید از بخش کامنت‌ها از ما بپرسید.