نویسنده: رضا

گاهی اوقات نیاز است که کد جاوا اسکریپت به وردپرس خود اضافه کنید. برای قرار دادن کد جاوا اسکریپت در وردپرس روش‌های مختلف و متنوعی وجود دارد. می‌توانید این کد را از طریق فایل functions.php قالب فعال خود اضافه کنید، می‌توانید با کمک افزونه‌هایی مانند wpcode اینکار را انجام دهید و یا در صورتیکه قالب شما تنظیمی برای اضافه کردن کد جاوا اسکریپت به وبسایت در نظر گرفته است می‌توانید اینکار را از طریق تنظیمات قالب خود انجام دهید.

اگرچه که راحت‌ترین روش برای قرار دادن کد جاوا اسکریپت در وردپرس، استفاده از تگ <script> به صورت مستقیم در header.php و footer.php فایل قالب است، اما نبایستی هیچگاه اینکار را انجام دهید چرا که با به‌روزرسانی قالب تمامی این تغییرات از بین خواهد رفت و علاوه بر این، لود فایل‌های جاوا اسکریپت به ترتیبی صورت می‌گیرد که بایستی این ترتیب رعایت شود.

جاوا اسکریپت و کاربرد آن

بنابراین هیچگاه کد جاوا اسکریپت را مستقیما به فایل header.php یا footer.php اضافه نکنید.

در ادامه روش‌های استاندارد قرار دادن کد جاوا اسکریپت در وردپرس را به صورت کامل توضیح خواهیم داد.

استفاده از افزونه برای قرار دادن کد جاوا اسکریپت در وردپرس

زمانی برای قرار دادن کد جاوا اسکریپت در وردپرس سراغ نصب و استفاده از افزونه می‌رویم که:

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

افزونه برای ویرایش فایل header.php و footer.php

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

شیوه کار با دستورات شرطی if…else جاوااسکریپت

افزونه Insert Header and Footers افزونه‌ی خوبی است که به شما اجازه می‌دهد تا بخش‌های فوتر و هدر قالب را ویرایش کنید. این افزونه رابط کاربری ساده ای با تنها دو ناحیه متنی دارد – یکی برای بخش اسکریپت‌های هدر و دیگری برای اسکریپت‌های فوتر. این افزونه اسکریپت‌هایی را به action hookهای wp_head یا wp_footer اضافه می‌کند.

بایستی اسکریپت های خود را بین دو تگ <script> و <script/> قرار دهید. جدا از این مساله، می توانید از این افزونه برای افزودن CSS سفارشی به بخش هدر قالب خود با استفاده از تگ <style> و <style/> استفاده کنید.

افزونه برای اضافه کردن جاوا اسکریپت سفارشی

دیگر گزینه قرار دادن کد جاوا اسکریپت در وردپرس، اضافه کردن اسکریپت با کمک افزونه‌هایی مانند Custom JS در مخزن وردپرس است. این افزونه‌ها مشابه افزونه‌های ویرایش هدر و فوتر هستند و اغلب آنها نیز از اکشن هوک‌های wp_head و wp_footer استفاده می‌کنند اما تنظیمات بیشتری در اختیار شما قرار می‌دهند.

برای مثال، افزونه Simple Custom CSS and JS به شما این اجازه را می‌دهد تا پیوند یکتایی برای فایل‌های جاوا اسکریپت خود تعیین کنید و آنها را در پوشه wp-content ذخیره کنید و اسکریپت‌ها را به عنوان یک نوع پست سفارشی مدیریت کنید.

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

افزونه برای قرار دادن کد جاوا اسکریپت در وردپرس به یک هدف مشخص

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

برای مثال، افزونه محبوب GA Google Analytics به شما اجازه می‌دهد تا گوگل آنالیتیک را به وبسایت از طریق ناحیه مدیریت وردپرس بیافزایید. این افزونه تنظیمات زیادی دارد که مختص اسکریپت گوگل آنالیتیک می‌باشد، مثلا مخفی سازی IP و …

ویرایش فایل functions.php قالب فرزند

اگر نخواهید از افزونه برای قرار دادن کد جاوا اسکریپت در وردپرس استفاده کنید، چه روش دیگری وجود دارد؟

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

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

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

enqueue کردن اسکریپت های سفارشی با تابع ()wp_enqueue_script

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

با ()wp_enqueue_script، می‌توانید کد سفارشی جاوا اسکریپت خود را به فوتر و هدر قالب اضافه کنید. به صورت پیش فرض، این تابع اسکریپت‌ها را که در بخش <head> صفحه قرا می‌دهد مگر اینکه هنگام تعریف تابع از وردپرس خواسته باشید که اسکریپت در فوتر لود شود.

