WordPress သင်ခန်းစာ(For Advanced Learner) အခန်း(၃)
Tags: wordpress
Published: 2024-02-14 10:51:22

**Custom javascript ထည့်ခြင်း**

```php
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
}
```

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


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


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

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

ဒီနေရာမှာ **?>** နဲ့ **<?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**

```php
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
}
```

ဒီနေရာမှာ ပထမဦးဆုံး 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 ကို လှမ်းခေါ်တဲ့အခါမှာ အောက်ပါအတိုင်း ခေါ်ရပါတယ်။

```javascript
            $.ajax({
                url: '<?php echo admin_url('admin-ajax.php'); ?>',
                type: 'GET',
                data: {
                    action: 'get_remote_image'
                },
```
                
 ဒီနေရာမှာ 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 က ဘာလုပ်တာလဲ ခန့်မှန်းကြည့်ပါဦး။ 

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

```php
// 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
}

```