ارزدیجیتال
حراجی دامنه های ویژهمشاهده





پلتفرم رپورتاژ آگهی و بک لینک تسمینو
تبلیغات
تبلیغات
تبلیغات تبلیغات
تبلیغات تبلیغات

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

وردپرس , مقالات,آموزش,ترفند

حتما در برخی از سایت‌ها با منویی که نسبت به بقیه متفاوت بوده و جلب توجه می‌کند مواجه شده‌اید. مثلا منویی که هایلایت شده و رنگ آن با بقیه متفاوت است. معمولا وبسایت‌ها برای مهم جلوه دادن یکی از منوها آن را متفاوت نشان می‌دهند تا نظر مخاطبین را جذب کنند. اما چطور چنین امکانی در وردپرس امکان‌پذیر می‌شود؟ در این مقاله قصد داریم روش‌هایی را برای هایلایت کردن یک منو در وردپرس به شما آموزش دهیم. اگر شما نیز به دنبال چنین امکانی هستید، ما را همراهی کنید.

 

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

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

 

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

 

آیتم هایلایت شده می‌تواند راهی عالی برای جلب توجه کاربر به برجسته‌ترین امکان شما باشد. هنگامی که بازدیدکنندگان از وبسایت شما بازدید می‌کنند، بطور غیر ارادی نظرشان به چنین آیتمی جذب می‌شود. در واقع چنین موردی می‌تواند به نوعی call to action به حساب بیاید.

 

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

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

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

با کمک افزونه‌ای به نام Insert Headers and Footers که قبلا آموزش آن را با عنوان وارد کردن کدهای سفارشی در هدر و فوتر وردپرس با Insert Headers and Footers در سایت منتشر کردیم می‌توان در این مرحله، منوی هایلایت و سفارشی ایجاد کرد. در منوی ایجاد شده به اسم Code Snippets روی گزینه Add New کلیک کنید.

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

اکنون که در صفحه «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>

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

پس از وارد کردن کد، با اسکرول کردن به قسمت «insertion» بروید.  در اینجا به سادگی حالت «insertion method» را انتخاب کنید تا کد به طور خودکار در کل وبسایت شما اجرا شود.

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

حال اطلاعات موجود در این صفحه را ذخیره کنید و نتیجه کار را ببینید:

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

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

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

در این روش هایلایت کردن یک منو در وردپرس می‌توانید با کمک بخش سفارشی سازی قالب وارد عمل شوید. از بخش نمایش روی گزینه سفارشی سازی کلیک کنید. سپس گزینه‌ای با عنوان css مشاهده می‌کنید. کار ما با این بخش است:

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

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

 

نمایش یک منو بصورت خاص

گاهی می‌خواهیم منویی را بولدتر از بقیه جلوه دهیم و با آن نظر مخاطب را جلب کنیم. این کار در وردپرس امکانپذیر است! شما با کمک کدهای سی اس اس  قرار دادن آن در بخش‌هایی که در بالا گفتیم می‌توانید هایلایت کردن یک منو در وردپرس را انجام دهید.

این محتوا چقدر براتون مفید بود؟

از ۱ تا ۵ امتیاز بدید.

میانگین رتبه 4 / 5. تعداد رای : 2

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

دانلود

هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >

خرید ارز
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 0 وردپرس , مقالات,آموزش,ترفند
لینک کوتاه مطلب : https://www.20script.ir/?p=61749
کلمات کلیدی پست :
مطالب مرتبط
9,899نحوه حذف کدهای کوتاه بدون استفاده از وردپرس تاریخ : 2016/03/23
17,407افزونه وردپرس سئو حرفه ای WP Meta SEO تاریخ : 2017/02/15
12,268طرح آبی برای فرم ورود وردپرس + آموزش تاریخ : 2014/08/1
6,308استفاده از جاوا اسکریپت در نوشته خاص وردپرس تاریخ : 2019/04/25
56,879پوسته فارسی فروشگاهی چند منظوره Flatsome ووکامرس نسخه 3.12.3 تاریخ : 2020/10/30
16,272خروجی گرفتن از اطلاعات کاربران در وردپرس با افزونه Export User Data تاریخ : 2017/11/28
6,820ساخت منوی دسته بندی در فرم جستجوی وردپرس تاریخ : 2019/02/8
24,097دانلود قالب داده باران برای وردپرس تاریخ : 2016/01/4
16,246ساخت صفحه Coming Soon با افزونه وردپرس تاریخ : 2014/05/20
13,287ابزارک میکروبلاگ دنبالر برای وردپرس تاریخ : 2014/06/24
6,824محدود کردن ابزار جستجو سایت وردپرسی تاریخ : 2019/05/7
11,042نمایش دسته های دلخواه در وردپرس تاریخ : 2015/08/20
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب