تبلیغات تبلیغات
حراجی دامنه های ویژهمشاهده
آخرین ارسال های تالار مشاهده انجمن
مشکل با قالب وردپرس 3 پاسخ 24 بازدید اسکریپت bedrive 3 پاسخ 58 بازدید کار نکردن اسکریپت وبلاگ دهی روی هاست 14 پاسخ 839 بازدید رفع مشکل اینترنت 5 پاسخ 145 بازدید مشکل با قالب وردپرس 0 پاسخ 2 بازدید مشکل در مخزن وردپرس 6 پاسخ 194 بازدید فروش دامنه سه حرفی 0 پاسخ 32 بازدید فروش اسکریپت سایت ساز 6sit 0 پاسخ 59 بازدید مدت اعتبار لایسنس 15 پاسخ 429 بازدید مزایای طراحی سایت برای مدرسه 0 پاسخ 2 بازدید
تبلیغات
تبلیغات تبلیغات

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

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

اگر از دنبال کنندگان همیشگی بیست اسکریپت بوده باشید ، پیرو مقاله قبلی که با عنوان افزودن آیکون به منو در وردپرس با Menu Image منتشر نمودم، در آن به معرفی افزونه‌ای کاربردی برای افزودن آیکون پرداختیم که با کمک آن میتوانستید به منوها یا همان فهرست‌های سایت وردپرسی خود هر آیکونی که مدنظر شماست اضافه کنید. حال در این آموزش قصد دارم تا این کار را با استفاده از کدنویسی آموزش دهم، پس تا انتها همراه باشید.

 

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

 

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

برای افزودن آیکون به منو با استفاده از کدنویسی لازم است تا فایل استایل قالب خود را کمی شلوغتر کنید و کدها و کلاس‌هایی را برای نمایش آیکون به آن اضافه کنید؛ برای این منظور ابتدا هر تعداد که آیکون مد نظر شماست را در پوشه تصاویر قالب خود اضافه کنید و سپس مشابه کد زیر عمل کنید.

 

.homepage {
background-image: url('home.png');
background-repeat: no-repeat;
background-position: right;
padding-right: ۵px;
}

 

مطابق کد فوق ابتدا یک کلاس برای هر آیکون تعریف کنید، که در اینجا مانند خط اول عنوان آیکون خانه را با نام homepage. تعیین کرده‌ام (دقت کنید که نقطه آن را نیز بگذارید). سپس در خط دوم آیکون مورد نظر خود را با نام home.png و یا هر فرمت دیگری که قرار دارد را آپلود کرده و در کد استایل نام و فرمت آن را مانند نمونه وارد کنید. و در نهایت در خطوط سوم، چهارم و پنجم موقعیت آیکون و حاشیه آن را از کناره ها تعیین کنید.

 

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

 

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

 

پس از اینکه گزینه css classes را فعال کنید مشابه تصویر زیر در بخش منوهایی که اضافه می‌کنید فیلدی با عنوان css classes افزوده خواهد شد که مشابه نمونه فقط کافیست نام کلاس مورد نظر را وارد کنید تا آیکون مد نظر شما در کنار منو نمایش داده شود.

 

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

 

موفق باشید.

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

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

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

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

دانلود

هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 0 مقالات,آموزش,ترفند , وردپرس
لینک کوتاه مطلب : https://www.20script.ir/?p=27683
کلمات کلیدی پست :
مطالب مرتبط
24,120نحوه تغییر سایز تصاویر محصولات ووکامرس تاریخ : 2018/11/5
5,296افزونه ایجاد پنجره پاپ آپ Optin Revolution برای وردپرس تاریخ : 2016/07/26
8,380افزونه ایجاد صفحه معرفی اعضای تیم در وردپرس The Team Pro تاریخ : 2017/12/1
5,500پوسته فروشگاهی Alo Shop برای ووکامرس تاریخ : 2018/11/10
6,832دسته بندی تصاویر در وردپرس با افزونه Taxonomy Images تاریخ : 2018/10/27
3,824کاربران سایت ما را با چه مرورگر‌هایی باز می‌کنند؟ تست سایت با مرورگر‌های مختلف تاریخ : 2019/09/11
6,405افزونه نمایش اطلاعات نویسنده مطلب وردپرس WP – Author Box تاریخ : 2015/09/27
8,555افزونه ووکامرسی امتیاز و پاداش مشتریان Points And Rewards نسخه 1.5.3 تاریخ : 2016/01/6
3,700ساخت دانشنامه در وردپرس با این ۵ افزونه کاربردی تاریخ : 2019/12/7
7,584حذف اسلش از انتهای لینک های وردپرس با استفاده از فایل htaccess تاریخ : 2018/07/18
5,508آموزش مشاهده و نمایش سریع محصولات در ووکامرس تاریخ : 2019/07/20
6,960آپلود فایل های وردپرس در DropBox با افزونه BOXIT نسخه 2.5.4 تاریخ : 2014/12/14
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب
تبلیغات