wake-up-neo.net

WordPress, jQuery UI CSS-Dateien?

Ich versuche, ein WordPress-Plugin zu erstellen, und ich hätte gerne jQuery-UI-Registerkarten auf einer meiner Einstellungsseiten.

Ich habe bereits den Skriptcode gesetzt:

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

... und ich habe auch HTML und JavaScript erstellt. Bis hier sind alle in Ordnung.

Die Frage ist:

Die WordPress-Plattform enthält bereits vorinstallierte Skripte wie die oben beschriebene. Mein Skript läuft gut mit den Registerkarten, ist aber nicht gestylt! Also, was ich zu fragen versuche, ist die WordPress-Plattform mit vorinstalliertem jQuery-UI-Design ausgestattet? ... und wenn ja, wie füge ich den Stil in mein Plugin ein?

26
Merianos Nikos

Hört sich eher so an, als hätten Sie ein Problem damit, ein verfügbares Styling für das Jquery-ui-Theme in WordPress zu finden.

Zur Beantwortung Ihrer Frage. Nein, WordPress bietet keine nützlichen Stile für die Plattform selbst. Die einzig verfügbare CSS ist in\wp-includes\jquery-ui-dialog.css, und das allein ist nicht sehr nützlich.

Ich hatte auch das gleiche Problem und fand zwei Optionen . Speichern Sie es entweder in einem CSS-Ordner und laden Sie es von dort aus oder laden Sie es überURL(Google APIs). Für JQuery UI entschied ich mich, auf die CDA von Google zu setzen, und fügte eine Möglichkeit hinzu, den "Theme Roller" zu verwenden. Das Speichern dieser Menge an CSS-Code scheint zunächst unnötig zu sein, und es ist zu schade, dass WordPress keine Stilunterstützung bietet, wie dies bei den Jquery-ui-Skripts der Fall ist.

WP bietet jedoch Skripts an, die das CSS mit $wp_scripts->registered['jquery-ui-core']->ver auf dem neuesten Stand halten. Sie können entweder mit wp_scripts(); OR global $wp_scripts; darauf zugreifen.

Statisches Thema

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

ODER dynamisches Thema

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

Und ein Beispiel für die lokale Speicherung

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

Ich glaube nicht, dass ein UI-Design vorinstalliert ist. Sie müssen das Skript zum Header hinzufügen.

Ich denke du suchst diese Funktion . Damit können Sie Ihrem Header ein Skript hinzufügen. Legen Sie die CSS des Themes einfach irgendwo in Ihren Plugin-Ordner und fügen Sie diese hinzu.

5
Tim S.

Wenn Sie ab Jquery UI v1.11.4 weitere Informationen zur Antwort von EkoJr hinzufügen möchten, wenn Sie das gesamte CSS-Stylesheet für die JQuery-Benutzeroberfläche hinzufügen, wird dadurch möglicherweise das standardmäßige Wordpress-Design-Format beschädigt.

Sie können also nur die CSS-Klassen hinzufügen, die der Schieberegler-Komponente entsprechen. Hier sind die Klassen, die ich verwendet habe (Hinweis: Diese sind für das ui-darkness-Thema) erstellt:

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

Beachten Sie auch, dass Sie diese Klassen mit Ihrer Container-ID prefix angeben können. Wenn Ihr Schieberegler beispielsweise die ID 'Schieberegler' hat, verwenden Sie: 

 #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
2
Luc Lérot

Ein Update für die Änderungen, die seither mit WordPress geschehen sind. Aktuelle WordPress-Pakete werden mit dem CSS-Paket geliefert. 

Sie finden dann in wp-includes\css und enqueue mit wp_enqueue_style().

Ich denke, für den Anwendungsfall von OP ist wp_enqueue_style( 'wp-jquery-ui-dialog' ); alles, was benötigt wurde. 

Hoffe das hilft jemand in der Zukunft. 

1
Arun Basil Lal

Ich stehe gerade vor diesem Problem und fand den Beitrag. Dann fand ich einen Weg, die Klasse "subsubsub" in den ul-Tag einzufügen. Die Liste wird nicht schlecht sein. Der Code wird sein:

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

Ich hoffe es kann jemandem helfen.

0
Hix.botay

Wenn Sie die Aufrufe wp_enqueue_style() und wp_enqueue_script() korrekt verwenden und davon ausgehen, dass sie auch von anderen Autoren korrekt verwendet werden, kümmert sich WordPress um Konflikte.

Wenn jedoch ein Plugin oder ein Autor eines Designs die Stile oder Skripts mit wp_head- oder admin_head-Aktionen direkt auf den Kopf der Seite druckt, können Sie nicht viel tun, um Konflikte zu vermeiden.

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

0
Paul