وبلاگ

آموزش اضافه کردن دکمه به هدر وردپرس

اضافه کردن دکمه به هدر وردپرس
آموزش وردپرس

آموزش اضافه کردن دکمه به هدر وردپرس

فهرست مطالب

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

بیشتر بخوانید:

افزایش سرعت صفحه در سایت با 9 گام | افزایش سرعت وردپرس

 

تمام هدف از افزودن یک دکمه در هدر، در وهله اول این است که بازدیدکنندگان را وادار به انجام اقدامی دلخواه کنید و یا آنها را به صفحه خاصی در سایت خود (یا خارج از سایت خود) با کلیک روی آن هدایت کنید. بنابراین ، شما باید دکمه خود را فوراً در صفحه خود مشاهده کنید تا توجه بازدیدکنندگان را به خود جلب کرده و آنها را مجبور کنید تا بر روی آن کلیک کنند تا تبدیلات بیشتری انجام شود. این بدان معناست که طراحی دکمه باید به آن ها اجازه دهد از سایر پیوندهای استاندارد که ممکن است در منوی سربرگ شما ظاهر شوند ، متمایز شود.

بیشتر بخوانید:

حملات اسکیوال اینجکشن در وردپرس

 

در حال حاضر ، به طور پیش فرض ، وردپرس این قابلیت را ندارد که دکمه های جداگانه ای را به قسمت سربرگ شما اضافه کند. در عوض ، می توانید منوی ناوبری را با پیوندهایی که دارای طراحی یکسانی هستند ، به سرصفحه خود اضافه کنید. با این وجود ، راهی وجود دارد که پیوند منو را در منوی ناوبری سربرگ “تبدیل” کرده و آن را به عنوان یک دکمه نشان دهید. خوشبختانه اگر از CSS سفارشی استفاده می کنید ، انجام این کار آسان است. بنابراین ، این بار ، قصد داریم نحوه اضافه کردن دکمه به هدر وردپرس را به شما نشان دهیم. همچنین نحوه درج و سفارشی کردن ویجت دکمه را در هر قسمت هدر دیگری به انتخاب خود (جدا از افزودن آن در کنار منوی ناوبری) با استفاده از تم Bridge نشان خواهیم داد.

افزودن یک دکمه در منوی سربرگ وردپرس با استفاده از CSS سفارشی

برای شروع تبدیل پیوند منو به یک دکمه ، باید پیوند منوی موردنظر خود را با رفتن به Appearance >> Menus انتخاب کنید. سپس پیوندی را به منوی ناوبری که قبلاً ایجاد شده است اضافه کنید.

بیشتر بخوانید:

Cdn در وردپرس چیست | آموزش فعال سازی CDN در وردپرس

 

اگر منوی شما قبلاً حاوی یک آیتم منو است که می خواهید آن را به یک دکمه تغییر دهید ، به سادگی فلش منو را فشار دهید تا آن را باز کرده و ویرایش کنید.

اضافه کردن دکمه به هدر وردپرس

اگر هنوز آیتم منو را ایجاد نکرده اید ، می توانید آن را در سمت چپ صفحه خود پیدا کنید و سپس روی دکمه افزودن به منو کلیک کنید. در صورتی که می خواهید به صفحه ای خارج از سایت خود پیوند دهید ، می توانید منوی کشویی Custom Links را انتخاب کرده و آدرس اینترنتی و متن پیوند را به صورت دستی وارد کنید ، سپس بر روی افزودن به منو add to Menu کلیک کنید.

اگر هنوز آیتم منو را ایجاد نکرده اید ، می توانید آن را در سمت چپ صفحه خود پیدا کنید و سپس روی دکمه افزودن به منو کلیک کنید. در صورتی که می خواهید به صفحه ای خارج از سایت خود پیوند دهید ، می توانید منوی کشویی Custom Links را انتخاب کرده و آدرس اینترنتی و متن پیوند را به صورت دستی وارد کنید ، سپس بر روی افزودن به منو add to Menu کلیک کنید.

در مرحله بعد ، مطمئن شوید که برچسب پیمایش یا Navigation را به آیتم خود اضافه کنید.

