ওয়ার্ডপ্রেসে কীভাবে সঠিকভাবে jquery-ui প্রভাব অন্তর্ভুক্ত করা যায়

Question

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

এটি আমার কাছে কোড। এটা অবশ্যই কাজ করে না:

    <?php wp_enqueue_script("jquery"); ?>
<?php wp_enqueue_script("jquery-ui-core"); ?>
<?php wp_head(); ?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
<script type="text/javascript">
    var $j = jQuery.noConflict();
    $j(document).ready(function() {
        $j("#manita-imagen").mouseover(function(){
            //$j(this).animate({ opacity: "hide" })
            // alert('asd');
            $j(this).effect("shake", { times:3 }, 300);
        });
    });

 </script>

আপনার সাহায্যের জন্য ধন্যবাদ!

Comments

একটি নোট: আপনার jquery সারিবদ্ধ করার প্রয়োজন হবে না, কারণ এটি ইতিমধ্যে jquery-ui-কোর এর নির্ভরতা হিসাবে তালিকাভুক্ত।

— সোনালী অ্যাপলস

Answer 1

ওয়ার্ডপ্রেসে jQuery UI লাইব্রেরি অন্তর্ভুক্ত করা হয়েছে, এটিতে ইউআই / এফেক্টস লাইব্রেরি অন্তর্ভুক্ত নয়। সেই গ্রন্থাগারটি পৃথক এবং স্বতন্ত্র। আপনাকে ইফেক্টস সিওর.জেএস ফাইলের একটি অনুলিপি অন্তর্ভুক্ত করতে হবে এবং এটি আলাদাভাবে সজ্জিত করতে হবে।

নোট করুন যে ধারাবাহিকতার নামকরণের জন্য এন-কুইন করার সময় আপনার নামকরণ করা উচিত jquery-ਪ੍ਰਭਾਵਾਂ-কোর।

আপনি এটি এর মতো অন্তর্ভুক্ত করতে পারেন:

wp_enqueue_script("jquery-effects-core",'http://example.com/whatever/effects.core.js', array('jquery'), '1.8.8');

সম্পাদনা : এই উত্তরটি ওয়ার্ডপ্রেস ৩.৩ এর আগে লেখা হয়েছিল, এতে এখন মূল অংশ হিসাবে বিভিন্ন প্রভাব লাইব্রেরি অন্তর্ভুক্ত রয়েছে। আপনার এখন ব্যবহারের প্রয়োজন প্রভাব লাইব্রেরির টুকরোগুলি সহজেই সজ্জিত করতে পারেন।

এই ফাইলগুলির জন্য স্লাগগুলির তালিকাটি ডাব্লুপি-অন্তর্ভুক্ত / স্ক্রিপ্ট-লোডার.পিএপিতে পাওয়া যাবে, তবে মূলটির স্লাগটি জেকুরি-এফেক্টস-কোর।

wp_enqueue_script("jquery-effects-core");

Comments

সচেতন থাকুন যে একটি প্রকৃত প্রভাবের জন্য (অন্ধ, বাউন্স, বিবর্ণ, ..) আপনাকে স্পষ্টভাবে সেই প্রভাবটি সজ্জিত করতে হবে। 'বিবর্ণ' এর জন্য পছন্দ করুন:wp_enqueue_script( 'jquery-effects-fade' );

— সানি রাইড

ব্যবহারকারীর তাদের নিজস্ব জাভাস্ক্রিপ্ট একটি পৃথক ফাইলে স্থাপন করা উচিত এবং তারপরে সেই ফাইলটি সারিবদ্ধ করা এবং এটির প্রয়োজনীয়তা নির্ভরতা তালিকাভুক্ত করা উচিত। এইভাবে, ওয়ার্ডপ্রেস (এবং পারফরম্যান্স প্লাগইনগুলি) এই স্ক্রিপ্টগুলি লোড করার জন্য প্রয়োজনীয় ক্রমটি জানে এবং সেগুলি পৃষ্ঠায় সঠিক ক্রমে স্থাপন করবে।

— ডেভ হিলিডিচ

Answer 2

@dabito,

আপনি আপনার স্ক্রিপ্টগুলি এখনই লোড করছেন না ... wp_enqueue_script()আপনার থিম টেম্পলেট ফাইলের ভিতরে কল করবেন না (এটি দেখতে এটির মতো দেখাচ্ছে header.php)। আপনাকে এই ফাংশনটি আলাদা হুক থেকে কল করতে হবে।

আপনার থিমের functions.phpফাইলে, নিম্নলিখিত কোডটি রাখুন:

function my_add_frontend_scripts() {
        wp_enqueue_script('jquery');
        wp_enqueue_script('jquery-ui-core');
}
add_action('wp_enqueue_scripts', 'my_add_frontend_scripts');

যদি উভয় স্ক্রিপ্টগুলি যথাযথভাবে নিবন্ধভুক্ত থাকে তবে এগুলি ঠিক জরিমানা করা উচিত ( <script />শিরোনামে উপযুক্ত ট্যাগ যুক্ত করে Then তাহলে আপনার অন্যান্য জাভাস্ক্রিপ্ট কোডটি কাজ করা উচিত)।

