Kondisikan skrip widget / stylesheet widget di HEAD (hanya jika ada di halaman!)

13

Saya telah mencoba memuat skrip dan gaya untuk widget WordPress dengan ketentuan berikut ...

  1. Script HARUS dimuat di KEPALA (kalau tidak mereka rusak).
  2. Skrip harus HANYA memuat ketika widget benar-benar ditampilkan (cukup berat).

Saya telah melakukan banyak pencarian, dan ini tampaknya menjadi masalah yang umum (belum terpecahkan) ... tapi saya berharap seseorang di sini telah berhasil mengimplementasikan solusi.

Ini yang terbaik yang saya dapatkan sejauh ini ...

Berikut ini adalah widget sederhana yang mencetak teks ke sidebar. Berhasil memuat jQuery secara kondisional (saat widget benar-benar ditampilkan) ... meskipun hanya ada di catatan kaki! (Catatan: mungkin juga hanya berfungsi di WordPress 3.3 , meskipun peretasan ini mungkin memberikan kompatibilitas ke belakang).

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

Tampaknya begitu WordPress mulai menangani widget, sudah terlambat untuk melakukan enqueue (atau bahkan membatalkan pendaftaran sesuatu yang sudah enqueued sebelumnya).

Setiap ide akan sangat dihargai!

Menandai.

Mark Jeldi
sumber

Jawaban:

15

Wordpress sebagai fungsi is_active_widgetyang bagus yang dapat Anda gunakan di __construct dan uji apakah widget ada di halaman saat ini dan tambahkan skrip / gaya Anda berdasarkan pada contoh:

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
sumber
Terima kasih atas jawaban Anda, Bainternet! Saya baru saja menguji kode Anda dan sayangnya, sementara javascript memang memuat kondisi, masih memuat di footer ... meskipun sedang dipanggil di wp_head. Sangat aneh! (btw, masih melakukan ini tanpa instruksi footer "benar"). Juga, menggemakan stylesheet membuatnya memuat terlepas dari apakah widget ada di halaman. Ada ide?
Mark Jeldi
wp_headdipanggil setelah skrip kepala sudah dicetak sehingga hanya akan memuatnya di footer tetapi Anda dapat mengulanginya (bukan en-antri) seperti halnya menggunakan stylesheet echo '<script src="path/to/script.js"></script>';dan untuk stylesheet, tidak mungkin memuatnya. apakah
widgetnya
coba gunakan wp_enqueue_scriptsalih-alih wp_headdalam tindakan Anda. Ini akan memungkinkan Anda untuk meletakkan javascript di kepala atau bagian bawah. http://codex.wordpress.org/Function_Reference/wp_enqueue_script
Nick
Terima kasih, Nick! Saya memang mencoba wp_enqueue_scripts, dan sementara itu memuat javascript di kepala, itu tidak memuat secara kondisional.
Mark Jeldi
0

Atau Anda bisa mencoba plug-in "Widget Logic" ... menggunakan pernyataan kondisional untuk memuat widget.

Itu cukup memikirkan sebaliknya - tetapi hasilnya harus seperti yang diharapkan.

wp_print_scripts & wp_print_styles mungkin kait yang tepat, tambahkan saja tindakan ke kait ini dengan prioritas 100 sesuatu - untuk menjadi yang terakhir dalam antrian. wp_enqueue_script (), wp_enqueue_style (), wp_deregister_script (), wp_deregister_style () ...

Masalah Anda dengan kode di atas mungkin kurang parameter prioritas (tidak diuji)? WP codex

Martin Zeitler
sumber
Terima kasih Syslogic! Saya memang mencoba Widget Logic juga, berpikir saya bisa menghubungkan ke filter widget_content-nya. Sayangnya tidak berhasil. Ini menggunakan ob_start untuk buffer output widget sehingga Anda dapat memanipulasinya sebelum dicetak ke layar, tetapi ini masih terjadi terlambat untuk menembakkan apa pun di kepala. Kecuali mungkin Anda tahu solusinya?
Mark Jeldi
Mungkin kombinasi dari solusi Bainternet yang tampaknya baik-baik saja dengan widget-logika? Seperti ini, Anda dapat menentukan widget mana yang akan memuat di mana - dan juga apa yang akan dimuat. Menambahkan pernyataan bersyarat sendiri ke functions.php tema mungkin membantu untuk meningkatkan lebih lanjut.
Martin Zeitler
-1

Anda cukup menggunakan wp_enqueue_script atau wp_enqueue_style dalam metode widget (fungsi) di kelas Widget kustom Anda dan itu akan memuat skrip hanya jika widget aktif. Lihat detail dan contoh di sini: https://wpshed.com/wordpress/load-scripts-styles-widget-active/

iStefan
sumber
Jawaban hanya tautan hanya buruk karena tautan putus dengan waktu. Anda setidaknya harus meringkas apa yang ada di tautan. Bagaimanapun, itu hanya salah. Karena OP perlu skrip di header halaman.
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 ); }The "false" di dan merujuk ke memuat skrip di header atau footer. Untuk meringkas lagi, gunakan wp_enqueue_script atau wp_enqueue_style dalam metode widget (fungsi) . Inilah yang dilakukan pengembang dari WordPress.com/org.
iStefan
Komentar seharusnya merupakan edit untuk jawaban;) tetapi ketika widget "ditampilkan" Anda telah melakukan bagian kepala halaman dan karenanya tidak dapat enqueue JS itno it.
Mark Kaplun