اضافه کردن دکمه به هدر وردپرس

پس از انجام این کار ، پیش بروید و به دکمه Screen Options (در بالای صفحه) دسترسی پیدا کنید. مطمئن شوید که کادر “CSS Classes” علامت گذاری شده است. این به شما امکان می دهد یک کلاس CSS سفارشی به پیوند خود اضافه کنید و سپس آن را به هر شکلی که دوست دارید استایل دهید.

اضافه کردن دکمه به هدر وردپرس

اکنون ، در تنظیمات آیتم منو ، می توانید گزینه کلاس جدید CSS را مشاهده کنید. نامی برای کلاس منوی خود وارد کنید (نام ما header-menu-button است ، اما می توانید هر نام دلخواه خود را در اینجا اختصاص دهید).

اضافه کردن دکمه به هدر وردپرس

برای ذخیره تنظیمات ، دکمه ذخیره منو را فشار دهید.

در مرحله بعد ، باید ظاهر دکمه منوی هدر خود را با استفاده از کد CSS سفارشی کنید. برای دسترسی به سفارشی ساز قالب وردپرس خود به Appearance >> Customize بروید و دکمه Additional CSS را فشار دهید.

کد CSS سفارشی خود را در اینجا وارد کنید و سپس روی انتشار کلیک کنید. با این حال ، باید توجه داشته باشید که این کار فوراً همه تغییرات شما را زنده نشان می دهد ، بنابراین مطمئن شوید که این دکمه را فقط پس از رضایت کامل از ظاهر دکمه منوی هدر خود فشار دهید.

در صورت تمایل ، می توانید با خیال راحت کد CSS گفته شده را وارد کنید ، یا آن را به هر روشی که دوست دارید متناسب با ترجیحات طراحی خود تغییر دهید.

.header-menu-button { 
background-color:#86af49;
border:1px;
border-radius:25px;
}
.header-menu-button a, .header-menu-button a:hover, .header-menu-button a:active { 
color:#fff !important;
}
اضافه کردن دکمه به هدر وردپرس

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

بیشتر بخوانید:

خطاهای رایج وردپرس و آموزش حل آن ها

 

بلافاصله پس از افزودن کد CSS و انتخاب انتشار یا Publish ، می توانید دکمه خود را در پیش نمایش وب سایت ببینید.

اضافه کردن دکمه به هدر وردپرس

سخن آخر

مهم نیست که بخواهید پیوندی را به فرم ثبت نام ، دکمه خرید یا هر نوع دیگر CTA اضافه کنید ، سرصفحه شما یکی از بهترین مکان ها برای جلب توجه به دکمه شما و ایجاد انگیزه در بازدیدکنندگان برای اقدام به کاری است که دوست دارید انجام دهند. در اصل ، افزودن یک دکمه به منوی هدر شما آسان است – تنها کاری که باید انجام دهید این است که آیتم منوی موجود خود را با اختصاص دادن یک کلاس CSS سفارشی تغییر دهید و سپس با استفاده از Appearance >> Customize دکمه خود را حالت دهید. بنابراین ، روش ترجیحی خود را انتخاب کنید و دستورالعمل های گفته شده را با دقت دنبال کنید تا بتوانید یک CTA برجسته به هدر خود اضافه کنید که به بهبود تجربه کاربر و افزایش تبدیل شما کمک می کند.

 

منبع:

https://qodeinteractive.com/magazine/how-to-add-button-to-header-in-wordpress/

 

5 3 رای ها
امتیاز دهید
اشتراک
اطلاع از
guest
0 دیدگاه ها
بازخورد اینلاین
نمایش همه دیدگاه ها
0
فکر شما را دوست دارم ، لطفا نظر دهیدx
()
x

رایگان یاد بگیرید

دوره آموزش طراحی سایت بدون کد نویسی با وردپرس

زودتر از سایرین از جدیدترین دوره های آموزشی رایگان ما با خبر شوید
اطلاعات شما هرگز با شخص ثالث به اشتراک گذاشته نمی شود