যদি আপনি বিষয়গুলির প্রশাসকের পক্ষে স্ক্রিপ্টগুলি যুক্ত করতে চান তবে admin_enqueue_scriptsপরিবর্তে আপনার ক্রিয়া যুক্ত করুন ।

Comments

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

— অটো

@ অট্টো আপনি যা বলেছেন তা যৌক্তিক মনে হচ্ছে। তবে আপনার কি একটি ব্যাখ্যা আছে যে কোডেক্সে এটি যা বলেছে @ এমএমন জানায় - "এই ক্রিয়াকলাপটি কল করার জন্য init ক্রিয়াটি ব্যবহার করুন?" এবং সেখান থেকে তার উদাহরণ নেওয়া হয়েছে ... কোডেক্স.ওয়ার্ডপ্রেস.আর.

— কোহেন

কোডেক্সগুলি স্থানগুলিতে বিক্ষিপ্ত। এর জন্য ব্যবহারের সেরা ক্রিয়াটি হ'ল সামনের প্রান্তের জন্য 'wp_enqueue_scriptts' বা পিছনের প্রান্তে 'অ্যাডমিন_ইনকিউ_স্ক্রিপ্টস'। হুকিং এআইডি কাজ করবে, তবে এটি অকারণে পুরো সাইটের উপরে স্ক্রিপ্ট সজ্জিত করবে।

— অটো

আমি সেই অনুযায়ী আমার কোড স্নিপেট আপডেট করেছি। এটি মূলত কোডেক্সের রেফারেন্সের ভিত্তিতে একটি দ্রুত, অন্ত্রের প্রতিক্রিয়া ছিল ... ব্যবহার wp_enqueue_scriptsকরা অবশ্যই যাওয়ার আরও ভাল উপায় এবং অতিরিক্ত is_admin()চেকের প্রয়োজন এড়ানো এড়ানো অবশ্যই ।

— EAMAN

এটিও ভুল উপায়ে - পারফরম্যান্স প্লাগইনগুলির নির্ভরতাগুলি জানতে হবে। লেখককে তাদের নিজস্ব .js ফাইল লিখতে হবে এবং এটিকে সারিবদ্ধ করতে হবে এবং নির্ভরতার নাম রাখতে হবে - বাকিগুলি ওয়ার্ডপ্রেস পরিচালনা করবে।

— ডেভ হিলিডিচ

Answer 3

আপনি সরাসরি গুগল থেকে পুরো jQuery UI সঞ্চার করতে পারেন। আমি এটি এইভাবে করি:

wp_enqueue_script('jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js', array('jquery'), '1.8.6');

এবং যেহেতু jQueryটিকে jQuery UI এর জন্য নির্ভরতা হিসাবে তালিকাবদ্ধ করা হয়েছে, তাই আপনাকে এটি ম্যানুয়ালি এঙ্কুইয়েড করার দরকার নেই। ওয়ার্ডপ্রেস এটি আপনার জন্য স্বয়ংক্রিয়ভাবে করবে।

Comments

এমনকি আপনি নিজের সাইটের পরিবর্তে গুগল সিডিএন থেকে সমস্ত jQuery libs লোড করতে পারেন ।

— জান ফ্যাব্রি

আমি বিদেশী উত্স থেকে স্ক্রিপ্টগুলি লোড করা থেকে অত্যন্ত নিরুৎসাহিত করব। আমি এটি বেশ দীর্ঘ সময় করেছি এবং এটি (খুব কমই) ঘটেছিল যে হোস্টটি ডাউন ছিল, তাই একাধিক গ্রাহকদের তাদের পৃষ্ঠাগুলিতে একবারে সমস্যা হয়েছিল।

— জুলিয়ান এফ ওয়েইনার্ট

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

— অ্যালেক্স

সত্য। আমি একটি সম্পূর্ণ প্রস্ফুটিত সিডিএন সম্পর্কে কথা বলছিলাম না, এটি অবশ্যই একেবারে ঠিক থাকবে, যেহেতু এটি ঠিক সেই ব্যবহারের জন্য তৈরি করা হয়েছে। যে কোনও জন-ডটকম থেকে স্ক্রিপ্টগুলি লোড করা কিছুটা ঝুঁকিপূর্ণ নয়, আমি মনে করি

— জুলিয়ান এফ ওয়েইনার্ট

Answer 4

এই jQuery লাইব্রেরির জন্য এখানে একটি ডিফল্ট লোড বলে মনে হচ্ছে না (পুরো তালিকা এখানে ) সুতরাং আপনার সম্ভবত এটি স্ক্রিপ্ট করার আগে স্ক্রিপ্টটি নিবন্ধ করতে হবে।

Comments

