it-swarm.asia

ما هي الطريقة المفضلة لإضافة ملفات جافا سكريبت مخصصة إلى الموقع؟

لقد قمت بالفعل بإضافة نصوصي ، لكنني أردت أن أعرف الطريقة المفضلة.
أضع علامة <script> مباشرةً في header.php من القالب الخاص بي.

هل هناك طريقة مفضلة لإدراج ملفات js خارجية أو مخصصة؟
كيف يمكنني ربط ملف js بصفحة واحدة؟ (لدي الصفحة الرئيسية في الاعتبار)

68
naugtur

استخدم 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 وللبرنامج النصي الخاص بك توفير المعلمة الثالثة إلى 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(). يتم إخراج رقم الإصدار في المصدر كوسيطة استعلام في عنوان URL للنص البرمجي ويعمل على إجبار المستعرض على إعادة تحميل الملف المخزن مؤقتًا المحتمل في حالة تغيير الإصدار.

تحميل البرامج النصية فقط على الصفحات عند الحاجة

تقول القاعدة 1st لأداء الويب إلى {تصغير طلبات 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 );
}

تحميل البرامج النصية الخاصة بك في تذييل الصفحة

إذا كانت البرامج النصية الخاصة بك هي واحدة من تلك التي تحتاج إلى تحميلها في التذييل ، فهناك المعلمة الخامسة من wp_enqueue_script() التي تخبر WordPress بتأخيرها ووضعها في تذييل الصفحة (على افتراض أن موضوعك لم يسيء التصرف وأنه بالفعل يستدعي wp_footer ربط مثل جميع سمات 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 على مقالة رائعة بعنوان كيفية: تحميل جافا سكريبت ببرنامج WordPress Plugin الذي يحتوي على تفاصيل أكثر.

تعطيل البرامج النصية للحصول على التحكم

يحتوي Justin Tadlock على مقالة لطيفة بعنوان كيفية تعطيل البرامج النصية والأنماط في حال أردت:

  1. ادمج عدة ملفات في ملفات واحدة (قد يختلف عدد الأميال مع JavaScript هنا).
  2. قم بتحميل الملفات فقط على الصفحات التي نستخدمها في البرنامج النصي أو النمط.
  3. توقف عن استخدام! المهم في ملف style.css الخاص بنا لإجراء تعديلات CSS بسيطة.

تمرير القيم من PHP إلى JS مع wp_localize_script()

يحتوي مدونته فلاديمير بريلوفاتش على مقالته الرائعة بعنوان أفضل الممارسات لإضافة كود JavaScript إلى إضافات WordPress حيث يناقش استخدام wp_localize_script() للسماح لك بتعيين قيمة المتغيرات في جانب الخادم PHP إلى استخدامها لاحقًا في Javascript من جانب العميل.

حقا السيطرة الحبيبات الدقيقة مع wp_print_scripts()

وأخيرًا ، إذا كنت بحاجة إلى تحكم دقيق جدًا ، فيمكنك الاطلاع على wp_print_scripts() كما تمت مناقشته في Beer Planet في منشور بعنوان كيفية تضمين CSS وجافا سكريبت بشكل مشروط وفقط عند الحاجة إلى الوظائف .

Epiloque

هذا عن أفضل الممارسات بما في ذلك ملفات Javascript مع WordPress. إذا فاتني شيء (ربما لدي) تأكد من إخباري في التعليقات حتى أتمكن من إضافة تحديث للمسافرين في المستقبل.

78
MikeSchinkel

لتكمل التوضيح الرائع لمكيس باستخدام المستحضر ، أود فقط أن أشير إلى أن البرامج النصية المتضمنة حيث أن التبعيات لا تحتاج إلى أن يتم وضعها ...

سأستخدم المثال تحت البرامج النصية في البرنامج المساعد العنوان في إجابة مايك.

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 أولويات enqueue لتلك البرامج النصية ويقوم بإخراجها بالترتيب الصحيح ، باختصار ، يتم حلها تلقائيًا لك من قبل وورد.

11
t31os

بالنسبة إلى الأجزاء الصغيرة من البرامج النصية ، التي قد لا ترغب في تضمينها في ملف منفصل ، على سبيل المثال لأنه يتم إنشاؤها ديناميكيًا ، 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);
0
cjbj

طريقتي المفضلة هي تحقيق أداء جيد ، لذا بدلاً من استخدام wp_enqueue_script ، أستخدم HEREDOC مع واجهة برمجة التطبيقات Fetch لتحميل كل شيء بشكل غير متزامن بالتوازي:

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

مما أدى إلى حدوث شلال يشبه هذا ، قم بتحميل كل شيء دفعة واحدة مع التحكم في أمر التنفيذ:

 enter image description here 

ملاحظة: هذا يتطلب استخدام Fetch API ، وهو غير متوفر في جميع المتصفحات.

0
Josh Habdas