چگونگی اضافه کردن آ...
 
آگاه‌سازی‌ها
پاک‌کردن همه

چگونگی اضافه کردن آیکون در کنار منوهای وردپرس


ارسال‌: 59
Admin
شروع کننده موضوع
(@ahadzadeh)
عضو
عضو شده: 9 سال قبل

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

پیش نیازهای نمایش آیکون در کنار گزینه های منو وردپرس

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

نمایش آیکون

آموزش نمایش آیکون خانه در کنار لینک صفحه اصلی در فهرست وردپرس

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

۱. پیدا کردن یک آیکون زیبا : اولین مرحله ای که باید انجام دهید پیدا کردن و یا طراحی یک آیکون خوب برای نمایش اینکه لینک صفحه اصلی به صفحه اول سایت شما اشاره می کند. اگر می خواهید از آیکون های رایگان که در اینترنت وجود دارد استفاده کنید پیشنهاد می کنم برای پیدا کردن آیکون خانه و یا دیگر آیکون های مورد نیاز خود از سایت Find Icons استفاده کنید. تنها کافی است کلمه ” Home ” را در این سایت جستجو کنید تا صدها آیکون که یک خانه را نمایش می دهند برای شما نمایش داده شود. اگر آیکون مورد نظر خود را پیدا نکردید می توانید از دیگر سایت‌های جستجوی آیکون رایگان مانند Icon Archive استفاده کنید.

۲. فعال سازی کلاس CSS در بخش فهرست‌های وردپرس : مرحله دومی که برای این کار باید انجام دهیم این است که با فعال سازی گزینه کلاس CSS در بخش فهرست ها پیشخوان وردپرس بتوانیم برای هر کدام از گزینه های منو سایت وردپرسی خود یک کلاس CSS خاص را مشخص کنیم و از این طریق بتوانیم به هر کدام از آن ها ظاهر و آیکون ویژه ای را بدهیم. برای این کار پس از رفتن به پیشخوان سایت وردپرس خود از بخش فهرست ها در منو نمایش می توانید در بالای صفحه با کلیک بر روی دکمه “تنظیمات صفحه” و تیک دار کردن ” گزینه CSS ” به تمامی گزینه ها در بخش فهرست ها یک خصوصیت جدید با نام کلاس‌های CSS اضافه کنید.

کلاس CSS منو وردپرس

بعد از انجام این کار گزینه صفحه اصلی را انتخاب کرده و در کادر تنظیمات آن در قسمت جدید با نام کلاس‌های CSS عبارت home-link را وارد کنید.

۳. نوشتن CSS نمایش آیکون برای لینک ها : حال کافی است از شاخه پوسته فعلی سایت وردپرسی خود که در مسیر wp-content/themes می توانید آن را پیدا کنید فایل style.css را باز کنید و در آخر آن کدهای CSS زیر را وارد کنید و سپس آن را دوباره ذخیره سازی و یا آپلود کنید.
1
2
3
4
5
6

.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 که ما برای تعیین فاصله خالی در سمت راست لینک برای نمایش آیکون خانه در نظر گرفته ایم اطمینان حاصل کنید.
منبع:تورتک

اشتراک: