จัดคิวสคริปต์ / สไตล์ชีทของวิดเจ็ตใน HEAD ตามเงื่อนไข (เฉพาะเมื่อปรากฏบนหน้า!)


13

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

  1. สคริปต์ต้องโหลดใน HEAD (มิฉะนั้นจะแตก)
  2. สคริปต์จะต้องโหลดเฉพาะเมื่อวิดเจ็ตแสดงจริง (ค่อนข้างหนัก)

ฉันได้ทำการค้นหาบ่อยครั้งและดูเหมือนว่านี่จะเป็นปัญหาที่พบบ่อย (ยังไม่แก้) ... แต่ฉันหวังว่าจะมีใครบางคนที่นี่สามารถแก้ไขปัญหาได้สำเร็จ

นี่คือสิ่งที่ดีที่สุดที่ฉันเคยได้รับ ...

ต่อไปนี้เป็นวิดเจ็ตง่ายๆที่พิมพ์ข้อความไปยังแถบด้านข้าง มันประสบความสำเร็จในการโหลด jQuery ตามเงื่อนไข (เมื่อวิดเจ็ตปรากฏขึ้นจริง) ... แม้ว่าจะอยู่ในส่วนท้ายเท่านั้น! (หมายเหตุ: อาจใช้งานได้กับ WordPress 3.3เท่านั้นแม้ว่าแฮ็คนี้อาจให้ความเข้ากันได้ย้อนหลัง)

class BasicWidget extends WP_Widget
{

    function __construct() {
        parent::__construct(__CLASS__, 'BasicWidget', array(
            'classname' => __CLASS__,
            'description' => "This is a basic widget template that outputs text to the sidebar"
        ));
    }

  function form($instance) {
    $instance = wp_parse_args( (array) $instance, array( 'title' => '' ) );
    $title = $instance['title'];
?>
  <p><label for="<?php echo $this->get_field_id('title'); ?>">Title: <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>" /></label></p>
<?php
  }

  function update($new_instance, $old_instance) {
    $instance = $old_instance;
    $instance['title'] = $new_instance['title'];
    return $instance;
  }

  function widget($args, $instance) {

    extract($args, EXTR_SKIP);

    echo $before_widget;
    $title = empty($instance['title']) ? ' ' : apply_filters('widget_title', $instance['title']);

    if (!empty($title))
      echo $before_title . $title . $after_title;;

    echo "<h1>This is a basic widget!</h1>";

    echo $after_widget;

        // if we're echoing out content, enqueue jquery.

        if (!empty($after_widget)) {
            wp_enqueue_script('jquery');
        }
    }
}
add_action( 'widgets_init', create_function('', 'return register_widget("BasicWidget");') );

ดูเหมือนว่าเมื่อ WordPress เริ่มจัดการวิดเจ็ตมันก็สายเกินไปที่จะจัดคิว (หรือยกเลิกการลงทะเบียนบางสิ่งบางอย่างที่จัดคิวไว้ก่อนหน้านี้)

ความคิดใด ๆ ที่จะได้รับการชื่นชมมาก!

เครื่องหมาย.

คำตอบ:


15

Wordpress เป็นฟังก์ชั่นที่ดีis_active_widgetที่คุณสามารถใช้ใน __ สร้างและทดสอบว่าวิดเจ็ตนั้นมีอยู่ในหน้าปัจจุบันและเพิ่มสคริปต์ / สไตล์ของคุณตามอดีต:

function __construct() {
    parent::__construct(__CLASS__, 'BasicWidget', array(
        'classname' => __CLASS__,
        'description' => "This is a basic widget template that outputs text to the sidebar"
    ));
     if ( is_active_widget(false, false, $this->id_base) )
        add_action( 'wp_head', array(&$this, 'add_styles_and_scripts') );
}

function add_styles_and_scripts(){
    //since its wp_head you need to echo out your style link:
    echo '<link rel="stylesheet" href="http://example.com/css/style.css" type="text/css" />';
    //as for javascript it can be included using wp_enqueue_script and set the footer parameter to true:
    wp_enqueue_script( 'widget_script','http://example.com/js/script.js',array(),'',true );
}

ขอบคุณสำหรับคำตอบของคุณ Bainternet! ฉันเพิ่งทดสอบโค้ดของคุณและน่าเสียดายในขณะที่จาวาสคริปต์โหลดตามเงื่อนไขจริง ๆ มันยังโหลดในส่วนท้าย ... แม้ว่าจะถูกเรียกใน wp_head ก็ตาม ที่แปลกมาก! (btw มันยังคงทำสิ่งนี้โดยไม่มีส่วนท้าย "จริง" คำแนะนำ) นอกจากนี้การสะท้อนสไตล์ชีททำให้โหลดโดยไม่คำนึงว่าวิดเจ็ตอยู่บนหน้าเว็บหรือไม่ ความคิดใด ๆ
Mark Jeldi

