ฉันจะเพิ่มสคริปต์ jQuery อย่างง่ายใน WordPress ได้อย่างไร

ฉันอ่าน Codex และบล็อกโพสต์เกี่ยวกับการใช้ jQuery ใน WordPress และมันน่าผิดหวังมาก ฉันมีเท่าที่โหลด jQuery ในfunctions.phpไฟล์ แต่คำแนะนำทั้งหมดมีเส็งเคร็งเพราะพวกเขาถือว่าคุณมีประสบการณ์ WordPress มากมายอยู่แล้ว ตัวอย่างเช่นพวกเขาบอกว่าตอนนี้ฉันกำลังโหลด jQuery ผ่านfunctions.phpไฟล์ตอนนี้สิ่งที่ฉันต้องทำคือโหลด jQuery ของฉัน

ฉันจะทำสิ่งนี้ได้อย่างไร? ฉันเพิ่มโค้ดลงในไฟล์อะไรโดยเฉพาะ ฉันจะเพิ่มลงในหน้า WordPress เดียวได้อย่างไร?

ฉันรู้ว่าคุณหมายถึงอะไรเกี่ยวกับบทเรียนนี้ นี่คือวิธีการ:

ก่อนอื่นคุณต้องเขียนสคริปต์ของคุณ ในโฟลเดอร์ธีมของคุณให้สร้างโฟลเดอร์ที่เรียกว่า 'js' สร้างไฟล์ในโฟลเดอร์นั้นสำหรับจาวาสคริปต์ของคุณ เช่น your-script.js เพิ่มสคริปต์ jQuery ของคุณลงในไฟล์นั้น (คุณไม่จำเป็นต้องใช้<script>แท็กในไฟล์. js)

นี่คือตัวอย่างว่าสคริปต์ jQuery ของคุณ (ใน wp-content / themes / your-theme / js / your-scrript.js) อาจมีลักษณะอย่างไร:

jQuery(document).ready(function($) {
  $('#nav a').last().addClass('last');
})

สังเกตว่าฉันใช้ jQuery ไม่ใช่ $ ที่จุดเริ่มต้นของฟังก์ชัน

ตกลงตอนนี้เปิดไฟล์ functions.php ของธีมของคุณ คุณจะต้องใช้wp_enqueue_script()ฟังก์ชั่นเพื่อเพิ่มสคริปต์ของคุณในขณะที่ยังบอก WordPress ว่าต้องอาศัย jQuery นี่คือวิธีการ:

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_enqueue_script(
        'your-script', // name your script so that you can attach other scripts and de-register, etc.
        get_template_directory_uri() . '/js/your-script.js', // this is the location of your script file
        array('jquery') // this array lists the scripts upon which your script depends
    );
}

สมมติว่าธีมของคุณมี wp_head และ wp_footer ในตำแหน่งที่ถูกต้องสิ่งนี้ควรใช้งานได้ โปรดแจ้งให้เราทราบหากคุณต้องการความช่วยเหลือเพิ่มเติม

คำถาม WordPress สามารถถามไปที่คำตอบ WordPress

หลังจากค้นหามามากในที่สุดฉันก็พบสิ่งที่ใช้ได้กับ WordPress ล่าสุด ขั้นตอนต่อไปนี้:

1. ค้นหาไดเร็กทอรีของธีมของคุณสร้างโฟลเดอร์ในไดเร็กทอรีสำหรับ js แบบกำหนดเองของคุณ ( custom_js ในตัวอย่างนี้ )
2. ใส่ jQuery ที่กำหนดเองของคุณในไฟล์. js ในไดเร็กทอรีนี้ ( jquery_test.js ในตัวอย่างนี้ )

3. ตรวจสอบให้แน่ใจว่า jQuery .js ที่กำหนดเองของคุณมีลักษณะดังนี้:

   (function($) {
   $(document).ready(function() {
   $('.your-class').addClass('do-my-bidding');
   })
   })(jQuery);

