طراحی و بهینه سازیمشاهده


 

آموزش وردپرس WordPressآموزش وردپرس WordPress سایت

آموزش جی کوئری jQueryآموزش جی کوئری jQuery جاوا اسکریپت

آموزش انگولار جی اس Angular JS آموزش انگولار جی اس 2 AngularJS 

آموزش اچ تی ام ال HTML5 CSS3آموزش HTML5 و CSS3 اچ تی ام ال 5

آموزش پی اچ پی PHPآموزش پی اچ پی PHP پک 1 برنامه نویسی وب

آموزش سئو SEO آموزش سئو سایت و وردپرس SEO گوگل 

آموزش هک قانونی آموزش هک قانونی - نفوذ و امنیت - پک1

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

آموزش زامارین Xamarinآموزش زامارین Xamarin برنامه نویسی موبایل

هاست

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

مقالات,آموزش,ترفند , وردپرس
آموزش افزودن آیکون به فهرست وردپرسReviewed by M J on Sep 11Rating: 4.5آموزش افزودن آیکون به فهرست وردپرساگر از دنبال کنندگان همیشگی بیست اسکریپت بوده باشید ، پیرو مقاله قبلی که با عنوان افزودن آیکون به منو در وردپرس با Menu Image منتشر نمودم، در آن به معرفی افزونه‌ای کاربردی برای افزودن آیکون پرداختیم که با کمک آن میتوانستید به منوها یا همان فهرست‌های سایت وردپرسی خود هر آیکونی که مدنظر شماست اضافه کنید. حال در این آموزش قصد دارم تا این کار را با استفاده از کدنویسی آموزش دهم، پس تا انتها همراه باشید.

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

 

http://www.20script.ir/wp-content/uploads/css-menu-icon.jpg

 

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

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

 

 

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

 

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

 

 

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

 

 

موفق باشید.


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

دانلود

دستگاه جوجه کشی

مطلب مفیدی بود ؟
نویسنده : admin تاریخ : 1396/06/20 0 مقالات,آموزش,ترفند , وردپرس

لینک کوتاه مطلب : http://www.20script.ir/?p=27683

کلمات کلیدی پست :
درگاه پرداخت
مطالب مرتبط
1,821جلوگیری از بروزرسانی قالب و افزونه های وردپرس تاریخ : 1396/04/24
16,855جعبه دانلود برای وردپرس تاریخ : 1392/10/4
1,697دانلود قالب بارسلونا برای وردپرس تاریخ : 1395/04/23
1,598نحوه ساخت صفحه آخرین دیدگاه ها در وردپرس تاریخ : 1395/01/5
2,322پوسته مجله خبری Maxazine نسخه 1.0.2 برای وردپرس تاریخ : 1394/11/15
1,349افزونه ساخت منو واکنش گرا در وردپرس تاریخ : 1395/10/25
1,842افزونه وردپرس نحوه دریافت بازخورد سریع از کاربران Article Feedback تاریخ : 1395/01/26
3,829دانلود قالب وردپرس دیزاینر نسخه 0.4 تاریخ : 1393/07/17
4,647قالب HTML سامانه طراحی بنر طرح ساز تاریخ : 1393/02/9
2,852دانلود قالب وبلاگی Zefir نسخه 2.0 برای وردپرس تاریخ : 1394/06/16
542افزونه گزارش لینک خراب در وردپرس تاریخ : 1396/03/27
2,790افزونه فرم محاسبات EZ برای وردپرس تاریخ : 1395/03/3
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب
آموزش طراحی سایت با سئو بالا مثل دانلودها توسط طراح اصلی آن دریافت و مشاهده