วิธีการรวม jquery-ui เอฟเฟกต์บน wordpress อย่างถูกต้อง

25

ฉันพยายามใส่ jquery ui effects (โดยเฉพาะเอฟเฟกต์การสั่น) ในธีม wordpress ของฉัน จนถึงตอนนี้ฉันทำได้เพียงรวมสคริปต์ jQuery แต่ฉันไม่รู้ว่าจะวางสคริปต์ UI ได้อย่างไรและจะจัดคิวได้อย่างไร

นี่คือรหัสที่ฉันมี เห็นได้ชัดว่ามันใช้งานไม่ได้:

    <?php wp_enqueue_script("jquery"); ?>
<?php wp_enqueue_script("jquery-ui-core"); ?>
<?php wp_head(); ?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
<script type="text/javascript">
    var $j = jQuery.noConflict();
    $j(document).ready(function() {
        $j("#manita-imagen").mouseover(function(){
            //$j(this).animate({ opacity: "hide" })
            // alert('asd');
            $j(this).effect("shake", { times:3 }, 300);
        });
    });

 </script>

ขอบคุณสำหรับความช่วยเหลือของคุณ!

jquery wp-enqueue-script

— dabito
แหล่งที่มา

5

One note: คุณไม่จำเป็นต้องเข้าคิว jquery เพราะมันอยู่ในรายการที่ขึ้นอยู่กับการพึ่งพา jquery-ui-core

— goldenapples

36

แม้ว่า WordPress จะรวมไลบรารี jQuery UI แต่ก็ไม่รวมถึงไลบรารี UI / เอฟเฟกต์ ไลบรารีนั้นแยกจากกันและเป็นแบบสแตนด์อโลน คุณจะต้องรวมสำเนาของไฟล์ effects.core.js และเข้าคิวแยกต่างหาก

โปรดทราบว่าคุณควรตั้งชื่อมันว่า jquery-effects-core เมื่อทำการเข้าคิวเพื่อความสอดคล้องของการตั้งชื่อ

คุณสามารถรวมไว้เช่นนี้:

wp_enqueue_script("jquery-effects-core",'http://example.com/whatever/effects.core.js', array('jquery'), '1.8.8');

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

รายการของตัวบุ้งสำหรับไฟล์เหล่านี้สามารถพบได้ใน wp-include / script-loader.php แต่กระสุนของคอร์คือ jquery-effects-core

wp_enqueue_script("jquery-effects-core");

— อ็อตโต
แหล่งที่มา

1

โปรดทราบว่าสำหรับเอฟเฟกต์จริง (blind, bounce, fade, .. ) คุณจะต้องจัดคิวเอฟเฟกต์นั้นให้ชัดเจน เช่นเดียวกับ 'จาง':wp_enqueue_script( 'jquery-effects-fade' );

— SunnyRed

ผู้ใช้ควรวางจาวาสคริปต์ของตนเองลงในไฟล์แยกต่างหากจากนั้นจัดคิวไฟล์นั้นและแสดงรายการการพึ่งพาที่ต้องการ ด้วยวิธีดังกล่าว WordPress (และปลั๊กอินประสิทธิภาพ) จะทราบลำดับที่ต้องใช้ในการโหลดสคริปต์เหล่านี้และจะวางไว้ในลำดับที่ถูกต้องบนหน้าเว็บ

— Dave Hilditch

8

@dabito,

คุณไม่ได้โหลดสคริปต์ของคุณ ... อย่าโทรwp_enqueue_script()เข้าไปในไฟล์เทมเพลตธีมของคุณ (ดูเหมือนว่านี่header.php) คุณต้องเรียกใช้ฟังก์ชันนี้จากตะขอแยก

ในfunctions.phpไฟล์ธีมของคุณวางรหัสต่อไปนี้:

function my_add_frontend_scripts() {
        wp_enqueue_script('jquery');
        wp_enqueue_script('jquery-ui-core');
}
add_action('wp_enqueue_scripts', 'my_add_frontend_scripts');