4. ไปที่ไดเร็กทอรีของธีมเปิดfunctions.php

5. เพิ่มรหัสใกล้ด้านบนที่มีลักษณะดังนี้:

   //this goes in functions.php near the top
   function my_scripts_method() {
   // register your script location, dependencies and version
      wp_register_script('custom_script',
      get_template_directory_uri() . '/custom_js/jquery_test.js',
      array('jquery'),
      '1.0' );
    // enqueue the script
     wp_enqueue_script('custom_script');
     }
   add_action('wp_enqueue_scripts', 'my_scripts_method');

6. ตรวจสอบไซต์ของคุณเพื่อให้แน่ใจว่าใช้งานได้จริง!

หากคุณใช้ธีมลูกของ wordpress เพื่อเพิ่มสคริปต์ให้กับธีมของคุณคุณควรเปลี่ยนฟังก์ชัน get_template_directory_uri เป็น get_stylesheet_directory_uri ตัวอย่างเช่น:

ธีมหลัก:

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_register_script(
        'parent-theme-script', 
        get_template_directory_uri() . '/js/your-script.js', 
        array('jquery') 
    );

    wp_enqueue_script('parent-theme-script');
}

ธีมเด็ก:

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_register_script(
       'child-theme-script', 
       get_stylesheet_directory_uri() . '/js/your-script.js', 
       array('jquery') 
    );

    wp_enqueue_script('child-theme-script');
}

get_template_directory_uri: / your-site / wp-content / themes / parent-theme

get_stylesheet_directory_uri: / your-site / wp-content / themes / child-theme

คุณสามารถเพิ่ม jQuery หรือ javascript ในไฟล์ function.php ของธีม รหัสดังต่อไปนี้:

add_action( 'wp_enqueue_scripts', 'add_my_script' );

function add_my_script() {
wp_enqueue_script(
    'your_script_name', // your script unique name 
    get_template_directory_uri().'/js/your-script.js', //script file location
    array('jquery') //lists the scripts upon which your script depends
);
}

สำหรับรายละเอียดเพิ่มเติมโปรดไปที่บทช่วยสอนนี้: http://www.codecanal.com/add-simple-jquery-script-wordpress/

นอกจากการใส่สคริปต์ผ่านฟังก์ชั่นแล้วคุณสามารถ "เพียง" รวมลิงก์ (แท็ก rel ของลิงก์ที่อยู่) ในส่วนหัวส่วนท้ายในเทมเพลตใดก็ได้ คุณต้องแน่ใจว่าเส้นทางนั้นถูกต้อง ฉันขอแนะนำให้ใช้สิ่งนี้ (สมมติว่าคุณอยู่ในไดเรกทอรีของธีมของคุณ)

<script type="javascript" href="<?php echo get_template_directory_uri();?>/your-file.js"></script>

แนวทางปฏิบัติที่ดีคือใส่สิ่งนี้ไว้ข้างหน้าแท็กปิดเนื้อหาหรืออย่างน้อยก็ไว้ก่อนส่วนท้าย คุณยังสามารถใช้ php include หรือวิธีการอื่น ๆ ในการดึงไฟล์นี้เข้ามา

<script type="javascript"><?php include('your-file.js');?></script>

** # วิธีที่ 1: ** ลองใส่รหัส jquery ของคุณในไฟล์ js แยกกัน

ตอนนี้ลงทะเบียนสคริปต์นั้นในไฟล์ functions.php

function add_my_script() {
    wp_enqueue_script(
      'custom-script', get_template_directory_uri() . '/js/your-script-name.js', 
        array('jquery') 
    );
}
add_action( 'wp_enqueue_scripts', 'add_my_script' );

ตอนนี้คุณทำเสร็จแล้ว

