آیا می خواهید یک آیتم منو را در سایت وردپرس خود هایلایت کنید؟
برجسته کردن یک آیتم منو واقعاً می تواند به شما کمک کند توجه کاربر را به یک منطقه خاص در منوی خود جلب کنید. اگر می خواهید صفحه قیمت گذاری یا تماس با ما را در وب سایت خود برجسته کنید، می تواند عالی باشد.
در این مقاله به شما نشان خواهیم داد که چگونه به راحتی یک آیتم منو در وردپرس را با استفاده از کد CSS برجسته کنید.
چرا باید یک آیتم منو را برجسته کنید؟
منوی ناوبری فهرستی از پیوندهایی است که به بخش های مهم وب سایت شما اشاره می کنند. آنها معمولاً به عنوان یک نوار افقی در بالای هر صفحه در یک وب سایت وردپرس ارائه می شوند.
این منوی ناوبری با افزودن آیتم های مختلف منو ایجاد می شود. برای جزئیات بیشتر، می توانید مقاله ما در مورد نحوه اضافه کردن منوی ناوبری در وردپرس را مشاهده کنید.
آیتم هایلایت شده منو می تواند راهی عالی برای جلب توجه کاربر به برجسته ترین تماس شما باشد. هنگامی که بازدیدکنندگان از وب سایت شما بازدید می کنند، چشم بازدیدکنندگان به طور خودکار به آیتم منو جلب می شود.
با افزودن این ویژگی، می‌توانید یک وب‌سایت کاربرپسند ایجاد کنید و موارد مهم منو را که می‌خواهید کاربرانتان بررسی کنند، برجسته کنید.
همانطور که گفته شد، بیایید ببینیم چگونه می توانید یک آیتم منو در وردپرس را با استفاده از CSS برجسته کنید.
اگر از یک تم دارای بلوک استفاده می‌کنید، به جای سفارشی‌ساز تم قدیمی، ویرایشگر کامل سایت را خواهید داشت. شما به راحتی می توانید یک آیتم منو را نیز در آن برجسته کنید.
ابتدا به ظاهر » ویرایشگر از داشبورد مدیریت وردپرس. این شما را به ویرایشگر کامل سایت هدایت می کند.
در اینجا به سادگی روی آیتم منو که می خواهید برجسته شود دوبار کلیک کنید و سپس روی نماد چرخ دنده در بالا کلیک کنید. این بلافاصله بلوک “تنظیمات” آن آیتم منوی خاص را باز می کند.
به سادگی در بلوک «تنظیمات» به برگه «پیشرفته» بروید و روی نماد فلش کنار آن کلیک کنید تا برگه باز شود.
این یک فیلد “کلاس CSS اضافی” را باز می کند که در آن به سادگی باید بنویسید highlighted-menu در زمینه
سپس، روی دکمه «ذخیره» در بالای صفحه کلیک کنید تا تغییرات شما ذخیره شود.
پس از آن، باید کمی CSS به تم خود اضافه کنید تا جلوه برجسته شود. می‌توانید سفارشی‌ساز تم از دست رفته را برطرف کنید یا می‌توانید از یک افزونه قطعه کد برای اضافه کردن کد CSS استفاده کنید.
نحوه اضافه کردن قطعات CSS با استفاده از WPCode
برای افزودن CSS در وردپرس، توصیه می کنیم از WPCode استفاده کنید زیرا این ساده ترین راه برای افزودن هر کد سفارشی به وردپرس است.
ابتدا باید افزونه رایگان WPCode را نصب و فعال کنید. برای دستورالعمل های بیشتر، راهنمای ما در مورد نحوه نصب افزونه وردپرس را بررسی کنید.
پس از فعال سازی، به قطعه کد » افزودن قطعه از پنل مدیریت وردپرس شما. اکنون روی دکمه «افزودن جدید» کلیک کنید.
این شما را به صفحه «افزودن قطعه» می‌برد.
در اینجا، ماوس خود را روی گزینه «Add Your Custom Code (New Snippet)» ببرید و به سادگی روی دکمه «Use Snippet» در زیر آن کلیک کنید.
اکنون که در صفحه «ایجاد قطعه سفارشی» هستید، با انتخاب یک نام و یک «نوع کد» برای قطعه 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 در زیر مشاهده می کنید، حتماً تگ های سبک را وارد کنید.
پس از چسباندن کد، با اسکرول کردن به قسمت «درج» بروید.
در اینجا به سادگی حالت «درج خودکار» را انتخاب کنید تا کد به طور خودکار در کل وب سایت شما اجرا شود.
اکنون، به بالای صفحه بروید و سوئیچ را از «غیرفعال» به «فعال» تغییر دهید.
سپس به سادگی روی دکمه «ذخیره قطعه» کلیک کنید.
اکنون با استفاده از یک ویرایشگر کامل سایت، یک آیتم منو در وردپرس را با موفقیت هایلایت کرده اید.
پس از اینکه کد CSS را اضافه کردید، آیتم منوی شما به این صورت است.
نحوه دسترسی به سفارشی ساز تم با استفاده از یک تم بلوکی
اگر می‌خواهید از Theme Customizer استفاده کنید و از یک تم 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 کلیک کنید تا تغییرات خود را ذخیره کنید.
امیدواریم این مقاله به شما کمک کند تا یاد بگیرید چگونه یک نماد منو در وردپرس را برجسته کنید. همچنین ممکن است بخواهید راهنمای مبتدی ما را در مورد نحوه سبک دادن به منوهای ناوبری وردپرس یا انتخاب های متخصص ما از افزونه های ضروری وردپرس برای رشد سایت خود بررسی کنید.
اگر این مقاله را دوست داشتید، لطفاً در کانال یوتیوب ما برای آموزش های ویدیویی وردپرس مشترک شوید. شما همچنین می توانید ما را در پیدا کنید توییتر و فیس بوک