طراحی سایت با وردپرس قسمت چهاردهم


طراحی سایت با وردپرسوردپرس 

در طراحی سایت با وردپرس قسمت چهاردهم به الحاق فایل های css و javascript می پردازیم:

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

افزودن اسکریپت ها و stylesheet ها به وردپرس فرآیند نسبتاً ساده ای است. اساساً، شما یک تابع ایجاد خواهید کرد که همه اسکریپت ها و stylesheet ها را در نوبت قرار می دهد. زمانی که یک اسکریپت یا stylesheet در صف قرار گرفت، وردپرس یک دسته و مسیر برای یافتن فایل های شما و هر متعلقات دیگری که ممکن است دارای ( فایل شبیه jQuery ) باشد، ایجاد می کند و سپس شما از هوکی استفاده خواهید کرد که اسکریپت ها و stylesheet ها را می افزاید.

#در نوبت قرار دادن اسکریپت ها و style ها

روش مناسب برای در صف قرار دادن اسکریپت ها و style ها در قالب شما، صف بندی آن ها در فایل های functions.php می باشد. فایل style.css در تمام پوسته ها الزامی است، اما ممکن است آن نیاز به فایل های ضروری دیگری جهت گسترش (extend) عملکرد قالب شما داشته باشد.

وردپرس در پکیج نرم افزاری خود تعدادی از فایل های جاوا اسکریپت را الحاق می کند، الحاق ها عموما از کتابخانه ها همانند jQuery استفاده می کنند. قبل از افزودن فایل های جاوا اسکریپت شخصی خود، بررسی کنید که آیا می توانید از کتابخانه های الحاق شده استفاده کنید.

اصول اولیه عبارتند از:

  1. با استفاده از ()wp_enqueue_script یا ()wp_enqueue_style اسکریپت یا style را در صف قرار دهید.

#استایل ها Stylesheets

سی اس اس استایل شیت های شما به صورت سفارشی در قالب استفاده می شوند. همچنین یک stylesheet مکانی است که اطلاعاتی راجع به پوسته شما در آن ذخیره شده است. به همین دلیل، فایل style.css در هر پوسته ای الزامی است.

پس از بارگزاری stylesheet در فایل header.php شما، شما باید آن را با استفاده از wp_enqueue_style بارگزاری نمایید. برای بارگزاری stylesheet اصلی، شما می توانید در functions.php آن را در صف قرار دهید.

برای صف بندی style.css:

این یک stylesheet با نام style را بررسی و بارگزاری خواهد نمود.

تابع اساسی برای صف بندی یک style:

شما می توانید این پارامترها را بیافزایید:
  • handle$ نام ساده ای از stylesheet می باشد.
  • src$ مکانی که در آن واقع شده است. بقیه ورودی ها اختیاری است.
  • deps$ اشاره به این دارد که آیا یک stylesheet به stylesheet دیگری وابستگی دارد یا خیر. اگر این گزینه تنظیم شود، این stylesheet تا زمانی که در ابتدا stylesheet که به آن وابسته است بارگزاری نشود، بارگزاری نخواهد شد.
  • ver$ شماره نسخه را تنظیم می کند.
  • media$ مشخص می کند که کدام یک از media ها به این stylesheet مرتبط است، همانند ‘all’, ‘screen’, ‘print’ or ‘handheld.’

بنابراین زمانی که شما می خواهید یک stylesheet با نام slider.css که داخل پوشه ای به نام CSS در ریشه دایرکتوری پوسته قرار دارد بارگزاری کنید، شما می توانید از مثال زیر استفاده نمایید:

#اسکریپت ها Scripts

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

wp_enqueue_script از syntax مشابه wp_enqueue_style استفاده می کند:

در صف قرار دادن اسکریپت شما:

  • handle$ نامی برای اسکریپت
  • src$ مشخص می کند اسکریپت در کجا قرار دارد.
  • deps$ آرایه ای است که می تواند هر اسکریپتی که اسکریپت تازه شما به آن وابسته است را هندل نماید، همانند jQuery.
  • ver$ به شما لیستی از یک نسخه را می دهد.
  • in_footer$ یک پارامتر بولین (true/false) می باشد که به شما اجازه می دهد اسکریپت های خود را داخل سند html در فوتر قرار داده سپس در header قرار دهید، به طوری که بارگزاری آن را از درخت DOM tree به تاخیر نیاندازد.

