নির্ভরতার কারণে ডাব্লুপি এনভ্যূনলাইন স্ক্রিপ্ট


35

ইনলাইন স্ক্রিপ্টগুলির জন্য wp_enqueue_script () ব্যবহার করার কোনও উপায় আছে কি?

আমি এটি করছি কারণ আমার ইনলাইন স্ক্রিপ্টটি অন্য স্ক্রিপ্টের উপর নির্ভর করে এবং আমি এটি লোড হওয়ার পরে এটি ofোকানোর নমনীয়তাটি চাই।

এছাড়াও, এটি একটি ইনলাইন স্ক্রিপ্ট কারণ আমি জাভাস্ক্রিপ্টে পিএইচপি ভেরিয়েবলগুলি পার করছি (থিমের পথ ইত্যাদি)

আগাম ধন্যবাদ.

উত্তর:


33

ঠিক আছে, আপনার wp_localize_script () আছে, তবে এটি কেবল ডেটা পাস করার জন্য।

অন্যথায়, আপনি এটি করতে পারেন:

function print_my_inline_script() {
  if ( wp_script_is( 'some-script-handle', 'done' ) ) {
?>
<script type="text/javascript">
// js code goes here
</script>
<?php
  }
}
add_action( 'wp_footer', 'print_my_inline_script' );

ধারণাটি হ'ল আপনার অনুলিপি স্ক্রিপ্টটি যে স্ক্রিপ্টের উপর নির্ভর করে তার ঠিক পরে মুদ্রিত হওয়ার পরে আপনি তার উপর নির্ভর করবেন না later


4
অবশ্যই এটি কেবল তখনই কাজ করে যদি আপনি নির্ভর করে থাকা স্ক্রিপ্টটি ইতিমধ্যে আউটপুট হয়ে গেছে? আপনি যে স্ক্রিপ্টটির উপর নির্ভর করছেন তা যদি wp_footer এও নিবন্ধভুক্ত হয় এবং ইনলাইন স্ক্রিপ্ট কোডের পরে কার্যকর করা হয় তবে ইনলাইন স্ক্রিপ্টটি ক্লায়েন্টকে সহজভাবে লিখিত হবে না এবং তাই কার্যকর করা হবে?
স্যাম প্যালিজি

6
ওয়ার্ডপ্রেস ৪.৫ হিসাবে আপনি ওয়ার্ডপ্রেস wp_add_inline_script() জ্যাকোরি দিয়ে wp_add_inline_script
ধিনজু দিবাকরণ

7

কেবল এটিকে একটি ইনলাইন স্ক্রিপ্ট তৈরি করবেন না এবং তারপরে এটি পরিবর্তনশীল হিসাবে গতিশীল পরামিতিগুলি পাস করুন। কীভাবে কার্যকরভাবে এটি করা যায় সে সম্পর্কে অটো একটি দুর্দান্ত গাইড লিখেছেন

ওয়ার্ডপ্রেস ৩.৩ এটিকে আরও শক্তিশালী করে তুলবে: https://core.trac.wordpress.org/ticket/11520


7

এই সমাধানটি @ স্ক্রিবু'র উত্তরের অনুরূপ , তবে এটির রূপটি অনুসরণ করে wp_enquque_script()এবং স্ক্রিপ্টটি শিরোনামে রাখে যদি এর নির্ভরতাগুলি শিরোনামের অন্তর্ভুক্ত থাকে।

/**
 * Enqueue inline Javascript. @see wp_enqueue_script().
 * 
 * KNOWN BUG: Inline scripts cannot be enqueued before 
 *  any inline scripts it depends on, (unless they are
 *  placed in header, and the dependant in footer).
 * 
 * @param string      $handle    Identifying name for script
 * @param string      $src       The JavaScript code
 * @param array       $deps      (optional) Array of script names on which this script depends
 * @param bool        $in_footer (optional) Whether to enqueue the script before </head> or before </body> 
 * 
 * @return null
 */
function enqueue_inline_script( $handle, $js, $deps = array(), $in_footer = false ){
    // Callback for printing inline script.
    $cb = function()use( $handle, $js ){
        // Ensure script is only included once.
        if( wp_script_is( $handle, 'done' ) )
            return;
        // Print script & mark it as included.
        echo "<script type=\"text/javascript\" id=\"js-$handle\">\n$js\n</script>\n";
        global $wp_scripts;
        $wp_scripts->done[] = $handle;
    };
    // (`wp_print_scripts` is called in header and footer, but $cb has re-inclusion protection.)
    $hook = $in_footer ? 'wp_print_footer_scripts' : 'wp_print_scripts';

    // If no dependencies, simply hook into header or footer.
    if( empty($deps)){
        add_action( $hook, $cb );
        return;
    }

    // Delay printing script until all dependencies have been included.
    $cb_maybe = function()use( $deps, $in_footer, $cb, &$cb_maybe ){
        foreach( $deps as &$dep ){
            if( !wp_script_is( $dep, 'done' ) ){
                // Dependencies not included in head, try again in footer.
                if( ! $in_footer ){
                    add_action( 'wp_print_footer_scripts', $cb_maybe, 11 );
                }
                else{
                    // Dependencies were not included in `wp_head` or `wp_footer`.
                }
                return;
            }
        }
        call_user_func( $cb );
    };
    add_action( $hook, $cb_maybe, 0 );
}

