คำถามติดแท็ก javascript

ภาษาสคริปต์ฝั่งไคลเอ็นต์มีประโยชน์สำหรับการสร้างเว็บไซต์แบบโต้ตอบ คำถามเกี่ยวกับการใช้ JavaScript นอกบริบท WordPress เป็นหัวข้อนอก แต่อาจถูกถามใน Stack Overflow

3
วิธีที่มีประสิทธิภาพมากที่สุดในการเพิ่มไฟล์จาวาสคริปต์ในโพสต์และ / หรือหน้าเฉพาะ
ฉันสงสัยว่าวิธีที่มีประสิทธิภาพที่สุดคือการเพิ่มไฟล์จาวาสคริปต์เฉพาะสำหรับโพสต์และ / หรือหน้า ต่อไปนี้เป็นคำตอบบางส่วนที่ฉันได้รับ: เปลี่ยนเป็นมุมมองการแก้ไข HTML และโพสต์ JavaScript ของคุณในนั้น (โซลูชันที่ไม่ดีพอ) ฟิลด์ที่กำหนดเองพร้อม JavaScript เฉพาะสำหรับโพสต์ / เพจนั้นในคู่ของคีย์ & ค่า ใน footer.php โหลดไฟล์ JavaScript ขึ้นอยู่กับว่าคุณอยู่ในหน้าไหน (สิ่งนี้นำไปสู่เงื่อนไขมากมาย) ในบันทึกด้านข้างไม่มีไฟล์ JavaScript ใดที่จะถูกแชร์ระหว่างหน้า - มันจะเจาะจงเฉพาะกับสิ่งที่คุณกำลังดูอยู่ ความคิดใด ๆ

