اختصاص آیکون به فهرست های سایت در وردپرس

///اختصاص آیکون به فهرست های سایت در وردپرس

اختصاص آیکون به فهرست های سایت در وردپرس

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

برای اضافه کردن آیکون ها از Font Awesome استفاده خواهیم کرد! «فونت آوسم» نام فونتی است که کاراکتر های آن در واقع تصاویر با کیفیتی هستند که شما می توانید در صفحات وب سایتتان استفاده کنید. این کار به میزان چشم گیری از حجم صفحات وب سایت شما کاسته و سرعت بارگذاری آن را بیشتر می کند. شاید در گذشته برای اضافه کردن آیکون به گزینه های فهرستتان از تصویر پس زمینه استفاده کرده اید. کتابخانه «فونت آوسم» از تصاویر استفاده نمی کند بلکه یک عنصر غیرواقعی (Pseudo) پیش از لینک مربوطه ایجاد می کند که حاوی تصویر مد نظر شماست. اگر نگاهی به نمونه های موجود در وب سایت «فونت آوسم» بیندازید تنوع آیکون های موجود را مشاهده خواهید کرد.

Font Awesome

اما پیش از هر کاری باید این کتابخانه را به وب سایتتان اضافه کنید. در اولین قدم از طریق بخش ویرایشگر پوسته پرونده functions.php را انتخاب کنید. حال دستورات زیر را به انتهای این پرونده اضافه کنید.

function wmpudev_enqueue_icon_stylesheet() {
	wp_register_style( 'fontawesome', 'https:////maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' );
	wp_enqueue_style( 'fontawesome');
}
add_action( 'wp_enqueue_scripts', 'wmpudev_enqueue_icon_stylesheet' );

کد فوق کتابخانه این فونت را به تمامی صفحات وب سایت شما اضافه می کند. البته شما می توانستید فایل CSS «فونت آوسم» را درون بخش head پوسته تان قرار دهید (با ویرایش پرونده header.php) اما این کار از بسیاری از جهات بهتر و مطمئن تر است. حال پرونده functions.php را ذخیره کنید.

حال به بخش نمایش > فهرست ها در پیشخوان وردپرس مراجعه کنید. در ابتدا به روی گزینه تنظیمات صفحه کلیک کنید و از فعال بودن گزینه «کلاس CSS» اطمینان حاصل کنید. حالا به هر گزینه فهرستتان سه کلاس زیر را اختصاص دهید:

  • کلاس fa مشخص می سازد که باید از کتابخانه «فونت آوسم» استفاده شود.
  • کلاس fa-lg ابعاد آیکون را مشخص می کند. برای کسب اطلاعات بیتشر صفحه نمونه ها را بررسی کنید.
  • کلاس fa-name نوع آیکون را تعیین می کند. شما باید شناسه آیکون مد نظر خود را به جای name وارد کنید. برای مشاهده لیست تمامی آیکون ها و شناسه آن ها به این صفحه مراجعه کنید.

wordpress menus

اگر به وب سایتتان نگاه کنید خواهید دید که هنوز کار به اتمام نرسیده. برای آن که آیکون و لینک در جای صحیح قرار گیرند باید چند خط دیگر به پوسته اضافه کنید. دستورات زیر را به پرونده style.css پوسته تان اضافه کنید.

.fa::before {
	float: right;
	margin-top: 8px;
	width: 30px;
}
.main-navigation ul li.fa.f
	font-family: 'IRANSans', serif;a-lg a {
	font-size: 0.8em;
	margin-left: 10px;
}

شما می توانید با اعمال تغییرات دلخواه خوتان به راحتی به ظاهر دلخواهتان برسید. فهرست های آیکون دار شما حاضرند!

نویسنده: |۱۳۹۶/۹/۲۹ ۹:۲۴:۳۲۱۸ آذر ۱۳۹۶|مقالات آموزشی, وردپرس|۲ دیدگاه

درباره نویسنده:

یک طراح جوان وب ...

۲ Comments

  1. s-mohammad-h ۲۸ مهر ۱۳۹۶ در ۱۰:۱۰ - پاسخ

    ممنون خوب توضیح داده بودید بقیه سایتا
    خیلی بد گفتن

    • تیم راهنمای وردپرس ۲۹ مهر ۱۳۹۶ در ۸:۴۹ - پاسخ

      سلام
      موفق باشید

نظر شما چیست