{"id":1065,"date":"2018-04-03T13:53:47","date_gmt":"2018-04-03T11:53:47","guid":{"rendered":"http:\/\/evileu.de\/zum-schwarzen-pinguin\/?p=1065"},"modified":"2018-04-03T18:13:32","modified_gmt":"2018-04-03T16:13:32","slug":"noch-mehr-widget-bastelei-ein-eigenes-dropdown-feld","status":"publish","type":"post","link":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/2018\/04\/03\/noch-mehr-widget-bastelei-ein-eigenes-dropdown-feld\/","title":{"rendered":"Noch mehr Widget-Bastelei: ein eigenes Dropdown-Feld"},"content":{"rendered":"

Ich hab im vorigen Artikel etwas geschummelt und mir ein fertiges Konstrukt f\u00fcr das Dropdown-Feld mit den Kategorien ergooglet, das ging so:<\/p>\n

<p>\r\n\u00a0\u00a0\u00a0 <label for=\"<?php echo $this->get_field_id( 'select' ); ?>\">Kategorie ausw\u00e4hlen:<\/label>\r\n\u00a0\u00a0\u00a0 <?php wp_dropdown_categories<\/span>( array( 'show_option_none' =>' ','name' => $this->get_field_name( 'select' ), 'selected' => $select ) ); ?>\r\n\u00a0 <\/p><\/pre>\n
Wer unbedingt genaueres dazu wissen m\u00f6chte, kanns im Codex bei wp_dropdown_categories<\/a> nachschauen, ich spar mir das, weil es der volle Overkill mit ungef\u00e4hr 20 Parametern ist, und die Source-Beispiele auch nicht gerade zur Erhellung beitragen.<\/p>\n
Dropdown-Felder in Widgets braucht man aber immer wieder, und ich stelle hier eine realtiv einfache Methode vor, wie man sie sich selbst zusammenbastelt.<\/p>\n
Das Anwendungsbeispiel<\/h2>\n
Ich m\u00f6chte im Widget ein Dropdown-Feld haben, in dem man einen Post Type w\u00e4hlen kann, die Optionen sollen Post, Page und Custom Type heissen. Dazu erweitern wir den Widget-Code aus dem vorigen Artikel um ein Feld namens „posttype“, ich markiere hier mal in rot wo man da \u00fcberall eingreifen muss:<\/p>\n
\u00a0\u00a0\u00a0 function form($instance)\r\n\u00a0 {\r\n\u00a0\u00a0\u00a0 $instance = wp_parse_args( (array) $instance, array( 'title' => '' ) );\r\n\u00a0\u00a0\u00a0 $title = $instance['title'];\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0$instance = wp_parse_args( (array) $instance, array( 'posttype' => '' ) );<\/span>\r\n\u00a0\u00a0\u00a0 $select = $instance['posttype'];<\/span>\r\n?>\r\n\u00a0 <p><label for=\"<?php echo $this->get_field_id('title'); ?>\">Titel: <input class=\"widefat\" id=\"<?php echo $this->get_field_id('title'); ?>\" name=\"<?php echo $this->get_field_name('title'); ?>\" type=\"text\" value=\"<?php echo attribute_escape($title); ?>\" \/><\/label><\/p>\r\n\u00a0 \r\n\u00a0\u00a0 <--! HIER KOMMT DAS DROPDOWN HIN--><\/span>\r\n\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\r\n<?php\r\n\u00a0 }\r\n\u00a0function update($new_instance, $old_instance)\r\n\u00a0 {\r\n\u00a0\u00a0\u00a0 $instance = $old_instance;\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0 $instance['title'] = $new_instance['title'];\r\n\u00a0\u00a0 \u00a0$instance['posttype'] = $new_instance['posttype'];<\/span>\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0 return $instance;\r\n\u00a0 }<\/pre>\n
Dann kommt in die function form() folgende Konstruktion f\u00fcr das Dropdown-Feld, ich markiere gr\u00fcn wo man da eigene Werte eintr\u00e4gt:<\/p>\n
<p>Post Type ausw\u00e4hlen<\/span>\r\n\u00a0\u00a0 <select id=\"<?php echo $this->get_field_id('posttype'); ?>\" name=\"<?php echo $this->get_field_name('posttype'); ?>\" class=\"widefat\" style=\"width:100%;\">\r\n\u00a0\u00a0\u00a0 <option <?php selected( $instance['posttype'], 'Post<\/span>'); ?> value=\"Post<\/span>\">Post<\/span><\/option>\r\n\u00a0\u00a0\u00a0 <option <?php selected( $instance['posttype'], 'Page<\/span>'); ?> value=\"Page<\/span>\">Page<\/span><\/option> \r\n\u00a0\u00a0\u00a0 <option <?php selected( $instance['posttype'], 'Custom Type<\/span>'); ?> value=\"Custom Type<\/span>\">Custom Type<\/span><\/option>\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0<\/select>\r\n\u00a0\u00a0 <\/p><\/pre>\n
Das erzeugt uns im Widget das Dropdown-Feld mit den drei m\u00f6glichen Werten:<\/p>\n
\"dropdown_drei_werte\"
dropdown_drei_werte<\/p><\/div>\n
F\u00fcr die Ausgabe modifizieren wir jetzt nur noch die function widget() ein bisschen:<\/p>\n
\u00a0function widget($args, $instance)\r\n\u00a0 {\r\n\u00a0\u00a0\u00a0 extract($args, EXTR_SKIP);\r\n\u00a0\r\n\u00a0\u00a0\u00a0 echo $before_widget;\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0$title = $instance['title'];\r\n\u00a0\u00a0 \u00a0$posttype = $instance['posttype'];<\/span>\r\n\u00a0\u00a0 \u00a0 \r\n\u00a0\u00a0\u00a0 \/\/ WIDGET CODE KOMMT HIERHIN\r\n\u00a0\u00a0\u00a0 echo \"<h3>\".$title.\"<\/h3>\";\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0echo \"Post Type= \".$posttype.\"<br>\";<\/span>\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0echo $after_widget;\r\n\u00a0 }<\/pre>\n
Fertig! Ausgabe:<\/p>\n
\"posttype_ausgabe\"
posttype_ausgabe<\/p><\/div>\n
Nicht besonders spektakul\u00e4r, aber ausbauf\u00e4hig. Ich denke, das kann man immer wieder mal brauchen, wenn der User aus einer vorgegebenen Liste eine Auswahl treffen soll.<\/p>\n
Kleine Erg\u00e4nzung: ein numerisches Feld geht auch<\/h2>\n
Das geht ganz einfach, indem man den type des Textinput-Felds auf number stellt, der Rest bleibt wie vorher:<\/p>\n
<p><label for=\"<?php echo $this->get_field_id('anzahl'); ?>\">Anzahl: <input id=\"<?php echo $this->get_field_id('anzahl'); ?>\" \r\nname=\"<?php echo $this->get_field_name('anzahl'); ?>\" type=\"number<\/span>\" value=\"<?php echo attribute_escape($anzahl); ?>\" \/><\/label><\/p><\/pre>\n
Schon klappts:<\/p>\n
\"numerisch\"
numerisch<\/p><\/div>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
Ich hab im vorigen Artikel etwas geschummelt und mir ein fertiges Konstrukt f\u00fcr das Dropdown-Feld mit den Kategorien ergooglet, das ging so: <p> \u00a0\u00a0\u00a0 <label for=“<?php echo $this->get_field_id( ’select‘ ); ?>“>Kategorie ausw\u00e4hlen:<\/label> \u00a0\u00a0\u00a0 <?php wp_dropdown_categories( array( ’show_option_none‘ =>‘ ‚,’name‘ => $this->get_field_name( ’select‘ ), ’selected‘ => $select ) ); ?> \u00a0 <\/p> Wer unbedingt genaueres dazu […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[45,2],"tags":[],"_links":{"self":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/1065"}],"collection":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/comments?post=1065"}],"version-history":[{"count":4,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/1065\/revisions"}],"predecessor-version":[{"id":1072,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/1065\/revisions\/1072"}],"wp:attachment":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/media?parent=1065"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/categories?post=1065"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/tags?post=1065"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}