{"id":1238,"date":"2018-06-08T18:32:56","date_gmt":"2018-06-08T16:32:56","guid":{"rendered":"http:\/\/evileu.de\/zum-schwarzen-pinguin\/?p=1238"},"modified":"2018-06-08T18:35:58","modified_gmt":"2018-06-08T16:35:58","slug":"rezeptecounter-so-wird-ein-widget-draus","status":"publish","type":"post","link":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/2018\/06\/08\/rezeptecounter-so-wird-ein-widget-draus\/","title":{"rendered":"Rezeptecounter: so wird ein Widget draus"},"content":{"rendered":"

Wie man in WordPress ein eigenes Widget erstellt, habe ich in diesem Beitrag: Widget-Basteln macht Spa\u00df<\/a> schon mal ausf\u00fchrlich vorgestellt, deswegen machen wir das hier im Schnelldurchgang. Der Code l\u00e4\u00dft sich relativ leicht auf die Anforderungen f\u00fcr die Rezepthitparade anpassen. Wir brauchen zwei Eingabefelder, eines f\u00fcr den Titel des Widgets, und eins f\u00fcr die auszugebende Anzahl an Rezepten. In den OpCode des Widgets kommt unsere Ausgabelogik, die k\u00f6nnen wir 1:1 aus dem vorigen Beitrag \u00fcbernehmen.<\/p>\n

Nur kurz zur Erinnerung: Widgets werden von der Struktur her genau wie Plugins in einer eigenen PHP-Datei angelegt, die kommt auch ins Plugins-Verzeichnis. Hier mal der Code ohne die Ausgabefunktionalit\u00e4t:<\/p>\n

<?php\r\n\/*\r\nPlugin Name: Hitparaden Widget\r\nPlugin URI: http:\/\/evileu.de\/wordpress\r\nDescription: Gibt die am \u00f6ftesten aufgerufenen Rezepte aus, Anzahl vom Benutzer w\u00e4hlbar\r\nAuthor: Evi Leu\r\nVersion: 1.0\r\nAuthor URI: http:\/\/evileu.de\r\n*\/\r\n\r\n\r\nclass HitparadenWidget extends WP_Widget\r\n{\r\n\u00a0 function HitparadenWidget()\r\n\u00a0 {\r\n\u00a0\u00a0\u00a0 $widget_ops = array('classname' => 'HitparadenWidget', 'description' => 'Zeigt die am \u00f6ftesten aufgerufenen Rezepte an' );\r\n\u00a0\u00a0\u00a0 $this->WP_Widget('HitparadenWidget', 'Hitparade', $widget_ops);\r\n\u00a0 }\r\n\u00a0\r\n\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\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0$instance = wp_parse_args( (array) $instance, array( 'anzahl' => '' ) );\r\n\u00a0\u00a0\u00a0 $anzahl = $instance['anzahl'];\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\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 <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\" value=\"<?php echo attribute_escape($anzahl); ?>\" \/><\/label><\/p>\r\n\u00a0 \r\n\u00a0 \r\n<?php\r\n\u00a0 }\r\n\u00a0\r\n\u00a0 function update($new_instance, $old_instance)\r\n\u00a0 {\r\n\u00a0\u00a0\u00a0 $instance = $old_instance;\r\n\u00a0\u00a0\u00a0 $instance['title'] = $new_instance['title'];\r\n\u00a0\u00a0 \u00a0$instance['anzahl'] = $new_instance['anzahl'];\r\n\u00a0\u00a0\u00a0 return $instance;\r\n\u00a0 }\r\n\u00a0\r\n\u00a0 function 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 = empty($instance['title']) ? ' ' : apply_filters('widget_title', $instance['title']);\r\n\u00a0\u00a0 \u00a0$anzahl\u00a0\u00a0\u00a0 = empty( $instance['anzahl'] ) ? '' : esc_attr( $instance['anzahl'] );\r\n\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0 \/\/ WIDGET CODE GOES HERE\r\n    \/**********************\/\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\/\/END WIDGET CODE\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0echo $after_widget;\r\n\u00a0 }\r\n\u00a0\r\n}\r\nadd_action( 'widgets_init', create_function('', 'return register_widget(\"HitparadenWidget\");') );?><\/pre>\n
Das ist das Gerippe f\u00fcr das Widget, es werden zwei Eingabefelder erzeugt und deren Werte auf die Variablen $title und $anzahl gelegt. Mit denen kann man weiterarbeiten, hier kommt der Code aus dem vorigen Beitrag nahezu unver\u00e4ndert rein:<\/p>\n
\/\/ WIDGET CODE GOES HERE\r\n\u00a0\u00a0\u00a0 echo \"<h2>\".$title.<\/span>\"<\/h2>\";\r\n\u00a0\u00a0 \u00a0echo \"<h3>Die \".$anzahl.<\/span>\" beliebtesten Rezepte<\/h3>\"; \r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/Bisher gespeicherte Rezepte holen\r\n\u00a0\u00a0 \u00a0global $wpdb;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $alleposts = $wpdb->get_results( \"SELECT * from wp_options where option_name like 'zaehler_%'\");\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$rohdaten = array();\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$i=0;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 foreach($alleposts as $einpost){\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/Optionswerte auslesen\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$meineOption = get_option($einpost->option_name);\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$o_zaehler = $meineOption['zaehler'];\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$o_titel = $meineOption['titel'];\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$o_id = $meineOption['id'];\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/debug unsortierte Ausgabe\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/echo $o_titel.\" \".$o_zaehler.\"<br>\";\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/Array bef\u00fcllen\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$rohdaten[$i]['zaehler']= $o_zaehler;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$rohdaten[$i]['titel']= $o_titel;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$rohdaten[$i]['id']= $o_id;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$i=$i+1;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/echo \"<h2>Hitparade:<\/h2>\";\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$counter = array();\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0foreach ($rohdaten as $key => $row)\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0{\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$counter[$key] = $row['zaehler'];\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0array_multisort($counter, SORT_DESC, $rohdaten);\r\n\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$hilf = array_slice($rohdaten, 0, $anzahl<\/span>);\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0foreach($hilf as $roh){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0echo $roh['titel'].\" (\".$roh['zaehler'].\")<br>\";\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\/\/END WIDGET CODE<\/pre>\n
Ich verwende nur noch den $title f\u00fcr die \u00dcberschrift des Widgets und die $anzahl f\u00fcr den array_slice, um die Anzahl der ausgegebenen Datens\u00e4tze zu begrenzen. Das wars auch schon! Nach erfolgreicher Aktivierung pr\u00e4sentiert sich das Widget so:<\/p>\n
\"hitparadenwidget\"
hitparadenwidget<\/p><\/div>\n
Die Ausgabe sieht so aus:<\/p>\n
\"hitparade_ausgabe\"
hitparade_ausgabe<\/p><\/div>\n
Funkt, kann man so lassen.<\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
Wie man in WordPress ein eigenes Widget erstellt, habe ich in diesem Beitrag: Widget-Basteln macht Spa\u00df schon mal ausf\u00fchrlich vorgestellt, deswegen machen wir das hier im Schnelldurchgang. Der Code l\u00e4\u00dft sich relativ leicht auf die Anforderungen f\u00fcr die Rezepthitparade anpassen. Wir brauchen zwei Eingabefelder, eines f\u00fcr den Titel des Widgets, und eins f\u00fcr die auszugebende […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[4,45,2],"tags":[],"_links":{"self":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/1238"}],"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=1238"}],"version-history":[{"count":3,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/1238\/revisions"}],"predecessor-version":[{"id":1243,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/1238\/revisions\/1243"}],"wp:attachment":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/media?parent=1238"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/categories?post=1238"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/tags?post=1238"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}