Skip to content
تمی
تمی

اخبار روز وردپرس

  • اخبار و مقالات قالب سایت
تمی

اخبار روز وردپرس

5 دی 1401

نحوه هایلایت کردن یک آیتم منو در وردپرس (2 روش)


آیا می خواهید یک آیتم منو را در سایت وردپرس خود هایلایت کنید؟

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

در این مقاله به شما نشان خواهیم داد که چگونه به راحتی یک آیتم منو در وردپرس را با استفاده از کد CSS برجسته کنید.

نحوه هایلایت کردن یک آیتم منو در وردپرس

چرا باید یک آیتم منو را برجسته کنید؟

منوی ناوبری فهرستی از پیوندهایی است که به بخش های مهم وب سایت شما اشاره می کنند. آنها معمولاً به عنوان یک نوار افقی در بالای هر صفحه در یک وب سایت وردپرس ارائه می شوند.

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

آیتم هایلایت شده منو می تواند راهی عالی برای جلب توجه کاربر به برجسته ترین تماس شما باشد. هنگامی که بازدیدکنندگان از وب سایت شما بازدید می کنند، چشم بازدیدکنندگان به طور خودکار به آیتم منو جلب می شود.

نماد منوی هایلایت شده WPForms

با افزودن این ویژگی، می‌توانید یک وب‌سایت کاربرپسند ایجاد کنید و موارد مهم منو را که می‌خواهید کاربرانتان بررسی کنند، برجسته کنید.

همانطور که گفته شد، بیایید ببینیم چگونه می توانید یک آیتم منو در وردپرس را با استفاده از CSS برجسته کنید.

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

ابتدا به ظاهر » ویرایشگر از داشبورد مدیریت وردپرس. این شما را به ویرایشگر کامل سایت هدایت می کند.

در اینجا به سادگی روی آیتم منو که می خواهید برجسته شود دوبار کلیک کنید و سپس روی نماد چرخ دنده در بالا کلیک کنید. این بلافاصله بلوک “تنظیمات” آن آیتم منوی خاص را باز می کند.

آیتم منو را که می خواهید برجسته کنید انتخاب کنید و سپس روی نماد چرخ دنده در بالا کلیک کنید

به سادگی در بلوک «تنظیمات» به برگه «پیشرفته» بروید و روی نماد فلش کنار آن کلیک کنید تا برگه باز شود.

این یک فیلد “کلاس CSS اضافی” را باز می کند که در آن به سادگی باید بنویسید highlighted-menu در زمینه

منوی هایلایت شده را در قسمت Additional CSS Class بنویسید

سپس، روی دکمه «ذخیره» در بالای صفحه کلیک کنید تا تغییرات شما ذخیره شود.

پس از آن، باید کمی CSS به تم خود اضافه کنید تا جلوه برجسته شود. می‌توانید سفارشی‌ساز تم از دست رفته را برطرف کنید یا می‌توانید از یک افزونه قطعه کد برای اضافه کردن کد CSS استفاده کنید.

نحوه اضافه کردن قطعات CSS با استفاده از WPCode

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

ابتدا باید افزونه رایگان WPCode را نصب و فعال کنید. برای دستورالعمل های بیشتر، راهنمای ما در مورد نحوه نصب افزونه وردپرس را بررسی کنید.

پس از فعال سازی، به قطعه کد » افزودن قطعه از پنل مدیریت وردپرس شما. اکنون روی دکمه «افزودن جدید» کلیک کنید.

به قسمت Code Snippets بروید و روی Add New کلیک کنید

این شما را به صفحه «افزودن قطعه» می‌برد.

در اینجا، ماوس خود را روی گزینه «Add Your Custom Code (New Snippet)» ببرید و به سادگی روی دکمه «Use Snippet» در زیر آن کلیک کنید.

روی دکمه Use Snippet کلیک کنید

اکنون که در صفحه «ایجاد قطعه سفارشی» هستید، با انتخاب یک نام و یک «نوع کد» برای قطعه CSS خود شروع کنید.

