Como sabemos, o WordPress vem com uma série de bibliotecas JavaScript nativas e que estão disponíveis para uso em nossos aplicativos. Uma dessas bibliotecas é JQuery UI, a qual podemos disponibilizar usando a função wp_enqueue_script.

E é através dessa função que disponibilizamos os arquivos JavaScript do core da JQuery UI,  mas como sabemos a JQuery UI vem com uma série de componentes ou plugins, tais como abas, sliders, acordeões, datepickers etc. Portanto, para exibi-los corretamente em nosso tema, precisamos, além do JavaScript, carregar as folhas de estilo de algum tema da JQuery UI. Uma vez que o WordPress não tem essas folhas de estilo por padrão, irei mostrar a seguir como disponibilizar diretamente do CDN da JQuery UI hospedada no Google, ou seja, você não precisa embuti-las nas folhas de estilos do seu tema.

Abaixo está o código que precisamos codificar para carregar a versão correta da folha de estilo do tema smoothness da JQuery UI. Primeiramente, iremos disponibilizar a jQuery UI usando a função wp_enqueue_script (), onde esse valor é adicionado ao objeto $wp_scripts. A partir daí, temos acesso ao jquery-ui-core, onde obtemos a versão atual da biblioteca dentro do WordPress.

function load_jquery_ui_google_cdn() {
    global $wp_scripts;

    wp_enqueue_script('jquery-ui-core');
    wp_enqueue_script('jquery-ui-slider');

    // get the jquery ui object
    $queryui = $wp_scripts->query('jquery-ui-core');

    // load the jquery ui theme
    $url = "http//ajax.googleapis.com/ajax/libs/jqueryui/".$queryui->ver."/themes/smoothness/jquery-ui.css";
    wp_enqueue_style('jquery-ui-smoothness', $url, false, null);
}

add_action('wp_enqueue_scripts', 'load_jquery_ui_google_cdn');

 

Uma vez que temos a versão,  podemos adicionar isso à URL do CDN do Google e concatenar a folha do tema respectivamente. Dessa forma, não precisamos mais fazer o download  do tema da JQuery UI em que estamos trabalhando e depois subir junto com o nosso tema.

Have a lot of fun!