การลงทะเบียนสคริปต์ในฟังก์ชั่นมีประโยชน์เนื่องจากมีอยู่ใน<head>ส่วนเมื่อหน้าโหลดดังนั้นจึงเป็นส่วนหนึ่งของ header.php เสมอ คุณจึงไม่ต้องเขียนโค้ดซ้ำทุกครั้งที่เขียนเนื้อหา html ใหม่

# วิธีที่ 2:ใส่รหัสสคริปต์ในเนื้อหาของหน้าภายใต้<script>แท็ก จากนั้นคุณไม่จำเป็นต้องลงทะเบียนในฟังก์ชัน

คุณสามารถเพิ่ม javascript หรือ jquery ที่กำหนดเองได้โดยใช้ปลั๊กอินนี้
https://wordpress.org/plugins/custom-javascript-editor/

เมื่อคุณใช้ jQuery อย่าลืมใช้โหมด jquery noconflict

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

นี่คือรหัสของฉันและคุณสามารถใช้เป็นเทมเพลตได้

jQuery(document).ready(function( $ ){
  $("#btnCalculate").click(function () {
        var val1 = $(".visits").val();
        var val2 = $(".collection").val();
        var val3 = $(".percent").val();
        var val4 = $(".expired").val();
        var val5 = $(".payer").val();
        var val6 = $(".deductible").val(); 
        var result = val1 * (val3 / 100) * 10 * 0.25;
        var result2 = val1 * val2 * (val4 / 100) * 0.2;
        var result3 = val1 * val2 * (val5 / 100) * 0.2;
        var result4 = val1 * val2 * (val6 / 100) * 0.1;
        var val7 = $(".pverify").val();
        var result5 = result + result2 + result3 + result4 - val7;
        var result6 = result5 * 12;
        $("#result").val("$" + result);
        $("#result2").val("$" + result2);
        $("#result3").val("$" + result3);
        $("#result4").val("$" + result4);
        $("#result5").val("$" + result5);
        $("#result6").val("$" + result6);
  });
});

คำตอบจากที่นี่: https://premium.wpmudev.org/blog/adding-jquery-scripts-wordpress/

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

เนื่องจาก jQuery ยังคงเป็นเฟรมเวิร์ก Javascript ที่ใช้บ่อยที่สุดมาดูกันว่าคุณสามารถเพิ่มสคริปต์ง่ายๆให้กับธีมหรือปลั๊กอินของคุณได้อย่างไร

โหมดความเข้ากันได้ของ jQuery

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

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

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

เริ่มจากมุมมองของ JavaScript:

1. เขียนฟังก์ชัน JavaScript ของคุณในไฟล์“ .js” แยกต่างหาก

อย่าคิดที่จะรวม JavaScript ที่สำคัญไว้ใน html ของโพสต์ของคุณ - สร้างไฟล์ JavaScript หรือไฟล์ด้วยโค้ดของคุณ

2. เชื่อมต่อ JavaScript ของคุณกับ html ของโพสต์ของคุณ

หากวิดเจ็ต JavaScript ของคุณโต้ตอบกับการควบคุมและฟิลด์ html คุณจะต้องเข้าใจวิธีการสืบค้นและตั้งค่าองค์ประกอบเหล่านั้นจาก JavaScript และวิธีให้องค์ประกอบ UI เรียกฟังก์ชัน JavaScript ของคุณ นี่คือตัวอย่างสองสามตัวอย่าง ก่อนจาก JavaScript:

var val = document.getElementById(“AM_Freq_A_3”).value;

และจาก html:

<input type="range" id="AM_Freq_A_3" class="freqSlider" min="0" max="1000" value="0" oninput='sliderChanged_AM_widget(this);'/>

3. ใช้ jQuery เพื่อเรียกใช้ฟังก์ชันการเริ่มต้นวิดเจ็ต JavaScript ของคุณ

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

jQuery(document).ready(function( $ ) {
    your_init_function();
});

4. ในโค้ด html ของโพสต์ของคุณให้โหลดสคริปต์ที่จำเป็นสำหรับโพสต์ของคุณ

