همان طور که می دانید در وردپرس و در قسمت پیشخوان امکانی به نام فهرستها ( Menu ) وجود دارد که با استفاده از آن می توان اقدام به ساخت و نمایش منوهای دلخواه خود در سایت وردپرسی خود کرد.
برای داشتن یک منو با ظاهری زیبا با ما همراه شوید
مرحله یک:
پیش نیازها
توجه داشته باشید که اگر پوسته سایت شما از فهرستها پشتیبانی می کند و هم اکنون از این طریق منوهای سایت شما نمایش داده می شود می توانید از این آموزش استفاده کنید و اگر قالب سایت شما به صورت دستی در کدهای خود منو سایت شما را ایجاد کرده باشد باید از کدهای CSS استفاده کنید. (در آینده آموزش قراردادن آیکن در منو با استفاده از CSS نیز در این وبلاگ قرار می گیره) همچنین برای استفاده از این آموزش باید از وردپرس ۳.۰ یا نسخه های بعدی این سیستم برای راه اندازی و انتشار سایت خود استفاده کنید.
مرحله دوم:
نمایش آیکن
1. پیدا کردن یک آیکون زیبا : برای پیدا کردن و یا طراحی یک آیکون خوب می توانید از سایت Find Icons یا Icon Archive استفاده کنید.
2.افزودن آیکن به فولدر مورد نظر در وردپرس: این مرحله مرحله ی آسونیه کافیه که آیکون های مورد نظر خودمون رو در فولدری که عکس های وردپرس مون در اون قرار می گیره آپلود کنیم
3. فعال سازی کلاس CSS در بخش فهرستهای وردپرس : مرحله دومی که برای این کار باید انجام دهیم این است که با فعال سازی گزینه کلاس CSS در بخش فهرست ها پیشخوان وردپرس بتونیم برای هر کدام از گزینه های منو سایت وردپرسی خود یک کلاس CSS خاص را مشخص کنیم و از این طریق بتونیم به هر کدام از آن ها ظاهر و آیکون ویژه ای را بدهیم. برای این کار پس از رفتن به پیشخوان سایت وردپرس خود از بخش فهرست ها در منو نمایش می توانید در بالای صفحه با کلیک بر روی دکمه “تنظیمات صفحه” و تیک دار کردن ” گزینه CSS ” به تمامی گزینه ها در بخش فهرست ها یک خصوصیت جدید با نام کلاسهای CSS اضافه کنید.
بعد از انجام این کار گزینه صفحه اصلی را انتخاب کرده و در کادر تنظیمات آن در قسمت جدید با نام کلاسهای CSS عبارت home-link را وارد کنید.
4. نوشتن CSS نمایش آیکون برای لینک ها : حال کافی است از شاخه پوسته فعلی سایت وردپرسی خود که در مسیر wp-content/themes می توانید آن را پیدا کنید فایل style.css را باز کنید و در آخر آن کدهای CSS زیر را وارد کنید و سپس آن را دوباره ذخیره سازی و یا آپلود کنید.
.home-link a padding-right: 32px !important; background-image: url(images/filename.png); background-position: right; background-repeat: no-repeat;
توجه داشته باشید که بجای images/filename.png باید آدرس و نام فایل آیکون خود را وارد کنید و پس از ذخیره سازی این فایل با دیدن یکی از صفحات سایت وردپرسی خود که این منو در آن نمایش داده می شود از مناسب بودن خاصیت padding-right که ما برای تعیین فاصله خالی در سمت راست لینک برای نمایش آیکون خانه در نظر گرفته ایم اطمینان حاصل کنید.