DEV Community

Zaw Htut Win
Zaw Htut Win

Posted on

WordPress သင်ခန်းစာ(For Advanced Learner) အခန်း(၃)

#wordpress

Custom javascript ထည့်ခြင်း

add_action('wp_head', 'my_inline_script');
function my_inline_script() {
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
                $('body').append('<h1">Hello World from functions.php</h1>');        
            });
        });
    </script>
    <?php
}
Enter fullscreen mode Exit fullscreen mode

လွန်ခဲ့တဲ့ အခန်း(၂)မှာ custom css ကို ထည့်တဲ့ပုံကို ပြခဲ့ပါတယ်။ အပေါ်က code ကတော့ custom javascript ကို ထည့်ပြထားတာပါ။ functions.php ရဲ့ အောက်ဆုံးမှာထည့်ရမှာဖြစ်ပါတယ်။ တစ်ခုချင်းခွဲရှင်းပြပါ့မယ်။

add_action('wp_head', 'my_inline_script');
Enter fullscreen mode Exit fullscreen mode

ဒီဟာကတော့ wp_head ဆိုတဲ့ hook မှာ ကျွန်တော်တို့ ကိုယ်ပိုင် function ဖြစ်တဲ့ my_inline_script ကိုထည့်ပေးမယ်လို့ ပြောပေးလိုက်တာပါ။

function my_inline_script() {
Enter fullscreen mode Exit fullscreen mode

ဒါကတော့ function ကို စ ကြေငြာလိုက်တာပါ။ my_inline_script လို့နာမည်ပေးထားပါတယ်။

function my_inline_script() {
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
                $('body').append('<h1">Hello from functions.php</h1>');
        });
    </script>
    <?php
}
Enter fullscreen mode Exit fullscreen mode

ဒီနေရာမှာ ?> နဲ့ <?php ဆိုတဲ့ အဖွင့်အပိတ်နှစ်ခုကြားထဲမှာ html output (ဒီနေရာမှာ script tag ) ကို ရေးထားတာကို သတိပြုမိမယ်ထင်ပါတယ်။ ဟုတ်ပါတယ်။ ?> နဲ့ <?php ကြားထဲမှာ တကယ်တော့ ကိုယ်ထုတ်ချင်တဲ့ html ကို ကြိုက်သလိုရေးလို့ ရပါတယ်။ လွန်ခဲ့တဲ့ အခန်း(၂) မှာ ဒါကို မရှင်းပြခဲ့လို့ ဒီမှာ ပြန်ရှင်းပြရခြင်း ဖြစ်ပါတယ်။

script က သိပ်အဆန်းအပြားကြီး မလုပ်ပါဘူး။ body မှာ h1 tag ထည့်ပေးလိုက်တာပါပဲ။ jQuery ကိုတော့ သိပြီးသားဖြစ်မယ်ထင်လို့ မရှင်းပြတော့ပါဘူး။

ဒီ code ကို run လိုက်ရင် "Hello from functions.php" ဆိုတဲ့ h1 tag ပေါ်လာမှာဖြစ်ပါတယ်။

ဒီတစ်ခါ နောက်တစ်ဆင့်တက်ပြီး ajax သုံးနည်းကို စရှင်းပြတော့မှာ ဖြစ်ပါတယ်။

Wordpress ရဲ့ functions.php နဲ့ ajax function

add_action('wp_ajax_get_remote_image', 'get_remote_image');
add_action('wp_ajax_nopriv_get_remote_image', 'get_remote_image');

function get_remote_image() {
       $response = "This will be the image later,hi from wordpress ajax function!";
    echo $response;
    wp_die();
}
add_action('wp_head', 'inline_remote_image_script');
function inline_remote_image_script() {
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $.ajax({
                url: '<?php echo admin_url('admin-ajax.php'); ?>',
                type: 'GET',
                data: {
                    action: 'get_remote_image'
                },
                success: function(response) {
                    if (response) {
                        console.log(response);
                        $('body').prepend("<h1>"+response+"</h1>");
                    }
                }
            });
        });
    </script>
    <?php
}
Enter fullscreen mode Exit fullscreen mode

