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

[بویکا 124]

با سلام . با یک آموزش اختصاصی دیگه در خدمت شما دوستان هستیم . می خوایم آموزش افزودن آیکون های زنده یا همون Livicon رو به شما یاد بدیم . شما می تونین نمونه آیکون های زنده رو همه جای وبسایت من ببنین . آموزش هایی تو اینترنت هست ولی هیچکدوم کامل نیستن . برای همین خواستم به صورت مبتدی و کامل آموزش رو بنویسم .

ابتدا پکیج رو از این لینکبا از انتهای مطلب دانلود کنید .

سپس فولدر دانلود شده رو از حالت زیپ خارج کنید . وارد پوشه بشید . بعد از آن وارد پوشه Upload شده ، سپس وارد پوشه minified شده و این فایل هارو کپی کنید raphael-min.js و jquery-1.9.1.min.js و livicons-1.3.min.js . بعد از کپی کردن وارد فولدر پوشه خود شده و یک فولدر جدید به نام js ایجاد کرده و فایل هارا در این فولدر کپی کنید . اگر این فولدر موجود است فقط فایل هارو کپی کنید .

سپس فایل header.php قالب خود را باز کنید و به دنبال تکه کد زیر بگردید <?php wp_head(); ?> . و قبل از این کد ، کدهای زیر را وارد کنید :

<script src="<?php echo get_template_directory_uri(); ?>/js/jquery-1.9.1.min.js">

</script>

<script src="<?php echo get_template_directory_uri(); ?>/js/raphael-min.js"></script>

<script src="<?php echo get_template_directory_uri(); ?>/js/livicons-1.3.min.js">

</script>

نکاتی در مورد بالا : در کد بالا قبل از کپی کردن فایل livicons-1.3.min.js وارد پوشه دانلود شده livicon شده و سپس وارد پوشه Customizer شده و فایل Customizer.htm را باز کنید . در این صفحه آیکون ها رو میبینیم . هر آیکون رو که انتخاب می کنین نامش رو بنویسن که لازم میشه . هر کدوم رو که لازم داریم تیک می زنیم . اگه همشون رو تیک بزنین حجمش زیاد میشه و سرعت لود شدن بیشتر میشه ، پس آیکون های مورد نظر رو تیک بزنید سپس در انتهای صفحه بخشی وجود داره به نام Step 2 در این بخش تنظیماتی وجود داره که کارکرد اونارو هم پایین می نویسم تا انتخابش کنین :

Default icons size (pixels): سایز پیش فرض آیکون های شما

Default icons color: رنگ پیشفرض آیکون ها

Change color on hover: تغییر رنگ آیکون با بردن موس روی آن

Are icons animated by default: آیا آیکون ها به صورت پیشفرض انیمیشن داشته باشند ؟

Is animation looped by default: آیا انیمیشن آیکون ها به صورت پیشفرض تکرار شوند یا فقط یکبار اجرا شوند ؟

Default event type (hover or click): صفت ها با کلیک روی آیکون انجام شوند یا بردن موس روی آن ؟

Bind an event handler to parent element with a LivIcon: این بخش کمی مهمه . این بخش میگه اگه مقدارش true باشه فعال میشه و اگر false باشه غیر فعال . حالا این بخش چیه ؟ مثلا شما یه متن یا باکس دارین که داخلش آیکون زنده گذاشتین ، اگه مقدار این فیلد true باشه شما در هر قسمتی از div که آیکون زنده توش هست موس رو ببرید انیمیشن اجرا میشه ولی اگه مقدار false باشه فقط انیمیشن با بردن موس دقیقا روی آیکون اجرا میشه . به نظر من ture کنین مفدارش رو .

گرینه های بعدی زیاد مهم نیست اگه لازمتون نیست دست نزنین بهش .

نکته : در تمام تنظیماته بالا مقدار ture یعنی فعال و مقدار false غیر فعال میباشد .

بعد از این مرحله در step 3 روی get code کلیک کرده و تمام کدهای ایجاد شده رو کپی کرده و داخل فایل livicons-1.3.min.js رو پاک کرده و کدهای جدید رو داخلش پیست کرده و لذت ببرید .

خب . حالا مونده چندتا چیز . حالا می خوایم یه آیکون رو نمایش بدیم که به صورت زنده باشه . من یه نمونش رو می ذارم بعد کدش رو توضیح می دم :

<i class="livicon" data-name="wordpress" data-size="80" data-color="#777777" data-hovercolor="#14a57a" data-animate="true" data-loop="0" data-eventtype="hover" data-onparent="1" data-duration="800"></i>

توضیح مقادیر استفاده شده :

data-name : نام آیکونی که دوست داریم استفاده کنیم .

data-size : اندازه آیکون

data-color : رنگ آیکون

data-hovercolor : رنگ آیکون هنگام بردن موس روی آن

data-animate : فعال یا غیر فعال بودن انیمیشن

data-loop : تکرار شدن انمیشن ( 0 باشه یعنی غیر فعال ولی 1 یعنی فعال باشه )

data-onparent : همون قسمتی که میگه با بردن موس روی آیکون فعال بشه انیمیشن یا بردن روی div ( صفر روی آیکون و 1 روی div )

data-duration : مدت زمان انجام انیمیشن

تمام ! به همین راحتی :دی

اگه مراحل بالا براتون سخت بود از این لینکپلاگین ساخته شده برای وردپرس رو دانلود کنین و لذت ببرین .

گروه طراحی آسمان