wp_headถูกเรียกหลังจากที่สคริปต์หัวพิมพ์ออกมาแล้วดังนั้นมันจะโหลดเฉพาะในส่วนท้าย แต่คุณสามารถ echo มันออก (แทนการรอคิว) เช่นเดียวกับสไตล์ชีทที่ใช้echo '<script src="path/to/script.js"></script>';และสำหรับสไตล์ชีทมันเป็นไปไม่ได้ที่มันจะโหลด เป็นวิดเจ็ตไม่ทำงาน
Bainternet

ลองใช้wp_enqueue_scriptsแทนwp_headการกระทำของคุณ วิธีนี้จะทำให้คุณสามารถวางจาวาสคริปต์ไว้ในส่วนหัวหรือส่วนท้าย http://codex.wordpress.org/Function_Reference/wp_enqueue_script
นิค

ขอบคุณนิค! ฉันลองใช้ wp_enqueue_scripts และในขณะที่โหลดจาวาสคริปต์ไว้ในหัวก็จะไม่โหลดตามเงื่อนไข
Mark Jeldi

0

หรือคุณอาจลองใช้ปลั๊กอิน "Widget Logic" ... โดยใช้คำสั่งแบบมีเงื่อนไขสำหรับการโหลดวิดเจ็ต

ค่อนข้างคิดวิธีอื่น ๆ - แต่ผลลัพธ์ควรเป็นไปตามที่คาดไว้

wp_print_scripts & wp_print_styles อาจเป็น hooks ที่เหมาะสมเพียงเพิ่มการดำเนินการใน hooks เหล่านี้ที่มีลำดับความสำคัญ 100 อย่าง - เป็นสิ่งสุดท้ายในคิว wp_enqueue_script (), wp_enqueue_style (), wp_deregister_script (), wp_deregister_style () ...

ปัญหาของคุณกับรหัสข้างต้นอาจจะขาดพารามิเตอร์ลำดับความสำคัญ (ไม่ทดสอบ)? WP codex


ขอบคุณ Syslogic! ฉันลองให้ Widget Logic ด้วยเช่นกันโดยคิดว่าฉันสามารถขอตัวกรอง widget_content ได้ โชคไม่ดีโชคไม่ดี มันใช้ ob_start เพื่อบัฟเฟอร์เอาต์พุตวิดเจ็ตเพื่อให้คุณสามารถจัดการมันก่อนที่จะพิมพ์ไปที่หน้าจอ แต่สิ่งนี้ยังเกิดขึ้นช้าเกินไป เว้นแต่คุณจะรู้วิธีแก้ปัญหาหรือไม่?
Mark Jeldi

อาจเป็นการรวมกันของวิธีแก้ปัญหาของ Bainternet ซึ่งดูเหมือนจะดีกับวิดเจ็ต - ลอจิก? เช่นนี้คุณสามารถกำหนดว่าวิดเจ็ตใดที่จะโหลดที่ไหน - และอะไรที่จะโหลด การเพิ่มข้อความสั่งแบบมีเงื่อนไขของตัวเองในฟังก์ชั่นของ theme.php อาจช่วยปรับปรุงเพิ่มเติม
Martin Zeitler

-1

คุณสามารถใช้wp_enqueue_scriptหรือwp_enqueue_styleในเมธอด widget (ฟังก์ชัน) ในคลาส Widget ที่กำหนดเองของคุณและมันจะโหลดสคริปต์เฉพาะเมื่อวิดเจ็ตเปิดใช้งาน ดูรายละเอียดและตัวอย่างได้ที่นี่: https://wpshed.com/wordpress/load-scripts-styles-widget-active/


คำตอบสำหรับลิงก์อย่างเดียวนั้นแย่มากเมื่อเวลาผ่านไป อย่างน้อยคุณควรสรุปสิ่งที่อยู่ในลิงค์ ในกรณีใด ๆ นั่นเป็นเพียงความผิดในขณะที่ OP ต้องการสคริปต์ในส่วนหัวของหน้า
Mark Kaplun

function widget( $args, $instance ) { wp_enqueue_script( 'wpshed-front-end', plugin_dir_url( __FILE__ ) . 'wpshed-front-end.js', array( 'jquery' ), '1.0.0', false ); }"เท็จ" ที่และหมายถึงการโหลดสคริปต์ในส่วนหัวหรือส่วนท้าย เพื่อสรุปอีกครั้งใช้ wp_enqueue_script หรือ wp_enqueue_style วิธีวิดเจ็ต (ฟังก์ชั่น) นี่คือวิธีที่นักพัฒนาซอฟต์แวร์จาก WordPress.com/org กำลังทำอยู่
iStefan

ความคิดเห็นควรได้รับการแก้ไขคำตอบ;) แต่เมื่อวิดเจ็ตเป็น "แสดง" คุณได้ทำส่วนหัวของหน้าและไม่สามารถเข้าคิว JS มันไม่ได้
Mark Kaplun
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.