ওয়ার্ডপ্রেসে জ্যাকোয়েরির ক্যাচাল সমস্যা এবং সমাধান

অনেকদিন পর ব্লগটা আপডেট করতেছি, আশা করতেছি আপনারা যার যার প্রয়োজনমতো ভালো আছেন। কেউ একজন মেইল করে জানতে চাইছেন আমি দুনিয়াতে বেঁচে আছি কি না। হ্যাঁ ভাই আমি বেঁচে আছি। ধন্যবাদ খোঁজ নেয়ার জন্য। আর বেঁচে থাকার প্রমাণ স্বরুপ আজকের এই পোস্ট। :p :p :p :p

ওয়ার্ডপ্রেস থিম ডেভেলাপমেন্ট করতে গেলে প্রথমে যেই সমস্যা হয় সেটা হইতেছে জেকোয়েরীর ব্যাকডেটেড ভার্সন দেয়া। নানান সমস্যার এটাও একটা মেজর সমস্যা বটে। মোটামুটি সব ফ্রন্টেন্ড ফ্রেমওয়ার্কই ডিপেন্ডেসিতে জেকোয়েরি লেটেস্ট ভার্সন ইউজ করে। এটা মোটামুটি কাটিয়ে উঠা গেলেও একটা জায়গায় প্রবলেম থেকেই যায়। সেটা হচ্ছে ব্রাউজারের কনসোলে

TypeError: $ is not a function

আহা কনসোলে এমন ম্যাসেজ দেখার পরে কার ইচ্ছে করবে বেঁচে থাকতে বলেন? আপনি ইনস্পেক্ট করলেন নতুবা ভিউ সোর্স দিলেন, জেকোয়েরি পেলো কী না। সেখানেও দেখবেন মহামতি জেকোয়েরি লোড হয়ে বসে আছেন। কীয়েক্টাবস্তা বলেন তো।

গেলেন গুগলের কাছে, গুগল বলে দিবে, মিয়া $ সাইন বাদ দিয়া সেখানে লেখেন jQuery এবার গেলেন জাভাস্ক্রিপ্ট ফাইল এডিট করতে। সেখানে গিয়ে চৌক্ষে সরিষা ফুল দেখতে লাগলেন। সাহসে কোলাইতেছে না। এতো বড়ো ফাইল কেমনে কী করবেন। একবার ভাবলেন এক কমান্ড দিয়ে সব $ সাইন ধরে রিপ্লেস করাই যায়, কিন্তু সেটা করে এবার দেখলেন সবই ঠিক আছে কিন্তু কোড কাজ করতেছে না। কোনো এরর নাই কিন্তু এক্সপেক্টেড আউটপুটও নাই। এইবার কী করবেন? জাভাস্ক্রিপ্টের চৌদ্দগোষ্টি উদ্ধার করাই যায়, সাথে জেকোয়েরি আর ওয়ার্ডপ্রেস টিমের গুলারেও কী বলেন? ভাবা যায়! কতোটা খারাপ হইলে এমন একটা কিউট সমস্যায় ফেলে দিতে পারে এরা?

সে যাই হোক, এবার দেখি কতোভাবে সমাধান করা যায়।

মেথড ১

প্রথমে একটা ফাংশন ডিক্লেয়ার করে নিবেন আর সেটাতে প্যারামিটার হিসাবে $ সাইন বসিয়ে দিবেন। যেমন-

;(function ($) {
    $(window).on('load', function(){
        // Code to Execute
    });

    $(document).ready(function(){
        // Code to Execute
    });

}(jQuery()));

আপাতত আপনার সমস্যা সমাধান হয়ে যাওয়ার কথা। যদি আপনি মড্যুলার কোড লিখে না থাকেন।

মেথড ২

