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

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

  • چوب – روشها بیشتر سازنده باشید؟
  • دانلود رایگان سوالات تخصصی دبیری حرفه و فن سال 1401 ای استخدام | hampafile
  • سایت بازی انفجار شرط بندی کازینو آنلاین بیا بت | mihanbets سایت بت حرام است و خلاف قوانین جمهوری اسلامی می باشد
  • بهترین روش یادگیری زبان انگلیسی در منزل چطور | zabannew
  • شیرآلات صنعتی و کاربرد آن‌ها بازار تجهیزات صنعتی | kasrasaran
  • سیم جوش عرضه بهترین سیم جوش CO2، تیگ، توپودری و غیره با نازلترین قیمت ابزارچی | foulka
  • طرز تهیه تافی شکلاتی خوشمزه و مخصوص با طعم کره ای
  • آموزش سئو به زبان ساده سئو استاد
  • سوالات استخدامی دبیر شیمی آموزش و پرورش دانلود رایگان منابع 1402 | soalattalayi
  • خرید پردازنده CPU کامپیوتر و مشاهده قیمت انواع سی پی یو
  • خرید پردازنده CPU کامپیوتر و مشاهده قیمت انواع سی پی یو
  • CPU کامپیوتر چیست؟ آشنایی با نحوه کار و انواع سی پی یو پلازا
  • CPU کامپیوتر چیست؟ آشنایی با نحوه کار و انواع سی پی یو پلازا
  • بک لینک: آیا واقعاً به آن نیاز دارید؟ این به شما کمک می کند تصمیم بگیرید!
  • تزریق ژل به لب عوارض تزریق ژل لب تزریق ژل لب طبیعی تزریق ژل لب دائمی
  • نحوه رفع «ERR_SSL_VERSION_OR_CIPHER_MISMATCH» در وردپرس
  • ساعت طلا ظریف ژنو گالری ماندگار | hsaatchi
  • چگونه یک افزونه وردپرس را به زبان خود ترجمه کنید
  • نحوه اضافه کردن دکمه های پرداخت سریع در ووکامرس
  • چگونه برای پست های وبلاگ خود اسکرین شات بگیرید (راهنمای مبتدیان)
  • خطای 414 Request URI Too Long چیست و چگونه آن را برطرف کنیم
  • نحوه غیرفعال کردن اعلان ایمیل به روز رسانی خودکار در وردپرس
  • تعمیر جاروبرقی در تهران هزینه تعمیرات جاروبرقی در منزل | سناپویان
  • چگونه لینک های وابسته را در سایت وردپرس خود پنهان کنیم
  • قیمت دی وی دی رایتر اکسترنال و اینترنال 8 مرداد
  • 12 بهترین جایگزین ChatGPT برای وبلاگ نویسان / بازاریابان (2023)
  • آنچه در وردپرس 6.3 می آید (ویژگی ها و اسکرین شات ها)
  • نحوه اضافه کردن طرحواره سوالات متداول در وردپرس (2 روش)
  • معرفی 8 تا از بهترین کلاس های آموزش ماساژ درایران با ارائه مدرک معتبر هنر فردی | آموزشگاه آپادانا تبریز
  • نحوه اضافه کردن جداول در پست ها و صفحات وردپرس (بدون نیاز به HTML)
  • چگونه اسلایدر چرخ فلک را در هر صفحه ای در Shopify اضافه کنیم
  • نحوه اضافه کردن طرحواره GTIN، ISBN و MPN در WooCommerce و WordPress
  • نحوه ایجاد یک پایگاه داده قابل جستجو در وردپرس (گام به گام)
  • انواع چای با طعم های مختلف پوپونیک | OkChay
  • نحوه اضافه کردن محتوای چند ستونی در وردپرس (بدون نیاز به HTML)
  • نحوه تنظیم لاگ های ایمیل وردپرس (و لاگ های ایمیل WooCommerce)
  • Content Decay چیست؟ (و چگونه باید این را تعمیر کنیم)
  • نحوه ایجاد کاتالوگ محصولات در وردپرس (گام به گام)
  • نحوه نمایش برچسب حقایق تغذیه در وردپرس
  • برای افزایش رتبه بندی، چگالی کلمات کلیدی را تجزیه و تحلیل کنید
  • چگونه فضای دیسک را آزاد کنیم و استفاده از Inode را در وردپرس کاهش دهیم
  • نمایندگی فروش قطعات لیفتراک کوماتسو + بهترین قیمت دکترپارت | توکو لیفتراک
  • نحوه مدیریت چندین سایت وردپرس از یک داشبورد
  • نحوه انتخاب و استفاده از بلوک های تودرتو در وردپرس
  • برند ساختمانی آرتور » ضوابط و معیار های طراحی کتابخانه | memarinavaz
  • چگونه به راحتی متن “Just Another WordPress Site” را تغییر دهیم
  • نوشتن پیشینه تحقیق در مقاله روش‌های نگارش پیشینه در مقاله نویسی | porseshneshan
  • نحوه اضافه کردن طرح دستور العمل مناسب سئو در وردپرس (روش آسان)
  • با یک کلیک بیش از 300 ایده برای کلمه کلیدی ایجاد کنید
  • نحوه نمایش بیشتر پست های نظر داده شده در وردپرس (2 روش)

