নির্ভরতা ছাড়াই wp_add_inline_script


11

আমার একটি জাভাস্ক্রিপ্ট স্নিপেট রয়েছে যা আমি পৃষ্ঠার ফুটারে ইনজেক্ট করতে চাই। এটি একটি ট্র্যাকিং কোড, আসুন গুগল অ্যানালিটিকাদের অনুরূপ বলা যাক। এটির কোনও নির্ভরতা নেই, এটি একটি স্বতন্ত্র স্নিপেট।

আমি এরকম কিছু করতে পারি

function render_tracking_code(){
    wp_enqueue_script( 'depends-js', 'https://rdiv.com/dummy.js', array(), '0.01', true );
    wp_add_inline_script( 'depends-js', 'aWholeBunchOfJavascriptCode' );
}
add_action( 'wp_enqueue_scripts', 'render_tracking_code' );

কিছুটা বোকা মনে হচ্ছে (dummy.js একটি ফাঁকা ফাইল), কিন্তু কাজ করে। নির্ভরতা এড়ানোর কোনও উপায় আছে কি?

উত্তর:


13

wp_add_inline_style() - নির্ভরতা ছাড়াই

wp_add_inline_style()একটি উৎস ফাইল নির্ভরতা ছাড়া ব্যবহার করা যাবে।

@ ফ্লিক্সের একটি উদাহরণ এখানে :

wp_register_style( 'dummy-handle', false );
wp_enqueue_style( 'dummy-handle' );
wp_add_inline_style( 'dummy-handle', '* { color: red; }' );

যেখানে আমরা এটিকে wp_enqueue_scriptsকর্মের দিকে ঠেলে দেব ।

wp_add_inline_script() - নির্ভরতা ছাড়াই

টিকিট # 43565 অনুসারে , অনুরূপ wp_add_inline_script()সংস্করণে সমর্থিত হবে (মন্তব্যে যাচাইয়ের জন্য @ মার্সিওডুয়ার্টে, @ ডেভ 101 এবং @ ডেভরোমসে ধন্যবাদ):4.9.9 5.0

wp_register_script( 'dummy-handle-header', '' );
wp_enqueue_script( 'dummy-handle-header' );
wp_add_inline_script( 'dummy-handle-header', 'console.log( "header" );' );

যা ট্যাগগুলির মধ্যে, অর্থাৎ শিরোনামে নিম্নলিখিতটি প্রদর্শন করবে <head>...</head>:

<script type='text/javascript'>
console.log( "header" );
</script>

এটি ফুটারে প্রদর্শন করতে :

wp_register_script( 'dummy-handle-footer', '', [], '', true );
wp_enqueue_script( 'dummy-handle-footer'  );
wp_add_inline_script( 'dummy-handle-footer', 'console.log( "footer" );' );

ডিফল্ট $positionইনপুট যুক্তি wp_add_inline_script()হল 'after''before'মান উপরে এটা ছাপে 'after'


wp_add_inline_script()ছাড়া নির্ভরতা এখনো 4.9.9 জন্য বিবেচনা করা হচ্ছে, এটা অগত্যা মানে এই নয় যে এটা যোগ করা হবে। সুতরাং এই বৈশিষ্ট্যটি ব্যবহারের আগে নিশ্চিতকরণের জন্য অপেক্ষা করা বুদ্ধিমানের কাজ।
মারসিও ডুয়ার্তে

1
আমরা ডাব্লুপি 5.0 হিসাবে যেতে ভাল ।
ডেভ রোমসে

কেউ আমার মন্তব্যটি এখান থেকে মুছে ফেলেছে (আমি বার্জিরের উত্তরটি নিশ্চিত করেছিলাম যে এটি আসলে ডাব্লুপি 5.0+ এ কাজ করে), এবং এক মাস পরে আমার আবার এই কোডটি দরকার হয়েছিল, গুগল করা হয়েছিল, এই উত্তরটি খুঁজে পেয়েছি, এক নজরে ছড়িয়েছি, আমার মন্তব্য খুঁজে না পেয়ে সরিয়ে নিয়েছি অন্যান্য ফলাফল। মাত্র এক ঘন্টা পরে, আমি এখানে ফিরে এসে বুঝতে পেরেছিলাম যে এই উত্তরটি আমি খুঁজছিলাম! মডারেটরের কাছে: দয়া করে আমার দরকারী মন্তব্যগুলি মুছবেন না, তারা কেবল আমার জন্য নয়, তারা আমার পাশাপাশি ভবিষ্যতের রেফারেন্স এবং অনুস্মারকও পরিবেশন করে। ধন্যবাদ.
dev101

দুর্ভাগ্যক্রমে আমাকে সংস্করণ 4.9.x সহ আঁকড়ে থাকতে হবে
লুকাস ভেন্দ্রমিনি

5

আপডেট: ওয়ার্ডপ্রেস v5.0 এ নির্ভরতা ছাড়াই ইনলাইন স্ক্রিপ্ট এবং শৈলী যুক্ত করার জন্য সমর্থন যুক্ত করেছে। বাস্তবায়নের জন্য @ বার্গিরের উত্তর দেখুন ।

ব্যবহার করার সময় wp_add_inline_script(), WP_Scripts::print_inline_script()শেষ পর্যন্ত ইনলাইন স্ক্রিপ্টগুলি আউটপুট ব্যবহার করা হবে। নকশা দ্বারা, print_inline_script()একটি বৈধ নির্ভরতা প্রয়োজন $handle,।

যেহেতু এই ক্ষেত্রে কোনও নির্ভরতা নেই, wp_add_inline_script()তাই কাজের জন্য সঠিক সরঞ্জাম নয়। একটি নকল নির্ভরতা ফাইল তৈরি করার পরিবর্তে (এবং অনাকাঙ্ক্ষিত অতিরিক্ত HTTP অনুরোধ), ইনলাইন স্ক্রিপ্টটি ব্যবহার wp_headবা wp_footerআউটপুট করতে:

add_action( 'wp_head', 'wpse_add_inline_script' );
function wpse_add_inline_script() {
  echo '<script>' . PHP_EOL;

  // aWholeBunchOfJavascriptCode

  echo '</script>' . PHP_EOL;
}

সাধারণত, জাভাস্ক্রিপ্ট একটি .jsফাইল যুক্ত করা উচিত এবং হুক ব্যবহার wp_enqueue_script()করে সারিবদ্ধ করা উচিত wp_enqueue_scripts। স্ক্রিপ্ট ব্যবহার করে ডেটা উপলব্ধ করা যেতে পারে wp_localize_script()। যদিও মাঝে মাঝে স্ক্রিপ্ট ইনলাইন যুক্ত করার প্রয়োজন হতে পারে।


0

এটি করার একটি উপায় হ'ল একটি ফাংশন তৈরি করা যা আপনার স্ক্রিপ্টটিকে কোনও <script>ট্যাগের মধ্যে প্রতিধ্বনিত করে এবং wp_print_footer_scriptsক্রিয়ায় আটকায় । আপনি কঠোরভাবে নিয়ন্ত্রণ করেন না এমন কোনও কিছু এড়াতে আপনার যত্ন নেওয়া উচিত তবে এটি সাধারণভাবে নিরাপদ এবং সহজ পদ্ধতি অন্যথায়।

উদাহরণ স্বরূপ:

add_action( 'wp_print_footer_scripts', function () { 
    ?>
    <script>
        (function myFunction() { 
            /* your code here */
        })();
    </script>
<?php 
} );
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.