কীভাবে jQuery এবং জাভাস্ক্রিপ্ট ফাইলগুলি সঠিকভাবে অন্তর্ভুক্ত করবেন?


16

আমি এখনই নিম্নলিখিত কোড সহ এটি করছি:

function uw_load_scripts() {
    // De-register the built in jQuery
    wp_deregister_script('jquery');
    // Register the CDN version
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', array(), null, false); 
    // Load it in your theme
    wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'uw_load_scripts' );

এটি কাজ করে, তবে আমি কি প্রত্যেকের জন্য এটি করা উচিত, বা প্রত্যেকের পক্ষে অ্যাডমিন (যাতে ব্যাকএন্ডটি ওয়ার্ডপ্রেস সংস্করণ ব্যবহার করে?):

if (function_exists('load_my_scripts')) {  
function load_my_scripts() {  
    if (!is_admin()) {  
    wp_deregister_script( 'jquery' );  
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', array(), null, false); 
    wp_enqueue_script('jquery');   
    }  
}  
}  
add_action('init', 'load_my_scripts');

এই সংস্করণটি আসলে কোনওভাবেই কাজ করে না, আমি ওয়ার্ডপ্রেস jQuery- সংস্করণ পেয়েছি এবং গুগলও নয়।

সুতরাং, আমি কি আদৌ ওয়ার্ডপ্রেস অন্তর্ভুক্ত jQuery নিবন্ধন করা উচিত?

এছাড়াও, আমি কীভাবে আমার নিজের স্ক্রিপ্টগুলি (স্লাইডার স্ক্রিপ্টস, মডার্নিজার এবং আমার নিজস্ব কাস্টম.জে) সঠিক উপায়ে যুক্ত করব? আমি অনুমান করি যে আমি এটিগুলি ফাংশন.এফপি এর মাধ্যমে করব এবং শিরোনামে নয় যেমন আমি এখন এটি করছি তবে আমি কীভাবে এটি করব তা সম্পর্কে আমি নিশ্চিত নই।

উত্তর:


20

থাম্বের প্রথম নিয়ম: কোর-বান্ডিল স্ক্রিপ্টগুলি নিবন্ধভুক্ত করবেন না এবং অন্যান্য সংস্করণগুলির সাথে প্রতিস্থাপন করবেন না, যদি না আপনি নিশ্চিত হন যে কোনও থিম, প্লাগইন বা কোর নিজেই সংস্করণ পরিবর্তনের কারণে ভেঙে যাবে না। সত্যই, যদি না আপনার একেবারে একটি কোর-বান্ডিল স্ক্রিপ্টের বিকল্প সংস্করণ প্রয়োজন , কেবল কোর দিয়ে বান্ডিল করা জিনিসটি ব্যবহার করুন।

দ্বিতীয়ত, আমি দৃঢ়ভাবে মধ্যে hooking সুপারিশ wp_enqueue_scriptsস্ক্রিপ্ট নিবন্ধন ও, enqueueing বদলে জন্য init। (এটি এতে কাজ করে initতবে অন্যদের সাথে একটি প্লে-চমত্কারভাবে দেখায়, সর্বাধিক শব্দার্থিকভাবে সঠিক হুক ব্যবহার করা ভাল))

তৃতীয়ত, আপনার নিজস্ব কাস্টম স্ক্রিপ্টগুলি সজ্জিত করতে, আপনি উপরের মতো একই পদ্ধতি ব্যবহার করেন:

<?php
function wpse45437_enqueue_scripts() {
    if ( ! is_admin() ) {
        $script_path = get_template_directory_uri() . '/js/';
        // Enqueue slider script
        wp_enqueue_script( 'wpse45437_slider', $script_path . 'slider.js', array( 'jquery' ) );
        // Enqueue modernizr script
        wp_enqueue_script( 'wpse45437_modernizr', $script_path . 'modernizr.js', array( 'jquery' ) );
    }
}
add_action( 'wp_enqueue_scripts', 'wpse45437_enqueue_scripts' );
?>

আপনার সারিবদ্ধ করার জন্য যা কিছু স্ক্রিপ্ট দরকার তা যোগ করুন।


4
একেবারে প্রয়োজন +1 ! অনেকগুলি (সাধারণত 'প্রিমিয়াম') থিমগুলি jQuery এর পুরানো সংস্করণটি নিবন্ধ করে। এটি প্লাগ-ইনগুলি ভেঙে দেয়।
স্টিফেন হ্যারিস

এই স্ক্রিপ্টটি আমার ফাংশন ফাইলে যুক্ত করা (পিএইচপি ঘোষণা ছাড়াই তারা ইতিমধ্যে রয়েছে) আমাকে একটি 'এইচটিপি-ত্রুটি 500 (অভ্যন্তরীণ সার্ভার ত্রুটি)' দেয়। কোথাও কোন ত্রুটি আছে?
জোহান দহল

হ্যাঁ; wp_enqueue_script()কলগুলিতে একটি সিনট্যাক্স ত্রুটি ছিল ।
চিপ বেনেট

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

আপনি অবশ্যই পাদলেখ সজ্জিত করতে পারেন। $in_footerআপনার কলটিতে কেবলমাত্র পরামিতিটিকে সত্য করে দিন wp_enqueue_script()
চিপ বেনেট

4

আশা করি এটি wp_enqueue_scriptsআরও তথ্যের জন্য কোডেক্স সন্ধান করবে ।

  1. আত ব্যবহার initকরতে সারিবদ্ধ । ব্যবহারের wp_enqueue_scriptsফ্রন্ট-এন্ড কাপড় এবং admin_enqueue_scriptsঅ্যাডমিন পাশ জন্য। আপনি ব্যবহার করতে পারেন initথেকে রেজিস্টার যদিও স্ক্রিপ্ট।
  2. হুক wp_enqueue_scriptsকেবল ফ্রন্ট-এন্ডে আগুন দেয় (এবং লগ-ইন পৃষ্ঠায় নয়) - যাতে আপনাকে চেক করতে হবে না is_admin()
  3. অন্যথায় আপনার নির্দিষ্ট কারণ না থাকলে আমি থিমগুলিরfunctions.php জন্য বা অন্যথায় প্লাগ-ইন ব্যবহার করে নিবন্ধ এবং ক্রিউটিং স্ক্রিপ্টগুলির পরামর্শ দেব । আপনি সহজভাবে লিখুন:

     function myprefix_load_scripts() {
       // Load scripts here
     }
     add_action( 'wp_enqueue_scripts', 'myprefix_load_scripts' );
  4. শর্টকোড ব্যবহার করার সময় যদি কোনও স্ক্রিপ্ট সজ্জিত করার লক্ষ্য থাকে, আপনি wp_enqueue_scriptপ্রয়োজন হলে কেবল সারি করার জন্য শর্টকোড কলব্যাকে ব্যবহার করতে ইচ্ছুক হতে পারেন (এটি এটি 3.3 সাল থেকে ফুটারে মুদ্রণ করবে )।

  5. আপনার অ্যাডমিন দিকের বিদ্যমান jQuery পুনরায় নিবন্ধভুক্ত করা উচিত নয়। আপনি কিছু ভঙ্গ করতে পারেন: ডি।

  6. প্লাগ-ইনগুলি বিদ্যমান জিকুয়েরিকে পুনরায় নিবন্ধভুক্ত করা উচিত নয়

  7. আপনার পুনরায় নিবন্ধন করার জন্য jQuery এর উপকারিতা এবং কৌতূহলগুলি আপ করা উচিত। উদাহরণস্বরূপ, আপনি যদি কোনও পুরানো সংস্করণ নিবন্ধ করেন তবে এটি কিছু প্লাগইনগুলি ভেঙে ফেলতে পারে (সম্ভবত এখনই নয়, তবে ভবিষ্যতে ...)


1
বিজ্ঞাপন 5) পুনরায় নিবন্ধন করা কোন বিষয় নয়। এজন্যই আমরা এনকুই পেয়েছি এবং ফাংশনগুলি রেজিস্টার করেছি। :)
কায়সার

2

যথাযথ সতর্কতা: আপনার নিজের পক্ষে ডাব্লুপিপি'র প্যাকেজড ভার্সনটি jQuery এর নথিভুক্তকরণ সমস্যার কারণ হতে পারে, বিশেষত যদি আপনি যখন যে সংস্করণটির দিকে ইঙ্গিত করছেন সেটিকে পরিবর্তন করার বিষয়ে অতিরিক্ত যত্নবান না হন তবে যখনই ডাব্লুপি এর সংস্করণ আপডেট করে। এটি প্লাগইনগুলির দ্বিগুণ হয়ে যায়, যা jQuery এর ডাব্লুপি সংস্করণে সর্বাধিক সামঞ্জস্যের জন্য প্রায়শই (বা প্রায়শই অন্তত) তাদের প্লাগইনগুলি লিখতে পারে।

এটি বলেছিল, আপনার প্রথম সংস্করণটি সঠিক - এটিতে আবদ্ধ wp_enqueue_scripts। আপনার দ্বিতীয় ফাংশনটি এঁকে দেওয়া হয়েছে init, যার কারণ এটি সঠিকভাবে কাজ করছে না।

একইভাবে আপনার নিজের স্ক্রিপ্ট যুক্ত করুন:

function bbg_enqueue_scripts() {
    // You should probably do some checking to see what page you're on, so that your
    // script only loads when it needs to
    wp_enqueue_script( 'bbg-scripts', get_stylesheet_directory_url() . '/js/bbg-scripts.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'bbg_enqueue_scripts' );

আমি এখানে ধরে নিচ্ছি যে আপনি jsআপনার বর্তমান থিম ডিরেক্টরিতে কোনও ডিরেক্টরি থেকে স্ক্রিপ্টগুলি লোড করছেন ; যদি এটি সত্য না হয় তবে ইউআরআই প্যারামিটারটি পরিবর্তন করুন। তৃতীয় প্যারামিটারটি নির্ভর করে array( 'jquery' )যে এটি bbg-scriptsনির্ভর করে jqueryএবং এরপরে লোড করা উচিত। আরও তথ্যের জন্য https://codex.wordpress.org/Function_References/wp_enqueue_script দেখুন ।


1
if (function_exists('load_my_scripts')) {  
function load_my_scripts() {  
    if (!is_admin()) {  
    wp_deregister_script( 'jquery' );  
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', array(), null, false); 
    wp_enqueue_script('jquery');   
    }  
}  
}  
add_action('init', 'load_my_scripts');

এটি কিছুই করতে যাচ্ছে না ... আমার সন্দেহ হচ্ছে আপনি বলতে চাইছেন

if (!function_exists('load_my_scripts')) {

আপনার উদাহরণটি কেবলমাত্র ফাংশন লোড_মি_স্ক্রিপ্টগুলি লোড করবে যদি এটি ইতিমধ্যে বিদ্যমান থাকে (যা এটি এটি করে না এবং যদি এটি করে তবে এটি একটি ত্রুটি তৈরি করবে)


0

যদি পারফরম্যান্সের কারণে, আপনি সিডিএন থেকে জ্যাকোয়ারি এবং অন্যান্য কোর জেএস-ফাইলগুলি লোড করতে চান, তবে নিশ্চিত করুন যে আপনি মূল এবং প্লাগইন ফাংশনগুলির সাথে ঘৃণিত জিনিসগুলি ঘটতে রোধ করতে একই সংস্করণটি লোড করছেন। এটার মত:

$wp_jquery_version = $GLOBALS['wp_scripts']->registered['jquery-core']->ver;
$jquery_version = ( $wp_jquery_version == '' ) ? '1.8.3' : $wp_jquery_version; // fallback, just in case 
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/'. $jquery_version .'/jquery.min.js', $jquery_version, false );
wp_enqueue_script('jquery');

-2

Jquery লোড করার জন্য সমস্ত বিবিধ পদ্ধতি পরীক্ষা করার পরে (কেবলমাত্র এই পোস্টে নয়), আমি বুঝতে পেরেছিলাম যে এগুলির কোনওটিই এগুলি করে না:

  1. কোনও ফাংশন ব্যবহার করে jquery (এবং সম্ভবত এনকুই) নিবন্ধন করুন, যাতে এটি প্লাগইনগুলি ব্যবহার করতে পারে।
  2. প্রোটোকল সম্পর্কিত ইউআরএল দিয়ে এটি গুগল সিডিএন থেকে লোড করুন।
  3. গুগল অফলাইন থাকলে স্থানীয় অনুলিপিটিতে ফলব্যাক।

তালিকায় এইগুলির কয়েকটি করে প্রচুর বিকল্প সংস্করণ রয়েছে তবে সবগুলি নয়, তাই আমি আমার সংস্করণটি ইতিমধ্যে উপলভ্য কয়েকটি পদ্ধতির সংশ্লেষ এবং সংশোধন লিখেছি। এটা এখানে:

function nautilus7_enqueue_scripts() {

    // Load jquery from Google CDN (protocol relative) with local fallback when not available
    if ( false === ( $url = get_transient('jquery_url') ) ) {

        // Check if Google CDN is working
        $url = ( is_ssl() ? 'https:' : 'http:' ) . '//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js';
        $resp = wp_remote_head($url);

        // Load local jquery if Google down
        if ( is_wp_error($resp) || 200 != $resp['response']['code'] ) {

            $url = get_template_directory_uri() . '/js/vendor/jquery-1.7.2.min.js';
        }

        // Cache the result for 5 minutes to save bandwidth
        set_transient('jquery_url', $url, 60*5);
    }

    // Deregister Wordpress' jquery and register theme's copy in the footer
    wp_deregister_script('jquery');
    wp_register_script('jquery', $url, array(), null, true);

    // Load other theme scripts here

}
add_action('wp_enqueue_scripts', 'nautilus7_enqueue_scripts');

ব্যান্ডউইদথ সংরক্ষণ করার জন্য এবং প্রতিবার পৃষ্ঠাটি পুনরায় লোড করার সময় গুগলকে পিং না দেওয়ার জন্য ওয়ার্ডপ্রেস ট্রান্সিয়েন্ট এপিআই ব্যবহার করে 5 মিনিটের জন্য গুগল সিডিএন অনলাইনে রয়েছে কিনা তা মনে পড়ে।


প্রস্তাবিত নয়। ওয়ার্ডপ্রেসটি যে সঠিক jQuery সংস্করণ ব্যবহার করছে তা মেলতে এখন আপনাকে প্রতিটি ওয়ার্ডপ্রেস আপডেটের পরে স্ক্রিপ্টটি আপডেট করতে হবে। এছাড়াও, গুগল কিছু ক্ষেত্রে লাইব্রেরিটি সংকুচিত করতে ব্যর্থ হয়েছে, সুতরাং আপনার পৃষ্ঠাটি এখন ধীরে ধীরে লোড হচ্ছে।
ফুসিয়া

আমি ওয়ার্ডপ্রেসের জ্যাকারি ব্যবহার করছি না। দয়া করে কোডটি পড়ুন। আমি থিমটির সংস্করণ ব্যবহার করছি। এবং যদি আপনি গুগল পছন্দ করেন না, আপনি অন্য সিডিএন ব্যবহার করতে পারেন।
nautilus7

তবে এটি হ'ল সংস্করণটি সঠিক কিনা তা নিশ্চিত করতে আপনার ওয়ার্ডপ্রেস jQuery ব্যবহার করা উচিত।
ফুসিয়া

আমি তোমাকে অনুসরণ করি না আমি গুগল থেকে আমার প্রয়োজনীয় সংস্করণটি গ্রহন করি এবং আমি আমার থিমের সাথে একই সংস্করণটি বান্ডিল করি। সবাই এভাবেই করছে। ওয়ার্ডপ্রেসটি (অ্যাডমিন বিভাগে) এর সাথে যে সংস্করণই আসুক ব্যবহার করতে পারে।
নটিসিয়াস

1
আপনি যে কোনও jQuery এর সংস্করণ চান তা ব্যবহার করতে পারেন তবে আপনি যদি এটি কোনও থিমের সাথে বান্ডিল করেন তবে আপনি এটি আপনার ব্যবহারকারীদের উপর চাপিয়ে দিচ্ছেন। এখন থেকে কয়েক বছর পরে যখনই সবাই jQuery 1.8.2 ব্যবহার করছেন আপনার ব্যবহারকারীরা থিমটি আপ টু ডেট না রাখে তারা পুরানো সংস্করণে আটকে থাকবে।
ক্রিস_ও
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.