Có điều kiện để ghi lại tập lệnh / biểu định kiểu của widget trong HEAD (chỉ khi có mặt trên trang!)


13

Tôi đã cố tải tập lệnh và kiểu cho tiện ích WordPress với các điều kiện sau ...

  1. Các tập lệnh PHẢI tải trong ĐẦU (nếu không chúng bị hỏng).
  2. Các tập lệnh CHỈ phải tải khi tiện ích thực sự hiển thị (chúng khá nặng).

Tôi đã thực hiện rất nhiều tìm kiếm và đây dường như là một vấn đề phổ biến (chưa được giải quyết) ... nhưng tôi hy vọng ai đó ở đây đã thực hiện thành công một cách giải quyết.

Đây là điều tốt nhất tôi có được cho đến nay ...

Sau đây là một widget đơn giản in văn bản sang thanh bên. Nó tải thành công jQuery một cách có điều kiện (khi tiện ích thực sự được hiển thị) ... mặc dù chỉ có trong phần chân trang! (Lưu ý: nó cũng có thể chỉ hoạt động trên WordPress 3.3 , mặc dù bản hack này có thể cung cấp khả năng tương thích ngược).

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");') );

Có vẻ như một khi WordPress bắt đầu xử lý các widget, đã quá muộn để ghi danh (hoặc thậm chí hủy đăng ký một cái gì đó đã được xử lý trước đó).

Bất kỳ ý tưởng sẽ được nhiều đánh giá cao!

Dấu.

Câu trả lời:


15

Wordpress là một chức năng hay is_active_widgetmà bạn có thể sử dụng trong __construct của mình và kiểm tra xem tiện ích có trong trang hiện tại không và thêm tập lệnh / kiểu của bạn dựa trên ví dụ đó:

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 );
}

Cảm ơn câu trả lời của bạn, BaiNET! Tôi vừa mới kiểm tra mã của bạn và thật không may, trong khi javascript thực sự tải một cách có điều kiện, nó vẫn tải ở chân trang ... mặc dù nó được gọi trong wp_head. Rất lạ! (btw, nó vẫn làm điều này mà không có hướng dẫn chân trang "thật"). Ngoài ra, việc lặp lại biểu định kiểu sẽ khiến nó tải bất kể tiện ích có ở trên trang hay không. Có ý kiến ​​gì không?
Mark Jeldi

wp_headđược gọi sau khi các tập lệnh đầu đã được in ra, vì vậy nó sẽ chỉ tải chúng ở phần chân trang nhưng bạn có thể lặp lại (thay vì xếp hàng nó) giống như biểu định kiểu sử dụng echo '<script src="path/to/script.js"></script>';và đối với biểu định kiểu, không thể tải được là các vật dụng không hoạt động
Bai Internet

hãy thử sử dụng wp_enqueue_scriptsthay vì wp_headtrong hành động của bạn. Điều này sẽ cho phép bạn đặt javascript vào đầu hoặc chân trang. http://codex.wordpress.org/Function_Reference/wp_enqueue_script
Nick

Cảm ơn, Nick! Tôi đã thử wp_enqueue_scripts và trong khi nó tải javascript trong đầu, nó sẽ không tải một cách có điều kiện.
Mark Jeldi

0

Ngoài ra, bạn có thể thử bổ trợ "Logic Logic" ... nó sử dụng các câu lệnh có điều kiện để tải widget.

Điều đó hoàn toàn khác theo cách khác - nhưng kết quả sẽ như mong đợi.

wp_print_scripts & wp_print_styles có thể là các hook thích hợp, chỉ cần thêm các hành động vào các hook này với mức độ ưu tiên 100 - là thứ cuối cùng trong hàng đợi. wp_enqueue_script (), wp_enqueue_style (), wp_deregister_script (), wp_deregister_style () ...

Các vấn đề của bạn với mã ở trên có thể thiếu tham số ưu tiên (không được kiểm tra)? Mật mã WP


Cảm ơn Syslogic! Tôi cũng đã thử dùng Logic Logic, nghĩ rằng tôi có thể nối vào bộ lọc widget_content của nó. Không may mắn. Nó sử dụng ob_start để đệm đầu ra widget để bạn có thể thao tác trước khi in ra màn hình, nhưng điều này vẫn xảy ra quá muộn để bắn ra bất cứ thứ gì trong đầu. Trừ khi bạn có thể biết một cách giải quyết?
Mark Jeldi

Có lẽ một sự kết hợp của giải pháp Bai Internet có vẻ tốt với logic-widget? Như thế này, bạn có thể xác định widget nào sẽ được tải ở đâu - và cả những gì sẽ được tải. Thêm các câu điều kiện riêng vào hàm.php của một chủ đề có thể giúp cải thiện hơn nữa.
Martin Zeitler

-1

Bạn chỉ có thể sử dụng wp_enqueue_script hoặc wp_enqueue_style trong phương thức widget (hàm) trong lớp Widget tùy chỉnh của bạn và nó sẽ chỉ tải các tập lệnh nếu widget được kích hoạt. Xem chi tiết và ví dụ tại đây: https://wpshed.com/wordpress/load-scripts-styles-widget-active/


Liên kết chỉ trả lời là xấu khi liên kết bị phá vỡ theo thời gian. Bạn ít nhất nên tóm tắt những gì trong liên kết. Trong mọi trường hợp, điều đó chỉ sai. Như OP cần các tập lệnh trong tiêu đề của trang.
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 ); }"Sai" tại và đề cập đến việc tải tập lệnh trong đầu trang hoặc chân trang. Để tóm tắt lại, hãy sử dụng wp_enqueue_script hoặc wp_enqueue_style trong phương thức widget (hàm) . Đây là cách các nhà phát triển từ WordPress.com/org đang làm điều đó.
iStefan

Nhận xét nên là một chỉnh sửa cho câu trả lời;) nhưng khi tiện ích được "hiển thị", bạn đã hoàn thành phần đầu của trang và do đó không thể thực hiện được JS.
Mark Kaplun
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.