আমি ভেবেছিলাম আপনি সঠিক হতে পারেন (কখনও কখনও ডাব্লুপি নীচে লিখিত নিবন্ধগুলির নাম ব্যবহার করা আদর্শ নামের চেয়ে আলাদা হয়) তবে এই ক্ষেত্রে 'জ্যাকুয়েরি-ইউআই-কোর' নিবন্ধীকরণটি কাজ করা উচিত। এটি core.trac.wordpress.org/browser/branches/3.0/wp-includes/…

— সুবর্ণপ্লেস

ভাল যুক্তি! আমি ধরে নিয়েছিলাম যে তিনি কেবল সেই jQuery লাইব্রেরিটি লোড করতে চেয়েছিলেন , এই ক্ষেত্রে বাকী লোড করা কিছুটা ফুরফুরে হবে।

— সম্পাদক

Answer 5

শুধু একটি ছোট টিপস। আপনি যখন আপনার স্ক্রিপ্ট সজ্জিত করেন, এটি অ্যাডমিন প্যানেল সহ পুরো সাইটের জন্য সজ্জিত করে। আপনি যদি অ্যাডমিন প্যানেলে স্ক্রিপ্টটি না চান তবে আপনি কেবল সেগুলি সাইটের জন্য সম্মুখভাগে অন্তর্ভুক্ত করতে পারেন।

function my_add_frontend_scripts() {
    wp_enqueue_script('jquery');
    wp_enqueue_script('jquery-ui-core');
}

add_action( 'wp_enqueue_scripts', 'my_add_frontend_scripts');

Comments

এনকুইংয়ের জন্য আপনার দীক্ষা হুক ব্যবহার করা উচিত নয়। কেবলমাত্র সামনের প্রান্তের জন্য wp_enqueue_script স্ক্রিপ্ট হুক বা পিছনের প্রান্তের জন্য প্রশাসক_নেকিউ_স্ক্রিপ্ট হুক ব্যবহার করুন।

— অটো

জানেন না যে wp_enqueue_scriptsক্রিয়াটি কেবল সামনের দিকে থাকে। ধন্যবাদ :)

— তারেক

Answer 6

এখানে সমস্ত উত্তর, যদিও তারা কাজ করে, প্রযুক্তিগতভাবে ভুল।

Jquery-ui এবং অন্যান্য গ্রন্থাগারগুলি অন্তর্ভুক্ত করার সঠিক উপায় হ'ল এগুলি আপনার নিজের স্ক্রিপ্টের নির্ভরতা হিসাবে অন্তর্ভুক্ত করা ।

এটি গুরুত্বপূর্ণ, কারণ পারফরম্যান্স সরঞ্জামগুলি আপনার স্ক্রিপ্টগুলির লোডিং ক্রমটি সাইটের অনুকূলকরণের জন্য এই নির্ভরশীলতাগুলি পরীক্ষা করতে পারে।

সুতরাং, আপনি যদি jquery এবং jquery-ui ব্যবহার করতে চান, আপনার নিজস্ব .js স্ক্রিপ্ট ফাইল তৈরি করুন এবং নির্ভরতা সহ তালিকাভুক্ত করুন - আপনি যে প্রতিটি লাইব্রেরি ব্যবহার করছেন তার জন্য পৃথক এনক্যু কমান্ডের প্রয়োজন নেই:

wp_enqueue_script('your-script-handle', 
 plugins_url('your-script-file.js', __FILE__), 
 array('jquery', 'jquery-effects-core', 'jquery-ui-core')
);

নির্ভরতা হিসাবে যুক্ত করতে সমস্ত উপলভ্য স্ক্রিপ্টগুলির একটি তালিকা আপনি এখানে পাবেন: https://developer.wordpress.org/references/function/wp_enqueue_script/

Comments

আপনার ঠিক আছে। আপনার নিজস্ব wp_enqueue_script কলগুলিতে নির্ভরতা ব্যবহার করা jquery / jquery-ui / ইত্যাদি অন্তর্ভুক্ত করার সঠিক উপায়। তাদের আলাদাভাবে সারিবদ্ধ করার দরকার নেই।

— মিচা পাভলোস মাইকেল

এবং যদি আপনার স্ক্রিপ্টটি তাদের উপর নির্ভর করে আলাদা করে তৈরি করে, আপনার স্ক্রিপ্টটি এমন সাইটগুলিতে / ভেঙে যেতে পারে যা পারফরম্যান্স অনুকূল করে তোলে - উদাহরণস্বরূপ যদি স্ক্রিপ্টগুলি লোডিংয়ের গতি বাড়ানোর জন্য একটি স্ক্রিপ্টে একত্রিত করা হয়, বা যদি সেগুলি পিছিয়ে দেওয়া হয় বা ছোট করা হয় (ক্ষুদ্রাকরণের উপর নির্ভর করে তবে ক্রম পরিবর্তন করতে পারে)। আপনি যদি ওয়ার্ডপ্রেসকে না বলে থাকেন যে আপনার স্ক্রিপ্ট অন্যান্য স্ক্রিপ্টগুলির উপর নির্ভর করে তবে আপনি যে ক্রমটি লোড করবেন তার গ্যারান্টি দিতে পারবেন না।

— ডেভ হিলডিচ