যদি আপনার কোড মড্যুলার হয়ে থাকে, কিংবা কপি পেস্ট করেছেন কোথাও থেকে কিন্তু বেচারা মড্যুলার কোড লিখে বসে আছে। কোড এতক্ষণ কাজ করতেছিলো কিন্তু এখন আর কাজ করে না। এমন পরিস্থিতিতে কী করবেন? খেয়াল করবেন মড্যুলার কোড অবজেক্ট বেসড হয়। সেখানে পুরো অবজেক্টটা ধরে একটা ফাংশনে ঢুকিয়ে দেন। যেমন-

let data = {
    init : function(){

    },
    anotherthing : function(){

    },
    oneanotherthing : function(){

    },
    andanotherone : function(){

    }
}
data.init();

যদি এমন কোড দেখতে পান তাহলে পুরোটারে ধইরা একটা ফাংশনের চিপায় ফালান আগে। যেমন-

function my_function(my_value){
    let data = {
        init: function () {

        },
        anotherthing: function () {

        },
        oneanotherthing: function () {

        },
        andanotherone: function () {

        }
    }
    my_value = data.init();
    return my_value();
}
my_function();

এইবার ফাংশনের ভিতরে একটা ভ্যারিয়েবল কল করেন $ সাইন, আর সেটার ভ্যালু পাস করে দেন jQuery.noConflict(); মানে পুরোটা মিলে হবে

function my_function(my_value){
    let $ = jQuery.noConflict();
    let data = {
        init: function () {

        },
        anotherthing: function () {

        },
        oneanotherthing: function () {

        },
        andanotherone: function () {

        }
    }
    my_value = data.init();
    return my_value();
}
my_function();

জেকোয়েরি লেটেস্ট ভার্সন ব্যবহার করা

এইবার আসেন কেমনে জেকোয়েরীর লেটেস্ট ভার্সন ইউজানো যায় সেটা দেখা যাক। ধরি আপনার থিমের /assets/vendor/jquery এই ফোল্ডারে আপনার জেকোয়েরি লেটেস্ট ভার্সনটা রাখা আছে। তো আমরা এবার এটাকে ফ্রন্টেন্ডে পাইয়ে দেব। তারজন্য কষ্টকরে আপনার থিমের ফাংশন ফাইলটা একটু কষ্ট করে অপেন করে নিতে হবে। এবং সেখান থেকে প্রথমে জেকোয়েরী ফাইলটা ডি-রেজিস্টার করে নিতে হবে।

wp_deregister_script('jquery');

এবার আপনার লোকাল ভার্সনটা রেজিস্টার করে নিতে হবে।

wp_register_script('jquery', get_template_directory_uri() . "/assets/vendor/jquery/jquery-3.3.1.min.js", array(), '3.1.1', true);

এবার বলে দিন আপনার থিমে নতুন জেকোয়েরিটা লাগবে। মানে এনকিউ করে নিন। এভাবে

wp_enqueue_script('jquery');

ব্যস হয়ে গেল লেটেস্ট ভার্সনের জেকোয়েরি। তবে ভাববেন না $ ক্যাচাল থেকে এইটার মাধ্যমে মুক্তি পাইয়া যাইবেন। ওয়ার্ডপ্রেসে অবশ্যই আপনাকে $ সাইনের পরিবর্তে jQuery ব্যবহার করা লাগবে। নতুবা ট্রিক্স কাজে লাগাতে হবে।

অবশ্যই জেকোয়েরী মাইগ্রেটের লেটেস্ট ভার্সনটা ব্যবহার করবেন।

লেটেস্ট ভার্সনের জেকোয়েরি মাইগ্রেট পাবেন এখানে

মুরুব্বী সমাধান হইব তো? হুর্মিয়া প্র্যাক্টিস কইরা তার্পর বলেন। দীর্ঘ একবছরেরও বেশী সময় পরে ব্লগে লেখলাম। এবং গুটেনবার্গ ব্যবহার করে এটাই আমার প্রথম পোস্ট। ভুলত্রুটি ক্ষমা সুন্দর দৃষ্টিতে দেখবেন আশা করছি। ধন্যবাদ