আমি কীভাবে ওয়ার্ডপ্রেসে একটি সাধারণ জিকুয়ের স্ক্রিপ্ট যুক্ত করব?


121

আমি ওয়ার্ডপ্রেসে jQuery ব্যবহার সম্পর্কে কোডেক্স এবং কয়েকটি ব্লগ পোস্ট পড়েছি এবং এটির খুব হতাশাজনক। আমি functions.phpফাইলে jQuery লোড করার পরিমাণ পেয়েছি তবে সেখানে উপস্থিত সমস্ত গাইডের কৃপণতা রয়েছে কারণ তারা ধরে নিয়েছে যে আপনার কাছে ইতিমধ্যে ওয়ার্ডপ্রেস অভিজ্ঞতা রয়েছে। উদাহরণস্বরূপ, তারা বলে যে এখন আমি functions.phpফাইলের মাধ্যমে jQuery লোড করছি , এখন আমাকে যা করতে হবে তা হল আমার jQuery লোড করা।

আমি ঠিক কীভাবে এটি করব? বিশেষত কোন ফাইলগুলিতে আমি কোড যুক্ত করব? একটি একক ওয়ার্ডপ্রেস পৃষ্ঠার জন্য আমি কীভাবে এটি যুক্ত করব?


3
আপনি কী চেষ্টা করেছেন যা আপনাকে ভাবতে বাধ্য করে যে সেখানে উপস্থিত সমস্ত গাইড ক্রেডি আছে?
undefined

1
ইন যা এ পথ প্রদর্শক যা ধাপে আপনি পাতিত হয়নি যা সমস্যা?
পিক্সেলিসটিক

আপনি নির্দিষ্ট হতে পারেন? আপনি কি চেষ্টা করেছেন এবং কাজ করেননি?
আহমেদ ফুয়াদ

4
আমি @ সিটিজেনের সাথে একমত, প্রথমে এটি একটি খনি ক্ষেত্রটি বোঝার জন্য প্রথমে ওয়ার্ডপ্রেসের সাথে কী করা উচিত, কারণ অনলাইনে পাওয়া কিছু গাইডের নির্দেশিকাগুলি প্রাথমিকভাবে নির্দেশিকাগুলির পক্ষে খুব ভাল নয়।
হ্যারি

উত্তর:


192

টিউটোরিয়ালগুলি সম্পর্কে আপনি কী বোঝাতে চেয়েছেন তা আমি জানি। আমি এটি কীভাবে করব তা এখানে:

প্রথমে আপনার স্ক্রিপ্টটি লিখতে হবে। আপনার থিম ফোল্ডারে একটি ফোল্ডার তৈরি করুন যা 'জেএস' এর মতো কিছু বলে। আপনার জাভাস্ক্রিপ্টের জন্য সেই ফোল্ডারে একটি ফাইল তৈরি করুন। যেমন আপনার স্ক্রিপ্ট.জেএস। আপনার jQuery স্ক্রিপ্টটি সেই ফাইলে যুক্ত করুন (আপনার <script>একটি .js ফাইলে ট্যাগ লাগবে না )।

আপনার jQuery স্ক্রিপ্ট (ডাব্লুপি-বিষয়বস্তু / থিম / আপনার থিম / জেএস / আপনার-স্ক্র্যাপিপ.জেজে) কীভাবে দেখতে পারে তার একটি উদাহরণ এখানে রয়েছে:

jQuery(document).ready(function($) {
  $('#nav a').last().addClass('last');
})

খেয়াল করুন যে আমি jQuery ব্যবহার করি j ফাংশনের শুরুতে।

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

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_enqueue_script(
        'your-script', // name your script so that you can attach other scripts and de-register, etc.
        get_template_directory_uri() . '/js/your-script.js', // this is the location of your script file
        array('jquery') // this array lists the scripts upon which your script depends
    );
}

ধরে নিচ্ছি যে আপনার থিমটির সঠিক জায়গায় wp_head এবং wp_footer রয়েছে, এটি কাজ করা উচিত। আপনার যদি আরও কোনও সাহায্যের প্রয়োজন হয় তবে আমাকে জানান।

ওয়ার্ডপ্রেস উত্তরগুলি ওয়ার্ডপ্রেস উত্তরগুলিতে জিজ্ঞাসা করা যেতে পারে ।