// Usage
enqueue_inline_script('test','alert(\'enqueue inline script test\');',array( 'jquery'));

দ্রষ্টব্য: এটি বেনামী ফাংশনগুলির ব্যবহার করে তবে পিএইচপি সংস্করণগুলির 5.3 এর আগে এটি সহজেই কোনও শ্রেণিতে রূপান্তরিত হতে পারে।


5

ওয়ার্ডপ্রেস ৪.৪ থেকে আপনি wp_add_inline_script () ব্যবহার করতে পারেন :

add_action( 'wp_enqueue_scripts', 'cyb_enqueue_scripts' );
function cyb_enqueue_scripts() {
   wp_enqueue_script( 'myscript', 'url/to/myscript.js', array(), '1.0' );
   wp_add_inline_script( 'myscript', 'Your inline javascript code gos here' );
}

4

wp_localize_script()@ স্ক্রিবুর পরামর্শ অনুসারে, আরও ভাল উপায় আমি খুঁজে পেয়েছি ।

সাধারণত, আমি অন-লাইন জাভাস্ক্রিপ্ট ব্যবহার করার সিদ্ধান্ত নিয়েছিলাম কারণ আমার স্ক্রিপ্টে আমাকে কিছু পিএইচপি ভেরিয়েবল সরবরাহ করা প্রয়োজন। এটি দিয়ে সমাধান করা যেতে পারে wp_localize_script()। আমি একটি উদাহরণ প্রদান করব:

আপনার একটি অ্যারে আছে $aFoo কিছু বিকল্প সহ রয়েছে এবং এটি কোনও স্ক্রিপ্টে পাস করা দরকার।

$aFoo = array( 'option1' => $option1Value, 'option2' => $option2Value ); 

ইন-লাইন স্ক্রিপ্ট ব্যবহার:

<script> 
    var oFoo = {};
    oFoo.option1 = <?php echo $aFoo['option1'] ?>;  
    oFoo.option2 = <?php echo $aFoo['option2'] ?>;            
    //do some stuff with oFoo
</script>

ব্যবহার wp_localize_script() :

wp_register_script( 'script_name', 'pathToScript/script.js', array( 'jquery' )); //if jQuery is not needed just remove the last argument. 
wp_localize_script( 'script_name', 'object_name', $aFoo ); //pass 'object_name' to script.js
wp_enqueue_script( 'script_name' );    

তারপর, pathToScript/script.js হবে:

var oFoo = {};
oFoo.option1 = object_name.option1;   
oFoo.option2 = object_name.option2;            
//do some stuff with oFoo (no PHP needed)

এইভাবে আপনার আর ইন-লাইন স্ক্রিপ্টগুলির দরকার নেই।


3

স্ক্রিবু একদম সঠিক। যাইহোক, আমি কিছু তথ্য যুক্ত করতে চাই:

আমি আমার ফাংশনটি একবারে কোনও স্ক্রিপ্ট আউটপুট করতে চাই, এটি যতবারই বলা হোক না কেন। এটি একটি বিষয়বস্তু সম্পর্কিত ফাংশন, তাই আমি কোনও হুকের জন্য অপেক্ষা করতে পারি না। আমি স্ক্রিবাস ইনফোস এবং ডাব্লুপি কোরের কিছু পাঠ ব্যবহার করেছি এটির সাথে:

function print_script_once() {
    if(!wp_script_is('my-handle', 'done')) {
        echo "<script>alert('once!');</script>";
        global $wp_scripts;
        $wp_scripts->done[] = 'my-handle';
    }
}
add_action('get_footer', print_script_once);

এই পদ্ধতিটি ব্যবহার করে আমি একবার ইনলাইন স্ক্রিপ্ট মুদ্রণ করতে সক্ষম আমার ক্ষেত্রে আমার একটি ফাংশন রয়েছে যা একটি শেয়ার-বোতাম তৈরি করে এবং সমস্ত বোতামের জন্য কার্যকর করার জন্য একটি স্ক্রিপ্ট দরকার। তবে কেবল একবার।


echoইনলাইন স্ক্রিপ্ট পদ্ধতির কিভাবে কুড়ি সেভেনটিন থিম এক পর্যায়ে অন্তত নির্মাণ করা হয়েছিল হয়। এবং আমি এই কৌশলটিও ব্যবহার করি। দুর্দান্ত কাজ করে এবং আপনাকে বিভিন্ন জায়গায় .ুকতে দেয়।
জোশ হাবদাস
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.