Maneira correta de enfileirar o jquery-ui


8

Estou tendo um momento difícil, incluindo scripts e estilos jquery-ui no meu plugin. Parece que minhas wp_enqueue_scriptligações são simplesmente ignoradas.

Já existem muitas perguntas semelhantes a esta, mas todas as respostas que encontrei até agora se resumem a chamar wp_enqueue_scriptdentro do wp_enqueue_scriptsgancho de ação, o que já estou fazendo.

No construtor da minha classe eu chamo:

add_action( 'wp_enqueue_scripts', array($this, 'enqueue_scripts') );

e então, abaixo:

public function enqueue_scripts()
{    
  wp_enqueue_script( 'jquery-ui-core', false, array('jquery') );
  wp_enqueue_script( 'jquery-ui-widget', false, array('jquery') );
  wp_enqueue_script( 'jquery-ui-mouse', false, array('jquery') );
  wp_enqueue_script( 'jquery-ui-accordion', false, array('jquery') );
  wp_enqueue_script( 'jquery-ui-autocomplete', false, array('jquery'));
  wp_enqueue_script( 'jquery-ui-slider', false, array('jquery'));

Eu verifiquei se o código é realmente executado a cada carregamento da página. No entanto, as páginas não possuem as <link>tags da biblioteca jquery-ui. Eu já tentei com e sem a jquerydependência especificada explicitamente no terceiro argumento das wp_enqueue_scriptchamadas.

Eu também tentei com uma instalação simples do WP 4.8 sem nenhum plug-in instalado além do meu e apenas com o tema padrão vinte e dezessete. Sem dados.

O que há de errado com o meu código?

Respostas:


20

Primeiro, o WordPress registra a interface do jQuery via wp_default_scripts(). As dependências já estão definidas, portanto, você só precisa enfileirar o script que realmente precisa (e não o núcleo). Como você não está alterando o número da versão nem nada, não há problema em usar apenas o identificador.

// no need to enqueue -core, because dependancies are set
wp_enqueue_script( 'jquery-ui-widget' );
wp_enqueue_script( 'jquery-ui-mouse' );
wp_enqueue_script( 'jquery-ui-accordion' );
wp_enqueue_script( 'jquery-ui-autocomplete' );
wp_enqueue_script( 'jquery-ui-slider' );

Quanto às folhas de estilo: o WordPress não registra os estilos de UI do jQuery por padrão!

Nos comentários, o butlerblog apontou que, de acordo com as Diretrizes de plug - in

Não é permitido executar código externo em um plug-in quando não atua como um serviço, por exemplo:

  • Ligar para CDNs de terceiros por outros motivos que não inclusões de fonte; todos os JavaScript e CSS não relacionados ao serviço devem ser incluídos localmente

Isso significa que o carregamento dos estilos via CDN não é permitido e sempre deve ser feito localmente. Você pode fazer isso usando wp_enqueue_style().


1
ps: o construtor é. não é um lugar ideal . para adicionar ganchos,
birgire

1
Se você enviar seu plug-in para o repositório wordpress.org, precisará carregar o CSS localmente (consulte: developer.wordpress.org/plugins/wordpress-org/… ).
butlerblog

1
@butlerblog Obrigado pela contribuição, atualizei a resposta.
kero 25/02

3

Se você estiver enfileirando seu próprio script, poderá adicionar 'jquery-ui-accordion', por exemplo, à lista de dependências. Todas as dependências necessárias serão adicionadas automaticamente. Exemplo:

wp_enqueue_script( 'my-theme', get_stylesheet_directory_uri() . '/js/theme.js', array( 'jquery', 'jquery-ui-accordion' ) );

Irá gerar este código:

<script type='text/javascript' src='/wp-includes/js/jquery/ui/core.min.js'></script>
<script type='text/javascript' src='/wp-includes/js/jquery/ui/widget.min.js'></script>
<script type='text/javascript' src='/wp-includes/js/jquery/ui/accordion.min.js'></script>
<script type='text/javascript' src='/wp-content/themes/theme/js/theme.js'></script>

1

Eu modifiquei seu script. tente com isso, está funcionando.

add_action( 'wp_enqueue_scripts', array($this, 'enqueue_scripts') );
public function enqueue_scripts()
{    
  wp_enqueue_script( 'jquery-ui-core');
  wp_enqueue_script( 'jquery-ui-widget');
  wp_enqueue_script( 'jquery-ui-mouse');
  wp_enqueue_script( 'jquery-ui-accordion' );
  wp_enqueue_script( 'jquery-ui-autocomplete');
  wp_enqueue_script( 'jquery-ui-slider');
}

Infelizmente, no meu caso, não funciona.
Lucio Crusca

@LucioCrusca Por favor, veja minha resposta. Enquanto WordPress registra jQuery UI roteiros , não fazê-lo por estilos , você precisa fazer isso sozinho como eu mostrei
kero
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.