15
আমাকে অ্যাডঅ্যাকশন যুক্ত করতে হয়েছিল ('wp_enqueue_scriptts', 'add_my_script'); এটি লোড পেতে, কিন্তু এটি এখনও কাছাকাছি পরিষ্কার উত্তর।
এলে মুঞ্জেলি

আপনি কোন ফাইল এ যুক্ত করেছেন? @ ইলেমুনজেলি
ফ্রান্সিসকো

10
ধন্যবাদ, এলি মুঞ্জেলি, যোগ করার জন্য পরামর্শ দেওয়ার জন্য। ALSO: আপনি যদি চাইল্ড থিম নিয়ে কাজ করছেন তবে পরিবর্তে get_stylesheet_directory_uri ব্যবহার করুন।
স্ক্রিন্যাক

ধন্যবাদ মানুষ. আপনি
যে দিনটি স্নিগ্ধ করেছেন সেটিকে

এমনকি এটি অনুসরণ করেও আমি এখনও ত্রুটিগুলি গ্রহণ করছি Uncaught TypeError: Cannot read property 'fn' of undefinedএবং Uncaught TypeError: undefined is not a functionএমনকি যদি অন্য স্ক্রিপ্টটি ফাংশন ফাইলে সারিবদ্ধ করা হচ্ছে, এবং এটি দুর্দান্ত কাজ করে
লি

44

অনেক অনুসন্ধানের পরে, আমি অবশেষে এমন একটি জিনিস পেয়েছি যা সর্বশেষতম ওয়ার্ডপ্রেসের সাথে কাজ করে। এখানে অনুসরণের পদক্ষেপগুলি:

  1. আপনার থিমের ডিরেক্টরিটি সন্ধান করুন, আপনার কাস্টম জেএসের জন্য ডিরেক্টরিতে একটি ফোল্ডার তৈরি করুন ( এই উদাহরণে কাস্টম_জেএস) )।
  2. আপনার কাস্টম jQuery এই ডিরেক্টরিতে .js ফাইলে রাখুন ( উদাহরণ হিসাবে jquery_test.js) )।
  3. আপনার কাস্টম jQuery .js দেখতে এমন দেখাচ্ছে তা নিশ্চিত করুন:

    (function($) {
    $(document).ready(function() {
    $('.your-class').addClass('do-my-bidding');
    })
    })(jQuery);
  4. , থিমের ডিরেক্টরির যান খুলুন থিমের functions.php

  5. উপরের কাছাকাছি এমন কিছু কোড যুক্ত করুন যা দেখতে দেখতে:

    //this goes in functions.php near the top
    function my_scripts_method() {
    // register your script location, dependencies and version
       wp_register_script('custom_script',
       get_template_directory_uri() . '/custom_js/jquery_test.js',
       array('jquery'),
       '1.0' );
     // enqueue the script
      wp_enqueue_script('custom_script');
      }
    add_action('wp_enqueue_scripts', 'my_scripts_method');
  6. এটি কার্যকর হয় তা নিশ্চিত করার জন্য আপনার সাইটটি দেখুন!

8
ধন্যবাদ, এটি আমাকে অনেক সাহায্য করেছে! চাইল্ড থিম নিয়ে যে কেউ কাজ করছেন তার জন্য get_template_directory_uri () এর জায়গায় get_stylesheet_directory_uri () ব্যবহার করুন
ডেভিড তাইয়ারোয়া

ধাপে ধাপে এই ব্যাখ্যাটির জন্য ধন্যবাদ, স্ট্যান! (এবং শিশু থিম সহ এটি ব্যবহার সম্পর্কে নোট, @ ডেভিডটাইয়ারোয়া)
মার্চ

এটি দুর্দান্তভাবে কাজ করছে তবে একটি স্পেসিফিক পৃষ্ঠায় আমার কেবল এটি চালানো দরকার fire এটির পরিবর্তনের কোনও উপায় আছে যাতে এটি কেবল পৃষ্ঠায় চালিত হয়? বা সেই আচরণের জন্য কি সম্পূর্ণ আলাদা ডাব্লুপি ফাংশনের প্রয়োজন?
এইচপিডাব্লুডি

এটি করার সময় আমি আমার পৃষ্ঠায় jquery পেতে পারি তবে কনসোলে আমি একটি ত্রুটি পেয়েছি যা দেখে মনে হচ্ছে যে কোনও গুরুতর সমস্যা দেখা দিচ্ছে না: GET australiana.auspro.com.au/wp-conte/themes/twentytwenty/assets/… নেট :: ERR_ABORTED 404 (পাওয়া যায় নি) আমি কীভাবে এ থেকে মুক্তি পেতে পারি?
রেজেজ নেট

8

আপনি যদি আপনার থিমটিতে স্ক্রিপ্ট যুক্ত করার জন্য ওয়ার্ডপ্রেস চাইল্ড থিম ব্যবহার করেন তবে আপনার get_template_directory_uri ফাংশনটি get_stylesheet_directory_uri তে পরিবর্তন করা উচিত:

মূল থিম:

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_register_script(
        'parent-theme-script', 
        get_template_directory_uri() . '/js/your-script.js', 
        array('jquery') 
    );

    wp_enqueue_script('parent-theme-script');
}

শিশু থিম:

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_register_script(
       'child-theme-script', 
       get_stylesheet_directory_uri() . '/js/your-script.js', 
       array('jquery') 
    );

    wp_enqueue_script('child-theme-script');
}

get_template_directory_uri: / আপনার সাইট / wp- বিষয়বস্তু / থিমস / পিতামাতার-থিম

get_stylesheet_directory_uri: / আপনার সাইট / wp- সামগ্রী / থিম / শিশু-থিম theme


6

আপনি থিমের ফাংশন.এফপি ফাইলটিতে jQuery বা জাভাস্ক্রিপ্ট যুক্ত করতে পারেন। কোডটি নীচে রয়েছে:

add_action( 'wp_enqueue_scripts', 'add_my_script' );

function add_my_script() {
wp_enqueue_script(
    'your_script_name', // your script unique name 
    get_template_directory_uri().'/js/your-script.js', //script file location
    array('jquery') //lists the scripts upon which your script depends
);
}

আরও তথ্যের জন্য এই টিউটোরিয়ালটি দেখুন: http://www.codecanal.com/add-simple-jquery-script-wordpress/


4

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

<script type="javascript" href="<?php echo get_template_directory_uri();?>/your-file.js"></script>

একটি ভাল অনুশীলন হ'ল ক্লোজড বডি ট্যাগের আগে বা কমপক্ষে আপনার পাদদেশের ঠিক আগে এই অধিকারটি অন্তর্ভুক্ত করা। আপনি পিএইচপি অন্তর্ভুক্ত ব্যবহার করতে পারেন, বা এই ফাইলটি টানতে বিভিন্ন অন্যান্য পদ্ধতি।

<script type="javascript"><?php include('your-file.js');?></script>

2019 সালের খারাপ অনুশীলনের চারপাশে এটিই।
ফিল হিলি

সম্মত, তবে এটি লেখা হয়েছিল 5 বছর আগে। সারিবদ্ধকরণ এবং অবশ্যই না এটি সর্বোত্তম অনুশীলন।
josh.chavanne

1
এই পোস্টটি গুগলে বেশ সুস্পষ্টভাবে প্রদর্শিত হওয়ার কারণে কেবল উল্লেখ করার মতো worth আমি এখানে আসার এবং খারাপ অভ্যাসগুলি ব্যবহার করা শুরু করার জন্য আমি ঘৃণা করব কারণ তারা কোনও পুরানো প্রশ্নোত্তরের উপর হোঁচট খেয়েছে।
ফিল হিলি

3

** # পদ্ধতি 1: ** আপনার jquery কোডটি আলাদা জেএস ফাইলে রাখার চেষ্টা করুন।

এখন সেই স্ক্রিপ্টটি ফাংশন.এফপি ফাইলে নিবন্ধন করুন।

function add_my_script() {
    wp_enqueue_script(
      'custom-script', get_template_directory_uri() . '/js/your-script-name.js', 
        array('jquery') 
    );
}
add_action( 'wp_enqueue_scripts', 'add_my_script' );

এখন আপনি সম্পন্ন হয়েছে।

ফাংশনে স্ক্রিপ্টটি নিবন্ধভুক্ত হওয়ার সাথে সাথে এটির উপকার হয় <head> পৃষ্ঠাটি লোড হয় এমনভাবে এটি সর্বদা হেডার.এফপি এর একটি অংশ। সুতরাং প্রতিবার নতুন এইচটিএমএল সামগ্রী লিখলে আপনাকে নিজের কোডটি পুনরাবৃত্তি করতে হবে না।

# ম্যাথোড 2: স্ক্রিপ্ট কোডটি পৃষ্ঠার বডির ভিতরে <script>ট্যাগের নিচে রাখুন । তারপরে আপনাকে এটি ফাংশনে নিবন্ধন করতে হবে না।


পদ্ধতি 2 আগুন নিয়ে খেলছে।
জন হাসকল

3

আপনি এই প্লাগইনটি ব্যবহার করে কাস্টম জাভাস্ক্রিপ্ট বা jquery যুক্ত করতে পারেন।
https://wordpress.org/plugins/custom-javascript-editor/

আপনি যখন jQuery ব্যবহার করবেন তখন jquery noconflict মোড ব্যবহার করবেন না


3

পৃষ্ঠাটিতে অন্তর্ভুক্ত করার জন্য কীভাবে আপনার স্ক্রিপ্টটি যুক্ত করবেন তা এখানে অনেক টিউটোরিয়াল এবং উত্তর রয়েছে। তবে যা আমি খুঁজে পাইনি তা হল কীভাবে সেই কোডটি গঠন করবেন যাতে এটি সঠিকভাবে কাজ করবে। এটি JQuery এর এই ফর্ম ব্যবহার করা হচ্ছে না কারণে হয়।

সুতরাং এখানে আমার কোড এবং আপনি এটি একটি টেম্পলেট হিসাবে ব্যবহার করতে পারেন।

jQuery(document).ready(function( $ ){
  $("#btnCalculate").click(function () {
        var val1 = $(".visits").val();
        var val2 = $(".collection").val();
        var val3 = $(".percent").val();
        var val4 = $(".expired").val();
        var val5 = $(".payer").val();
        var val6 = $(".deductible").val(); 
        var result = val1 * (val3 / 100) * 10 * 0.25;
        var result2 = val1 * val2 * (val4 / 100) * 0.2;
        var result3 = val1 * val2 * (val5 / 100) * 0.2;
        var result4 = val1 * val2 * (val6 / 100) * 0.1;
        var val7 = $(".pverify").val();
        var result5 = result + result2 + result3 + result4 - val7;
        var result6 = result5 * 12;
        $("#result").val("$" + result);
        $("#result2").val("$" + result2);
        $("#result3").val("$" + result3);
        $("#result4").val("$" + result4);
        $("#result5").val("$" + result5);
        $("#result6").val("$" + result6);
  });
});

3

এখান থেকে উত্তর: https://premium.wpmudev.org/blog/adding-jquery-scriptts-wordpress/

ওয়ার্ডপ্রেস কিছু সময়ের জন্য প্রায় ছিল, এবং থিম এবং প্লাগইনগুলিতে স্ক্রিপ্টগুলি যুক্ত করার পদ্ধতি বছরের পর বছর একই ছিল, আপনার কীভাবে স্ক্রিপ্টগুলি যুক্ত করা উচিত ঠিক সে সম্পর্কে এখনও কিছুটা বিভ্রান্তি রয়েছে। সুতরাং এটি পরিষ্কার করা যাক।

যেহেতু jQuery এখনও সর্বাধিক ব্যবহৃত জাভাস্ক্রিপ্ট কাঠামো, তাই আপনি কীভাবে আপনার থিম বা প্লাগইনে একটি সাধারণ স্ক্রিপ্ট যুক্ত করতে পারেন তা একবার দেখে নেওয়া যাক।

jQuery এর সামঞ্জস্যতা মোড

আমরা ওয়ার্ডপ্রেসে স্ক্রিপ্টগুলি সংযুক্ত করার আগে, আসুন jQuery এর সামঞ্জস্যতা মোডটি দেখুন। ওয়ার্ডপ্রেস jQuery একটি অনুলিপি সঙ্গে প্রাক প্যাকেজ আসে, যা আপনার কোড সহ ব্যবহার করা উচিত। ওয়ার্ডপ্রেসের jQuery লোড করা হয়, এটি সামঞ্জস্যতা মোড ব্যবহার করে, যা অন্যান্য ভাষার লাইব্রেরির সাথে দ্বন্দ্ব এড়ানোর জন্য একটি প্রক্রিয়া।

এটি কীভাবে ফুটে উঠেছে তা হ'ল আপনি অন্যান্য প্রকল্পের মতো ডলার চিহ্নটি সরাসরি ব্যবহার করতে পারবেন না। ওয়ার্ডপ্রেসের জন্য jQuery লেখার সময় আপনার পরিবর্তে jQuery ব্যবহার করা উচিত। আমি কী বলতে চাইছি তা দেখতে নীচের কোডটি একবার দেখুন:


2

আমি যে সমাধানগুলি দেখেছি সেগুলি থিমের সাথে জাভাস্ক্রিপ্ট বৈশিষ্ট্য যুক্ত করার দৃষ্টিকোণ থেকে। যাইহোক, ওপি বিশেষত জিজ্ঞাসা করেছিল, "আমি কীভাবে এটি একটি একক ওয়ার্ডপ্রেস পৃষ্ঠার জন্য যুক্ত করব?" এটির মতো শোনা যাচ্ছে আমি কীভাবে আমার ওয়ার্ডপ্রেস ব্লগে জাভাস্ক্রিপ্ট ব্যবহার করব, যেখানে পৃথক পোস্টের বিভিন্ন জাভাস্ক্রিপ্ট-চালিত "উইজেট" থাকতে পারে। উদাহরণস্বরূপ, একটি পোস্ট ব্যবহারকারীকে পরিবর্তনশীল (স্লাইডার, চেকবক্স, টেক্সট ইনপুট ক্ষেত্র) পরিবর্তন করতে এবং ফলাফলগুলি প্লট বা তালিকায় দিতে পারে।

জাভাস্ক্রিপ্ট দৃষ্টিকোণ থেকে শুরু:

  1. আপনার জাভাস্ক্রিপ্ট ফাংশনগুলি একটি পৃথক ".js" ফাইলে লিখুন

এমনকি আপনার পোষ্টের এইচটিএমএল-তে উল্লেখযোগ্য জাভাস্ক্রিপ্ট অন্তর্ভুক্ত করার বিষয়ে ভাববেন না your আপনার কোড সহ একটি জাভাস্ক্রিপ্ট ফাইল বা ফাইল তৈরি করুন।

  1. আপনার পোস্টের এইচটিএমএল দিয়ে আপনার জাভাস্ক্রিপ্ট ইন্টারফেস করুন

যদি আপনার জাভাস্ক্রিপ্ট উইজেটটি এইচটিএমএল নিয়ন্ত্রণ এবং ক্ষেত্রগুলির সাথে ইন্টারেক্ট করে, আপনাকে জাভাস্ক্রিপ্ট থেকে কীভাবে এই উপাদানগুলি জিজ্ঞাসা করতে এবং সেট করতে হবে এবং ইউআই উপাদানগুলি কীভাবে আপনার জাভাস্ক্রিপ্ট ফাংশনগুলিতে কল করতে দেয় তা বুঝতে হবে। এখানে উদাহরণ তুলে ধরা হলো; প্রথম, জাভাস্ক্রিপ্ট থেকে:

var val = document.getElementById(“AM_Freq_A_3”).value;

এবং এইচটিএমএল থেকে:

<input type="range" id="AM_Freq_A_3" class="freqSlider" min="0" max="1000" value="0" oninput='sliderChanged_AM_widget(this);'/>
  1. আপনার জাভাস্ক্রিপ্ট উইজেটের প্রারম্ভিককরণ ফাংশনটি কল করতে jQuery ব্যবহার করুন

পৃষ্ঠাটি প্রস্তুত হওয়ার সাথে সাথে আপনার জাভাস্ক্রিপ্ট উইজেটটি কনফিগার করে এবং আঁকবে এমন আপনার ফাংশনের নাম ব্যবহার করে এটি আপনার .js ফাইলে যুক্ত করুন:

jQuery(document).ready(function( $ ) {
    your_init_function();
});
  1. আপনার পোস্টের এইচটিএমএল কোডে, আপনার পোস্টের জন্য প্রয়োজনীয় স্ক্রিপ্টগুলি লোড করুন

ওয়ার্ডপ্রেস কোড সম্পাদকে, আমি সাধারণত পোস্টের শেষে স্ক্রিপ্টগুলি নির্দিষ্ট করি। উদাহরণস্বরূপ, আমার প্রধান ডিরেক্টরিতে আমার একটি স্ক্রিপ্ট ফোল্ডার রয়েছে। আমার ভিতরে সাধারণ জাভাস্ক্রিপ্টের সাথে একটি ইউটিলিটি ডিরেক্টরি রয়েছে যা আমার কিছু পোস্ট ভাগ করে নিতে পারে - এক্ষেত্রে আমার নিজস্ব গণিতের কিছু ইউটিলিটি ফাংশন এবং ফ্লোটার 2 প্লট করা লাইব্রেরি রয়েছে। উদাহরণস্বরূপ মিডিয়া ম্যানেজার ব্যবহারের পরিবর্তে তারিখের ভিত্তিতে সাব-ডাইরেক্টরিগুলি সহ অন্য নির্দিষ্ট ডিরেক্টরিতে পোস্ট-নির্দিষ্ট জাভাস্ক্রিপ্টকে গোষ্ঠীভুক্ত করা আমার পক্ষে আরও সুবিধাজনক বলে মনে হচ্ছে।

