WordPress, jQuery UI CSS 파일?

WordPress, jQuery UI CSS 파일?

WordPress 플러그인을 작성하려고 하는데 설정 페이지 중 하나에 jQuery UI 탭을 사용하고 싶습니다.

스크립트 코드가 이미 설정되어 있습니다.

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

HTML과 JavaScript도 만들었습니다.여기까지는 다 괜찮아.

문제는 다음과 같습니다.

WordPress 플랫폼에는 위의 enqueue와 같은 스크립트가 미리 설치되어 있습니다.탭에서는 스크립트가 잘 실행되지만 스타일링이 되지 않았습니다.WordPress 플랫폼에는 jQuery UI Teme가 프리 인스톨 되어 있습니까?그렇다면 어떻게 스타일을 플러그인에 넣을 수 있습니까?

WordPress에서 jquery-ui 테마에 사용할 수 있는 스타일을 찾는 데 문제가 있는 것 같습니다.

당신의 질문에 답하기 위해서.아니요, WordPress에는 플랫폼 자체에서 사용할 수 있는 유용한 스타일이 없습니다.사용할 수 있는 css는 \wp-includes\jquery-ui-dialog.css뿐이며 그것만으로는 그다지 유용하지 않습니다.

저도 같은 문제가 있어서 두 가지 방법을 찾았어요.CSS 폴더에 저장하고 거기서 로드하거나 URL(Google API)을 통해 로드합니다.JQuery UI는 구글의 CDA에 의존하기로 하고 '테마 롤러'를 활용할 수 있는 방법을 추가했습니다.이 정도의 css 코드를 저장하는 것은 처음부터 불필요해 보입니다.또한 WordPress는 jquery-ui 스크립트에서처럼 스타일링을 지원하지 않습니다.

에서는 스크립트가 로 됩니다.$wp_scripts->registered['jquery-ui-core']->ver에할 수 .wp_scripts(); ★★★global $wp_scripts;.

정적 테마

$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);

OR 다이내믹 테마

$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);

로컬에 저장하는 예도 있습니다.

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

UI 테마는 프리 인스톨 되어 있지 않은 것 같습니다.머리글에 스크립트를 추가해야 합니다.

이 기능을 찾고 계신 것 같습니다.헤더에 스크립트를 추가할 수 있습니다.테마 css를 플러그인 폴더에 넣고 포함하세요.

이후 WordPress에서 변경된 사항에 대한 업데이트입니다.최신 WordPress 패키지는 CSS와 함께 제공됩니다.

'아까운 친구'에 요.wp-includes\css를 사용해서 를 쓰겠습니다.wp_enqueue_style().

OP ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★.wp_enqueue_style( 'wp-jquery-ui-dialog' );필요한 건 그것뿐이었어요

이것이 미래에 누군가에게 도움이 되기를 바랍니다.

EkoJr의 답변에 좀 더 자세한 내용을 추가하기 위해 JQuery UI v1.11.4에서 JQuery UI CSS 스타일시트 전체를 추가하면 기본 Wordpress Theme 스타일링이 깨질 수 있습니다.

따라서 슬라이더 컴포넌트에 대응하는 CSS 클래스만 추가할 수 있습니다.사용한 클래스는 다음과 같습니다(주의: 이것들은 UI-darkness 테마용으로 작성되었습니다).

.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;
}

또한 이러한 클래스에는 컨테이너 ID를 붙일 수 있습니다.예를 들어 슬라이더의 ID가 '슬라이더'인 경우 다음을 사용합니다.

 #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

를 사용하는 경우wp_enqueue_style()그리고.wp_enqueue_script()올바르게 호출하고 다른 작성자도 올바르게 사용하고 있다고 가정하면 WordPress가 충돌을 처리합니다.

그러나 플러그인 또는 테마 작성자가 다음을 사용하여 스타일 또는 스크립트를 페이지 선두에 직접 인쇄하는 경우wp_head또는admin_head충돌을 피하기 위해 할 수 있는 일은 많지 않습니다.

참조:
- http://codex.wordpress.org/Function_Reference/wp_enqueue_style
- http://codex.wordpress.org/Function_Reference/wp_enqueue_script

그냥 이 문제에 직면해서 글을 찾았는데, 그 글에서 subsubsub을 ul 태그에 삽입하는 방법을 찾았어요.리스트는 나쁘지 않을 거예요.코드는 다음과 같습니다.

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

도움이 됐으면 좋겠어요.

언급URL : https://stackoverflow.com/questions/8849684/wordpress-jquery-ui-css-files