هایلایت کردن یک آیتم در وردپرس چگونه است ؟
در مقاله های قبل ما در مورد اهمیت آسان تر کردن کار برای کاربران و در نتیجه بهبود تجربه ان برای وب سایت شما صحبت کردیم. در این مقاله می خواهیم نحوه هایلایت کردن یک صفحه را در منوی وردپرس برای شما شرح دهیم. بنابراین، همواره به دنبال ان هستیم که کارایی و جذابیت سایت شما را برای کاربران بالا ببریم.
اگر آیتمی در منوی ناوبری یا هدر سایت شما وجود دارد که می‌خواهید کاربران روی آن کلیک کنند. در واقع این آیتم از اهمیت زیادی برخوردار است. برای بصری تر شدن ان ما باید ان را در منوی سایت هایلایت کنیم. این کار را با افزودن کلاس‌های CSS به آیتم‌های منوی وردپرس انجام خواهیم داد.
برای اینکه بتوانیم یک سبک یا طرح را برای یک آیتم منوی خاص در وردپرس اعمال کنیم، دو گزینه خواهیم داشت: اول می توانیم از انتخابگرهای پیشرفته CSS با انتخاب موقعیتی که نسبت به بقیه عناصر (اول، چهارم یا آخر) اشغال می کنند، استفاده کنیم.
یا گزینه دوم بسیار ساده‌تر این است که که از عملکرد وردپرس برای اضافه کردن یک کلاس خاص به عنصری که می‌خواهیم برجسته کنیم استفاده کنیم.
قابلیت افزودن کلاس های CSS به صفحه منو:
این عملکرد وردپرس معمولاً در پنل مدیریت وردپرس شما پنهان است. اما به راحتی مشاهده می شود. برای این کار، باید به پنل مدیریت خود (و sabers، از طریق آدرس mysiteweb.com/wp-admin/) دسترسی داشته باشید و از داخل آن به منوی Appearance Menu بروید.
از این طریق می توانید منوی وردپرس خود را سفارشی کنید. هنگامی که منوی خود را ایجاد کردیم، روی تب “گزینه های صفحه” که در گوشه سمت راست بالا قرار دارد کلیک می کنید. در این مرحله منویی با چندین گزینه و چک باکس نمایش داده می شود.
موردی که ما به آن علاقه مندیم گزینه “کلاس های CSS” است، تا بتوانیم یک کلاس متفاوت به هر یک از آیتم های منو اضافه کنیم و به هر صفحه یا پیوند سبک خاص خود را بدهیم. آن را انتخاب می کنیم تا فعال شود.
بعد از فعال شدن می‌توانیم در همین صفحه عنصری را که می‌خواهیم استایل خود را به آن بدهیم، جستجو کنیم. وقتی آن را پیدا کردیم، روی آن کلیک می کنیم و می بینیم که چگونه کادر جدیدی به نام «کلاس های CSS » نمایش داده می شود. این همان چیزی است که ما قرار است از آن استفاده کنیم.
کلاس CSS یک ظاهر طراحی شده به منو اضافه شد
در حال حاضر دادن سبک یا طراحی خود به عنصر مورد نظر یک بخش سرگرم کننده برای شماست. از آنجایی که می‌خواهیم عنصری چشمگیر باشد که بازدیدکنندگان را دعوت می‌کند تا روی لینک مورد نظر کلیک کنند. رنگ پس‌زمینه و رنگ فونت جذابی را انتخاب کنید.
اگر مورد قبلی را تجزیه و تحلیل کنیم، منوی وردپرس یک عنصر لیست نامرتب در HTML است. و اگر کمی کد را بررسی کنید، خواهید دید که چگونه کلاس HTML به عنصر اضافه می شود li، بنابراین اگر بخواهیم به لینک استایل بدهیم و ان را هایلایت کنیم، باید پیوندی را انتخاب کنید که در یک سطح از سلسله مراتب است. اگر کد شما کار نمی کند ، ممکن است به این دلیل باشد که صفحه سبک طرح زمینه شما از انتخابگر کامل تری استفاده می کند.
برای این ما دو گزینه داریم: گزینه اول اضافه کردن کد مربوطه است و در گزینه بعدی ما منوی خود را از یک عنصر منحصر به فرد و چشمگیر برای کاربران خود خواهیم داشت که برای هدایت آنها به صفحه تماس یا صفحه ای که مد نظر ماست بسیار مفید است.
نتیجه گیری مقاله
هنگامی که آیتمی را توسط CSS انتخاب کردیم. می توانیم هر سبکی را برای ان اعمال کنیم. از رنگ‌ها، اندازه فونت و دیگر ویژگی ها. همانطور که دیدیم، تنها با چند مرحله ساده می‌توانیم قالب وردپرس خود را سفارشی کنیم تا طرح خودمان را به آن بدهیم. و نحوه هایلایت کردن صفحه در منو وردپرس را اموختیم تا یک هدر سایت با طراحی خاص داشته باشیم.
مقالات مرتبط :
معرفی بهترین افزونه های افزایش سرعت سایت وردپرس
طراحی صفحه نمونه کار در وردپرس