1
ฉันต้องการจัดคิวไฟล์. js ให้กับธีมลูกของฉัน
ฉันพยายามจัดคิวไฟล์. js ที่กำหนดเองในไดเรกทอรีธีมลูกของฉัน ใน function.php ของชุดรูปแบบลูกของฉันฉันค้นหารหัสต่อไปนี้ /* After this. you can override Accessible Zen's pluggable functions or add your own. * Remember, do your best to stay accessible! :) * */ add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_enqueue_script( 'custom-script.js', 'js/custom-script.js', array('jquery') ); wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); wp_enqueue_style( …

6
วิธีรวมไฟล์ jQuery และ JavaScript อย่างถูกต้อง?
ฉันทำมันตอนนี้ด้วยรหัสต่อไปนี้: function uw_load_scripts() { // De-register the built in jQuery wp_deregister_script('jquery'); // Register the CDN version wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', array(), null, false); // Load it in your theme wp_enqueue_script( 'jquery' ); } add_action( 'wp_enqueue_scripts', 'uw_load_scripts' ); ใช้งานได้ แต่ฉันควรทำเช่นนี้สำหรับทุกคนเช่นนี้หรือสำหรับทุกคนยกเว้นผู้ดูแลระบบ (เพื่อให้แบ็กเอนด์ใช้รุ่น WordPress?): if (function_exists('load_my_scripts')) { function load_my_scripts() { if (!is_admin()) { wp_deregister_script( 'jquery' …

5
การตรวจสอบค่า Meta Box แบบกำหนดเอง & ฟิลด์ที่จำเป็น
สิ่งที่ฉันไม่เคยเห็นครอบคลุมเป็นวิธีที่ดีที่สุดในการตรวจสอบว่าเขตข้อมูลแบบฟอร์มเฉพาะกรอกอย่างถูกต้องสำหรับกล่องเมตาประเภทโพสต์ที่กำหนดเอง ฉันกำลังมองหาความคิดเห็นของผู้เชี่ยวชาญเกี่ยวกับวิธีตรวจสอบฟิลด์ที่กำหนดเองที่ดีที่สุดสำหรับ metaboxes ใด ๆ ที่อาจสร้างขึ้น ความสนใจของฉันคือ: ตรวจสอบให้แน่ใจว่ามีการตรวจสอบฟิลด์เกิดขึ้นก่อนที่จะเผยแพร่ / อัปเดตโพสต์ ใช้คลาส / รหัสที่ไม่ขัดแย้งกับจาวาสคริปต์ WordPress อื่น ๆ ช่วยให้คุณกำหนดเขตข้อมูลเฉพาะตามที่จำเป็นในขณะที่คนอื่นอาจเป็นตัวเลือก ตรวจสอบฟิลด์ตามกฎที่ปรับแต่งได้รวมถึง regex สำหรับสิ่งต่าง ๆ เช่นรูปแบบอีเมล ควบคุมการแสดงภาพข้อผิดพลาด / ประกาศใด ๆ ขอบคุณล่วงหน้า!

5
โซลูชั่นสำหรับสร้างจาวาสคริปต์ / CSS แบบไดนามิก
สมมติว่าคุณต้องสร้างจาวาสคริปต์หรือโค้ด CSS ที่ขึ้นอยู่กับบริบทปัจจุบัน ตัวอย่างเช่นคุณมีแบบฟอร์มในหน้าแรกที่ส่งคำขอ ajax เมื่อส่งและแบบฟอร์มอื่นในหน้าเดียว หรือในกรณีของ CSS คุณต้องการสร้างธีมที่อนุญาตให้ผู้ใช้สร้างเลย์เอาต์ของตนเองเปลี่ยนสี ฯลฯ วิธีแก้ปัญหาฉันเห็นแล้ว: รวมรหัสในส่วนหัวของเอกสาร (หรือท้ายในกรณีของ JS) ทำคำขอพิเศษที่ผลรหัสเช่นsite.com?get_assets สิ่งนี้ช้าเพราะโหลด WP สองครั้ง เก็บไว้ในไฟล์ชั่วคราวตามระยะเวลาที่กำหนดและโหลดจากที่นั่น ไม่น่าเชื่อถือมากสำหรับธีมหรือปลั๊กอินสาธารณะ Javascript เท่านั้น - ทำให้เป็นแบบคงที่โดยใส่ลงในไฟล์ปกติที่โหลดทุกครั้ง ในกรณีนี้คุณจะต้องทำให้รหัสของคุณจัดการกับสถานการณ์ใด ๆ คุณรู้จักคนอื่นหรือไม่ คุณจะไปทางไหน

2
ส่งผ่าน object / JSON ไปที่ wp_localize_script
ฉันมีจาวาสคริปต์ที่มีวัตถุตามตัวอักษร แต่ฉันต้อง จำกัด มันและฉันพยายามหาวิธีเขียนมันใหม่เพื่อที่ฉันจะได้รับ wp_localize_script () เพื่อรับมันและออกรูปแบบที่ถูกต้อง รุ่นที่ไม่ใช่ภาษาท้องถิ่น (ไม่ใช่ไดนามิก) มีลักษณะดังนี้: var layoyt_config = { 'header' : 1 , 'footer' : 1 , 'ls' : {'sb1':1} , 'rs' : {'sb1':1,'sb2':1} , 'align' : 'center' }; ตอนนี้เพื่อให้มีค่าเหล่านั้นที่สร้างขึ้นโดย php (ขึ้นอยู่กับบาง wp_settings) ฉันต้องการใช้ wp_localize_script ดังนั้นฉันสามารถเอามันจากที่นั่น: var layoyt_config = my_localized_data.layoyt_config; และเพื่อให้ได้ข้อมูลนั้นไปยังคุณสมบัติของวัตถุนั้นฉัน 'คิด' ฉันสามารถทำสิ่งนี้ได้ แต่ไม่ชัดเจน: $data …

6
เส้นทางธีมในไฟล์จาวาสคริปต์
ฉันต้องรวมเส้นทางไปยังไฟล์ธีมของฉันภายในไฟล์จาวาสคริปต์ ฉันจะไปเกี่ยวกับเรื่องนี้อย่างไร ฉันได้ลองแล้ว: var templateUrl = "<?php get_stylesheet_directory_uri(); ?>"; function LightboxOptions() { this.fileLoadingImage = "'"+templateUrl+"/img/loading.gif'"; this.fileCloseImage = "'"+templateUrl+"/img/close.png'"; this.resizeDuration = 700; this.fadeDuration = 500; this.labelImage = "Image"; this.labelOf = "of"; } นี่ไม่ได้ให้เส้นทางแก่ฉัน แต่เพียงแค่แทรก<?php get_stylesheet_directory_uri(); ?>แทนที่จะเป็นเส้นทางที่แท้จริง ความคิดใด ๆ ขอบคุณล่วงหน้า!

6
วิธีการรวมรหัสเฉพาะในหน้าเฉพาะ?
ฉันเรียนรู้เกี่ยวกับปลั๊กอินและรหัสย่อ ฉันสังเกตเห็นว่าเมื่อฉันเปิดใช้งานปลั๊กอินโค้ดของมันจะถูกโหลดในทุกหน้าของฉัน - แม้แต่หน้าเว็บที่ไม่มีรหัสย่อของฉัน (ฉันไม่ได้หมายถึงเนื้อหากับหน้าผู้ดูแลระบบ) ในหน้าเนื้อหาบางหน้าฉันใช้รหัสย่อเฉพาะและในหน้าเนื้อหาอื่น ๆ ฉันไม่ - แต่ในกรณีใด ๆ รหัสของปลั๊กอินจะถูกโหลด ฉันจะสร้างปลั๊กอินให้รวมเฉพาะในหน้าเว็บที่ใช้รหัสย่อได้อย่างไร รายละเอียดเพิ่มเติม: สมมติว่าฉันมีปลั๊กอินที่สร้างกล่องรวมภาพ ฉันเปิดใช้งานปลั๊กอิน ในหน้า "ภาพที่น่าสนใจ" ของฉันฉันใช้รหัสย่อเพื่อสร้างกล่องรวมภาพ เมื่อฉันตรวจสอบดูแหล่งที่มาในหน้า "เกี่ยวกับ" ของฉันซึ่งไม่ได้ใช้รหัสย่อของไลท์บ็อกซ์ฉันเห็นว่าโค้ดของปลั๊กอิน Lightbox ถูกโหลดแล้ว หน้าของฉันจะโหลดเร็วขึ้นถ้าฉันเขียนปลั๊กอินของฉันเพื่อให้รหัสของมันถูกโหลดบนหน้าเว็บที่จำเป็นเท่านั้น เป็นไปได้ไหม มิฉะนั้นฉันจะมีรหัสสำหรับปลั๊กอินจำนวนมากที่โหลดบนหน้าเว็บโดยไม่จำเป็น ความคิดใด ๆ

3
wp_add_inline_script โดยไม่ต้องพึ่งพา
ฉันมีข้อมูลโค้ด javascript ที่ฉันต้องการแทรกลงในส่วนท้ายของหน้า เป็นรหัสติดตามสมมติว่าคล้ายกับ Google Analytics ไม่มีการอ้างอิงเป็นข้อมูลโค้ดแบบสแตนด์อโลน ฉันสามารถทำอะไรเช่นนี้ function render_tracking_code(){ wp_enqueue_script( 'depends-js', 'https://rdiv.com/dummy.js', array(), '0.01', true ); wp_add_inline_script( 'depends-js', 'aWholeBunchOfJavascriptCode' ); } add_action( 'wp_enqueue_scripts', 'render_tracking_code' ); ดูเหมือนโง่เล็กน้อย (dummy.js เป็นไฟล์เปล่า) แต่ใช้งานได้ มีวิธีข้ามการพึ่งพาหรือไม่

1
Wordpress จะห่อสคริปต์แบบอินไลน์ใน CDATA เมื่อใด
ฉันกำลังดีบักปัญหากับสคริปต์บุคคลที่สามของเราที่ผู้ใช้ wordpress ใช้โดยการคัดลอก / วางส่วนของสคริปต์และ html ลงในเนื้อหาของโพสต์เช่น (ไม่ใช่ตัวอย่างของโลกที่แท้จริง): <script> window.foobar = window.foobar || { hello: function(){ console.log('Hello World'); } }; window.foobar.hello(); </script> ฉันสังเกตเห็นว่าการติดตั้ง wordpress บางส่วนจะห่อสิ่งนี้ใน CDATA บางอันจะไม่ (อาจเป็นการตรวจสอบ DOCTYPE บางประเภท - แม้ว่าชุดรูปแบบทั้งหมดที่ฉันทดสอบนี้ใช้ HTML5 doctype) แต่เมื่อตัดสคริปต์ใน CDATA ผู้ใช้จะถูกกัดโดยข้อผิดพลาดต่อไปนี้: https://core.trac.wordpress.org/ticket/3670 (การปิด>ถูกแทนที่โดยไม่ถูกต้อง>) ซึ่งนำไปสู่เบราว์เซอร์ที่ละเว้นเนื้อหาของสคริปต์ : <script>// <![CDATA[ window.foobar = window.foobar || { hello: function(){ …

2
Customizer JS API
ตกลงดังนั้นฉันพยายามสอนตัวเองเพื่อสร้างส่วนพาเนลใหม่และควบคุมแบบไดนามิกโดยใช้ JS API ของ Customizer มันน่าผิดหวังไม่กี่วันและฉันไม่สามารถหาวิธีที่แน่นอนเพื่อให้บรรลุสิ่งนี้ผ่าน JS API จนถึงตอนนี้สิ่งที่ฉันทำเพื่อให้มันเกิดขึ้น แต่ไม่ประสบความสำเร็จ: // for Settings api.create( params.id, params.id, params.default, params.args ); // for controls var controlConstructor = api.controlConstructor[params.type]; var control = new controlConstructor(params.id, { params: params, previewer: api.previewer }); api.control.add( params.id, control ); //for Sections var section = new api.Section(params.id, { params: …

3
Nonce ที่ดึงมาจาก REST API นั้นไม่ถูกต้องและแตกต่างจาก nonce ที่สร้างใน wp_localize_script
สำหรับผู้ที่เดินทางมาจาก Google: คุณอาจจะไม่ควรจะได้รับขณะปัจจุบันจากส่วนที่เหลือของ APIเว้นแต่คุณจริงๆจะรู้ว่าสิ่งที่คุณทำ รับรองความถูกต้องของคุกกี้ที่ใช้กับ REST API เป็นเพียงความหมายสำหรับปลั๊กอินและธีม สำหรับการใช้งานหน้าเดียวคุณอาจจะใช้OAuth คำถามนี้มีอยู่เนื่องจากเอกสารไม่ได้ / ไม่ชัดเจนว่าคุณควรรับรองความถูกต้องจริงอย่างไรเมื่อสร้างแอปพลิเคชันหน้าเดียว JWT ไม่เหมาะสำหรับเว็บแอปและ OAuth นั้นยากที่จะใช้งานมากกว่าการรับรองความถูกต้องตามคุกกี้ หนังสือคู่มือมีตัวอย่างเกี่ยวกับวิธีที่ไคลเอ็นต์ Backbone JavaScript จัดการค่าคงที่และหากฉันทำตามตัวอย่างฉันจะได้รับ nonce ที่ปลายทางที่มีอยู่แล้วภายในเช่น / wp / v2 / posts ยอมรับ \wp_localize_script("client-js", "theme", [ 'nonce' => wp_create_nonce('wp_rest'), 'user' => get_current_user_id(), ]); อย่างไรก็ตามการใช้ Backbone ไม่เป็นปัญหาและมีธีมดังนั้นฉันจึงเขียนปลั๊กอินต่อไปนี้: <?php /* Plugin Name: Nonce Endpoint */ add_action('rest_api_init', …

1
ทำไมจาวาสคริปต์ถึงได้รับอนุญาตในเนื้อหาโพสต์ของฉัน
Codex บอกว่าคุณไม่สามารถเพิ่มจาวาสคริปต์ในเนื้อหาโพสต์ https://codex.wordpress.org/Using_Javascript แต่ฉันสามารถ. ฉันปิดปลั๊กอินทั้งหมดและเปลี่ยนเป็นชุดรูปแบบสิบสองสิบหก แต่ไม่มีประโยชน์ - ฉันยังคงสามารถเพิ่มจาวาสคริปต์ผ่านเนื้อหาโพสต์และเรียกใช้ในส่วนหน้า ฉันไม่ต้องการให้ใครสามารถเพิ่มจาวาสคริปต์ผ่านเนื้อหาโพสต์ (นอกเหนือจาก oembed ฯลฯ ) ด้วยเหตุผลด้านความปลอดภัย มีใครประสบปัญหานี้หรือมีความคิดที่จะช่วย? ขอบคุณ

1
เป็นไปได้หรือไม่ที่จะขยายวิธีการกำหนด JS เอง
ฉันสงสัยว่าถ้ามันเป็นไปได้ที่จะขยายวิธีการของการที่ไม่ระบุชื่อวัตถุที่อยู่ในapi wp-admin/js/customize-control.jsฉันต้องการเขียนทับหนึ่งในวิธีการเหล่านี้ด้วยตรรกะที่กำหนดเองของฉัน แต่ฉันสงสัยว่ามันเป็นไปไม่ได้เนื่องจากมันถูกห่อหุ้มด้วยการแสดงออกของฟังก์ชั่นที่เรียกใช้ทันที: /* globals _wpCustomizeHeader, _wpMediaViewsL10n */ (function( exports, $ ){ // code })( wp, jQuery ); window.wp.customizeเท่าที่ผมสามารถมองเห็นฉันไม่สามารถที่จะขยายต้นแบบจากวัตถุหน้าต่างเพราะมันดำเนินการไม่ระบุชื่อและไม่สามารถใช้ได้จาก ความคิดใด ๆ ถ้าสิ่งนั้นเป็นไปได้? แม้จะมีการพูดถึงการเอาชนะสิ่งนี้ในเอกสาร. toggle () วิธีการ / คำอธิบาย: https://github.com/WordPress/WordPress/blob/master/wp-admin/js/customize-controls.js#L110แต่ฉัน ไม่แน่ใจว่าพวกเขาหมายถึงเพียงแค่การฟอร์กไฟล์ JS ทั้งหมดทำการถอนคิวรุ่น WP และจัดคิวของคุณเองหรือถ้าพวกมันมีความหมายหรืออะไรที่แตกต่างออกไป โปรดทราบว่าดูเหมือนว่าควรจะเป็นไปได้ด้วยwp.customize.{method}.extend({ foo: // replace method foo here })แต่จะใช้กับคลาส / วัตถุฐานสาธารณะเท่านั้นไม่ใช่ในwp-admin/js/customize-control.js

4
เพิ่ม Javascript ลงในเมนู WordPress
มีวิธีในการวางจาวาสคริปต์ในส่วน URL ของรายการเมนู WordPress หรือไม่? ฉันมีฟังก์ชั่นการแชทสดบนเว็บไซต์ของฉันและฉันควรจะวางโค้ดนี้ลงบนเว็บไซต์เพื่อสร้างลิงค์เพื่อเปิดการแชทสด (ตามที่แนะนำไว้ที่นี่) <!-- BEGIN OLARK CHAT LINK --> <a href="javascript:void(0);" onclick="olark('api.box.expand')"> Click here to chat! </a> <!-- END OLARK CHAT LINK --> ลูกค้าต้องการลิงค์ในแถบนำทางยูทิลิตี้ซึ่งสร้างขึ้นโดยใช้เมนู WordPress ในแดชบอร์ดของ WordPress แต่เมื่อฉันคัดลอกและวางjavascript:void(0);" onclick="olark('api.box.expand')ลงในช่อง URL ในแดชบอร์ด WordPress มันเพิ่งหายไปและลิงค์ยังคงไม่ทำงาน บางสิ่งที่ฉันอ่านบอกว่าบางทีฉันสามารถวางคลาสที่กำหนดเองบนลิงก์ที่เป็นปัญหาแล้วเขียนฟังก์ชัน Javascript ที่จะเริ่มทำงานเมื่อมีการคลิกลิงก์ที่มีคลาสนั้น ฉันพยายามอย่างนั้นและฉันก็ทำมันไม่ได้ ฉันไม่รู้จัก Javascript มากนักดังนั้นจึงเป็นไปได้ว่าฉันเขียนผิดทั้งหมด ไม่มีใครรู้วิธีการทำเช่นนี้? ฉันต้องการที่จะทำโดยไม่ต้องใช้ปลั๊กอิน
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.