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

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

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

بهترین مکان برای یافتن کتابخانه های جاوا اسکریپت منبع باز GitHub است. اگر می خواهید یک lightbox تصویر به سایت خود اضافه کنید که به کاربران امکان بزرگنمایی تصاویر را می دهد، GitHub دارای قابلیت جستجوی کاملاً پیشرفته است. کافی است عبارت "lightbox جاوا اسکریپت" را در کادر جستجو تایپ کرده و موردی را پیدا کنید که مناسب نیاز های شما باشد.

در این مقاله ما از کتابخانه جاوا اسکریپت Intense Images به عنوان مثال استفاده می کنیم. اما می توانید مراحل مشابهی را برای افزودن و استفاده هر کتابخانه شخص ثالث جاوا اسکریپت (یا jQuery) به سایت وردپرس خود دنبال کنید.

توجه داشته باشید که گاهی کتابخانه های جاوا اسکریپت را پلاگین های جاوا اسکریپت می نامند. این ها با افزونه های وردپرس متفاوت است. افزونه های جاوا اسکریپت (کتابخانه ها) در قسمت front-end اجرا می شوند، در حالی که افزونه های وردپرس در back-end اجرا می شوند.

می توانید افزونه های وردپرس را از منوی افزونه ها در قسمت مدیریت وردپرس خود نصب کنید. با این حال افزونه های جاوا اسکریپت (یا jQuery) باید در سرور شما در پوشه قالب شما بارگذاری شوند (معمولاً در مسیر /wp-content/themes/your-theme/).

2. ایجاد قالب فرزند (CHILD THEME)

از آنجا که Intense Images یک کتابخانه جاوا اسکریپت است که در قسمت front-end اجرا می شود، باید آن را به پوشه قالب خود اضافه کنید. به این ترتیب کتابخانه خارجی به قالب شما متصل می شود. اگر قالب جدیدی را فعال کرده اید و هنوز می خواهید از قابلیت آن استفاده کنید، باید کتابخانه را نیز به قالب جدید اضافه کنید.

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

ابتدا به سرور خود متصل شوید و یک پوشه جدید در داخل پوشه قالب های خود ایجاد کنید (اگر مسیر را تغییر نداده اید، آن مسیر /wp-content /themes است). شما می توانید نام آن را هرطور که دوست دارید بگذارید، اما خوب است که به نوعی رابطه آن را با قالب اصلی نشان دهید. به عنوان مثال ما یک پوشه به نام twentyseventeen-child ایجاد می کنیم. این قالب فرزند تم Twenty Seventeen خواهد بود.

در داخل پوشه جدید، دو فایل ایجاد کنید: style.css و functions.php. فایل style.css را در ویرایشگر کد خود باز کرده و کد زیر را اضافه کنید:

/*
Theme Name: Twenty Seventeen Child
Theme URI: https://wordpress.org/themes/twentyseventeen/
Author: the WordPress Theme
Author URI: https://wordpress.org/
Description: Twenty Seventeen Child Theme
Template: twentyseventeen
Version: 1.7
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentyseventeen-child
*/

این کد CSS قالب فرزند را به قالب والد متصل می کند. توجه داشته باشید که قالب اصلی (در مثال بیست و هفده) نیز باید در داخل پوشه themes وجود داشته باشد، زیرا اینجاست که وردپرس استایل های پیش فرض قالب فرزند را از آنجا بیرون می آورد.

سپس کد PHP زیر را به فایل functions.php اضافه کنید:

<?php
/* Adds child theme */
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
   wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

این کد PHP قالب فرزند را ثبت و تقویت می کند تا پس زمینه وردپرس بتواند به آن دسترسی پیدا کند و شما بتوانید کتابخانه های جاوا اسکریپت خود را به اضافه کرده و از آن استفاده کنید. اکنون اگر روی گزینه "نمایش" منوی قالب ها در بخش ادمین وردپرس خود کلیک کنید، خواهید دید که قالب فرزند در میان تم های شما ظاهر شده است:

3. کتابخانه جاوا اسکریپت را دانلود کنید

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

themes/
    - twentyseventeen/
    - twentyseventeen-child/
         - scripts/
         - functions.php
         - style.css

اکنون کتابخانه جاوا اسکریپت شخص ثالث (Intense Images در مثال ما) را از پوشه اسکریپت ها در GitHub دانلود کنید. شما می توانید فایل ZIP را از GitHub دانلود کنید یا با استفاده از دستور زیر، منبع را کلون کنید:

git clone https://github.com/tholman/intense-images.git

پس از اتمام دانلود، ساختار فایل شما باید به این شکل باشد:

themes/
    - twentyseventeen/
    - twentyseventeen-child/
         - scripts/
                - intense-images/
         - functions.php
         - style.css

4. فراخوانی اسکریپت

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

در داخل پوشه اسکریپت ها یک فایل متنی جدید ایجاد کرده و آن را loader.js بنامید. می توانید از نام دیگری با پسوند .js نیز استفاده کنید. در ادامه نحوه تغییر ساختار فایل شما آورده شده است:

themes/
    - twentyseventeen/
    - twentyseventeen-child/
         - scripts/
                - intense-images/
                - loader.js
         - functions.php
         - style.css

فایل loader.js را در ویرایشگر کد خود باز کرده و کد زیر را اضافه کنید:

window.onload = function() {
    // Intensify all images on the page.
    var element = document.querySelectorAll( 'img' );
    Intense( element );
}

این کد افزونه Intense Images JavaScript را در page load بارگذاری می کند. اما چگونه می دانید از چه کدی برای فراخوانی اسکریپت استفاده کنید؟ اسناد کتابخانه GitHub (تقریبا) همیشه شامل اسکریپت هایی برای فراخوانی است که باید استفاده کنید.

برای مثال Intense Images سه گزینه در اختیار کاربران قرار می دهد. در قطعه کد بالا ما از اولین موردی که کتابخانه را به همه تصاویر اضافه می کند استفاده کرده ایم، اما دو گزینه دیگر نیز به همان خوبی کار می کنند.

5. اسکریپت ها را به FUNCTIONS.PHP اضافه کنید

در مراحل قبل، افزونه جاوا اسکریپت (intens-images/) و اسکریپت فراخوانی (loader.js) به قسمت front-end قالب فرزند شما اضافه شده است. با این حال شما همچنین باید اسکریپت ها را در backend ثبت و تقویت کنید (در مرحله 2، ما فقط قالب فرزند را ثبت کردیم و به آن اضافه کردیم اما اسکریپت ها را نه).

می توانید این کار را با افزودن کد زیر به فایل functions.php خود که در مرحله 2 ایجاد کرده اید، انجام دهید. دوباره آن را در ویرایشگر کد خود باز کرده و کد زیر را به انتهای فایل اضافه کنید:

/* Adds scripts */
add_action( 'wp_enqueue_scripts', 'add_scripts' );
function add_scripts() {
    wp_enqueue_script('intense-images', get_theme_file_uri( '/scripts/intense-images/intense.min.js'));
    wp_enqueue_script('loader', get_theme_file_uri( '/scripts/loader.js'), array('intense-images'));
}

این کد PHP هر دو کتابخانه Intense Images و loader.js را به قالب فرزند اضافه می کند. از تابع  ()wp_enqueue_script که بخشی از API وردپرس است استفاده می کند و اسکریپت های خارجی را ثبت و ضبط می کند. برای اطلاعات بیشتر به مقاله API چیست مراجعه کنید.

ما مجبور نیستیم کل کتابخانه Intense Images را اضافه کنیم، فقط فایل اسکریپت بهینه شده intensive.min.js لازم است. در مورد loader.js ما همچنین باید Intense Images (داخل یک آرایه) را به عنوان آرگومان اضافه کنیم، زیرا loader.js وابسته به کتابخانه Intense Images است. (توجه داشته باشید که اگر افزونه jQuery را اضافه کنید، باید jQuery را نیز به عنوان وابسته اضافه کنید.)

همچنین به مسیر مناسب فایل که به تابع ()get_theme_file_uri اضافه می کنید توجه کنید. این عملکرد نیز بخشی از API وردپرس است. این آدرس پوشه قالب شما (در مثال بیست و هفده فرزند) را بازیابی می کند. در اینجا ما از آن برای افزودن پویای مسیر های فایل متعلق به اسکریپت های خارجی استفاده می کنیم.

6. کتابخانه جاوا اسکریپت را تست کنید

کتابخانه جاوا اسکریپت شخص ثالث اکنون راه اندازی شده است. وقت آن است که تست کنیم و ببینیم آیا درست کار می کند یا خیر. بستگی به کتابخانه دارد که چگونه باید آن را تست کنید. در مثال ما Intense Images به سادگی خود را به تمام تصاویر موجود در سایت اضافه می کند، زیرا اینگونه است که ما آن را در loader.js تنظیم کرده ایم.

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

با کلیک روی آن، تصویر تمام صفحه می شود و با یک کلیک دوم، به اندازه اصلی خود برمی گردد:

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

نتیجه گیری

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

منبع: developerdrive.com