Verwenden von WordPress Admin-Benutzeroberfläche für Plugin-Einstellungen: Akkordeon-Stil

Als Plugin-Entwickler ist es wichtig sicherzustellen, dass das Dashboard das gleiche Aussehen und Verhalten wie die anderen nativen Komponenten von WordPress hat, um eine bessere Benutzererfahrung zu bieten.

Für mein Plugin möchte ich ein Akkordeon auf meiner Einstellungsseite implementieren. wp_enqueue_script() Sie diesen Artikel lesen und die wp_enqueue_script() function verwenden, sieht dies folgendermaßen aus:

   jQuery(function($){ $(".accordion").accordion({ header: "h3" }); $(".accordion").last().accordion("option", "icons", false); });  

First

Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.

Second

Phasellus mattis tincidunt nibh.

Third

Nam dui erat, auctor a, dignissim quis.
<?php

Ergebnis

Akkordeon Beispiel

Dies wurde aus dem WordPress Admin Pattern Library Plugin übernommen , das ich auf GitHub gefunden habe. In ihrer Demo sieht das Akkordeonbeispiel jedoch wie folgt aus:

erwartetes Ergebnis

Das Repo sieht aus, als wäre es nicht gepflegt worden und es scheint, dass dies ein Styling-Problem ist. Gibt es eine andere function, die ich ausführen muss, wie wp_enqueue_style() , die nativ eingebaut ist, um das richtige Styling für das Akkordeon zu bekommen?

Solutions Collecting From Web of "Verwenden von WordPress Admin-Benutzeroberfläche für Plugin-Einstellungen: Akkordeon-Stil"

Hier ist, wie ich es für meine Plugin / Optionen Seite (die innerhalb einer class ist, also das $ this-> Konstrukt):

 /* enqueue our css */ public function enqueue_options_style( $hook ) { if( $hook == $this->admin_page ) wp_enqueue_style( 'my-options', '/some-directory/my-options.css', false, $this->version ); // only present for our plugin's settings page } 

$this->admin_page ist der Slug, der von der vorherigen $this->admin_page init zurückgegeben wurde:

 $this->admin_page = add_menu_page( __( 'Settings' ), __( 'Settings' ), 'some-user-capability', 'my-options', array( &$this, 'display_page' ), 'dashicons-my-icon' ); 

und der Aufruf, den Optionen-Stil in die Warteschlange einzureihen, wird folgendermaßen verknüpft:

 add_action( 'admin_enqueue_scripts', array( &$this, 'enqueue_options_style' ), 10, 1 ); // add the css we need for our options settings page 

Nun, es ist nur eine Frage des Konstruierens dieser my-options.css Datei mit dem entsprechenden Markup für Ihr .accordion h3 Element.