वर्डप्रेस, jQuery यूआई सीएसएस फ़ाइलें?

Question

मैं एक वर्डप्रेस प्लगइन बनाने की कोशिश कर रहा हूं, और मैं अपने सेटिंग्स पृष्ठों में से एक में 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 और जावास्क्रिप्ट बनाया है। यहां तक ​​कि सब ठीक हैं।

सवाल यह है:

वर्डप्रेस मंच कुछ स्क्रिप्ट एक मैं ऊपर enqueue है की तरह पहले से ही पहले से स्थापित के साथ आता है। मेरी स्क्रिप्ट टैब के साथ ठीक चलती है, लेकिन यह स्टाइल नहीं है! तो मैं क्या पूछने की कोशिश कर रहा हूं, वर्डप्रेस प्लेटफ़ॉर्म jQuery UI थीम प्री-इंस्टॉल के साथ आता है? ... और यदि हां, तो मैं शैली को अपनी प्लगइन में कैसे लगा सकता हूं?

Answer 1

ध्वनि अधिक की तरह आप jQuery-ui विषय के लिए वर्डप्रेस के भीतर एक उपलब्ध स्टाइल पाने के साथ कोई समस्या है।

अपने प्रश्न का उत्तर देने के लिए। नहीं, वर्डप्रेस में प्लेटफॉर्म के भीतर ही कोई उपयोगी शैलियों उपलब्ध नहीं है। एकमात्र उपलब्ध सीएसएस \ wp-include \ jquery-ui-dialog.css में है, और वह अकेला बहुत उपयोगी नहीं है।

मुझे भी एक ही समस्या थी, और मुझे दो विकल्प मिला। या तो इसे एक सीएसएस फ़ोल्डर में स्टोर करें और इसे वहां से लोड करें, या इसे URL (Google API) के माध्यम से लोड करें। JQuery UI के लिए मैंने Google के सीडीए पर भरोसा करने का फैसला किया और 'थीम रोलर' का उपयोग करने के लिए एक तरीका जोड़ा। सीएसएस कोड की मात्रा को संग्रहीत करने के लिए अनजान लगता है, और इसका बहुत बुरा वर्डप्रेस jquery-ui स्क्रिप्ट के साथ ऐसा कोई स्टाइल समर्थन प्रदान नहीं करता है।

हालांकि, WP स्क्रिप्ट प्रदान करता है, जो सीएसएस को $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); 

या गतिशील-विषय

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

Answer 2

मुझे नहीं लगता कि एक यूआई थीम पूर्व-स्थापित हो जाती है। आपको हेडर में स्क्रिप्ट जोड़ने की आवश्यकता है।

मुझे लगता है कि आप this function देख रहे हैं। यह आपको अपने शीर्षलेख में एक स्क्रिप्ट जोड़ने की अनुमति देता है। बस अपने प्लगइन फ़ोल्डर में कहीं भी थीम का सीएसएस डालें और इसमें शामिल करें।

Answer 3

यदि आप wp_enqueue_style() और wp_enqueue_script() सही तरीके से कॉल करते हैं, और यह मानते हुए कि अन्य लेखक सही तरीके से उनका उपयोग कर रहे हैं, तो वर्डप्रेस संघर्षों का ख्याल रखेगा।

हालांकि यदि कोई प्लगइन या थीम लेखक wp_head या admin_head क्रियाओं का उपयोग करके सीधे पृष्ठ के शीर्ष पर शैलियों या स्क्रिप्ट प्रिंट करता है तो संघर्ष से बचने के लिए आप इतना कुछ नहीं कर सकते हैं।

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

Answer 4

EkoJr के जवाब देने के लिए कुछ और जानकारी जोड़ने के लिए के रूप में, भंडारण का एक उदाहरण Jquery UI v1.11.4 यदि आप संपूर्ण JQuery UI सीएसएस स्टाइलशीट जोड़ते हैं, तो यह डिफ़ॉल्ट वर्डप्रेस थीम स्टाइल को तोड़ सकता है।

तो, आप केवल स्लाइडर घटक से संबंधित सीएसएस वर्ग जोड़ सकते हैं। (: इन ui-अंधेरे विषय के लिए निर्माण कर रहे हैं टिप्पणी): यहाँ कक्षाएं मैं उपयोग किया जाता है

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

इसके अलावा, कृपया ध्यान दें कि आप कर सकते हैं उपसर्ग अपने कंटेनर आईडी के साथ उन वर्गों। उदाहरण के लिए, यदि आपका स्लाइडर आईडी 'स्लाइडर', उपयोग किया है:

#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

मैं सिर्फ इस मुद्दे का सामना करना पड़ता है और फिर पोस्ट पाया मैंने पाया एक तरीका है कि उल टैग करने के लिए वर्ग "subsubsub" डालने। सूची खराब नहीं होगी। कोड होगा:

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

उम्मीद है कि यह किसी की मदद कर सकता है।

Answer 6

तब से वर्डप्रेस के साथ हुए बदलावों के लिए एक अद्यतन। हालिया वर्डप्रेस पैकेज बॉक्स में सीएसएस के साथ आते हैं।

आप wp-includes\css में और wp_enqueue_style() का उपयोग करके प्राप्त कर सकते हैं।

मुझे लगता है कि ओपी के उपयोग के मामले के लिए wp_enqueue_style('wp-jquery-ui-dialog'); आवश्यक है।

उम्मीद है कि यह भविष्य में किसी की सहायता करेगा।