<script type="text/javascript" src="/scripts/utils/flotr2.min.js"></script>
<script type="text/javascript" src="/scripts/utils/math.min.js"></script>
<script type="text/javascript" src="/scripts/widgets/20161207/FreqRes.js"></script>
  1. এনকুই jQuery

ওয়ার্ডপ্রেস jQuery নিবন্ধভুক্ত করে, তবে যদি আপনি ওয়ার্ডপ্রেসকে এটির প্রয়োজন হয় না, তবে এটি উপলব্ধ হয় না it আপনি যদি না করেন তবে jQuery কমান্ড ব্যর্থ হবে। অনেক উত্স আপনাকে ফাংশন.এফপি-তে এই কমান্ডটি কীভাবে যুক্ত করবেন তা আপনাকে জানিয়েছে, তবে ধরে নিন আপনি আরও কিছু গুরুত্বপূর্ণ বিবরণ জানেন।

প্রথমত, কোনও থিম সম্পাদনা করা খারাপ ধারণা the ভবিষ্যতের থিমের কোনও আপডেট আপনার পরিবর্তনগুলি মুছে দেবে। একটি শিশু থিম তৈরি করুন। এখানে কীভাবে:

https://developer.wordpress.org/themes/advanced-topics/child-themes/

সন্তানের ফাংশন.এফপি ফাইলটি একই নামের পিতামাতার থিমের ফাইলটিকে ওভাররাইড করে না, এটি এতে যুক্ত করে। চাইল্ড-থিমস টিউটোরিয়ালটি পরামর্শ দেয় যে কীভাবে পিতামাতাকে এবং সন্তানের স্টাইল। CSS ফাইলটিকে সজ্জিত করা যায়। আমরা সহজেই সেই ফাংশনে আরও একটি লাইন যুক্ত করতে পারি জিকুয়েরি তৈরি করতে। শিশু থিমের জন্য আমার সম্পূর্ণ ফাংশন.এফপি ফাইলটি এখানে:

<?php
add_action( 'wp_enqueue_scripts', 'earlevel_scripts_enqueue' );
function earlevel_scripts_enqueue() {
    // styles
    $parent_style = 'parent-style';
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );

    // posts with js widgets need jquery
    wp_enqueue_script('jquery');
}

আরেকটি বিকল্প হ'ল জাভাস্ক্রিপ্ট ম্যানেজার প্লাগইন ব্যবহার করা। এটি কারও পক্ষে ভাল উপায় হতে পারে তবে আমি অনেকগুলি প্লাগইন এবং আপডেটের উপর নির্ভরশীল না হওয়া পছন্দ করি।
নাইজেল রেডমন

1

ওয়ার্ডপ্রেস প্লাগইনে স্ক্রিপ্ট ফাইল যুক্ত করতে আপনি ওয়ার্ডপ্রেস পূর্বনির্ধারিত ফাংশনটি ব্যবহার করতে পারেন।

wp_enqueue_script( 'script', plugins_url('js/demo_script.js', __FILE__), array('jquery'));

পোস্টে যা আপনি বুঝতে যে কত সহজে আপনি ওয়ার্ডপ্রেস প্লাগইন মধ্যে jQuery এবং CSS এর বাস্তবায়ন করতে পারে সাহায্য করে।


1

ফাংশনগুলির মাধ্যমে স্ক্রিপ্টটি স্থাপনের পাশাপাশি আপনি শিরোনাম, পাদচরণকারী, যে কোনও টেমপ্লেটে, যেখানে কোনও লিঙ্ক (একটি লিঙ্ক রিল ট্যাগ যা) অন্তর্ভুক্ত করতে পারেন just

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

এগুলি তৈরিতে ব্যর্থ হওয়ার ফলে আপনার স্ক্রিপ্টটি কাজ না করার ফলাফল হতে পারে, যদিও এটি সঠিকভাবে লেখা হয়েছে।


