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

is_active_widget__construct에서 사용하고 위젯이 현재 페이지에 있는지 테스트하고 해당 ex를 기반으로 스크립트 / 스타일을 추가 할 수 있는 훌륭한 기능으로 Wordpress :

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, 여전히 "true"바닥 글 명령없이이 작업을 수행합니다). 또한 스타일 시트를 에코하면 위젯이 페이지에 있는지 여부에 관계없이 스타일 시트가로드됩니다. 어떤 아이디어?
Mark Jeldi

wp_head헤드 스크립트가 이미 인쇄 된 후에 호출되므로 바닥 글에만로드 할 수 있지만 스타일 시트를 사용하는 것과 마찬가지로 스타일 시트와 마찬가지로 큐 echo '<script src="path/to/script.js"></script>';에 넣을 수는 없습니다. 위젯이 활성화되어 있지 않습니다
Bainternet

당신의 행동 wp_enqueue_scripts대신에 사용해보십시오 wp_head. 그러면 머리글이나 바닥 글에 자바 스크립트를 넣을 수 있습니다. http://codex.wordpress.org/Function_Reference/wp_enqueue_script
Nick

고마워, 닉! wp_enqueue_scripts를 시도했지만 헤드에 자바 스크립트를로드하는 동안 조건부로로드되지 않습니다.
Mark Jeldi

0

또는 "Widget Logic"플러그인을 사용해보십시오. 위젯로드에 조건문을 사용합니다.

그것은 다른 방향으로 생각하고 있지만 결과는 예상대로되어야합니다.

wp_print_scripts & wp_print_styles는 적절한 후크 일 수 있습니다. 우선 순위가 100 인 후크에 조치를 추가하십시오. wp_enqueue_script (), wp_enqueue_style (), wp_deregister_script (), wp_deregister_style () ...

위 코드와 관련된 문제에 우선 순위 매개 변수가 부족할 수 있습니다 (테스트되지 않음)? WP 코덱


감사합니다 Syslogic! widget_content 필터에 연결할 수 있다고 생각하면서 Widget Logic도 시도해 보았습니다. 불행히도 운이 없습니다. ob_start를 사용하여 위젯 출력을 버퍼링하므로 화면에 인쇄되기 전에 조작 할 수 있지만 여전히 너무 늦게 발생하여 헤드에있는 모든 것을 발화시킬 수 없습니다. 해결 방법을 알고 있지 않으면?
Mark Jeldi

어쩌면 위젯 논리와 잘 어울리는 Bainternet 솔루션의 조합일까요? 이와 같이로드 할 위젯과로드 할 위젯을 정의 할 수 있습니다. 테마의 functions.php에 자체 조건문을 추가하면 추가 개선에 도움이 될 수 있습니다.
Martin Zeitler

-1

사용자 정의 위젯 클래스의 위젯 메소드 (함수)에서 wp_enqueue_script 또는 wp_enqueue_style 을 간단히 사용할 수 있으며 위젯이 활성화 된 경우에만 스크립트를로드합니다. 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 ); }에서 "false"는 스크립트를 머리글 또는 바닥 글에로드하는 것을 나타냅니다. 다시 요약하려면 위젯 메소드 (function)에서 wp_enqueue_script 또는 wp_enqueue_style을 사용 하십시오 . 이것이 WordPress.com/org의 개발자들이하는 일입니다.
iStefan

주석은 답변에 대한 편집이어야합니다.) 위젯이 "표시"되면 이미 페이지의 헤드 부분을 수행했기 때문에 JS가 대기열에 넣을 수 없습니다.
Mark Kaplun
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.