Adicionando jQuery UI elementos para a página WordPress

Passei muitas horas sobre isso e verifiquei muitas perguntas, mas nada funciona. Eu sei que o WordPress automaticamente possui scripts jQuery e jQueryUI disponíveis e eu estou tentando obter um controle deslizante simples do jQuery na minha página, mas isso não está acontecendo. Eu tentei com outros elementos de UI também, mas eles também não mostram. O site está carregando e não dando nenhum problema.

Eu adicionei isso ao arquivo functions.php na minha pasta de temas:

function my_assets() { wp_enqueue_script( 'jquery-ui-button', false, array( 'jquery' )); wp_enqueue_script( 'jquery-ui-slider', false, array( 'jquery' )); } add_action( 'wp_enqueue_scripts', 'my_assets' ); 

mas o elemento UI não é exibido. Não fiz outras alterações e não sei se e como alterar os arquivos HTML ou CSS para o meu site. Estou usando o tema TwentySixteen se isso faz a diferença.

Editar: Verifiquei uma pergunta semelhante com a solução de enqueuar estilos junto com scripts jQuery, mas não funcionou. Na solução, eles adicionam o código a um construtor, mas eu não conheço um construtor do que. Acabei de adicionar meu código na parte inferior do arquivo functions.php. Experimentei o código dado para garantir e com certeza não funcionou.

Solutions Collecting From Web of "Adicionando jQuery UI elementos para a página WordPress"

Usar widgets jquery-ui requer alguns passos.

Você precisará adicionar a marcação apropriada para o seu widget. Eu usarei o controle deslizante como um exemplo. Acabei de criar uma nova página e adicionei a marcação abaixo no editor de texto no administrador do WordPress:

  

Você terá que ter sua lógica de boot para que o widget seja processado. Cada widget possui diferentes opções de configuração e syntax, então consulte os documentos do jquery-ui para o código apropriado para o tipo de widget que você está adicionando. Tome nota de qualquer uma das dependencies necessárias para o widget.

EDITAR : parece que o núcleo do WordPress já possui jquery-ui-core listado como uma dependência para widgets quando eles estão registrados, portanto, listá-lo como um script dep para JS não é necessário.

Este é o código de boot do widget do controle deslizante :

  $( "#sample-theme-slider" ).slider(); 

Então você deve criar um arquivo JS. Eu vou pegar o meu na pasta js do meu exemplo de amostra e chamá-lo de sample-theme-slider.js. No WordPress, jquery é carregada no modo noConflict – para que você não possa usar apenas $ e ter que digitar jQuery, ou adicionar um wrapper ao código acima. Levando isso em consideração, isso é o que o conteúdo do meu tema de amostra / sample-theme-slider.js parece:

 ( function( $ ) { $( "#sample-theme-slider" ).slider(); } )( jQuery ); 

