WordPress, pliki CSS jQuery UI?

Question

Próbuję utworzyć wtyczkę WordPress i chciałbym mieć zakładki jQuery UI na jednej z moich stron ustawień.

już mam zestaw kodu skryptowego:

wp_enqueue_script('jquery');     // Enque jQuery 
wp_enqueue_script('jquery-ui-core');   // Enque jQuery UI Core 
wp_enqueue_script('jquery-ui-tabs');   // Enque jQuery UI Tabs 

... i ja stworzyliśmy HTML i JavaScript zbyt. Do tego czasu wszystko jest w porządku.

Pytanie brzmi:

platformie WordPress jest wyposażony w kilka skryptów już wstępnie zainstalowane jak ten mam enqueue powyżej. Mój skrypt działa dobrze z kartami, ale nie jest stylizowany! Więc o co pytam, czy platforma WordPress jest dostarczana z preinstalowanym motywem jQuery UI? ... a jeśli tak, jak mogę dodać styl do mojej wtyczki?

Answer 1

Brzmi bardziej jak masz problem ze znalezieniem dostępną stylizacji w WordPress dla motywu jquery-ui.

Aby odpowiedzieć na pytanie. Nie, WordPress nie ma dostępnych stylów dostępnych w samej platformie. Jedyne dostępne css znajduje się w \ wp-includes \ jquery-ui-dialog.css, a samo to nie jest zbyt użyteczne.

Miałem również ten sam problem i znalazłem dwie opcje. Przechowuj je w folderze CSS i wczytaj z niego lub załaduj przez URL (Google APIs). Dla interfejsu użytkownika JQuery zdecydowałem się polegać na CDA Google i dodałem sposób na wykorzystanie "Theme Roller". Przechowywanie tej ilości kodu css wydaje się początkowe, a jego zły WordPress nie zapewnia żadnej obsługi stylu, tak jak w przypadku skryptów jquery-ui.

Jednak WP oferuje skrypty, dzięki którym CSS będzie aktualizowany pod numerem $wp_scripts->registered['jquery-ui-core']->ver. Możesz uzyskać do niego dostęp za pomocą wp_scripts(); OR global $wp_scripts;.

Static-theme

$wp_scripts = wp_scripts(); 
wp_enqueue_style('plugin_name-admin-ui-css', 
       'http://ajax.googleapis.com/ajax/libs/jqueryui/' . $wp_scripts->registered['jquery-ui-core']->ver . '/themes/smoothness/jquery-ui.css', 
       false, 
       PLUGIN_VERSION, 
       false); 

lub dynamiczny-theme

$wp_scripts = wp_scripts(); 
wp_enqueue_style('plugin_name-admin-ui-css', 
       'http://ajax.googleapis.com/ajax/libs/jqueryui/' . $wp_scripts->registered['jquery-ui-core']->ver . '/themes/' . $pluginOptions['jquery_ui_theme'] . '/jquery-ui.css', 
       false, 
       PLUGIN_VERSION, 
       false); 

a przykładem lokalnie przechowywania to

wp_enqueue_style('plugin_name-admin-ui-css', 
       plugins_url() . '/plugin-folder-name/includes/css/jquery-ui-theme-name.css', 
       false, 
       PLUGIN_VERSION, 
       false); 

Answer 2

Nie sądzę, że motyw interfejsu użytkownika jest fabrycznie zainstalowany. Musisz dodać skrypt do nagłówka.

Myślę, że szukasz this function. Pozwala na dodanie skryptu do nagłówka. Po prostu umieść css tematu w folderze wtyczki i dołącz to.

Answer 3

Jeśli poprawnie używasz połączeń wp_enqueue_style() i wp_enqueue_script() i zakładasz, że inni autorzy również używają ich poprawnie, WordPress zajmie się konfliktami.

Jeśli jednak wtyczka lub autor motywu drukuje style lub skrypty bezpośrednio na czele strony przy użyciu działań wp_head lub admin_head, to niewiele można zrobić, aby uniknąć konfliktu.

Refs:
- http://codex.wordpress.org/Function_Reference/wp_enqueue_style
- http://codex.wordpress.org/Function_Reference/wp_enqueue_script

Answer 4

Aby dodać więcej szczegółów do odpowiedzi EkoJr, tak jak od Jquery UI v1.11.4, jeśli dodasz cały arkusz stylów CSS interfejsu JQuery, może to przerwać domyślną stylizację motywów Wordpress.

