সাইটে কাস্টম জাভাস্ক্রিপ্ট ফাইল যুক্ত করার পছন্দের উপায়টি কী?

68

আমি ইতিমধ্যে আমার স্ক্রিপ্টগুলি যুক্ত করেছি, তবে আমি পছন্দসই উপায়টি জানতে চাই।
আমি আমার টেম্পলেটটির <script>মধ্যে সরাসরি একটি ট্যাগ header.phpরেখেছি।

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

theme-development  javascript 
— naugtur
সূত্র
— বেন এভার্ডার্ড
4
দুর্দান্ত প্রশ্ন! এটি একটি খুব সাধারণ লোক জিজ্ঞাসা করে এবং এমন কিছু যা আমাদের অবশ্যই এখানে ভালভাবে নথিভুক্ত করা দরকার।
— মাইকচিন্কেল
ধন্যবাদ. আমি এটি ইতিমধ্যে দেখেছি, তবে এটি আমার প্রশ্নটি পুরোপুরি আবরণ করে না।
— নগদুর
ঠিক আছে, আমি জানতাম এটি আপনার সমস্ত প্রশ্নের উত্তর দেবে না তবে ভবিষ্যতে যে সমস্ত লোকেরা সার্ফ করছেন তাদের জন্য অন্য পোস্টের একটি উল্লেখ রয়েছে :-)
— বেন এভার্ডার্ড
— 75৫৫/২

উত্তর:

78

wp_enqueue_script()আপনার থিম ব্যবহার করুন

প্রাথমিক উত্তরটি অ্যাডমিনের সামনের প্রান্তের জন্য wp_enqueue_script()একটি wp_enqueue_scriptsহুক ব্যবহার করা admin_enqueue_scripts। এটি দেখতে এরকম কিছু হতে পারে (যা ধরে নিয়েছে যে আপনি আপনার থিমের functions.phpফাইল থেকে কল করছেন ; নোট করুন আমি কীভাবে স্টাইলশিট ডিরেক্টরিটি উল্লেখ করছি):

<?php
add_action( 'wp_enqueue_scripts', 'mysite_enqueue' );

function mysite_enqueue() {
  $ss_url = get_stylesheet_directory_uri();
  wp_enqueue_script( 'mysite-scripts', "{$ss_url}/js/mysite-scripts.js" );
}

এটা বেসিক।

প্রাক-সংজ্ঞায়িত এবং একাধিক নির্ভরশীল স্ক্রিপ্ট

তবে আসুন আমরা আপনাকে jQuery এবং jQuery ইউআই দুটোই ওয়ার্ডপ্রেসের সাথে অন্তর্ভুক্ত করা ডিফল্ট স্ক্রিপ্টগুলির তালিকা থেকে অন্তর্ভুক্ত করতে চান এবং আপনি কি চান যে আপনার স্ক্রিপ্ট তাদের উপর নির্ভর করবে? সহজ, কেবলমাত্র ওয়ার্ডপ্রেসে সংজ্ঞায়িত প্রাক-সংজ্ঞায়িত হ্যান্ডলগুলি ব্যবহার করে প্রথম দুটি স্ক্রিপ্টগুলি অন্তর্ভুক্ত করুন এবং আপনার স্ক্রিপ্টের জন্য একটি তৃতীয় প্যারামিটার সরবরাহ করা হবে wp_enqueue_script()যা প্রতিটি স্ক্রিপ্ট দ্বারা ব্যবহৃত স্ক্রিপ্ট হ্যান্ডেলের একটি অ্যারে যেমন:

<?php
add_action( 'wp_enqueue_scripts', 'mysite_enqueue' );

function mysite_enqueue() {
  $ss_url = get_stylesheet_directory_uri();
  wp_enqueue_script( 'mysite-scripts', "{$ss_url}/js/mysite-scripts.js", array( 'jquery', 'jquery-ui-sortable' ) );
}

একটি প্লাগিনে স্ক্রিপ্ট

পরিবর্তে যদি আপনি এটি একটি প্লাগইনে করতে চান? plugins_url()আপনার জাভাস্ক্রিপ্ট ফাইলটির URL নির্দিষ্ট করতে ফাংশনটি ব্যবহার করুন:

<?php
define( 'MY_PLUGIN_VERSION', '2.0.1' );
add_action( 'wp_enqueue_scripts', 'my_plugin_enqueue' );

function my_plugin_enqueue() {
  wp_enqueue_script( 'my-script', plugins_url('/js/my-script.js',__FILE__), array('jquery','jquery-ui-sortable'), MY_PLUGIN_VERSION );
}

আপনার স্ক্রিপ্টগুলি সংস্করণ করা হচ্ছে

এছাড়াও নোট করুন যে উপরে আমরা আমাদের প্লাগইনটিকে একটি সংস্করণ নম্বর দিয়েছি এবং এটি একটি চতুর্থ প্যারামিটার হিসাবে পাস করেছি wp_enqueue_script()। সংস্করণ নম্বরটি URL এ স্ক্রিপ্টে ক্যোয়ার যুক্তি হিসাবে উত্স হিসাবে আউটপুট এবং সংস্করণ পরিবর্তিত হলে ব্রাউজারকে সম্ভবত ক্যাশেড ফাইলটি পুনরায় ডাউনলোড করতে বাধ্য করে to

যেখানে প্রয়োজন সেখানে কেবল স্ক্রিপ্টগুলি লোড করুন

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

<?php
define( 'MY_PLUGIN_VERSION', '2.0.1' );
add_action( 'admin_enqueue_scripts', 'my_plugin_admin_enqueue' );

function my_plugin_admin_enqueue() {
  wp_enqueue_script( 'my-script', plugins_url( '/js/my-script.js', __FILE__ ), array( 'jquery', 'jquery-ui-sortable' ), MY_PLUGIN_VERSION );
}

পাদচরণে আপনার স্ক্রিপ্টগুলি লোড করুন

যদি আপনার স্ক্রিপ্টগুলি ফুটারের মধ্যে লোড করা দরকার তার মধ্যে একটি 5 তম প্যারামিটার রয়েছে wp_enqueue_script()যা ওয়ার্ডপ্রেসকে বিলম্বিত করে এটি ফুটারে রাখার জন্য বলে (আপনার থিমটি খারাপ ব্যবহার করা হয়নি এবং ধরে নিই যে এটি সত্যই ডাব্লু_ফুটার হুককে সকলের মতো ডাকে ভাল ওয়ার্ডপ্রেস থিম করা উচিত ):

<?php
define( 'MY_PLUGIN_VERSION', '2.0.1' );
add_action( 'admin_enqueue_scripts', 'my_plugin_admin_enqueue' );

function my_plugin_admin_enqueue() {
  wp_enqueue_script( 'my-script', plugins_url( '/js/my-script.js', __FILE__ ), array( 'jquery', 'jquery-ui-sortable' ), MY_PLUGIN_VERSION, true );
}

সূক্ষ্ম দানাদার নিয়ন্ত্রণ

আপনার যদি আরও সূক্ষ্ম শস্য নিয়ন্ত্রণের প্রয়োজন হয় তবে ওঝের কাছে কীভাবে শিরোনামে একটি দুর্দান্ত নিবন্ধ রয়েছে : আপনার ওয়ার্ডপ্রেস প্লাগইন সহ জাভাস্ক্রিপ্টটি লোড করুন যা আরও বিশদ বিবরণ দেয়।

নিয়ন্ত্রণ অর্জনে স্ক্রিপ্টগুলি অক্ষম করা হচ্ছে

জাস্টিন ট্যাডলকের একটি সুন্দর নিবন্ধ রয়েছে শিরোনামে কীভাবে স্ক্রিপ্টগুলি এবং শৈলীগুলি অক্ষম করতে হয় আপনি চান:

  1. একক ফাইলগুলিতে একাধিক ফাইল একত্রিত করুন (মাইলেজটি এখানে জাভাস্ক্রিপ্টের সাথে পৃথক হতে পারে)।
  2. আমরা স্ক্রিপ্ট বা স্টাইল ব্যবহার করছি কেবল সেই পৃষ্ঠাগুলিতেই ফাইলগুলি লোড করুন।
  3. সাধারণ সিএসএস সামঞ্জস্য করতে আমাদের স্টাইল.এসএস ফাইলে গুরুত্বপূর্ণ ব্যবহার করা বন্ধ করুন।

পিএইচপি থেকে জেএস এর সাথে মানগুলি পাস করে wp_localize_script()

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

সত্যিই দুর্দান্ত দানাদার নিয়ন্ত্রণ wp_print_scripts()

এবং পরিশেষে যদি সত্যিই নিখুঁতভাবে নিয়ন্ত্রন প্রয়োজন আপনি মধ্যে সন্ধান করতে পারেন wp_print_scripts()যেমন আলোচনা বিয়ার প্ল্যানেট একটি পোস্ট এনটাইটেল কিভাবে সিএসএস এবং জাভাস্ক্রিপ্ট শর্তসাপেক্ষে এবং অন্তর্ভুক্ত করা শুধুমাত্র যখন পোস্টগুলি প্রয়োজনীয় ।

Epiloque

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

— MikeSchinkel
সূত্র
1
এটি একটি বিশাল নিবন্ধ! এখন আমার পছন্দ করার মতো অনেক কিছুই রয়েছে;)
— নওগুর
ঠিক আছে, এটি কাজ করে। এখন প্রশ্নের দ্বিতীয় অংশ - আমি হোমপৃষ্ঠে আছি কিনা তা কীভাবে চেক করব?
— নাগতুর
— সেকশনস
3
admin_initজিজ্ঞাসা করার পরিবর্তে ookোকা is_admin()। আপনি যদি গুগল সিডিএন ব্যবহার করেন তবে সংস্করণ প্যারামিটারটি সরিয়ে ফেলুন , অন্যথায় ব্রাউজারের ক্যাশে দুটি সংস্করণ ধারণ করবে: অন্যটি অন্য সাইটগুলির এবং আপনার সাইটের কোয়েরি স্ট্রিং ছাড়াই one
— ফুসিয়া
@ টসচো - শুভ কল, আমি আপডেট করব।
— মাইকচিন্কেল
11

মেকসকে এনকুইজ ব্যবহারের দুর্দান্ত চিত্রণের প্রশংসা করার জন্য আমি কেবল এটি উল্লেখ করতে চাই যে নির্ভরশীলতা হিসাবে অন্তর্ভুক্ত স্ক্রিপ্টগুলি সজ্জিত করার দরকার নেই ...

আমি মাইকের উত্তরের শিরোনামে একটি প্লাগিনে স্ক্রিপ্টগুলির নীচে ব্যবহার করব ।

define('MY_PLUGIN_VERSION','2.0.1');

add_action( 'wp_enqueue_scripts', 'my_plugin_enqueue_scripts' );
function my_plugin_enqueue_scripts() {
    wp_enqueue_script('jquery');
    wp_enqueue_script('jquery-ui-sortable');
    wp_enqueue_script('my-script',plugins_url('/js/my-script.js',__FILE__),array('jquery','jquery-ui-sortable'),MY_PLUGIN_VERSION);
}

এটি পড়ার জন্য ছাঁটাই করা যেতে পারে ..

define('MY_PLUGIN_VERSION','2.0.1');

add_action( 'wp_enqueue_scripts', 'my_plugin_enqueue_scripts' );
function my_plugin_enqueue_scripts() {
    wp_enqueue_script('my-script', plugins_url( '/js/my-script.js', __FILE__ ), array('jquery','jquery-ui-sortable'), MY_PLUGIN_VERSION);
}

আপনি যখন নির্ভরশীলতাগুলি সেট করেন, তখন ওয়ার্ডপ্রেস তাদের আপনার স্ক্রিপ্টের জন্য প্রস্তুত এবং সন্ধান করে, সুতরাং আপনাকে এই স্ক্রিপ্টগুলির জন্য কোনও স্বাধীন কল করার প্রয়োজন হবে না।

অধিকন্তু, আপনারা কেউ কেউ ভাবছেন যে কোনও একাধিক নির্ভরতা নির্ধারণের ফলে স্ক্রিপ্টগুলি ভুল ক্রমে আউটপুট তৈরি হতে পারে, এখানে আমাকে একটি উদাহরণ দিন

wp_enqueue_script( 'first-script', 'example/path/example_script_1.js', array('second-script','third-script') );

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