تفاوت برچسب و دسته‌بندی در وردپرس – بهترین روش برای سئو

اگر می‌خواهید اسکریپت خود را به هدر اضافه کنید، تنها نیاز است که تابع سفارشی ساخته و به اسکریپت مد نظر خود اشاره کنید. به طوری که در زیر می‌بینید، از تابع وردپرس ()get_stylesheet_directory_uri برای دریافت آدرس پوشه پوسته فرزند استفاده شده است. و تابع ()add_action تابع سفارشی ()wproket_enqueue_custom_js را به اکشن هوک wp_enqueue_scripts اضافه می‌کند که به شما اجازه می‌دهد اسکریپت سفارشی را وارد صف کنید.

/* Custom script with no dependencies, enqueued in the header */
add_action('wp_enqueue_scripts', 'wproket_enqueue_custom_js');
function wproket_enqueue_custom_js() {
  wp_enqueue_script('custom', get_stylesheet_directory_uri().'/scripts/custom.js');
}

جدای قرار دادن اسکریپت‌ها در صف، می توانید از تابع ()wp_enqueue_script برای اضافه کردن کد سفارشی جاوا اسکریپت به بخش فوتر استفاده کنید. در این حالت، نیاز به تعریف تمام پارامترهای اختیاری دارید، به ترتیب:

/* Custom script with no dependencies, enqueued in the footer */
add_action('wp_enqueue_scripts', 'wproket_enqueue_custom_js');
function wproket_enqueue_custom_js() {
  wp_enqueue_script('custom', get_stylesheet_directory_uri().'/scripts/custom.js', array(), false, true);
}

اگر اسکریپت شما وابسته به اسکریپت‌های دیگر است، بایستی آنها را به پارامتر ()array از تابع ()wp_enqueue_script اضافه کنید. چندین کتابخانه و اسکریپت محبوب مانند jQuery وجود دارد که به صورت پیش‌فرض توسط هسته وردپرس لود می‌شوند و نیازی به لود دوباره آنها نیست.

/* Custom script with jQuery as a dependency, enqueued in the footer */
add_action('wp_enqueue_scripts', 'wproket_enqueue_custom_js');
function wproket_enqueue_custom_js() {
  wp_enqueue_script('custom', get_stylesheet_directory_uri().'/scripts/custom.js', array('jquery'), false, true);
}

اگر نیاز به اسکریپتی دارید که توسط وردپرس ثبت نشده است، بایستی آن را ثبت کرده و با تابع ()wp_enqueue_script دیگری آن را وارد صف کنید.

اگر می‌خواهید اسکریپت خود را در بجای لود در فرانت‌اند وبسایت خود در ناحیه مدیریت وبسایت اجرا کنید بایستی به جای استفاده از تابع wp_enqueue_scripts از اکشن هوک admin_enqueue_scripts در تابع add_action استفاده کنید. برای صفحه لاگین بایستی از اکشن هوک login_enqueue_scripts استفاده کنید که اسکریپت‌ها را تنها برای صفحه لاگین وارد صف می‌کند.

اجرای اسکریپت های inline با wp_head یا wp_footer

گاهی در مساله قرار دادن کد جاوا اسکریپت در وردپرس، به دنبال اضافه کردن یک تکه کد کوتاه هستید.

اگرچه که وردپرس استفاده از تابع wp_enqueue_script را برای لود اسکریپت پیشنهاد می‌کند، اما می‌توانید از اسکریپت‌های inline برای وبسایت‌تان با اکشن هوک‌های wp_head و wp_footer استفاده کنید. بجای وارد صف کردن اسکریپت‌های سفارشی خود، این هوک‌ها تنها آنها را وارد بخش فوتر و هدر می‌کنند. بنابراین بایستی تنها از این تکنیک برای اضافه کردن اسکریپت‌های inline و نه فایل‌های js استفاده کنید.

کد زیر نشان می‌دهد که چگونه می‌توانید از اکشن هوک wp_head برای اجرای اسکریپت inline در بخش هدر قالب استفاده کنیم:

<?php
  /* Inline script printed out in the header */
  add_action('wp_head', 'wproket_add_script_wp_head');
  function wproket_add_script_wp_head() { ?>
    <script> console.log("I'm an inline script tag added to the header."); </script>
<?php }

و در کد زیر می‌بینید که چگونه می‌توانید از اکشن هوک wp_footer برای اجرای اسکریپت inline در بخش فوتر استفاده کنید:

<?php
  /* Inline script printed out in the footer */
  add_action('wp_footer', 'wproket_add_script_wp_footer');
  function wproket_add_script_wp_footer() { ?>
    <script> console.log("I'm an inline script tag added to the footer."); </script>
  <?php }

wp_head و wp_footer تنها در بخش فرانت اند وبسایت تان در دسترس هستند و اسکریپت اضافه شده با این هوک‌ها در ناحیه مدیریت و صفحه لاگین بارگذاری نمی‌شوند. برای افزودن اسکریپت‌های inline سفارشی به ناحیه مدیریت خود بایستی از admin_head و admin_footer در تابع ()add_action استفاده کنید. و اگر  می‌خواهید اسکریپت‌ها را در صفحه لاگین اجرا کنید بایستی از اکشن هوک‌های login_head و login_footer استفاده کنید.

به خاطر داشته باشید که برای قرار دادن کد جاوا اسکریپت در وردپرس، افزونه های اشاره شده در این پست از wp_head و wp_footer نه تنها برای اسکریپت های inline بلکه همچنین برای فایل های بیرونی js استفاده می‌شوند. امن‌ترین و بهترین روش استفاده از تابع ()wp_enqueue_script برای لود فایل جاوا اسکریپت در وردپرس محسوب می‌شود..

اگر آرایه‌ای از اشیا در زبان برنامه‌نویسی جاوا اسکریپت دارید که بایستی به شکلی مرتب شوند، خیلی راحت می توانید از تابع جاوا اسکریپت با نام array.sort استفاده کنید.

در شیوه آسان مرتب سازی آرایه به صورت پیش فرض، array.sort هر عنصر در آرایه را که بایستی مرتب شود را به یک رشته تبدیل کرده و آن را با موقعیت کد یونیکد مقایسه می کند.

const foo = [9, 1, 4, 'zebroid', 'afterdeck'];
foo.sort(); // returns [ 1, 4, 9, 'afterdeck', 'zebroid' ]

const bar = [5, 18, 32, new Set, { user: 'Eleanor Roosevelt' }];
bar.sort(); // returns [ 18, 32, 5, { user: 'Eleanor Roosevelt' }, Set {} ]

ممکن است که این پرسش برای شما پیش آمده باشد که چرا ۳۲ پیش از ۵ ظاهر شده است. منطقی نیست؟ خب، در واقع منطقی هست. این مساله به این خاطر رخ می دهد که هر عنصر در آرایه ابتدا به یک رشته تبدیل می شود و ۳۲ در ترتیب یونیکد پیش از ۵ قرار می گیرد.

کاربرد جاوا اسکریپت

array.sort تنها ترتیب آرایه را تغییر می دهد.

const baz = ['My cat ate my homework', 37, 9, 5, 17];
baz.sort(); // baz array is modified
console.log(baz); // shows [ 17, 37, 5, 9, 'My cat ate my homework' ]

برای حل این مساله، می توانید نمونه ای از آرایه را برای ذخیره سازی ایجاد کنید و آن را تغییر دهید. این کار با متدی از آرایه که یک کپی از آرایه مدنظر ما برمی‌گرداند امکان پذیر است. برای مثال array.slice

const sortedBaz = baz.slice().sort(); // a new instance of the baz array is created and sorted

یا اگر شیوه بهتری را ترجیح می دهید می توانید از عملگر نقطه با همان نتیجه استفاده کنید:

خروجی هر دو مورد یکسان خواهد بود.

const sortedBaz = [...baz].sort(); // a new instance of the baz array is created and sorted

استفاده از array.sort به تنهایی برای مرتب سازی آرایه ای از اشیا خیلی مفید واقع نخواهد شد. خوشبختانه این تابع یک پارامتر دیگر به نام compareFunction قبول می کند که باعث می شود عناصر آرایه مطابق با مقدار برگشی تابع مقایسه ای مرتب شوند.

ساختار جاوا اسکریپت

استفاده از توابع مقایسه ای برای مرتب سازی

اجازه دهید دو عنصر foo و bar را با استفاده از تابع مقایسه ای مقایسه کنیم. مقدار برگشتی تابع مقایسه ای به صورت زیر است:

• ۱. کمتر از ۰ – foo پیش از bar می آید.
• ۲. بزرگتر از ۰ – bar پیش از foo می آید
• ۳. برابر با ۰ – foo و bar با توجه به یکدیگر بدون تغییر می مانند.

اجازه دهید با آرایه ای از اعداد مثالی بزنیم.

const nums = [79, 48, 12, 4];

function compare(a, b) {
  if (a > b) return 1;
  if (b > a) return -1;

  return 0;
}

nums.sort(compare);
// => 4, 12, 48, 79

مثال زیر را به عنوان تفریق a از b در نظر داشته باشید:

function compare(a, b) {
  return a - b;
}

تابع بالا را می توان به صورت تابع arrow نیز نوشت:

nums.sort((a, b) => a - b);

چگونه آرایه ای از اشیا را در جاوا اسکریپت مرتب سازی کنیم؟

حالا اجازه دهید ببینیم که چطور می توان آرایه ای از اشیا را در جاوا اسکریپت مرتب کرد.

const singers = [
  { name: 'Steven Tyler', band: 'Aerosmith', born: 1948 },
  { name: 'Karen Carpenter', band: 'The Carpenters', born: 1950 },
  { name: 'Kurt Cobain', band: 'Nirvana', born: 1967 },
  { name: 'Stevie Nicks', band: 'Fleetwood Mac', born: 1948 },
];

می توانیم از تابع مقایسه ای زیر برای مرتب سازی این آرایه از خوانندگان مطابق برندشان استفاده کنیم:

function compare(a, b) {
  // Use toUpperCase() to ignore character casing
  const bandA = a.band.toUpperCase();
  const bandB = b.band.toUpperCase();

  let comparison = 0;
  if (bandA > bandB) {
    comparison = 1;
  } else if (bandA < bandB) {
    comparison = -1;
  }
  return comparison;
}

singers.sort(compare);

/* returns [
  { name: 'Steven Tyler', band: 'Aerosmith',  born: 1948 },
  { name: 'Stevie Nicks', band: 'Fleetwood Mac', born: 1948 },
  { name: 'Kurt Cobain', band: 'Nirvana', born: 1967 },
  { name: 'Karen Carpenter', band: 'The Carpenters', born: 1950 }
] */

برای رزرو کردن شیوه مرتب سازی، می توانید مقدار بازگشتی را با استفاده از تابع compare معکوس کنید:

function compare(a, b) {
  ...

  //invert return value by multiplying by -1
  return comparison * -1;
}

ساخت تابع پویای مرتب سازی

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

const singers = [
  { name: 'Steven Tyler', band: 'Aerosmith', born: 1948 },
  { name: 'Karen Carpenter', band: 'The Carpenters', born: 1950 },
  { name: 'Kurt Cobain', band: 'Nirvana', born: 1967 },
  { name: 'Stevie Nicks', band: 'Fleetwood Mac', born: 1948 },
];

function compareValues(key, order = 'asc') {
  return function innerSort(a, b) {
    if (!a.hasOwnProperty(key) || !b.hasOwnProperty(key)) {
      // property doesn't exist on either object
      return 0;
    }

    const varA = (typeof a[key] === 'string')
      ? a[key].toUpperCase() : a[key];
    const varB = (typeof b[key] === 'string')
      ? b[key].toUpperCase() : b[key];

    let comparison = 0;
    if (varA > varB) {
      comparison = 1;
    } else if (varA < varB) {
      comparison = -1;
    }
    return (
      (order === 'desc') ? (comparison * -1) : comparison
    );
  };
}

و طریقه استفاده از آن به صورت زیر است:

// array is sorted by band, in ascending order by default
singers.sort(compareValues('band'));

// array is sorted by band in descending order
singers.sort(compareValues('band', 'desc'));

// array is sorted by name in ascending order
singers.sort(compareValues('name'));

// array is sorted by date if birth in descending order
singers.sort(compareValues('born', 'desc'));

در کد بالا، متد hasOwnProperty برای بررسی این مساله به کار می رود که خصوصیت مشخص شده در هر شی تعریف شده و از طریق prototype ارث برده نمی شود. اگر در هر دو شی تعریف نشود، تابع مقدار ۰ را بازمیگرداند که باعث می شود شیوه مرتب سازی به همان صورتی که بوده باقی بماند (یعنی اشیا با توجه به یکدیگر دست نخورده باقی می مانند).

Callback جاوا اسکریپت چیست و چگونه کار می‌کند؟

عملگر typeof نیز برای بررسی نوع داده های مقدار خصوصیت به کار می رود. این عملگر به تابع اجازه می دهد تا روش مناسبی را برای مرتب سازی آرایه تعیین کند. برای مثال، اگر مقدار خصوصیت مشخص شده یک رشته است، متد toUpperCase برای تبدیل تمام کاراکتر به حروف بزرگ به کار می رود، بنابراین بزرگی کوچکی کاراکتر در زمان مرتب سازی نادیده گرفته می شود.

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