วิธีที่ต้องการในการเพิ่มไฟล์จาวาสคริปต์ที่กำหนดเองในเว็บไซต์คืออะไร?

ฉันได้เพิ่มสคริปต์ของฉันแล้ว แต่ฉันต้องการทราบวิธีที่ต้องการ
ฉันเพิ่งวาง<script>แท็กลงในheader.phpเทมเพลตของฉันโดยตรง

มีวิธีที่ต้องการในการแทรกไฟล์ js ภายนอกหรือกำหนดเอง?
ฉันจะผูกไฟล์ js กับหน้าเดียวได้อย่างไร (ฉันมีหน้าแรกในใจ)

ใช้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 UI Sortable จากรายการสคริปต์เริ่มต้นที่มาพร้อมกับ WordPress และคุณต้องการให้สคริปต์ของคุณพึ่งพาหรือไม่ ง่ายเพียงแค่รวมสคริปต์สองครั้งแรกที่ใช้กำหนดไว้ล่วงหน้าจับที่กำหนดไว้ใน WordPressและสคริปต์ของคุณให้เป็นพารามิเตอร์ที่ 3 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 ของไฟล์ Javascript ของคุณ:

<?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()เราให้ปลั๊กอินหมายเลขรุ่นของเราและผ่านมันเป็นพารามิเตอร์ที่ 4 หมายเลขรุ่นจะถูกส่งออกในแหล่งที่มาเป็นอาร์กิวเมนต์แบบสอบถามใน URL ไปยังสคริปต์และทำหน้าที่บังคับเบราว์เซอร์เพื่อดาวน์โหลดไฟล์แคชอาจเป็นไปได้หากมีการเปลี่ยนแปลงรุ่น

โหลดสคริปต์เฉพาะในหน้าที่จำเป็น

กฎที่ 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()ซึ่งบอกให้ WordPress หน่วงเวลาและวางไว้ในส่วนท้าย (สมมติว่าชุดรูปแบบของคุณไม่ทำงานผิดปกติ ธีม WordPress ที่ดีควร ):

<?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 );
}

การควบคุมอย่างละเอียดยิ่งขึ้น

หากคุณต้องการการควบคุมที่ละเอียดยิ่งขึ้นกว่าที่Ozhมีบทความที่ยอดเยี่ยมเรื่องวิธีการ: โหลด Javascript ด้วยปลั๊กอิน WordPress ของคุณซึ่งมีรายละเอียดเพิ่มเติม

ปิดใช้งานสคริปต์เพื่อรับการควบคุม

Justin Tadlockมีบทความที่ดีเรื่องวิธีปิดการใช้งานสคริปต์และสไตล์ในกรณีที่คุณต้องการ:

1. รวมหลายไฟล์เป็นไฟล์เดียว (ระยะอาจแตกต่างกันกับ JavaScript ที่นี่)
2. โหลดไฟล์บนหน้าเว็บที่เราใช้สคริปต์หรือสไตล์เท่านั้น
3. หยุดใช้! สำคัญในไฟล์ style.css ของเราเพื่อทำการปรับเปลี่ยน CSS อย่างง่าย ๆ

การส่งผ่านค่าจาก PHP ไปยัง JS ด้วย wp_localize_script()

บนบล็อกของเขา Vladimir Prelovac มีบทความที่ยอดเยี่ยมเรื่องแนวทางปฏิบัติที่ดีที่สุดสำหรับการเพิ่มรหัส JavaScript ลงในปลั๊กอิน WordPressซึ่งเขากล่าวถึงการใช้wp_localize_script()เพื่อให้คุณสามารถกำหนดค่าตัวแปรใน PHP ฝั่งเซิร์ฟเวอร์ของคุณเพื่อใช้ใน Javascript ฝั่งไคลเอ็นต์ของคุณ

ควบคุมด้วยเม็ดเล็กละเอียดมากด้วย wp_print_scripts()

