{"id":1316,"date":"2018-06-24T14:58:06","date_gmt":"2018-06-24T12:58:06","guid":{"rendered":"http:\/\/evileu.de\/zum-schwarzen-pinguin\/?p=1316"},"modified":"2018-11-09T06:23:47","modified_gmt":"2018-11-09T05:23:47","slug":"ne-kleine-fingeruebung-beitragshitparade-mit-ajax-refresh","status":"publish","type":"post","link":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/2018\/06\/24\/ne-kleine-fingeruebung-beitragshitparade-mit-ajax-refresh\/","title":{"rendered":"Ne kleine Finger\u00fcbung: Beitragshitparade mit AJAX-Refresh"},"content":{"rendered":"<p>Weil ich mich dabei erwischt habe, dass ich immer wieder F5 dr\u00fccke, wenn ich meine Beitragshitparade anschaue, bin ich auf die Idee gekommen, den Refresh der Anzeige alle x Sekunden automatisch einzubauen. Das geht in WordPress ganz flott, hatten wir auch alles so \u00e4hnlich schonmal, aber weil man so etwas immer wieder mal brauchen kann, hier der Code.<\/p>\n<h2>Wir basteln uns daf\u00fcr nat\u00fcrlich ein Plugin<\/h2>\n<p>In das kommt zuallererst ein sehr kurzer Shortcode, der macht eigentlich nichts anderes als eine benannte Div\u00a0 f\u00fcr die Ausgabe bereitzustellen.<\/p>\n<pre>&lt;?php\r\n\/*\r\nPlugin Name: Ajax Hitparade\r\nPlugin URI: http:\/\/localhost\/wp_ajax\/wp-content\/plugins\/wp-ajax\r\nDescription: Ausgabe der beliebtesten Beitr\u00e4ge mit Ajax Refresh\r\nVersion: 1.0\r\nAuthor: Evi Leu\r\nAuthor URI: http:\/\/www.evileu.de\r\n*\/\r\n\r\n\r\n\u00a0function a_ausgabe(){\r\n\u00a0 return \"Die 10 beliebtesten Rezepte&lt;br&gt;&lt;<span style=\"color: #ff0000;\">div id='ajax_ausgabe'<\/span>&gt;...&lt;\/div&gt;\";\r\n\u00a0 \r\n\u00a0}\r\n\u00a0add_shortcode('ajax_ausgabe', 'a_ausgabe');<\/pre>\n<p>Dann geben wir WordPress bekannt, dass wir einen Ajax-Call ausf\u00fchren wollen:<\/p>\n<pre>\/**************ajax-action f\u00fcr wordpress definieren*\/ \r\nadd_action( 'wp_ajax_hitparade_action', 'hitparade_action' );\r\nadd_action( 'wp_ajax_nopriv_hitparade_action', 'hitparade_action' );\r\n\r\n\r\n<\/pre>\n<h2>Das Javascript<\/h2>\n<p>Jetzt binden wir unsere js-Datei mit dem Script ein, und geben ihr mit dem wp_localize_script den Pfad zur Ajax-URL von WordPress mit:<\/p>\n<pre>\/*********Externes Script einbinden und Pfad zur admin-ajax.php \u00fcbergeben*\/\r\nfunction myhitparade_js() {\r\n\u00a0\u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0 wp_enqueue_script('myhitparade-js', plugins_url().<span style=\"color: #ff0000;\">'\/ajax-hitparade\/wp_ajax_hitparade.js'<\/span>, array('jquery'), false, false);\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0 wp_localize_script( 'myhitparade-js', 'my_ajaxurl', admin_url( 'admin-ajax.php' ) );\r\n\u00a0\r\n\u00a0\u00a0 }\r\nadd_action('wp_enqueue_scripts', 'myhitparade_js');<\/pre>\n<p>Die Script-Datei wp_ajax_hitparade.js liegt in unserem Plugin-Verzeichnis und sieht so aus:<\/p>\n<pre>$(document).ready(function() {\r\n\u00a0\u00a0\u00a0\u00a0 <span style=\"color: #ff0000;\">setInterval(myFunction, 1000)<\/span> \u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0 });\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0function myFunction(){\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\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var data = {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 'action': '<span style=\"color: #008000;\">hitparade_action<\/span>',\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 };\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ der volle Pfad zur admin-ajax.php liegt auf my_ajaxurl\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 jQuery.post(my_ajaxurl, data, function(response) {\r\n\u00a0\u00a0\u00a0\u00a0\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\u00a0\u00a0 document.getElementById(\"<span style=\"color: #008000;\">ajax_ausgabe<\/span>\").innerHTML = response;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 } \/\/*********************End myFunction<\/pre>\n<p>Der Witz ist hier nat\u00fcrlich das setInterval(), das f\u00fchrt unsere Funktion alle X Millisekunden aus. Ansonsten geben wir der Funktion nur mit, dass sie die Callback-Funktion hitparade_action ausf\u00fchren soll, es gibt keine zu \u00fcbergebenden Parameter ausser der Ajax-URL. Das Ergebnis des Calls wird in die div ajax_ausgabe geschrieben.<\/p>\n<h2>Die Callback-Funktion<\/h2>\n<p>Kommt als Letztes in unser Plugin, sie ist sehr simpel und besteht nur aus einer Query auf die Tabelle Counter und einem foreach f\u00fcr die Ausgabe:<\/p>\n<pre>\/********Callback-Funktion**************\/\r\nfunction hitparade_action() {\r\n\u00a0\u00a0\u00a0 global $wpdb; \r\n\u00a0 \r\n\u00a0\u00a0\u00a0 $alleposts = $wpdb-&gt;get_results( \"SELECT * from counter ORDER BY zaehler DESC limit 10\");\r\n\u00a0\u00a0\u00a0 foreach($alleposts as $einpost){\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 echo $einpost-&gt;titel.\" \".$einpost-&gt;zaehler.\"&lt;\/br&gt;\";\r\n}\r\n\u00a0\u00a0\u00a0 \/**********************************************\/\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0 wp_die(); \/\/ this is required to terminate immediately and return a proper response\r\n} \/\/**********End function hitparade_action<\/pre>\n<p>Das sollts gewesen sein! Das Script checkt alle 1000 Millisekunden die Datenbank neu ab und aktualisiert die Anzeige dementsprechend. Viel Spa\u00df beim Nachbauen!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Weil ich mich dabei erwischt habe, dass ich immer wieder F5 dr\u00fccke, wenn ich meine Beitragshitparade anschaue, bin ich auf die Idee gekommen, den Refresh der Anzeige alle x Sekunden automatisch einzubauen. Das geht in WordPress ganz flott, hatten wir auch alles so \u00e4hnlich schonmal, aber weil man so etwas immer wieder mal brauchen kann, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[23,46,20,4,8,14,2,59],"tags":[],"_links":{"self":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/1316"}],"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=1316"}],"version-history":[{"count":3,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/1316\/revisions"}],"predecessor-version":[{"id":1319,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/1316\/revisions\/1319"}],"wp:attachment":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/media?parent=1316"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/categories?post=1316"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/tags?post=1316"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}