دسته‌ها

  • اخبار و مقالات قالب سایت
  • دسته‌بندی نشده
  • چوب – روشها بیشتر سازنده باشید؟
  • دانلود رایگان سوالات تخصصی دبیری حرفه و فن سال 1401 ای استخدام | hampafile
  • سایت بازی انفجار شرط بندی کازینو آنلاین بیا بت | mihanbets سایت بت حرام است و خلاف قوانین جمهوری اسلامی می باشد
  • بهترین روش یادگیری زبان انگلیسی در منزل چطور | zabannew
  • شیرآلات صنعتی و کاربرد آن‌ها بازار تجهیزات صنعتی | kasrasaran
  • سیم جوش عرضه بهترین سیم جوش CO2، تیگ، توپودری و غیره با نازلترین قیمت ابزارچی | foulka
  • طرز تهیه تافی شکلاتی خوشمزه و مخصوص با طعم کره ای
  • آموزش سئو به زبان ساده سئو استاد
  • سوالات استخدامی دبیر شیمی آموزش و پرورش دانلود رایگان منابع 1402 | soalattalayi
  • خرید پردازنده CPU کامپیوتر و مشاهده قیمت انواع سی پی یو
  • خرید پردازنده CPU کامپیوتر و مشاهده قیمت انواع سی پی یو
  • CPU کامپیوتر چیست؟ آشنایی با نحوه کار و انواع سی پی یو پلازا
  • CPU کامپیوتر چیست؟ آشنایی با نحوه کار و انواع سی پی یو پلازا
  • بک لینک: آیا واقعاً به آن نیاز دارید؟ این به شما کمک می کند تصمیم بگیرید!
  • تزریق ژل به لب عوارض تزریق ژل لب تزریق ژل لب طبیعی تزریق ژل لب دائمی
  • نحوه رفع «ERR_SSL_VERSION_OR_CIPHER_MISMATCH» در وردپرس
  • ساعت طلا ظریف ژنو گالری ماندگار | hsaatchi
  • چگونه یک افزونه وردپرس را به زبان خود ترجمه کنید
  • نحوه اضافه کردن دکمه های پرداخت سریع در ووکامرس
  • چگونه برای پست های وبلاگ خود اسکرین شات بگیرید (راهنمای مبتدیان)
  • خطای 414 Request URI Too Long چیست و چگونه آن را برطرف کنیم
  • نحوه غیرفعال کردن اعلان ایمیل به روز رسانی خودکار در وردپرس
  • تعمیر جاروبرقی در تهران هزینه تعمیرات جاروبرقی در منزل | سناپویان
  • چگونه لینک های وابسته را در سایت وردپرس خود پنهان کنیم
  • قیمت دی وی دی رایتر اکسترنال و اینترنال 8 مرداد
  • 12 بهترین جایگزین ChatGPT برای وبلاگ نویسان / بازاریابان (2023)
  • آنچه در وردپرس 6.3 می آید (ویژگی ها و اسکرین شات ها)
  • نحوه اضافه کردن طرحواره سوالات متداول در وردپرس (2 روش)
  • معرفی 8 تا از بهترین کلاس های آموزش ماساژ درایران با ارائه مدرک معتبر هنر فردی | آموزشگاه آپادانا تبریز
  • نحوه اضافه کردن جداول در پست ها و صفحات وردپرس (بدون نیاز به HTML)
  • چگونه اسلایدر چرخ فلک را در هر صفحه ای در Shopify اضافه کنیم
  • نحوه اضافه کردن طرحواره GTIN، ISBN و MPN در WooCommerce و WordPress
  • نحوه ایجاد یک پایگاه داده قابل جستجو در وردپرس (گام به گام)
  • انواع چای با طعم های مختلف پوپونیک | OkChay
  • نحوه اضافه کردن محتوای چند ستونی در وردپرس (بدون نیاز به HTML)
  • نحوه تنظیم لاگ های ایمیل وردپرس (و لاگ های ایمیل WooCommerce)
  • Content Decay چیست؟ (و چگونه باید این را تعمیر کنیم)
  • نحوه ایجاد کاتالوگ محصولات در وردپرس (گام به گام)
  • نحوه نمایش برچسب حقایق تغذیه در وردپرس
  • برای افزایش رتبه بندی، چگالی کلمات کلیدی را تجزیه و تحلیل کنید
  • چگونه فضای دیسک را آزاد کنیم و استفاده از Inode را در وردپرس کاهش دهیم
  • نمایندگی فروش قطعات لیفتراک کوماتسو + بهترین قیمت دکترپارت | توکو لیفتراک
  • نحوه مدیریت چندین سایت وردپرس از یک داشبورد
  • نحوه انتخاب و استفاده از بلوک های تودرتو در وردپرس
  • برند ساختمانی آرتور » ضوابط و معیار های طراحی کتابخانه | memarinavaz
  • چگونه به راحتی متن “Just Another WordPress Site” را تغییر دهیم
  • نوشتن پیشینه تحقیق در مقاله روش‌های نگارش پیشینه در مقاله نویسی | porseshneshan
  • نحوه اضافه کردن طرح دستور العمل مناسب سئو در وردپرس (روش آسان)
  • با یک کلیک بیش از 300 ایده برای کلمه کلیدی ایجاد کنید
  • نحوه نمایش بیشتر پست های نظر داده شده در وردپرس (2 روش)
©2023 تمی | WordPress Theme by SuperbThemes