หากทั้งสองสคริปต์ได้รับการลงทะเบียนอย่างถูกต้องสิ่งนี้ควรโหลดให้ดี (โดยการเพิ่ม<script />แท็กที่เหมาะสมในส่วนหัวจากนั้นโค้ด JavaScript อื่นของคุณจะทำงานได้

หากคุณต้องการเพิ่มสคริปต์ลงในด้านผู้ดูแลระบบให้เพิ่มการกระทำของคุณลงไปadmin_enqueue_scriptsแทน

— EAMann
แหล่งที่มา

1

ไม่จริงอย่างแน่นอน ตราบใดที่เขาโทรหาพวกเขาก่อนการโทร wp_head () นั่นน่าจะใช้ได้ดี พวกเขาไม่จำเป็นต้องติดตะขอและไม่ควรติดใจที่จะเริ่มต้น หากคุณกำลังจะผูกพวกเขาไว้ที่อื่นให้ขอพวกเขาไปที่ตะขอการกระทำ 'wp_enqueue_scripts' นั่นคือสิ่งที่มันมีไว้เพื่อ

— อ็อตโต

1

@Otto สิ่งที่คุณพูดฟังดูมีเหตุผล แต่คุณมีคำอธิบายว่าทำไมใน codex มันบอกว่า @EAMann เขียนอะไร - "ใช้การกระทำ init เพื่อเรียกใช้ฟังก์ชันนี้" และตัวอย่างของเขาถูกนำมาจากที่นั่น ... codex.wordpress.org/Function_Reference/wp_enqueue_script

— Lea Cohen

codex เป็นจับจดในสถานที่ การดำเนินการที่ดีที่สุดที่จะใช้สำหรับสิ่งนี้คือ 'wp_enqueue_scripts' สำหรับส่วนหน้าหรือ 'admin_enqueue_scripts' ที่ด้านหลัง การเชื่อมต่อกับ init จะใช้งานได้ แต่จะไม่มีการจัดคิวสคริปต์ให้ทั่วทั้งไซต์

— อ็อตโต

ฉันได้อัปเดตข้อมูลโค้ดของฉันตามนั้น แต่เดิมมันเป็นปฏิกิริยาที่รวดเร็วและอุทรตามการอ้างอิง Codex ... การใช้wp_enqueue_scriptsเป็นวิธีที่ดีกว่าที่จะไปและหลีกเลี่ยงการis_admin()ตรวจสอบพิเศษ

— EAMann

นี่เป็นวิธีที่ผิด - ปลั๊กอินประสิทธิภาพต้องทราบการพึ่งพา ผู้เขียนควรเขียนไฟล์. js ของตัวเองและจัดคิวให้และตั้งชื่อการอ้างอิง - WordPress จะจัดการส่วนที่เหลือ

— Dave Hilditch

7

คุณสามารถจัดคิว jQuery UI ทั้งหมดได้โดยตรงจาก Google นี่คือวิธีที่ฉันทำ:

wp_enqueue_script('jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js', array('jquery'), '1.8.6');

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

— Rodrigo Sieiro
แหล่งที่มา

3

คุณสามารถโหลด lib ทั้งหมด jQuery จาก Google CDNแทนเว็บไซต์ของคุณเอง

— ม.ค. Fabry

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

— Julian F. Weinert

1

@ JulianF.inert มันเป็นดาบสองคมที่มี cdn ที่ดีหมายถึงเวลาในการตอบสนองลดลง แต่ไม่มีการควบคุมหากมันล้มเหลว ที่กล่าวว่าหาก Google cdn ลงครึ่งหนึ่งของอินเทอร์เน็ตจะล้มเหลวดังนั้นคุณจะไม่เป็นคนเดียว โอกาสที่มันจะลดลงและไม่ได้ถูกแคชบนเบราว์เซอร์ของผู้ใช้จะบางลง สำหรับสถานการณ์ส่วนใหญ่ที่ใช้ cdn จะเป็นประโยชน์

— อเล็กซ์

จริง ฉันไม่ได้พูดถึง CDN แบบเป่าเต็มซึ่งแน่นอนว่าจะปรับได้อย่างสมบูรณ์ที่นี่เนื่องจากมันถูกออกแบบมาเพื่อการใช้งานนั้น กำลังโหลดสคริปต์จาก john-doe.com ใด ๆ มันมีความเสี่ยงเล็กน้อย แต่ฉันคิดว่า

— Julian F. Weinert

3

ดูเหมือนจะไม่มีการโหลดเริ่มต้นสำหรับไลบรารี jQuery นี้ (รายการทั้งหมดที่นี่ ) ดังนั้นคุณอาจต้องลงทะเบียนสคริปต์ก่อนที่จะเข้าคิวมัน

— บรรณาธิการ
แหล่งที่มา

1

ฉันคิดว่าคุณอาจจะถูก (บางครั้งชื่อ WP ที่ลงทะเบียนสคริปต์ภายใต้แตกต่างจากชื่อมาตรฐานที่ใช้) แต่ในกรณีนี้การลงทะเบียน 'jquery-ui-core' ควรใช้งานได้ มันอยู่ในcore.trac.wordpress.org/browser/branches/3.0/wp-includes/ …

— goldenapples

จุดดี! ฉันคิดว่าเขาต้องการโหลดเฉพาะห้องสมุด jQuery ซึ่งในกรณีนี้การโหลดส่วนที่เหลือจะค่อนข้างบวม

— บรรณาธิการ

3

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

function my_add_frontend_scripts() {
    wp_enqueue_script('jquery');
    wp_enqueue_script('jquery-ui-core');
}

add_action( 'wp_enqueue_scripts', 'my_add_frontend_scripts');

— Tareq
แหล่งที่มา

4

คุณไม่ควรใช้ตะขอขอร้องเพื่อทำคิว ใช้เบ็ด wp_enqueue_scripts สำหรับส่วนหน้าเท่านั้นหรือ admin_enqueue_scripts เบ็ดสำหรับปลายด้านหลัง

— อ็อตโต

ไม่ทราบว่าwp_enqueue_scriptsการกระทำนั้นมีไว้สำหรับส่วนหน้าเท่านั้น ขอบคุณ :)

— Tareq

0

คำตอบทั้งหมดที่นี่ขณะทำงานพวกเขาผิดทางเทคนิค

วิธีที่ถูกต้องในการรวม jquery-ui และไลบรารี่อื่น ๆ คือการรวมมันเป็นการอ้างอิงของสคริปต์ของคุณเอง

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

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

wp_enqueue_script('your-script-handle', 
 plugins_url('your-script-file.js', __FILE__), 
 array('jquery', 'jquery-effects-core', 'jquery-ui-core')
);

คุณสามารถค้นหารายการสคริปต์ทั้งหมดที่มีเพื่อเพิ่มการอ้างอิงได้ที่นี่: https://developer.wordpress.org/reference/functions/wp_enqueue_script/

— Dave Hilditch
แหล่งที่มา

1

คุณมีสิทธิ์ การใช้การพึ่งพาในการโทร wp_enqueue_script ของคุณเองเป็นวิธีที่ถูกต้องในการรวม jquery / jquery-ui / etc ไม่มีความจำเป็นต้องเข้าคิวแยกพวกเขาอีก

— Michae Pavlos Michael

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

— Dave Hilditch