Agora precisamos enqueue nossos scripts e estilos para o nosso widget jquery-ui para trabalhar. Este exemplo apenas mantê-lo-á simples e usará PHP processual, mas você pode implementá-lo como quiser. Vamos criar o esqueleto do que precisamos fazer primeiro. Eu gosto de criar methods para scripts, estilos e enqueue separadamente para manter as coisas um pouco mais limpas quando eu voltar para elas:

 function sample_theme_scripts() { // ... } function sample_theme_styles() { // ... } function sample_theme_enqueue() { sample_theme_scripts(); sample_theme_styles(); } add_action( 'wp_enqueue_scripts', 'sample_theme_enqueue' ); 

Começando com os scripts, precisaremos adicionar o arquivo js / sample-theme-slider.js que criamos anteriormente.

Você quer registrar seu identificador de script com wp_register_script () , chamaremos de exemplo-tema-controle deslizante . Geralmente, é uma boa prática nomear seu identificador para seguir o exemplo das convenções de nomenclatura do seu tema e nomear o arquivo para combinar o identificador também. Você pode ver os parâmetros listados na documentação do desenvolvedor, que a ordem no código que você colocou na pergunta está incorreta para wp_enqueue_script () :

  function sample_theme_scripts() { // Your script's handle. $handle = 'sample-theme-slider'; // Path to the script to enqueue. $src = get_theme_file_uri( "js/{$handle}.js" ); // Required dependencies. $deps = array( 'jquery', 'jquery-ui-slider' ); // Your script's version. $ver = '1.0.0'; // Add the script to the footer. $in_footer = true; // Register the script handle. wp_register_script( $handle, $src, $deps, $ver, $in_footer ); // Enqueue your script by handle. wp_enqueue_script( $handle ); } 

Você notará que na matriz $ deps – eu listei as dependencies necessárias para o nosso script funcionar, que é o script jquery-ui-slider. Para obter widgets adicionais de jquery-ui para trabalhar em seu script, você simplesmente os adicionará à matriz por manipulação de script.

Agora, se você visitar sua página, você verá que a marcação é modificada pelo jquery-ui-slider e tudo está perfeitamente instalado, exceto que você realmente não vê nada. Isso porque o tema jquery-ui não foi carregado.
O WordPress não inclui o tema por padrão , mas você pode carregar o seu próprio, ou simplesmente puxá-lo de um CDN.

Tomaremos a mesma abordagem que fizemos em sample_themesscripts (), e primeiro registrar o identificador de nossa folha de estilo com wp_register_style (), então use wp_enqueue_style () no nosso identificador registrado. Costumo usar a rota CDN, uma vez que é um benefício ter o arquivo armazenado em cache para bibliotecas comumente usadas, mas há bons argumentos para a inclusão local também.

Quando registramos o nosso estilo com wp_register_style (), dizemos qual é o caminho para o arquivo que queremos adicionar à página. É basicamente o equivalente a vincular uma folha de estilo em seu HTML. Para usar um CDN como o Google, precisamos pesquisar a biblioteca que queremos include ( jquery-ui cdn ). Você notará que os links para a versão variada do CSS são formatados desta maneira:

https://ajax.googleapis.com/ajax/libs/jqueryui/XXX/themes/smoothness/jquery-ui.css

Onde XXX é, é o número da versão. Uma vez que estamos carregando JS do jquery-ui do núcleo do WordPress, você quer obter o número da versão correspondente. Isso pode ser feito facilmente inspecionando a variável global $ wp_scripts em PHP. Quando você registra um script, podemos opcionalmente especificar $ ver como um parâmetro, que o núcleo do WordPress especifica para jquery-ui.

Se você fosse fazer var_dump( $wp_scripts ); Em PHP você veria jquery-ui-core listado, e você verá que pode acessar o número da versão do script registrado do object $ wp_scripts com:

$wp_scripts->registered['jquery-ui-core']->ver

Se usarmos isso para o nosso método de estilo enqueue ao usar um CDN, podemos garantir que, quando o WordPress Core atualize suas dependencies, não precisamos nos preocupar com a atualização do nosso número de versão ou a adição de condicionais para versões anteriores ou mais recentes do WordPress (a não ser, claro, o script é removido do núcleo). Então, para construir um caminho que funciona para o CDN, precisamos obter esse número de versão, então o URL para vincular a folha de estilos está correto:

  http://ajax.googleapis.com/ajax/libs/jqueryui/{$wp_scripts->registered['jquery-ui-core']->ver}/themes/smoothness/jquery-ui.css 

Colocando isso em prática, faríamos o nosso método sample_theme_styles () como este:

  function sample_theme_styles() { // Access the wp_scripts global to get the jquery-ui-core version used. global $wp_scripts; // Create a handle for the jquery-ui-core css. $handle = 'jquery-ui'; // Path to stylesheet, based on the jquery-ui-core version used in core. $src = "http://ajax.googleapis.com/ajax/libs/jqueryui/{$wp_scripts->registered['jquery-ui-core']->ver}/themes/smoothness/{$handle}.css"; // Required dependencies $deps = array(); // Add stylesheet version. $ver = $wp_scripts->registered['jquery-ui-core']->ver}; // Register the stylesheet handle. wp_register_style( $handle, $src, $deps, $ver ); // Enqueue the style. wp_enqueue_style( 'jquery-ui' ); } 

Como último passo – você provavelmente deseja adicionar seus próprios estilos ao controle deslizante para combinar com o aspecto e a sensação do seu tema. Eu costumo adicionar o identificador de folha de estilo 'jquery-ui' que fizemos na matriz de dependencies de minha folha de estilo principal quando é enqueued. Desta forma, eu sei que esses estilos são carregados primeiro, e minha especificidade para reverter não está lutando mais do que o necessário. Eu não sei como você encaue seu estilo principal.css – mas você gostaria apenas de localizar isso em seu tema e adicionar a dependência!

Então, tudo em conjunto parece assim:

sample-theme / js / sample-theme-slider.js :

 ( function( $ ) { $( "#sample-theme-slider" ).slider(); } )( jQuery ); 

sample-theme / functions.php :

 // Register and enqueue scripts. function sample_theme_scripts() { // Your script's handle. $handle = 'sample-theme-slider'; // Path to the script to enqueue. $src = get_theme_file_uri( "js/{$handle}.js" ); // Required dependencies. $deps = array( 'jquery', 'jquery-ui-core', 'jquery-ui-slider' ); // Your script's version. $ver = '1.0.0'; // Add the script to the footer. $in_footer = true; // Register the script handle. wp_register_script( $handle, $src, $deps, $ver, $in_footer ); // Enqueue your script by handle. wp_enqueue_script( $handle ); } // Register and enqueue styles. function sample_theme_styles() { // Access the wp_scripts global to get the jquery-ui-core version used. global $wp_scripts; // Create a handle for the jquery-ui-core css. $handle = 'jquery-ui'; // Path to stylesheet, based on the jquery-ui-core version used in core. $src = "http://ajax.googleapis.com/ajax/libs/jqueryui/{$wp_scripts->registered['jquery-ui-core']->ver}/themes/smoothness/{$handle}.css"; // Required dependencies $deps = array(); // Add stylesheet version. $ver = $wp_scripts->registered['jquery-ui-core']->ver; // Register the stylesheet handle. wp_register_style( $handle, $src, $deps, $ver ); // Enqueue the style. wp_enqueue_style( 'jquery-ui' ); wp_enqueue_style( 'sample-theme-style', get_stylesheet_uri(), array( 'jquery-ui' ), '1.0.0' ); } // Enqueue required scripts and styles. function sample_theme_enqueue() { sample_theme_scripts(); sample_theme_styles(); } add_action( 'wp_enqueue_scripts', 'sample_theme_enqueue' );