ဒီနေရာမှာ ပထမဦးဆုံး wp_ajax_get_remote_image ဆိုတာကို တွေ့ပါလိမ့်မယ်။ wordpress မှာ ကိုယ့် ajax function ကို ကိုယ်ရေးချင်ရင် login ဝင်မထားတဲ့ user တွေအတွက် ဆိုရင်

wp_ajax_

login ဝင်မထားတဲ့ user တွေအတွက် ဆိုရင်

wp_ajax_nopriv_

ဆိုပြီး ရှေ့က prefix ထည့်ပေးရပါတယ်။ ဒီနေရာမှာ ကျွန်တော်တို့ရဲ့ ajax function name က get_remote_image ဖြစ်တဲ့ အတွက်
wp_ajax_get_remote_image
wp_ajax_nopriv_get_remote_image
ဆိုပြီးရေးလိုက်တာပါ။ နောက်က get_remote_image ကတော့ execute လုပ်မယ့် function name ပေါ့။ ဒီနေရာမှာ

နောက် တစ်ခုက jquery ကနေ ajax function ကို လှမ်းခေါ်တဲ့အခါမှာ အောက်ပါအတိုင်း ခေါ်ရပါတယ်။

            $.ajax({
                url: '<?php echo admin_url('admin-ajax.php'); ?>',
                type: 'GET',
                data: {
                    action: 'get_remote_image'
                },
Enter fullscreen mode Exit fullscreen mode

ဒီနေရာမှာ url က wordpress ajax ကိုခေါ်တော့မယ်ဆိုရင် ဒီပုံစံပါပဲ။ မပြောင်းပါဘူး။
data ရဲ့ action ဆိုတဲ့ parameter ကတော့ ကိုယ်ခေါ်ချင်တဲ့ wordpress ajax function ရဲ့ နာမည် ဖြစ်ဖို့ လိုပါတယ်။

ဒီနေရာမှာ action: 'get_remote_image' လို့ ပေးလိုက်ရင် functions.php ထဲက wp_ajax_get_remote_image နဲ့ wp_ajax_nopriv_get_remote_image ဆိုတဲ့ နေရာရောက်သွားပြီး ကိုယ်ရေးထားတဲ့ functions.php ထဲက ajax function ကို သွားခေါ်မှာပါ။

ဒီလောက်ဆိုရင် တော်တော်နားလည်လောက်ပြီထင်ပါတယ်။

အဲဒီတော့ အောက်က code က ဘာလုပ်တာလဲ ခန့်မှန်းကြည့်ပါဦး။

ခက်ခဲနေရင် သင်ခန်းစာ (၄) မှာ ရှင်းပြပါ့မယ်။

// AJAX handler for fetching remote JSON
add_action('wp_ajax_get_remote_image', 'get_remote_image');
add_action('wp_ajax_nopriv_get_remote_image', 'get_remote_image');

function get_remote_image() {
    $response = wp_remote_get('https://coffee.alexflipnote.dev/random.json'); // Replace with your JSON URL
    if (!is_wp_error($response)) {
        $body = wp_remote_retrieve_body($response);
        $data = json_decode($body);
        if ($data && isset($data->file)) {
            echo esc_url($data->file);
        }
    }
    wp_die();
}

// Inline script for fetching and displaying the remote image
add_action('wp_head', 'inline_remote_image_script');
function inline_remote_image_script() {
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $.ajax({
                url: '<?php echo admin_url('admin-ajax.php'); ?>',
                type: 'GET',
                data: {
                    action: 'get_remote_image'
                },
                success: function(response) {
                    if (response) {
                        $('body').prepend('<img src="' + response + '" alt="Remote Image">');
                    }
                }
            });
        });
    </script>
    <?php
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

ashraaafdev profile image

WordPress in a nutshell

Achraf Hebboul -

aiarnob profile image

How to Implement a WooCommerce AJAX Direct "Buy Now" Button

Md Aminur Islam -

richardevcom profile image

WordPress development environment with Docker

richardevcom -

chrisgen19 profile image

Understanding CSS Background Coloring for Nested Elements

chrisgen19 -