مكتبة jQuery من أفضل مكتبات Javascript التي توفر لك تأثيرات متحركة ممتازة في موقعك سواء كنت مصمم مواقع أو مستخدم و مازالت تحتل شهرة كبيرة في عالم مكتبات تأثيرات Javascript و التي تضم مكتبات أخرى مثل Mootools و Prototype

و في هذا المقال سنوضح كيفية إضافة تأثيرات متميزة على موقعك أو مدونتك التي تستخدم WordPress باستخدام jQuery .

كيفية إضافة jQuery المدمجة في WordPress

يمكن الاستغناء عن هذه الخطوة إذا كنت ستسخدم أحد الإضافات الجاهزة Plugins

WordPress تأتي و معها ملفات jQuery المطلوبة فهي تستخدم أيضاً في لوحة تحكم الموقع , و يمكن كذلك إضافتها في القالب الذي تستخدمه بكل بساطة بإضافة الكود التالي في ملف functions.php في قالبك :

1
2
3
4
5
6

<?php 
function insert_jquery(){
   wp_enqueue_script('jquery');
}
add_filter('wp_head','insert_jquery');
 ?>

أو إذا أردتم استخدام الملف من Google Code كما تم التوضيح بمقال كيفية عمل قائمة منسدلة باستخدام Ext Core يمكن كذلك إضافة jQuery للموقع بنفس الطريقة عن طريق إضافة الكود السابق في ملف header.php قبل وسم < body > :

1

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>

يمكن الاستفادة من مقال الأخ فؤاد بدوي عن حل مشكلة تعارض jQuery مع المكتبات الأخرى

[ إضافة ] Lightbox لاستعراض الصور


من أشهر تأثيرات jQuery هو تأثير عرض الصور باختلاف مسمياته و أشهر تأثير عرض الصور هو Lightbox و التأثير يقوم عند الضغط على صورة معينة لتكبيرها بتغميق الصفحة و تحميل الصورة في شكل جميل و عرضها مع خيار لإغلاق عرض الصورة و العودة للصفحة .


عرض حي Demoتنزيل

[ إضافة ] SimpleModal Contact Form


و هي إضافة بسيطة تقوم بعرض نموذج للاتصال بصاحب المدونة و يمكن تحديد خصائص معينة لنموذج الاتصال


عرض حي Demoتنزيل

[ إضافة ] Shockingly Big IE6 Warning


و هو من الإضافات التي أستمتع شخصياً باستخدامها فمن السهل التعديل على شكلها و تعريبها أيضاً و هذه الإضافة تقوم بوضع رسالة تحذيرية بشكل معين في صفحات الموقع تقوم بتحذير المستخدم الذي يستخدم متصفح أقل من إنترنت إكسبلورر 7 و المقصود بها بالطبع هو متصفح إنترنت إكسبلورر 6 .


عرض حي Demoتنزيل

إضافة تأثير على الجزء الجانبي من الموقع Sidebar

بدلاً من استخدام التأثيرات العادية باستخدام CSS, توفر jQuery تأثيرات أفضل عند المرور بالماوس على أحد العناصر في الجزء الجانبي و يمكن استعراض مثال من مدونة WooThemes Blog .
و لعمل هذا التأثير يجب تنزيل ملفات التأثيرات الخاصة بذلك و هي إضافات Easing plugin و Color pluginو بعد تنزيلهم و فك الضغط يتم وضعهم داخل مجلد القالب الذي تستخدمه .
و بعد ذلك سنستخدم الكود التالي داخل القالب في ملف functions.php :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

function nice_sidebar(){
?>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/easing.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/color.js"></script>
<script type="text/javascript">
 
jQuery(document).ready(function(){
    jQuery.easing.def = "easeInOutSine"; 
 
     jQuery('.aside > ul > li > ul > li').bind('mouseenter',function(){
 
      jQuery(this).stop().animate({
            backgroundColor: "#b5b5b5" }, 200)
 
    }).bind('mouseleave',function(){
 
        jQuery(this).stop().animate({
            backgroundColor: "#ffffff" }, 500)
    });
 
  });
</script>
 
< ?php
}
add_filter('wp_head', 'nice_sidebar');

السطر الخاص الذي يتم فيه ذكر العناصر التي يقوم التأثير بالظهور عليها مثل .aside > ul > li > ul > li و في هذا السطر يمكنك تغيير العناصر التي يجب التأثير عليها حسب استخدامك للقالب .

[ إضافة ] استعراض التعليق قبل الإرسال

و تمكنك الإضافة من استعراض شكل التعليق قبل إرساله في التدوينات .

عرض حي Demoتنزيل

مصادر