1

আপনি অন্য স্ক্রিপ্টে নিজের স্ক্রিপ্টটি লিখতে পারেন your এবং আপনার ফাইলটিকে এইরকম করুন যেমন ধরুন আপনার স্ক্রিপ্টের নাম image-ticker.js

wp_enqueue_script( 'image-ticker-1', plugins_url('/js/image-ticker.js', __FILE__), array('jquery', 'image-ticker'), '1.0.0', true ); 

আপনার জায়গায় /js/image-ticker.jsআপনার জেএস ফাইলের পথ রাখা উচিত।


1

ওয়ার্ডপ্রেসে, আপনার ওয়েবসাইটটিতে স্ক্রিপ্টগুলি অন্তর্ভুক্ত করার সঠিক উপায় হ'ল নিম্নলিখিত ফাংশনগুলি ব্যবহার করে।

wp_register_script( $handle, $src )
wp_enqueue_script( $handle, $src )

এই ফাংশন হুক ভিতরে বলা হয় wp_enqueue_script

আরও বিশদ এবং উদাহরণের জন্য, আপনি wp_register_script এবং wp_enqueue_script ব্যবহার করে ওয়ার্ডপ্রেসে জেএস ফাইল যুক্ত করতে পারেন

উদাহরণ:

function webolute_theme_scripts() {
    wp_register_script( 'script-name', get_template_directory_uri() . '/js/example.js', array('jquery'), '1.0.0', true );
    wp_enqueue_script( 'script-name' );
}
add_action( 'wp_enqueue_scripts', 'webolute_theme_scripts' );

1

"আমাদের গুগল" সিট আছে। ওয়ার্ডপ্রেসের ভিতরে স্ক্রিপ্টটি সঠিকভাবে ব্যবহারের জন্য কেবল হোস্ট করা লাইব্রেরি যুক্ত করুন। গুগলের মতো

নির্বাচিত লাইব্রেরির পরে আপনার কাস্টম স্ক্রিপ্টের আগে এটির লিঙ্ক করা দরকার: এক্সপ্যামল

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

এবং আপনার নিজস্ব স্ক্রিপ্ট পরে

<script type="text/javascript">
    $(document).ready(function () {
        $('.text_container').addClass("hidden");
    });
</script>

0

আপনার কি কেবল jquery লোড করা দরকার?

1) অন্যান্য গাইডের মত বলুন, আপনার স্ক্রিপ্টটি আপনার ফাংশন.এফপি ফাইলে রেজিস্টার করুন:

// register scripts
if (!is_admin()) {
    // here is an example of loading a custom script in a /scripts/ folder in your theme:
    wp_register_script('sandbox.common', get_bloginfo('template_url').'/scripts/common.js', array('jquery'), '1.0', true);
    // enqueue these scripts everywhere
    wp_enqueue_script('jquery');
    wp_enqueue_script('sandbox.common');
}

2) লক্ষ্য করুন যে আমাদের jQuery নিবন্ধকরণ করার দরকার নেই কারণ এটি ইতিমধ্যে মূলটিতে রয়েছে। নিশ্চিত হয়ে নিন যে wp_footer () আপনার footer.php এবং wp_head () কে আপনার Header.php এ ডাকা হয় (এটি এখানে স্ক্রিপ্ট ট্যাগ আউটপুট দেবে), এবং jQuery প্রতিটি পৃষ্ঠায় লোড হবে। আপনি যখন ওয়ার্ডপ্রেস দিয়ে jQuery সজ্জিত করবেন এটি "কোনও বিরোধের" মোডে থাকবে না, সুতরাং আপনাকে Qu এর পরিবর্তে jQuery ব্যবহার করতে হবে $ আপনি চাইলে আপনি jQuery নিবন্ধন করতে পারেন এবং wp_deregister_script ('jquery') করে নিজের নিজস্ব পুনরায় নিবন্ধন করতে পারেন।


না, আমি এই অংশটি খুঁজে পেয়েছি। Jquery লোড করা সহজ। আমার jquery কোডটি কী ফাইলটি যুক্ত করতে হবে এবং কীভাবে তা আমার জানতে হবে।
নাগরিক

Wp_enqueue_script ('স্ক্রিপ্টের নাম') রাখুন; টেমপ্লেটের get_header () এর আগে আপনি সেই স্ক্রিপ্টটির অধীনে প্রবেশ করতে চান।
এলি কোল

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.