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

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

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

How To Highlight A Menu Item In Wordpress Og, محتوا مارکتینگ

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

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

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

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

Wpforms Highlighted Menu Icon, محتوا مارکتینگ

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

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

  • روش 1. برجسته کردن یک آیتم منو با استفاده از ویرایشگر کامل سایت
  • روش 2. برجسته کردن یک آیتم منو با استفاده از تم سفارشی ساز
  • سفارشی کردن موارد برجسته منوی شما

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

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

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

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

Select Menu Item And Click The Gear Icon, محتوا مارکتینگ

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

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

Write Highlighted Menu In Additional Css Class Field And Click Save 1, محتوا مارکتینگ

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

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

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

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

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

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

Go To Wpcode Add New 1, محتوا مارکتینگ

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

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

Click Use Snippet Button 1, محتوا مارکتینگ

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

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

Universalsnippet As Highligh Menu Item Code Type 1024x437, محتوا مارکتینگ

بعد، به سادگی روی منوی کشویی در کنار گزینه «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 در زیر مشاهده می کنید، حتماً تگ های سبک را وارد کنید.

Paste Highlight Menu Item Code, محتوا مارکتینگ

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

در اینجا به سادگی حالت «درج خودکار» را انتخاب کنید تا کد به طور خودکار در کل وب سایت شما اجرا شود.

Auto Insert As Insertion Mode, محتوا مارکتینگ

اکنون، به بالای صفحه بروید و سوئیچ را از «غیرفعال» به «فعال» تغییر دهید.

سپس به سادگی روی دکمه «ذخیره قطعه» کلیک کنید.

Save Highlight Menu Item Snippet, محتوا مارکتینگ

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

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

Highlighted Menu, محتوا مارکتینگ

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

اگر می‌خواهید از Theme Customizer استفاده کنید و از یک تم FSE استفاده کنید، کافی است URL زیر را کپی کرده و در مرورگر خود جای‌گذاری کنید. مطمئن شوید که “example.com” را با نام دامنه سایت خود جایگزین کنید.

https://example.com/wp-admin/customize.php

در اینجا شما به سادگی باید روی برگه «CSS اضافی» کلیک کنید.

Click Additional Css Tab, محتوا مارکتینگ

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

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

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

Paste Your Code, محتوا مارکتینگ

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

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

Highlighted Menu, محتوا مارکتینگ

روش 2. برجسته کردن یک آیتم منو با استفاده از تم سفارشی ساز

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

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

Go To Menus In Theme Customizer, محتوا مارکتینگ

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

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

Check Css Classes Box, محتوا مارکتینگ

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

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

Select A Menu, محتوا مارکتینگ

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

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

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

Write Highlighted Menu As Css Class 1, محتوا مارکتینگ

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

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

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

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

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

Paste Code In Additional Css, محتوا مارکتینگ

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

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

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

Pink Menu Item, محتوا مارکتینگ

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

background: #FFB6C1

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

background: #7FFFD4;

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

Blue Menu, محتوا مارکتینگ

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

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

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

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

پست نحوه هایلایت کردن یک آیتم منو در وردپرس اولین بار در WPBeginner ظاهر شد.





سایت محتوا مارکتینگ

توسط psychen

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *