Enfileire condicionalmente o script / folha de estilo de um widget no HEAD (somente quando presente na página!)

13

Eu tenho tentado carregar scripts e estilos para um widget WordPress com as seguintes condições ...

  1. Os scripts devem carregar no HEAD (caso contrário, eles quebram).
  2. Os scripts devem carregar apenas quando o widget realmente é exibido (eles são bastante pesados).

Pesquisei bastante e isso parece ser um problema comum (não resolvido) ... mas espero que alguém aqui tenha implementado uma solução alternativa com êxito.

Este é o melhor que eu tenho até agora ...

A seguir, é um widget simples que imprime texto na barra lateral. Carrega com êxito o jQuery condicionalmente (quando o widget é realmente exibido) ... embora apenas no rodapé! (Nota: ele também pode funcionar apenas no WordPress 3.3 , embora esse hack possa fornecer compatibilidade com versões anteriores).

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

Parece que quando o WordPress começa a manipular widgets, é tarde demais para enfileirar (ou até cancelar o registro de algo enfileirado anteriormente).

Quaisquer ideias serão muito apreciadas!

Marca.

Mark Jeldi
fonte

Respostas:

15

Wordpress como uma boa função is_active_widgetque você pode usar no seu __construct e testar se o widget está presente na página atual e adicionar seus scripts / estilos com base nesse exemplo:

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
fonte
Obrigado pela sua resposta, Bainternet! Acabei de testar seu código e, infelizmente, enquanto o javascript realmente carrega condicionalmente, ele ainda carrega no rodapé ... mesmo sendo chamado em wp_head. Muito estranho! (btw, ele ainda faz isso sem a instrução "true" do rodapé). Além disso, o eco da folha de estilo faz com que ela seja carregada, independentemente de o widget estar na página. Alguma ideia?
precisa saber é o seguinte
wp_headé chamado depois que os scripts de cabeçalho já estiverem impressos, portanto, eles serão carregados apenas no rodapé, mas você poderá repeti-lo (em vez de colocá-lo na fila) exatamente como a folha de estilo que usa echo '<script src="path/to/script.js"></script>';e como para a folha de estilo, não é possível que ela esteja carregada é os widgets é não activa
Bainternet
tente usar em wp_enqueue_scriptsvez de wp_headem sua ação. Isso permitirá que você coloque o javascript no cabeçalho ou no rodapé. http://codex.wordpress.org/Function_Reference/wp_enqueue_script
Nick
Obrigado Nick! Eu tentei wp_enqueue_scripts e, embora carregue o javascript na cabeça, não será carregado condicionalmente.
Mark Jeldi
0

Como alternativa, você pode tentar o plug-in "Widget Logic" ... ele usa instruções condicionais para o carregamento do widget.

Isso é o contrário - mas o resultado deve ser o esperado.

wp_print_scripts e wp_print_styles podem ser os ganchos adequados, basta adicionar ações a esses ganchos com prioridade 100, algo a ser o último da fila. wp_enqueue_script (), wp_enqueue_style (), wp_deregister_script (), wp_deregister_style () ...

Seus problemas com o código acima podem estar sem o parâmetro priority (não testado)? Codex WP

Martin Zeitler
fonte
Obrigado Syslogic! Também experimentei o Widget Logic, pensando em conectar-me ao filtro widget_content. Sem sorte, infelizmente. Ele usa ob_start para armazenar em buffer a saída do widget, para que você possa manipulá-lo antes de ser impresso na tela, mas isso ainda está acontecendo tarde demais para disparar qualquer coisa na cabeça. A menos que você saiba de uma solução alternativa?
Mark Jeldi
Talvez uma combinação da solução da Bainternet que parece bem com a lógica do widget? Assim, você pode definir qual widget carregar onde - e também o que deve ser carregado. Adicionar próprias declarações condicionais às funções de um tema.php pode ajudar a melhorar ainda mais.
9788 Martin-Zeitler #
-1

Você pode simplesmente usar wp_enqueue_script ou wp_enqueue_style no método de widget (função) em sua classe Widget personalizada e ele carregará os scripts apenas se o widget estiver ativo. Veja detalhes e exemplo aqui: https://wpshed.com/wordpress/load-scripts-styles-widget-active/

iStefan
fonte
As respostas apenas para links são ruins, pois os links quebram com o tempo. Você deve pelo menos resumir o que está no link. De qualquer forma, isso está errado. Como o OP precisa dos scripts no cabeçalho da página.
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 ); }O "false" no e refere-se ao carregamento do script no cabeçalho ou rodapé. Para resumir novamente, use wp_enqueue_script ou wp_enqueue_style no método de widget (função) . É assim que os desenvolvedores do WordPress.com/org estão fazendo isso.
IStefan
O comentário deveria ter sido uma edição da resposta;) mas quando o widget é "exibido" você já fez a parte principal da página e, portanto, não pode enfileirar o JS nele.
precisa saber é o seguinte