ওয়ার্ডপ্রেস থিম এবং প্লাগিনে এজাক্সের ব্যবহার

অনেক সময় ব্রাউজার রিলোড ছাড়াই ওয়েবপেইজের কোন কনটেন্ট পরিবর্তন করতে আমাদের এজাক্স (AJAX – Asynchronous JavaScript and XML) ব্যবহার করতে হয়। কিন্তু সাধারণ ওয়েবসাইটে যে পদ্ধতিতে আমরা এজাক্স ব্যবহার করে থাকি ওয়ার্ডপ্রেস এ সেভাবে ব্যবহার করা যায়না। এজাক্স ব্যবহারের জন্য ওয়ার্ডপ্রেস এর নির্দিষ্ট পদ্ধতি অবলম্বন করতে হয়। চলুন তবে দেখে নিই কিভাবে আমরা কাজটি খুব সহজেই করতে পারিঃ

১। প্রথমেই জাভাস্ক্রিপ্টের কোডগুলো লিখার জন্য আমরা custom-js.js নামের একটি ফাইল নিয়ে নিলাম।

২। এবারে থিম/প্লাগিন এর কোন একটি ফাইলে (ধরে নিচ্ছি ফাইলটি function.php) নিচের কোডটুকু যুক্ত করে নিইঃ

<?php
// enqueue custom js files
function custom_ajax_script() {
   wp_enqueue_script( 'ajax-script', get_theme_file_uri( '/your/file/path/custom-js.js' ), array('jquery') );
    wp_localize_script( 'ajax-script', 'ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}
add_action( 'wp_enqueue_scripts', 'custom_ajax_script' );

// Php process
add_action( 'wp_ajax_ajax_script_process', 'ajax_script_process' );
add_action( 'wp_ajax_nopriv_ajax_script_process', 'ajax_script_process' );
function ajax_script_process() {
   $result = $_POST['whatever'];
   echo $result;
   wp_die();
}

লক্ষ্য করুনঃ এখানে প্রথম অংশে আমরা আমাদের জাভাস্ক্রিপ্ট ফাইলটিকে ওয়ার্ডপ্রেস এর সাথে যুক্ত করে নিলাম এবং সেটিতে ajax_object হিসেবে ওয়ার্ডপ্রেস এর ajax ফাইলটি যুক্ত করে দিলাম পরবর্তিতে ব্যবহারের জন্য।

দ্বিতীয় অংশে, আমরা ajax_script_process() নামের একটি ফাংশন নিলাম যেখানে আমাদের প্রয়োজনীয় কাজ সম্পন্ন করে আমরা তা জাভাস্ক্রিপ্টে রিটার্ন করতে পারি।

নোটঃ  /your/file/path/ অংশটুকু আপনার ফাইলের এর ডিরেক্টরি দ্বারা পরিবর্তন করে নিতে হবে।

৩। এবারে আমরা আমাদের তৈরিকৃত জাভাস্ক্রিপ্ট ফাইলে গিয়ে আমাদের প্রয়োজনীয় কোডগুলো লিখবঃ

jQuery(document).ready(function($) {

    // some data
    var x = 10;

    // ajax request
    $.ajax({
        type: "post",
        url: ajax_object.ajax_url,
        data: {
            'action': 'ajax_script_process', // function we created previously
            'whatever': x // passing this value to process
        },
        success: function(msg){
            // our result is returned into msg variable
            console.log(msg);
        }
    });
});

এবার যদি আপনি ফায়ারফক্স এর কনসোল ব্যবহার করেন তবে সেখানে আপনার কাঙ্ক্ষিত ফলাফল দেখতে পাবেন। আমাদের এই কোড অনুসারে ফলাফল হিসেবে আমরা 10 দেখতে পাব।

সবাইকে ধন্যবাদ জানিয়ে আজকের মত এখানেই শেষ করছি। খুব শীঘ্রই ফিরব অন্য কোন টিউটোরিয়াল নিয়ে, সবার জন্য শুভকামনা।

মোঃ আনিসুর রহমান ভূঁইয়া
তারিখঃ ২৩/১০/২০১৭ ইং

Topic: টিউটোরিয়াল