در این مقاله قصد دارم به تفصیل توضیح دهم که چگونه می توانید وبلاگ خود را با یکی از کتابخانه های جاوا اسکریپت به ویژه jQuery متحول کنید و بهبود بخشید.
مهارت های مورد نیاز:
- توسعه افزونه
- دانش تم وردپرس
درباره کتابخانه های جاوا اسکریپت همراه
هدف اصلی کتابخانه های جاوا اسکریپت این است که استفاده از جاوا اسکریپت در وبلاگ شما بسیار آسان تر شود. هر کتابخانه جاوا اسکریپت بسیاری از کارهای محبوبی را که برای دستیابی به کدنویسی سنگین جاوا اسکریپت نیاز دارند جمع آوری می کند و آنها را در روش هایی قرار می دهد تا بتوانید با یک کد مختصر اجرا کنید. کتابخانههای جاوا اسکریپت کدهای آماده، سبک و «کمتر بنویس، بیشتر انجام بده» هستند. تعداد زیادی کتابخانه جاوا اسکریپت در وردپرس ساخته شده است. و jQuery یکی از قابل گسترش ترین و محبوب ترین کتابخانه های جاوا اسکریپت است. با استفاده از تابع wp_enqueue_script می توانید هر کتابخانه جاوا اسکریپت را برای استفاده در یک صفحه خاص بیاورید.
نمونه هایی از کتابخانه های جاوا اسکریپت همراه:
- JQuery: این کتابخانه اصلی JQuery است. به تابع wp_enqueue_script بروید و “jquery” را اعمال کنید.
- jQuery UI Accordion: به تابع wp_enqueue_script بروید و “jquery-ui-accordion” را برای اجرای منوهای سبک آکاردئونی در سایت خود اعمال کنید.
- SWFObject: به تابع wp_enqueue_script بروید و “swfobject” را برای جاسازی اشیاء فلش اعمال کنید.
- Jcrop: به تابع wp_enqueue_script بروید و “Image cropper” را برای برش تصاویر اعمال کنید.
- Tiny MCE: به تابع qp_enqueue_script بروید و “tiny_mce” را برای افزودن یک ویرایشگر WYSIWYG اعمال کنید.
چگونه توابع Wp_Enqueue_Script ایجاد شده را اجرا و اجرا کنیم؟
قبل از فراخوانی تابع wp_head() ابتدا باید تابع مورد نیاز (کتابخانه جاوا اسکریپت) فراخوانی شود. و برای استقرار هر تابعی که روی آن اعمال کرده اید تابع Wp_Enqueue_Script برای اینکه بتوانید کتابخانه آدرس داده شده را اجرا کنید، باید تابع را فراخوانی کنید. و یک طرح کلی برای فراخوانی یک تابع وجود دارد و به شرح زیر است.
wp_enqueue_script(
$ handle
,$src
,$deps
,$ver
,$in_footer
)
در اینجا من هر پارامتری را که ممکن است مورد استفاده قرار گیرد، توضیح خواهم داد، ادامه دهید.
- $handle : نام اسکریپت را نشان می دهد، از رشته کوچک استفاده کنید
- $scr : اگر در حال ساختن یک افزونه یا get_template_directory_uri() هستید و می خواهید به وردپرس اطلاع دهید که کجا چیزی را پیدا کند، نباید URL را مستقیماً وارد کنید، بنابراین باید از plugins_url() همراه با این پارامتر ($scr ) استفاده کنید.
- $deps: اگر اسکریپتی وجود دارد که وردپرس نمی تواند آن را پیدا کند، این پارامتر یک آرایه اختیاری از دسته ها برای مکان یابی اسکریپت های دیگر است که اسکریپت کتابخانه بر اساس آن است.
- $ver – : برای نمایش اختیاری نسخه، از این پارامتر (رشته) استفاده کنید.
- In_footer : به طور پیش فرض، اسکریپت در هدر درج می شود، اگر ترجیح می دهید آن را در پایین قرار دهید، به سادگی از این پارامتر استفاده کنید. در اصل دارای یک مقدار بولی نادرست است.
با استفاده از میانبر $ به یک تابع jQuery ارجاع دهید
می توان با خیال راحت از میانبر jQuery $ برای اشاره استفاده کرد یک تابع jQuery به عنوان جایگزین “jquery”
جی کوئری(عملکرد ($) {
/* با خیال راحت از $ در اینجا به جای jquery استفاده کنید */
})؛
در مثال قبلی، کد jQuery را در یک تابع زیبا قرار داده ایم تا بتوانیم $ را به عنوان جایگزینی برای “jquery” بنویسیم.
ایجاد یک صفحه وردپرس با جی کوئری یا جاوا اسکریپت
برای افزودن یک کتابخانه جی کوئری یا جاوا اسکریپت به یک صفحه خاص، یک رویکرد بسیار اساسی برای دستیابی به هدف خود وجود دارد. بیایید نحوه ایجاد یک وردپرس سفارشی شده با استفاده از این رویکرد را توضیح دهیم تا از هرگونه تضاد یا ناراحتی با روش اصلی کار صفحات یا پست های پیش فرض جلوگیری شود.
فایل header.php و فایل single.php را از دایرکتوری موضوع فعلی دانلود کنید.
کار بر روی فایل Single.php
- از single.php که دانلود کرده اید با باز کردن آن در یک ویرایشگر متن و ذخیره به عنوان آن با نامی دیگر پشتیبان بگیرید، برای ادامه، می توانید آن را ذخیره کنید. javascript.php تا بتوانید بدون هیچ گونه سردرگمی مراحل بعدی را دنبال کنید.
- حالا فایل را باز کنید و تابع get_header() را حذف کنید (در بالای فایل جدید)
- در بالای فایل، کد زیر را بنویسید:
/*
نام قالب: جاوا اسکریپت
*/
?>- نام الگو: باید با نام فایلی که در مرحله 1 انتخاب کردید یکسان باشد
- به تابع get_header من ‘js’ را اضافه کردم. “js” بخشی از نام فایل در مرحله 6 است، بنابراین به آنچه در آنجا انجام می شود توجه کنید.
- در فایل javascript.php کد زیر را قبل از حلقه ای که با “if (have_posts()…” شروع می شود اضافه کنید.
محو شدن در مربع
<اسکریپت>
$(document.body).click(function () {
$(“#one”).fadeIn(6000);
})؛ - سپس فایل را ذخیره کنید.
کار بر روی فایل header.php
طبق معمول باید از فایل header.php نسخه پشتیبان تهیه کنیم.
- فایل را باز کنید و آن را با نام header-js.php “Save as” کنید.
- header-js.php را درست قبل از تماس به تابع wp_head اضافه کنید:
- فایل را ذخیره کنید
آپلود فایل های قالب جدید
- از نرم افزار FTP خود برای آپلود فایل header-js.php (فایل هدر جدید) در فهرست موضوع فعلی خود استفاده کنید.
- اکنون زمان آن رسیده است که یک صفحه جدید ایجاد کنید و به روش سنتی از داشبورد خود به آن عنوان بدهید. برای شروع اجرای jquery، در ستون سمت راست و از منوی کشویی قالب، نام قالبی که ایجاد کرده اید را انتخاب کنید.
- صفحه را به روز کنید تا تغییرات را ذخیره کنید. چیزی را در ویرایشگر WYSIWYG وارد نکنید.
- صفحه را با فشار دادن پیوند قرمز که می گوید: “محو در مربع” مشاهده کنید.
- اکنون باید مربع قرمزی را مشاهده کنید که به آرامی محو می شود. اگر بله، پس کار شما تمام شده است و با استفاده از کتابخانه جاوا اسکریپت یک صفحه سفارشی ایجاد کرده اید. اینجا مال من است.
اشاره: اگر با هر مشکلی مقابله کردید، افزونه های فعال شده را یکی یکی غیرفعال کنید، زیرا ممکن است نوعی درگیری باشد و بنابراین، باید کشف کنید که تضاد از کجا می آید.
(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));