شما می توانید هر نامی را که دوست دارید انتخاب کنید.

Universal Snippet را به عنوان نوع کد انتخاب کنید

بعد، به سادگی روی منوی کشویی در کنار گزینه «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 اضافی» کلیک کنید.

روی تب Additional CSS کلیک کنید

اکنون، فیلد «CSS اضافی» را گسترش دهید، و سپس فقط قطعه کد زیر را کپی/پیست کنید.

/* Highlighted menu */
.highlighted-menu
{
background: #FFB6C1;
border-radius: 35px;
padding: 0px 20px;
line-height: 50px;
}

پس از آن، به سادگی روی دکمه “انتشار” در بالا کلیک کنید.

کد CSS خود را جایگذاری کنید

این تمام چیزی است که برای برجسته کردن یک آیتم منو لازم است.

پس از اتمام باید چیزی شبیه به این در وب سایت شما به نظر برسد:

آیتم منو برجسته شده است

اگر از یک تم غیر فعال استفاده می‌کنید، احتمالاً به طور پیش‌فرض یک سفارشی‌کننده تم را فعال خواهید داشت. برجسته کردن یک آیتم منو در یک تم سفارشی‌کننده فرآیند نسبتاً ساده‌ای است.

ابتدا به سادگی به ظاهر » سفارشی کردن در داشبورد وردپرس خود برای راه اندازی سفارشی کننده تم. پس از باز شدن سفارشی‌کننده تم، به سادگی روی برگه «منوها» کلیک کنید.

به منو در سفارشی ساز تم بروید

هنگامی که در بخش “منوها” قرار گرفتید، به سادگی روی نماد چرخ دنده در بالا سمت راست کلیک کنید تا ویژگی های پیشرفته نمایش داده شود.

اکنون، به سادگی کادر “کلاس های CSS” را علامت بزنید.

کادر کلاس های CSS را علامت بزنید

پس از آن، به بخش “منو” بروید.

اگر چندین منو در وب سایت خود دارید، به سادگی روی منوی که می خواهید موارد منوی آن را برجسته کنید، کلیک کنید.

یک منو انتخاب کنید

با این کار یک برگه جدید باز می شود که در آن می توانید آیتم منو را که می خواهید برجسته کنید انتخاب کنید. می‌تواند مانند مثال ما «شروع به کار» باشد، یا ممکن است صفحه فرم تماس شما یا پیوند فروشگاه آنلاین شما باشد.

به سادگی روی آیتم منوی انتخابی خود کلیک کنید تا آن را برای نمایش برخی از گزینه ها گسترش دهید. روی قسمت “کلاس های CSS” کلیک کنید.

تنها کاری که باید انجام دهید این است که بنویسید 'highlighted-menu' در زمینه شما می توانید این کلاس CSS را به چندین آیتم منو اضافه کنید و همه آنها هایلایت خواهند شد.

منوی هایلایت شده را به عنوان کلاس CSS بنویسید

در مرحله بعد، به سادگی به برگه «CSS اضافی» در سفارشی‌کننده تم بروید.

حالا به سادگی کد CSS زیر را کپی و پیست کنید.

/* Highlighted menu */
.highlighted-menu
{
background: #FFB6C1;
border-radius: 35px;
padding: 0px 20px;
line-height: 50px;
}

تبریک می گویم! شما با موفقیت یک مورد منو را هایلایت کردید.

توجه داشته باشید: ممکن است طرح زمینه شما فیلد «CSS اضافی» در سفارشی‌کننده طرح زمینه نداشته باشد. اگر نه، تنظیمات تم را بررسی کنید تا دریابید که چگونه CSS سفارشی اضافه کنید. اگر نتوانستید آن را پیدا کنید، ممکن است بخواهید با توسعه دهنده تماس بگیرید یا با استفاده از WPCode آن را اضافه کنید.

کد CSS را در برگه CSS اضافی جای‌گذاری کنید

اکنون که آیتم منو را هایلایت کرده اید، می توانید کد CSS را تنظیم کنید تا آیتم منوی خود را به گونه ای که دوست دارید سفارشی کنید.