— t31os
সূত্র
আমি মনে করি initএনকুইগুলি প্রেরণের উপযুক্ত জায়গা নয়।
— brasofilo
কোডটি প্রথমে মাইকের উত্তর থেকে অনুলিপি করা হয়েছিল, তারপরে একটি বিন্দুর চিত্রিত করার জন্য সামঞ্জস্য করা হয়েছিল। তবে আপনি সঠিক, তাই আমি আরও ভাল এবং আরও সঠিক হুক ব্যবহার করার জন্য উত্তরটি আপডেট করেছি।
— t31os
0

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

উদাহরণস্বরূপ বলা যাক যে আপনি একটি থিম তৈরি করছেন এবং চান যে আপনার গ্রাহক তার নিজস্ব স্ক্রিপ্টগুলি (গুগল অ্যানালিটিক্স বা অ্যাডথিসের মতো) বিকল্প পৃষ্ঠাগুলির মাধ্যমে .োকাতে সক্ষম হবেন। তারপরে আপনি wp_add_inline_scriptসেই স্ক্রিপ্টটি আপনার প্রধান জেএস-ফাইলে ল্যাচ করতে ব্যবহার করতে পারেন (আসুন বলে দিন mainjs):

$custom_script = get_option('my-script')
if (!empty($custom_script)) wp_add_inline_script ('mainjs', $custom_script);
— cjbj
সূত্র
0

আমার পছন্দের wp_enqueue_scriptউপায়টি হ'ল ভাল পারফরম্যান্স অর্জন করা, তাই আমি সমান্তরালে সবকিছুকে সংশ্লেষপূর্ণভাবে লোড করতে ফেচ এপিআই দিয়ে HEREDOC ব্যবহার না করে:

$jquery_script_path = '/wp-includes/js/jquery/jquery.js?ver=1.12.4';
$jquery_dependent_script_paths = [
  get_theme_file_uri( '/assets/js/global.js' ),
  get_theme_file_uri( '/assets/js/jquery.scrollTo.js' ),
  get_theme_file_uri( '/assets/js/skip-link-focus-fix.js' ),
  get_theme_file_uri( '/assets/js/navigation.js' )
];
$jquery_dependent_script_paths_json = json_encode($jquery_dependent_script_paths);
$inline_scripts = <<<EOD
<script>
(function () {
  'use strict';
  if (!window.fetch) return;
  /**
   * Fetch Inject v1.6.8
   * Copyright (c) 2017 Josh Habdas
   * @licence ISC
   */
  var fetchInject=function(){"use strict";const e=function(e,t,n,r,o,i,c){i=t.createElement(n),c=t.getElementsByTagName(n)[0],i.type=r.blob.type,i.appendChild(t.createTextNode(r.text)),i.onload=o(r),c?c.parentNode.insertBefore(i,c):t.head.appendChild(i)},t=function(t,n){if(!t||!Array.isArray(t))return Promise.reject(new Error("`inputs` must be an array"));if(n&&!(n instanceof Promise))return Promise.reject(new Error("`promise` must be a promise"));const r=[],o=n?[].concat(n):[],i=[];return t.forEach(e=>o.push(window.fetch(e).then(e=>{return[e.clone().text(),e.blob()]}).then(e=>{return Promise.all(e).then(e=>{r.push({text:e[0],blob:e[1]})})}))),Promise.all(o).then(()=>{return r.forEach(t=>{i.push({then:n=>{"text/css"===t.blob.type?e(window,document,"style",t,n):e(window,document,"script",t,n)}})}),Promise.all(i)})};return t}();
  fetchInject(
    $jquery_dependent_script_paths_json
  , fetchInject([
    "{$jquery_script_path}"
  ]));
})();
</script>
EOD;

এবং তারপরে এগুলি মাথায় sertোকান, কখনও কখনও এই জাতীয় স্টাইল সহ:

function wc_inline_head() {
  global $inline_scripts;
  echo "{$inline_scripts}";
  global $inline_styles;
  echo "{$inline_styles}";
}

জলপ্রপাতের ফলাফল যা এরকম দেখাচ্ছে, একবারে সমস্ত কিছু লোড করা হয় কিন্তু সম্পাদন আদেশটি নিয়ন্ত্রণ করে:

এখানে চিত্র বর্ণনা লিখুন

দ্রষ্টব্য: এর জন্য ফেচ এপিআই ব্যবহার করা দরকার, যা সমস্ত ব্রাউজারে পাওয়া যায় না।

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