ในโปรแกรมแก้ไขโค้ด Wordpress ฉันมักจะระบุสคริปต์ที่ท้ายโพสต์ ตัวอย่างเช่นฉันมีโฟลเดอร์สคริปต์ในไดเร็กทอรีหลักของฉัน ข้างในฉันมีไดเร็กทอรียูทิลิตี้ที่มี JavaScript ทั่วไปซึ่งบางโพสต์ของฉันอาจแชร์ - ในกรณีนี้ฟังก์ชันยูทิลิตีคณิตศาสตร์ของฉันเองและไลบรารีการลงจุด flotr2 ฉันพบว่าสะดวกกว่าในการจัดกลุ่ม JavaScript ที่โพสต์เฉพาะไว้ในไดเร็กทอรีอื่นโดยมีไดเร็กทอรีย่อยตามวันที่แทนที่จะใช้ Media Manager เป็นต้น

<script type="text/javascript" src="/scripts/utils/flotr2.min.js"></script>
<script type="text/javascript" src="/scripts/utils/math.min.js"></script>
<script type="text/javascript" src="/scripts/widgets/20161207/FreqRes.js"></script>

5. จัดคิว jQuery

Wordpress ลงทะเบียน jQuery แต่ไม่สามารถใช้งานได้เว้นแต่คุณจะบอก Wordpress ว่าคุณต้องการโดยจัดคิว ถ้าคุณไม่ทำเช่นนั้นคำสั่ง jQuery จะล้มเหลว แหล่งข้อมูลหลายแห่งบอกวิธีเพิ่มคำสั่งนี้ใน functions.php ของคุณ แต่สมมติว่าคุณรู้รายละเอียดสำคัญอื่น ๆ

ก่อนอื่นการแก้ไขธีมเป็นความคิดที่ไม่ดีการอัปเดตธีมในอนาคตจะลบล้างการเปลี่ยนแปลงของคุณ สร้างธีมลูก วิธีการมีดังนี้

https://developer.wordpress.org/themes/advanced-topics/child-themes/

ไฟล์ functions.php ของเด็กไม่ได้แทนที่ไฟล์ของธีมพาเรนต์ที่มีชื่อเดียวกัน แต่จะเพิ่มเข้าไป บทแนะนำสำหรับเด็กจะแนะนำวิธีจัดคิวไฟล์ style.css หลักและลูก เราสามารถเพิ่มอีกบรรทัดในฟังก์ชันนั้นเพื่อจัดคิว jQuery ได้ นี่คือไฟล์ functions.php ทั้งหมดของฉันสำหรับธีมลูก:

<?php
add_action( 'wp_enqueue_scripts', 'earlevel_scripts_enqueue' );
function earlevel_scripts_enqueue() {
    // styles
    $parent_style = 'parent-style';
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );

    // posts with js widgets need jquery
    wp_enqueue_script('jquery');
}

คุณสามารถใช้ฟังก์ชันที่กำหนดไว้ล่วงหน้าของ WordPress เพื่อเพิ่มไฟล์สคริปต์ไปยังปลั๊กอิน WordPress

wp_enqueue_script( 'script', plugins_url('js/demo_script.js', __FILE__), array('jquery'));

ดูโพสต์ที่ช่วยให้คุณเข้าใจว่าคุณสามารถใช้ jQuery และ CSS ในปลั๊กอิน WordPress ได้ง่ายเพียงใด

นอกจากการใส่สคริปต์ผ่านฟังก์ชั่นแล้วคุณสามารถ "เพียง" รวมลิงก์ (แท็ก rel ของลิงก์ที่อยู่) ในส่วนหัวส่วนท้ายในเทมเพลตใดก็ได้