Można więc dodać tylko klasy CSS odpowiadające składnikowi suwaka. Oto klasy używałem (uwaga: są one zbudowane na temat ui-ciemność):

.ui-state-default, 
.ui-widget-content .ui-state-default, 
.ui-widget-header .ui-state-default { 
    border: 1px solid #666666; 
    /* this image is from the ui-darkness theme, use the one you'd like */ 
    background: #555555 url("img/jquery-ui/ui-bg_glass_20_555555_1x400.png") 50% 50% repeat-x; 
    font-weight: bold; 
    color: #eeeeee; 
} 
.ui-slider-horizontal .ui-slider-handle { 
    top: -.3em; 
    margin-left: -.6em; 
} 
.ui-slider .ui-slider-handle { 
    position: absolute; 
    z-index: 2; 
    width: 1.2em; 
    height: 1.2em; 
    cursor: default; 
    -ms-touch-action: none; 
    touch-action: none; 
} 
.ui-corner-all, 
.ui-corner-bottom, 
.ui-corner-right, 
.ui-corner-br { 
    border-bottom-right-radius: 6px; 
} 
.ui-corner-all, 
.ui-corner-bottom, 
.ui-corner-left, 
.ui-corner-bl { 
    border-bottom-left-radius: 6px; 
} 
.ui-corner-all, 
.ui-corner-top, 
.ui-corner-right, 
.ui-corner-tr { 
    border-top-right-radius: 6px; 
} 
.ui-corner-all, 
.ui-corner-top, 
.ui-corner-left, 
.ui-corner-tl { 
    border-top-left-radius: 6px; 
} 
.ui-corner-all, 
.ui-corner-bottom, 
.ui-corner-right, 
.ui-corner-br { 
    border-bottom-right-radius: 6px; 
} 
.ui-corner-all, 
.ui-corner-bottom, 
.ui-corner-left, 
.ui-corner-bl { 
    border-bottom-left-radius: 6px; 
} 
.ui-corner-all, 
.ui-corner-top, 
.ui-corner-right, 
.ui-corner-tr { 
    border-top-right-radius: 6px; 
} 
.ui-corner-all, 
.ui-corner-top, 
.ui-corner-left, 
.ui-corner-tl { 
    border-top-left-radius: 6px; 
} 
.ui-widget-content { 
    border: 1px solid #666666; 
    /* this image is from the ui-darkness theme, use the one you'd like */ 
    background: #000000 url("img/jquery-ui/ui-bg_inset-soft_25_000000_1x100.png") 50% bottom repeat-x; 
    color: #ffffff; 
} 
.ui-widget { 
    font-family: Segoe UI,Arial,sans-serif; 
    font-size: 1.1em; 
} 
.ui-slider-horizontal { 
    height: .8em; 
} 
.ui-slider { 
    position: relative; 
    text-align: left; 
} 

Należy również pamiętać, że można prefiks te zajęcia z identyfikatorem pojemnika. Dla exemple, jeśli suwak ma identyfikator „slider”, przeznaczenie:

#slider .ui-state-default, 
#slider .ui-widget-content .ui-state-default, 
#slider .ui-widget-header .ui-state-default { 
    border: 1px solid #666666; 
    /* this image is from the ui-darkness theme, use the one you'd like */ 
    background: #555555 url("img/jquery-ui/ui-bg_glass_20_555555_1x400.png") 50% 50% repeat-x; 
    font-weight: bold; 
    color: #eeeeee; 
} 
....ETC 

Answer 5

po prostu zmierzyć się z tym problem i okazało się, że stanowisko potem znalazłem sposób, że wstawienie klasa „subsubsub” do tagu ul. Lista nie będzie zła. Kod będzie następujący:

<div id="tabs"> 
<ul class="subsubsub"><li><a href="#tab1"></a></li> 
<div id="tab1"></div> 
</div> 

Mam nadzieję, że komuś uda się pomóc.

Answer 6

Aktualizacja zmian, które zaszły w WordPress od tego czasu. Ostatnie pakiety WordPress są dostarczane z CSS w pudełku.

Można następnie znaleźć w wp-includes\css i dodać do kolejki przy użyciu wp_enqueue_style().

Myślę, że dla przypadku użycia OP wp_enqueue_style('wp-jquery-ui-dialog'); jest wszystko, co było potrzebne.

Mam nadzieję, że to pomoże komuś w przyszłości.