به عنوان مثال، می توانید رنگ پس زمینه آیتم منوی خود را تغییر دهید.

مورد منوی برجسته صورتی

به سادگی به دنبال کد زیر در قطعه CSS بگردید.

پس از مکان یابی، می توانید به سادگی کد رنگ صورتی را با کد هگز هر رنگ دلخواه خود جایگزین کنید:

در بالا کد هگز برای آکوامارین آمده است.

آیتم منو برجسته شده آبی

می توانید راهنمای ما را بررسی کنید تا به راحتی CSS سفارشی را برای ایده های دیگر در مورد نحوه سفارشی کردن آیتم هایلایت شده منو اضافه کنید.

پس از اینکه از انتخاب های خود راضی شدید، کافی است روی دکمه “انتشار” در سفارشی ساز تم یا “ذخیره قطعه” در WPCode کلیک کنید تا تغییرات خود را ذخیره کنید.

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

اگر این مقاله را دوست داشتید، لطفاً در کانال یوتیوب ما برای آموزش های ویدیویی وردپرس مشترک شوید. شما همچنین می توانید ما را در پیدا کنید توییتر و فیس بوک





منبع

اخبار و مقالات قالب سایت تم سایتقالب سایت

راهبری نوشته

Previous post
Next post

نوشته‌های تازه

  • متن جایگزین تصویر در مقابل عنوان تصویر در وردپرس
  • چگونه به راحتی حالت تاریک را به وب سایت وردپرس خود اضافه کنید
  • قالیکده البرز فروشگاه فرش خرید اینترنتی فرش ماشینی فروش آنلاین انواع فرش-فرش شادرخ
  • مبل و سرویس خواب سلطنتی ترنج متریال وارداتی نقد و اقساط-مبل سید
  • نحوه محدود یا غیرفعال کردن تخلیه خودکار سطل زباله در وردپرس
  • گلگیر جلو S5 جک لوزم یدکی اصلی جک لیست قیمت فطعات اورجینال ملت یدک-پارس قطعه
  • طراحی سایت و فروشگاه اینترنتی شروع یک موفقیت آنلاین پرتال
  • 10 داده بازاریابی وب سایت که باید در هر سایت وردپرسی ردیابی کنید
  • اندازه توصیه شده بنر تصویر Shopify در سال 2023 چقدر است
  • فناوری اطلاعات یا آی تی IT چیست و چرا تا این حد پرطرفدار است؟ همیار آی‌تی-ترازنت
  • چگونه از تقلب و سفارشات جعلی در ووکامرس جلوگیری کنیم
  • نحوه ایجاد یک نظرسنجی تعاملی در وردپرس (گام به گام)
  • روش تست شارژرهای لپ تاپ نمایندگی ایسوس در ایران-شارژر لپتاپ مستر جانبی
  • نحوه نمایش پست های محبوب بر اساس روز، هفته و ماه در وردپرس
  • نحوه واردات و صادرات محصولات WooCommerce با تصاویر
  • 10 افزونه وردپرس با استفاده از هوش مصنوعی و یادگیری ماشین
  • نحوه رفع خطای ERR_CONNECTION_REFUSED در کروم
  • نحوه ردیابی تاریخچه ویجت وردپرس (روش آسان)
  • نحوه ایجاد یک نظرسنجی Net Promoter Score® (NPS) در وردپرس
  • 5 بهترین برنامه پاپ آپ تخفیف Shopify در سال 2023 – Shopidevs
  • اتاق فرار چیست؟ معرفی انواع اسکیپ روم در تهران اکتیک-آل اسکیپ
  • نحوه ردیابی کلیک روی لینک و کلیک روی دکمه در وردپرس (روش آسان)
  • نحوه تغییر نام فرستنده در ایمیل خروجی وردپرس
  • گزیده محصول Shopify را در همه صفحات و صفحات مجموعه اضافه کنید
  • نحوه نوشتن محتوا با استفاده از AI Content Generator در وردپرس
  • نحوه ایجاد فرم HubSpot در وردپرس
  • نحوه نصب Microsoft Clarity Analytics در وردپرس
  • نحوه افزایش ارتفاع بخش Shopify div در سال 2023
  • چگونه URL کوتاه سفارشی خود را برای وبلاگ خود ایجاد کنید
  • معرفی انواع دستگاه مینی چیلر و مزایای آن ها آی تهویه-بتا تهویه
  • rel=”noopener” در وردپرس چیست؟ (توضیح داده شد)
  • تترلند خرید تتر و فروش تتر برنامه‌ها در Google Play-تترفا
  • چگونه از FOMO در سایت وردپرس خود برای افزایش تبدیل استفاده کنید
  • نحوه اضافه کردن گزینه انتخابگر در Shopify در صفحات مجموعه در سال 2023 – Shopidevs
  • 13 بهترین نمونه طراحی پاورقی وردپرس (+ بهترین روش ها)
  • چگونه به راحتی یک نقشه سایت چند زبانه در وردپرس ایجاد کنیم
  • نحوه اضافه کردن محدودیت کشوری برای محصولات WooCommerce
  • لوله بازکنی و لوله بازکن فوری قیمت لوله بازکنی-lolebazkonii
  • نحوه راه اندازی ردیابی تبدیل ووکامرس (گام به گام)
  • نحوه اضافه کردن گزینه انتخابگر در Shopify در صفحات جزئیات محصول در سال 2023 – Shopidevs
  • آیا استفاده از افزونه های قدیمی وردپرس بی خطر است؟
  • 7 نکته برای خرید مبل چستر + ویژگی‌های دکوراسیون با آن کوئیک فیت-مبل سید
  • خرید بک لینک و جریمه شدن سایت شما توسط گوگل-خرید بک لینک،خدمات لینکسازی،خرید رپورتاژ،خرید PBN گلدلینک
  • چگونه بررسی کنیم که آیا پست های وبلاگ شما برای کلمات کلیدی مناسب رتبه بندی می شوند یا خیر
  • 8 بهترین نوع جایگزین برای 2023 (رایگان + پولی)
  • Duplicator به خانواده محصولات WPBeginner خوش آمدید
  • در سال 2023 چه چیزی را انتخاب کنیم
  • تولیدی پیراهن آستین کوتاه خرید عمده پیراهن مردانه تولید کننده پیراهن مردانه
  • نحوه میزبانی فونت های محلی در وردپرس برای یک وب سایت سریعتر
  • نحوه دریافت اعلان ایمیل برای تغییرات پست در وردپرس