ไม่คุณไม่ควรเพิ่มลิงก์ไปยังสคริปต์ภายนอกเช่นนี้ใน WordPress การจัดคิวผ่านไฟล์ functions.php ทำให้แน่ใจว่าสคริปต์ถูกโหลดตามลำดับที่ถูกต้อง

ความล้มเหลวในการจัดคิวอาจส่งผลให้สคริปต์ของคุณไม่ทำงานแม้ว่าจะเขียนอย่างถูกต้องก็ตาม

คุณสามารถเขียนสคริปต์ของคุณใน file.And อีก enqueue image-ticker.jsไฟล์ของคุณเช่นนี้สมมติว่าชื่อสคริปต์ของคุณคือ

wp_enqueue_script( 'image-ticker-1', plugins_url('/js/image-ticker.js', __FILE__), array('jquery', 'image-ticker'), '1.0.0', true ); 

แทนที่/js/image-ticker.jsคุณควรใส่พา ธ ไฟล์ js ของคุณ

ใน WordPress วิธีที่ถูกต้องในการรวมสคริปต์ในเว็บไซต์ของคุณคือการใช้ฟังก์ชันต่อไปนี้

wp_register_script( $handle, $src )
wp_enqueue_script( $handle, $src )

wp_enqueue_scriptฟังก์ชั่นเหล่านี้จะถูกเรียกว่าภายในเบ็ด

สำหรับรายละเอียดและตัวอย่างเพิ่มเติมคุณสามารถตรวจสอบการเพิ่มไฟล์ JS ใน Wordpress โดยใช้ wp_register_script & wp_enqueue_script

ตัวอย่าง:

function webolute_theme_scripts() {
    wp_register_script( 'script-name', get_template_directory_uri() . '/js/example.js', array('jquery'), '1.0.0', true );
    wp_enqueue_script( 'script-name' );
}
add_action( 'wp_enqueue_scripts', 'webolute_theme_scripts' );

"เรามี Google" อ้างอิง สำหรับการใช้สคริปต์อย่างถูกต้องภายใน wordpress เพียงเพิ่มไลบรารีที่โฮสต์ เช่นเดียวกับGoogle

หลังจากไลบรารีที่เลือกที่คุณต้องการเชื่อมโยงก่อนสคริปต์ที่กำหนดเองของคุณ: exmpl

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

และตามสคริปต์ของคุณเอง

<script type="text/javascript">
    $(document).ready(function () {
        $('.text_container').addClass("hidden");
    });
</script>

ต้องโหลด jquery เท่านั้นหรือ?

1) เช่นเดียวกับคำแนะนำอื่น ๆ กล่าวว่าให้ลงทะเบียนสคริปต์ของคุณในไฟล์ functions.php ดังนี้:

// register scripts
if (!is_admin()) {
    // here is an example of loading a custom script in a /scripts/ folder in your theme:
    wp_register_script('sandbox.common', get_bloginfo('template_url').'/scripts/common.js', array('jquery'), '1.0', true);
    // enqueue these scripts everywhere
    wp_enqueue_script('jquery');
    wp_enqueue_script('sandbox.common');
}

2) สังเกตว่าเราไม่จำเป็นต้องลงทะเบียน jQuery เพราะมันอยู่ในคอร์แล้ว ตรวจสอบให้แน่ใจว่ามีการเรียก wp_footer () ใน footer.php และ wp_head () ถูกเรียกใน header.php ของคุณ (ซึ่งเป็นที่ที่จะส่งออกแท็กสคริปต์) และ jQuery จะโหลดในทุกหน้า เมื่อคุณจัดคิว jQuery ด้วย WordPress มันจะอยู่ในโหมด "ไม่มีข้อขัดแย้ง" ดังนั้นคุณต้องใช้ jQuery แทน $ คุณสามารถยกเลิกการลงทะเบียน jQuery ได้หากคุณต้องการและลงทะเบียนใหม่ของคุณเองโดยทำ wp_deregister_script ('jquery')

function xyz_scripts() {
    wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'xyz_scripts');