در صف قرار دادن تابع شما ممکن است شبیه این باشد:

#اسکریپت پاسخ دیدگاه The Comment Replay Script

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

بهترین راه برای الحاق پاسخ به دیدگاه ها، استفاده از تگ های شرطی برای بررسی این که آیا شرایط خاصی وجود داشته دارد، به طوری که اسکریپت غیر ضروری نتواند بارگزاری شود. برای مثال، شما می توانید فقط اسکریپت هایی که از is_singular استفاده کرده اند را روی صفحات پست یکتا بارگزاری نمایید، و بررسی برای اطمینان بررسی کنید که فعال سازی موضوعی دیدگاه ها توسط کاربر انتخاب شده است. بنابراین می توانید با یک تابع شبیه تابع زیر آن را راه اندازی نمایید:

اگر دیدگاه ها توسط کاربر فعال باشد، و ما در صفحه پست باشیم، اسکریپت پاسخ به دیدگاه ها بارگزاری خواهد شد. در غیر این صورت، بارگزاری نخواهد شد.

#ترکیب صف توابع Combining Enqueue Functions

بهترین راه ترکیب در صف قرار دادن تمام اسکریپ ها و استایل ها داخل یک تابع، و فراخوانی آن ها توسط اکشن wp_enqueue_scripts می باشد. این تابع و اکشن باید در جایی زیر راه اندازی اولیه قرار بگیرند. (راه اندازی اولیه که در بالا انجام گرفت).

#اسکریپت های پیش فرض که در وردپرس وجود دارد و ثبت شده است Default Scripts Included and Registered by WordPress

به طور پیش فرض، وردپرس شامل بسیاری از اسکریپت های عمومی است که معمولا توسط توسعه دهندگان وب استفاده می شود، و همچنین اسکریپت هایی که توسط خود وردپرس استفاده می شود. برخی از آن ها در جدول زیر لیست شده اند:

نام اسکریپت handle وابستگی های مورد نیاز
 Image Cropper  (Image cropper (not used in core, see jcrop  ندارد
 Jcrop  jcrop   ندارد
 SWFObject  swfobject   ندارد
 SWFUpload  swfupload   ندارد
 SWFUpload Degrade  swfupload-degrade   ندارد
 SWFUpload Queue  swfupload-queue   ندارد
 SWFUpload Handlers  swfupload-handlers  ندارد
 jQuery  jquery  (json2 (for AJAX calls
 jQuery Form  jquery-form  jquery
 jQuery Color  jquery-color  jquery
 jQuery Masonry  jquery-masonry  jquery
 jQuery UI Core  jquery-ui-core  jquery
 jQuery UI Widget  jquery-ui-widget  jquery
 jQuery UI Mouse  jquery-ui-mouse  jquery
 jQuery UI Accordion  jquery-ui-accordion  jquery
 jQuery UI Autocomplete  jquery-ui-autocomplete  jquery
 jQuery UI Slider  jquery-ui-slider  jquery
 jQuery UI Progressbar  jquery-ui-progressbar  jquery
 jQuery UI Tabs  jquery-ui-tabs  jquery
 jQuery UI Sortable  jquery-ui-sortable  jquery
 jQuery UI Draggable  jquery-ui-draggable  jquery
 jQuery UI Droppable  jquery-ui-droppable  jquery
 jQuery UI Selectable  jquery-ui-selectable  jquery
 jQuery UI Position  jquery-ui-position  jquery
 jQuery UI Datepicker  jquery-ui-datepicker  jquery
 jQuery UI Tooltips  jquery-ui-tooltip  jquery
 jQuery UI Resizable  jquery-ui-resizable  jquery
 jQuery UI Dialog  jquery-ui-dialog  jquery
 jQuery UI Button  jquery-ui-button  jquery
 jQuery UI Effects  jquery-effects-core  jquery
 jQuery UI Effects – Blind  jquery-effects-blind  jquery-effects-core
 jQuery UI Effects – Bounce jquery-effects-bounce  jquery-effects-core
 jQuery UI Effects – Clip  jquery-effects-clip  jquery-effects-core
 jQuery UI Effects – Drop  jquery-effects-drop  jquery-effects-core
 jQuery UI Effects – Explode  jquery-effects-explode  jquery-effects-core
 jQuery UI Effects – Fade  jquery-effects-fade  jquery-effects-core
 jQuery UI Effects – Fold  jquery-effects-fold  jquery-effects-core
 jQuery UI Effects – Highlight  jquery-effects-highlight  jquery-effects-core
 jQuery UI Effects – Pulsate  jquery-effects-pulsate  jquery-effects-core
 jQuery UI Effects – Scale  jquery-effects-scale  jquery-effects-core
 jQuery UI Effects – Shake  jquery-effects-shake  jquery-effects-core
 jQuery UI Effects – Slide  jquery-effects-slide  jquery-effects-core
 jQuery UI Effects – Transfer  jquery-effects-transfer  jquery-effects-core
 (+MediaElement.js (WP 3.6  wp-mediaelement  jquery
 jQuery Schedule  schedule  jquery
 jQuery Suggest  suggest  jquery
 ThickBox  thickbox  ندارد
 jQuery HoverIntent  hoverIntent  jquery
 jQuery Hotkeys  jquery-hotkeys  jquery
 Simple AJAX Code-Kit  sack  ندارد
 QuickTags  quicktags  ندارد
 (Iris (Colour picker  iris  jquery
 (Farbtastic (deprecated  farbtastic  jquery
 (ColorPicker (deprecated  colorpicker  jquery
 Tiny MCE  tiny_mce  ندارد
 Autosave  autosave  ندارد
 WordPress AJAX Response  wp-ajax-response  ندارد
 List Manipulation  wp-lists  ندارد
 WP Common  common  ندارد
 WP Editor  editorremov  ندارد
 WP Editor Functions  editor-functions  ندارد
 AJAX Cat  ajaxcat  ندارد
 Admin Categories  admin-categories  ندارد
 Admin Tags  admin-tags  ندارد
 Admin custom fields  admin-custom-fields  ندارد
 Password Strength Meter  password-strength-meter  ندارد
 Admin Comments  admin-comments  ندارد
 Admin Users  admin-users  ندارد
 Admin Forms  admin-forms  ندارد
 XFN  xfn  ندارد
 Upload  upload  ندارد
 PostBox  postbox  ندارد
 Slug  slug  ندارد
 Post  post  ندارد
 Page  page  ندارد
 Link  link  ندارد
 Comment  comment  ندارد
 Threaded Comments  comment-reply  ندارد
 Admin Gallery  admin-gallery  ندارد
 Media Upload  media-upload  ندارد
 Admin widgets  admin-widgets  ندارد
 Word Count  word-count  ندارد
 Theme Preview  theme-preview  ندارد
 JSON for JS  json2  ندارد
 Plupload Core  plupload  ندارد
 Plupload All Runtimes  plupload-all  ندارد
 Plupload HTML4  plupload-html4  ندارد
 Plupload HTML5  plupload-html5  ندارد
 Plupload Flash  plupload-flash  ندارد
 Plupload Silverlight  plupload-silverlight  ندارد
 Underscore js  underscore  ندارد
 Backbone js  backbone  ندارد

همچنین جدول زیر نشانگر حذف و جایگزینی بعضی از اسکریپت ها می باشد:

نام اسکریپت handle در این ورژن حذف شد جایگزین شد با
 Scriptaculous Root  scriptaculous-root  WP 3.5  Google Version
 Scriptaculous Builder scriptaculous-builder  WP 3.5 Google Version
Scriptaculous Drag & Drop  scriptaculous-dragdrop  WP 3.5 Google Version
 Scriptaculous Effects  scriptaculous-effects  WP 3.5 Google Version
 Scriptaculous Slider  scriptaculous-slider  WP 3.5 Google Version
Scriptaculous Sound scriptaculous-sound  WP 3.5  Google Version
 Scriptaculous Controls  scriptaculous-controls WP 3.5  Google Version
Scriptaculous scriptaculous  WP 3.5  Google Version
 Prototype Framework prototype  WP 3.5  Google Version

 

لیست در اینجا به پایان رسید. شما می توانید در  wp-includes/script-loader.php لیست کاملی از فایل هایی که شامل لیست های بالا هستند بیابید.

در ادامه به تگ های شرطی خواهیم پرداخت همچنین می توانید در قسمت قبل ارتباط فایل های قالب و دایرکتوری ها را مورد مطالعه قرار دهید.




مطالب مرتبط با این دسته بندی