دسته‌ها

  • اخبار و مقالات قالب سایت
  • دسته‌بندی نشده
  • متن جایگزین تصویر در مقابل عنوان تصویر در وردپرس
  • چگونه به راحتی حالت تاریک را به وب سایت وردپرس خود اضافه کنید
  • قالیکده البرز فروشگاه فرش خرید اینترنتی فرش ماشینی فروش آنلاین انواع فرش-فرش شادرخ
  • مبل و سرویس خواب سلطنتی ترنج متریال وارداتی نقد و اقساط-مبل سید
  • نحوه محدود یا غیرفعال کردن تخلیه خودکار سطل زباله در وردپرس
  • گلگیر جلو S5 جک لوزم یدکی اصلی جک لیست قیمت فطعات اورجینال ملت یدک-پارس قطعه
  • طراحی سایت و فروشگاه اینترنتی شروع یک موفقیت آنلاین پرتال
  • 10 داده بازاریابی وب سایت که باید در هر سایت وردپرسی ردیابی کنید
  • اندازه توصیه شده بنر تصویر Shopify در سال 2023 چقدر است
  • فناوری اطلاعات یا آی تی IT چیست و چرا تا این حد پرطرفدار است؟ همیار آی‌تی-ترازنت
  • چگونه از تقلب و سفارشات جعلی در ووکامرس جلوگیری کنیم
  • نحوه ایجاد یک نظرسنجی تعاملی در وردپرس (گام به گام)
  • روش تست شارژرهای لپ تاپ نمایندگی ایسوس در ایران-شارژر لپتاپ مستر جانبی
  • نحوه نمایش پست های محبوب بر اساس روز، هفته و ماه در وردپرس
  • نحوه واردات و صادرات محصولات WooCommerce با تصاویر
  • 10 افزونه وردپرس با استفاده از هوش مصنوعی و یادگیری ماشین
  • نحوه رفع خطای ERR_CONNECTION_REFUSED در کروم
  • نحوه ردیابی تاریخچه ویجت وردپرس (روش آسان)
  • نحوه ایجاد یک نظرسنجی Net Promoter Score® (NPS) در وردپرس
  • 5 بهترین برنامه پاپ آپ تخفیف Shopify در سال 2023 – Shopidevs
  • اتاق فرار چیست؟ معرفی انواع اسکیپ روم در تهران اکتیک-آل اسکیپ
  • نحوه ردیابی کلیک روی لینک و کلیک روی دکمه در وردپرس (روش آسان)
  • نحوه تغییر نام فرستنده در ایمیل خروجی وردپرس
  • گزیده محصول Shopify را در همه صفحات و صفحات مجموعه اضافه کنید
  • نحوه نوشتن محتوا با استفاده از AI Content Generator در وردپرس
  • نحوه ایجاد فرم HubSpot در وردپرس
  • نحوه نصب Microsoft Clarity Analytics در وردپرس
  • نحوه افزایش ارتفاع بخش Shopify div در سال 2023
  • چگونه URL کوتاه سفارشی خود را برای وبلاگ خود ایجاد کنید
  • معرفی انواع دستگاه مینی چیلر و مزایای آن ها آی تهویه-بتا تهویه
  • rel=”noopener” در وردپرس چیست؟ (توضیح داده شد)
  • تترلند خرید تتر و فروش تتر برنامه‌ها در Google Play-تترفا
  • چگونه از FOMO در سایت وردپرس خود برای افزایش تبدیل استفاده کنید
  • نحوه اضافه کردن گزینه انتخابگر در Shopify در صفحات مجموعه در سال 2023 – Shopidevs
  • 13 بهترین نمونه طراحی پاورقی وردپرس (+ بهترین روش ها)
  • چگونه به راحتی یک نقشه سایت چند زبانه در وردپرس ایجاد کنیم
  • نحوه اضافه کردن محدودیت کشوری برای محصولات WooCommerce
  • لوله بازکنی و لوله بازکن فوری قیمت لوله بازکنی-lolebazkonii
  • نحوه راه اندازی ردیابی تبدیل ووکامرس (گام به گام)
  • نحوه اضافه کردن گزینه انتخابگر در Shopify در صفحات جزئیات محصول در سال 2023 – Shopidevs
  • آیا استفاده از افزونه های قدیمی وردپرس بی خطر است؟
  • 7 نکته برای خرید مبل چستر + ویژگی‌های دکوراسیون با آن کوئیک فیت-مبل سید
  • خرید بک لینک و جریمه شدن سایت شما توسط گوگل-خرید بک لینک،خدمات لینکسازی،خرید رپورتاژ،خرید PBN گلدلینک
  • چگونه بررسی کنیم که آیا پست های وبلاگ شما برای کلمات کلیدی مناسب رتبه بندی می شوند یا خیر
  • 8 بهترین نوع جایگزین برای 2023 (رایگان + پولی)
  • Duplicator به خانواده محصولات WPBeginner خوش آمدید
  • در سال 2023 چه چیزی را انتخاب کنیم
  • تولیدی پیراهن آستین کوتاه خرید عمده پیراهن مردانه تولید کننده پیراهن مردانه
  • نحوه میزبانی فونت های محلی در وردپرس برای یک وب سایت سریعتر
  • نحوه دریافت اعلان ایمیل برای تغییرات پست در وردپرس
©2023 تمی | WordPress Theme by SuperbThemes