آیا می خواهید یک آیتم منو در سایت وردپرس خود برجسته کنید؟
برجسته کردن یک آیتم منو واقعاً می تواند به شما کمک کند توجه کاربر را به ناحیه خاصی از منوی خود هدایت کنید. اگر می خواهید صفحه قیمت گذاری یا تماس با ما را در وب سایت خود برجسته کنید، می تواند عالی باشد.
در این مقاله به شما نشان خواهیم داد که چگونه به راحتی یک آیتم منو در وردپرس را با استفاده از کد CSS برجسته کنید.
چرا باید یک آیتم منو را برجسته کنید؟
منوی ناوبری فهرستی از پیوندهایی است که به بخش های مهم وب سایت شما اشاره می کنند. آنها معمولاً به عنوان یک نوار افقی در بالای هر صفحه در یک وب سایت وردپرس ارائه می شوند.
این منوی ناوبری با افزودن آیتم های مختلف منو ایجاد می شود. برای جزئیات بیشتر، می توانید مقاله ما در مورد نحوه اضافه کردن منوی ناوبری در وردپرس را مشاهده کنید.
آیتم هایلایت شده منو می تواند راهی عالی برای جلب توجه کاربر به برجسته ترین دعوت به اقدام باشد. هنگامی که بازدیدکنندگان از وب سایت شما بازدید می کنند، چشم بازدیدکنندگان به طور خودکار به آیتم منو جلب می شود.
با افزودن این ویژگی، می‌توانید یک وب‌سایت کاربرپسند ایجاد کنید و موارد مهم منو را که می‌خواهید کاربرانتان بررسی کنند، برجسته کنید.
همانطور که گفته شد، بیایید ببینیم چگونه می توانید یک آیتم منو در وردپرس را با استفاده از CSS علامت گذاری کنید.
اگر از یک تم دارای بلوک استفاده می‌کنید، به جای سفارشی‌کننده تم قدیمی‌تر، یک ویرایشگر کامل سایت خواهید داشت. همچنین می توانید به راحتی یک آیتم منو را در آن برجسته کنید.
به اولی سر بزنید ظاهر » ویرایشگر از داشبورد وردپرس شما. این شما را به ویرایشگر کامل سایت هدایت می کند.
در اینجا، به سادگی روی آیتم منوی مورد نظر برای برجسته کردن دوبار کلیک کنید و سپس روی نماد چرخ دنده در بالا کلیک کنید. این بلافاصله بلوک تنظیمات آیتم منوی خاص را باز می کند.
کافیست در بلوک تنظیمات به سمت پایین به تب Advanced بروید و روی نماد فلش کنار آن کلیک کنید تا برگه باز شود.
با این کار کادر “کلاس CSS اضافی” باز می شود که فقط باید در آن تایپ کنید highlighted-menu در منطقه.
سپس روی دکمه “ذخیره” در بالای صفحه کلیک کنید تا تغییرات شما ذخیره شود.
در مرحله بعد، باید مقداری CSS به تم خود اضافه کنید تا جلوه برجسته شود. می‌توانید سفارشی‌کننده تم از دست رفته را برطرف کنید یا می‌توانید از یک افزونه قطعه کد برای اضافه کردن کد CSS استفاده کنید.
چگونه می توان قطعه های CSS را با استفاده از WPCode اضافه کرد
برای افزودن CSS به وردپرس، توصیه می کنیم از WPCode استفاده کنید زیرا این ساده ترین راه برای افزودن کد سفارشی به وردپرس است.
ابتدا باید افزونه رایگان WPCode را نصب و فعال کنید. برای دستورالعمل های بیشتر، راهنمای ما در مورد نحوه نصب افزونه وردپرس را ببینید.
در هنگام فعال سازی به قطعه کد » افزودن قطعه از پنل مدیریت وردپرس شما. اکنون بر روی دکمه “افزودن جدید” کلیک کنید.
این شما را به صفحه Add Snippet می برد.
در اینجا، ماوس را روی گزینه «Add Custom Code (New Snippet)» ببرید و به سادگی روی دکمه «Use Snippet» در زیر آن کلیک کنید.
اکنون که در صفحه Create Custom Snippet هستید، با انتخاب یک نام و “Code Type” برای قطعه CSS خود شروع کنید.
شما می توانید هر نامی را که می خواهید انتخاب کنید.
سپس روی منوی کشویی کنار گزینه «Code Type» در سمت راست کلیک کنید و سپس گزینه «Universal Snippet» را انتخاب کنید.
سپس کد CSS زیر را در «نمایشگر کد» کپی/پیست کنید.
<style type="text/css">
/* Highlighted menu */
.highlighted-menu
{
background: #d3d3d3;
border-radius: 35px;
padding: 0px 20px;
line-height: 50px;
}
</style>
حتماً تگ های سبک را همانطور که در خطوط 1 و 10 در زیر مشاهده می کنید، وارد کنید.
پس از چسباندن کد، با اسکرول کردن به قسمت «درج» بروید.
در اینجا، فقط حالت «درج خودکار» را انتخاب کنید تا کد به طور خودکار در سراسر وب سایت شما اجرا شود.
اکنون به بالای صفحه بروید و سوئیچ را از “غیر فعال” به “فعال” تغییر دهید.
سپس فقط روی دکمه “Save Snippet” کلیک کنید.
شما اکنون با موفقیت یک آیتم منو در وردپرس را با استفاده از یک ویرایشگر کامل سایت تگ کرده اید.
پس از افزودن کد CSS، آیتم منوی شما به این شکل خواهد بود.
نحوه دسترسی به سفارشی‌کننده تم با استفاده از یک تم بلوک
اگر می خواهید از سفارشی ساز تم استفاده کنید و از تم FSE استفاده کنید، کافی است URL زیر را کپی کرده و در مرورگر خود جایگذاری کنید. مطمئن شوید که “example.com” را با نام دامنه سایت خود جایگزین کنید.
https://example.com/wp-admin/customize.php
در اینجا شما فقط باید بر روی تب “CSS اضافی” کلیک کنید.
اکنون کادر «CSS اضافی» را گسترش دهید و سپس به سادگی قطعه کد زیر را کپی/پیست کنید.
/* Highlighted menu */
.highlighted-menu
{
background: #FFB6C1;
border-radius: 35px;
padding: 0px 20px;
line-height: 50px;
}
سپس فقط روی دکمه “انتشار” در بالا کلیک کنید.
این تمام چیزی است که برای برجسته کردن یک آیتم منو لازم است.
وقتی کار تمام شد وب سایت شما باید چیزی شبیه به این باشد:
اگر از تمی استفاده می‌کنید که مسدود نشده است، احتمالاً سفارشی‌کننده تم را به‌طور پیش‌فرض فعال خواهید داشت. برجسته کردن یک آیتم منو در یک تم سفارشی‌کننده فرآیند نسبتاً ساده‌ای است.
ابتدا فقط به ظاهر » شخصی سازی در داشبورد وردپرس خود برای راه اندازی سفارشی کننده تم. پس از باز شدن سفارشی‌کننده تم، به سادگی روی زبانه منوها کلیک کنید.
هنگامی که در بخش منوها قرار گرفتید، به سادگی روی نماد چرخ دنده در بالا سمت راست کلیک کنید تا ویژگی های پیشرفته نمایش داده شود.
اکنون فقط کادر “کلاس های CSS” را علامت بزنید.
سپس به قسمت منوها بروید.
اگر چندین منو در وب سایت خود دارید، به سادگی روی منوی که می خواهید موارد منوی آن را برجسته کنید، کلیک کنید.
با این کار یک تب جدید باز می شود که در آن می توانید آیتم منویی را که می خواهید برجسته کنید انتخاب کنید. این می تواند مانند مثال ما “شروع به کار” باشد، یا می تواند صفحه فرم تماس شما یا پیوند فروشگاه آنلاین شما باشد.
فقط روی آیتم منوی انتخابی خود کلیک کنید که آن را برای نمایش برخی از گزینه ها گسترش می دهد. روی کادر “کلاس های CSS” کلیک کنید.
تنها کاری که باید انجام دهید این است که بنویسید 'highlighted-menu' در منطقه. می توانید این کلاس CSS را به چندین آیتم منو اضافه کنید و همه آنها هایلایت می شوند.
سپس فقط به تب “CSS اضافی” در سفارشی ساز تم بروید.
حالا فقط کد CSS زیر را کپی و پیست کنید.
/* Highlighted menu */
.highlighted-menu
{
background: #FFB6C1;
border-radius: 35px;
padding: 0px 20px;
line-height: 50px;
}
تبریک می گویم! شما با موفقیت یک مورد منو را هایلایت کردید.
توجه داشته باشید: ممکن است طرح زمینه شما دارای فیلد «CSS اضافی» در سفارشی‌کننده طرح زمینه نباشد. اگر نه، تنظیمات تم را بررسی کنید تا دریابید که چگونه CSS سفارشی اضافه کنید. اگر نتوانستید آن را پیدا کنید، ممکن است بخواهید با توسعه دهنده تماس بگیرید یا آن را از طریق WPCode اضافه کنید.
اکنون که آیتم منو را علامت گذاری کرده اید، می توانید کد CSS را تغییر دهید تا آیتم منو را مطابق میل خود سفارشی کنید.
به عنوان مثال، می توانید رنگ پس زمینه آیتم منوی خود را تغییر دهید.
فقط کافی است کد زیر را در قطعه CSS که به تازگی چسبانده اید، جستجو کنید.
هنگامی که آن را پیدا کردید، می توانید به سادگی شماره کد رنگ صورتی را با کد هگز هر رنگ دلخواه خود جایگزین کنید:
در بالا کد هگز برای آکوامارین آمده است.
می‌توانید راهنمای ما را برای افزودن آسان CSS سفارشی برای ایده‌های دیگر در مورد نحوه سفارشی کردن آیتم منوی برجسته شده بررسی کنید.
هنگامی که از انتخاب خود راضی بودید، به سادگی روی دکمه “انتشار” در سفارشی ساز تم یا “ذخیره قطعه” در WPCode کلیک کنید تا تغییرات خود را ذخیره کنید.
امیدواریم این مقاله به شما کمک کند تا یاد بگیرید چگونه یک نماد منو در وردپرس را تگ کنید. همچنین ممکن است بخواهید راهنمای مبتدی ما را در مورد نحوه سبک دادن به منوهای ناوبری وردپرس یا انتخاب های متخصص ما از افزونه های ضروری وردپرس برای رشد سایت خود بررسی کنید.
اگر از این مقاله لذت بردید، لطفا در کانال یوتیوب ما برای آموزش های ویدئویی وردپرس مشترک شوید. شما همچنین می توانید ما را در توییتر و فیس بوک