และสุดท้ายถ้าคุณต้องการควบคุมจริงๆละเอียดที่คุณสามารถมองเข้าไปwp_print_scripts()ตามที่กล่าวไว้ในเบียร์แพลนในโพสต์ที่มีชื่อว่าวิธีการรวม CSS และ JavaScript เงื่อนไขและเมื่อจำเป็นเท่านั้นโดยโพสต์

Epiloque

นั่นเป็นเรื่องเกี่ยวกับแนวทางปฏิบัติที่ดีที่สุดในการรวมไฟล์ Javascript กับ WordPress หากฉันพลาดบางสิ่ง (ซึ่งฉันอาจมี) โปรดแจ้งให้ฉันทราบในความคิดเห็นเพื่อที่ฉันจะได้สามารถเพิ่มการอัปเดตสำหรับนักเดินทางในอนาคต

เพื่อชมเชย Mikes ภาพประกอบที่ยอดเยี่ยมของการใช้ enqueues ฉันเพียงแค่ต้องการชี้ให้เห็นว่าสคริปต์รวมเป็นพึ่งพาไม่จำเป็นต้องเข้าคิว ...

ฉันจะใช้ตัวอย่างภายใต้สคริปต์ในส่วนหัวของปลั๊กอินในคำตอบของไมค์

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);
}

เมื่อคุณตั้งค่าการพึ่งพา WordPress จะค้นหาและจัดคิวให้พร้อมสำหรับสคริปต์ของคุณดังนั้นคุณไม่จำเป็นต้องโทรหาสคริปต์เหล่านี้โดยอิสระ

นอกจากนี้คุณบางคนอาจสงสัยว่าการตั้งค่าการพึ่งพาหลายรายการอาจทำให้สคริปต์แสดงผลลัพธ์ผิดลำดับที่นี่ให้ฉันยกตัวอย่าง

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

หากสคริปต์ที่สองขึ้นอยู่กับสคริปต์ที่สาม (เช่น. สคริปต์ที่สามควรโหลดก่อน) สิ่งนี้จะไม่สำคัญ WordPress จะกำหนดลำดับความสำคัญของการเข้าคิวสำหรับสคริปต์เหล่านั้นและส่งออกตามลำดับที่ถูกต้องในระยะสั้น สำหรับคุณโดย WordPress

สำหรับชิ้นเล็ก ๆ ของสคริปต์ซึ่งคุณอาจไม่ต้องการที่จะรวมอยู่ในแฟ้มที่แยกต่างหากเช่นเพราะพวกเขาจะสร้างแบบไดนามิก WordPress 4.5 wp_add_inline_scriptและข้อเสนอต่อไป ฟังก์ชั่นนี้โดยทั่วไปจะทำให้สคริปต์เข้ากับสคริปต์อื่น

ตัวอย่างเช่นสมมติว่าคุณกำลังพัฒนาธีมและต้องการให้ลูกค้าของคุณสามารถแทรกสคริปต์ของตัวเอง (เช่น Google Analytics หรือ AddThis) ผ่านหน้าตัวเลือก จากนั้นคุณสามารถใช้wp_add_inline_scriptสลักสคริปต์นั้นกับไฟล์ js หลักของคุณ (เช่นสมมติว่าmainjs) ดังนี้:

$custom_script = get_option('my-script')
if (!empty($custom_script)) wp_add_inline_script ('mainjs', $custom_script);

วิธีที่ฉันชอบคือการได้รับประสิทธิภาพที่ดีดังนั้นแทนที่จะใช้wp_enqueue_scriptฉันใช้ HEREDOC กับ Fetch API เพื่อโหลดทุกอย่างแบบอะซิงโครนัสแบบขนาน:

$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;

จากนั้นใส่มันเข้าไปในหัวบางครั้งก็มีสไตล์ดังนี้:

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

ส่งผลให้เกิดน้ำตกที่มีลักษณะเช่นนี้โหลดทุกอย่างพร้อมกัน แต่ควบคุมลำดับการดำเนินการ:

หมายเหตุ:ต้องใช้ Fetch API ซึ่งไม่สามารถใช้ได้ในเบราว์เซอร์ทั้งหมด