{"id":1274,"date":"2018-06-18T13:42:01","date_gmt":"2018-06-18T11:42:01","guid":{"rendered":"http:\/\/evileu.de\/zum-schwarzen-pinguin\/?p=1274"},"modified":"2018-06-18T13:56:37","modified_gmt":"2018-06-18T11:56:37","slug":"wordpress-beitraege-alphabetische-pagination-ganz-spartanisch","status":"publish","type":"post","link":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/2018\/06\/18\/wordpress-beitraege-alphabetische-pagination-ganz-spartanisch\/","title":{"rendered":"WordPress Beitr\u00e4ge: alphabetische Pagination ganz spartanisch"},"content":{"rendered":"<p>Ich habe mich in einem kleinen PHP-Projekt k\u00fcrzlich ausf\u00fchrlich mit seitenweiser und alfabetischer Pagination bei der Ausgabe von Datenbankabfragen besch\u00e4ftigt, und bin dabei auf eine Idee gekommen, wie man das in WordPress relativ einfach umsetzen kann. Ich geh mal wieder auf meine Rezepte los, das sind \u00fcber 300 St\u00fcck, da ist das alte Inhaltsverzeichnis doch inzwischen ein wenig lang.<\/p>\n<h2>Die Aufgabenstellung<\/h2>\n<p>Ich m\u00f6chte eine Anzeige aller Buchstaben A-Z, und wenn man auf einen Buchstaben klickt, soll eine Liste aller Rezepte ausgegeben werden, die mit diesem Buchstaben anfangen. Klingt simpel, ist auch nicht arg schwierig unzusetzen. Ich mache ein Plugin daraus, und packe die ganze Sache in einen Shortcode.<\/p>\n<h2>Die Anzeige: ich nehme ein Formular<\/h2>\n<p>Daf\u00fcr konstruiere ich mir ein Hilfs-Array, in das erstmal alle Buchstaben von a-z reinkommen. Gro\u00df\/Kleinschreibung ist uninteressant, da MySQL-LIKE nicht case sensitive ist. Das Formular sieht erstmal so aus:<\/p>\n<pre>\/\/Buchstaben a-z in Array schreiben\r\n$letters = array();\r\nfor ($i = 'a', $j = 1; $j &lt;= 26; $i++, $j++) {\r\n\u00a0\u00a0\u00a0 $letters[$j] = $i;\u00a0\u00a0 \u00a0\r\n}\r\n\/\/Formular mit Buttons\r\necho \"&lt;form action = '#' method = 'post'&gt;\";\r\n\r\nfor ($i=1; $i &lt;=26; $i++){\r\n\u00a0\u00a0 \u00a0echo \"&lt;input type='submit' id='el_button' name='\".$letters[$i].\"' value='\".$letters[$i].\"'&gt;\";\r\n}\r\n\u00a0\u00a0 \u00a0echo \"&lt;\/form&gt;\";<\/pre>\n<p>Ich steppe durch mein Buchstabenarray durch und lege f\u00fcr jeden Buchstaben einen Button mit dem Namen des aktuellen Buchstabens und der id el_button an. Das erzeugt 26 Buttons, die sehen erstmal noch recht h\u00e4\u00dflich aus:<\/p>\n<div id=\"attachment_1275\" style=\"width: 561px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-1275\" decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-1275\" src=\"http:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-content\/uploads\/2018\/06\/buttons_ungestylt.jpg\" alt=\"buttons_ungestylt\" width=\"551\" height=\"334\" srcset=\"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-content\/uploads\/2018\/06\/buttons_ungestylt.jpg 551w, https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-content\/uploads\/2018\/06\/buttons_ungestylt-300x182.jpg 300w\" sizes=\"(max-width: 551px) 100vw, 551px\" \/><p id=\"caption-attachment-1275\" class=\"wp-caption-text\">buttons_ungestylt<\/p><\/div>\n<p>Ein kleiner Eingriff in die style.css des Child Themes versch\u00f6nert das Ganze betr\u00e4chtlich.<\/p>\n<pre>#el_button{\r\n\u00a0\u00a0\u00a0 height:30px;\r\n\u00a0\u00a0\u00a0 width:18px;\r\n\u00a0\u00a0 \u00a0padding:2px;\r\n\u00a0\u00a0 \u00a0border: 2px solid white;\r\n\u00a0\u00a0 \u00a0margin 2px;\r\n\u00a0\u00a0 \u00a0padding: 1px 1px 1px;\r\n}<\/pre>\n<p>Das Ergebnis kann sich schon besser sehen lassen:<\/p>\n<div id=\"attachment_1276\" style=\"width: 559px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-1276\" decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-1276\" src=\"http:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-content\/uploads\/2018\/06\/buttons_gestylt.jpg\" alt=\"buttons_gestylt\" width=\"549\" height=\"246\" srcset=\"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-content\/uploads\/2018\/06\/buttons_gestylt.jpg 549w, https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-content\/uploads\/2018\/06\/buttons_gestylt-300x134.jpg 300w\" sizes=\"(max-width: 549px) 100vw, 549px\" \/><p id=\"caption-attachment-1276\" class=\"wp-caption-text\">buttons_gestylt<\/p><\/div>\n<p>Jetzt klemme ich mir wieder mein Buchstabenarray und steppe es wieder von 1 bis 26 durch. F\u00fcr jeden Buchstaben frage ich mit einem if isset(&#8230;) ab, ob der entsprechende Button angeklickt wurde, und rufe falls ja meine Ausgabefunktion auf, die kriegt den aktuellen Buchstaben als Parameter \u00fcbergeben.<\/p>\n<pre>for ($j = 1; $j &lt;= 26; $j++){\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0if (isset($_POST[''.$letters[$j].''])){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0return el_aufruf(\"\".$letters[$j].\"\");\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0}<\/pre>\n<h2>Die Ausgabefunktion<\/h2>\n<p>&#8230; geht mit dem \u00fcbergebenen Buchstaben auf die Tabelle wp_posts los und holt mir mit dem post_title LIKE &#8218;x%&#8216; alle ver\u00f6ffentlichten Rezepte, die mit diesem Buuchstaben anfangen. Ausgegeben wird die Sache wieder mal mit einem foreach, und ich hole mir gleich noch den Permalink und bastle einen Link zum Rezept daraus.<\/p>\n<pre>function el_aufruf(<span style=\"color: #ff0000;\">$stabe<\/span>){\r\n\u00a0\u00a0 \u00a0global $wpdb;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0 $alleposts = $wpdb-&gt;get_results( \"SELECT * from wp_posts \r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0 where post_title like '\".<span style=\"color: #ff0000;\">$stabe.\"%<\/span>' \r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0 and post_type like 'post' \r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0 and post_status like 'publish'\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0 order by post_title\");\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $gefunden = $wpdb-&gt;num_rows;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 echo \"&lt;h2&gt;\".$gefunden.\" Rezepte zum Buchstaben \".strtoupper($stabe).\"&lt;\/h2&gt;\";\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0foreach ($alleposts as $einpost){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$pfad = get_the_permalink($einpost-&gt;ID);\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0echo \"&lt;a href = '\".$pfad.\"'&gt;\".$einpost-&gt;post_title.\"&lt;\/a&gt;&lt;br&gt;\";\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0\r\n} \/\/end function el_aufruf<\/pre>\n<p>Das wars schon! Hier als Beispiel die Ausgabe zum Buchstaben M:<\/p>\n<div id=\"attachment_1278\" style=\"width: 527px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-1278\" decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-1278\" src=\"http:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-content\/uploads\/2018\/06\/buchstabe_m.jpg\" alt=\"buchstabe_m\" width=\"517\" height=\"568\" srcset=\"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-content\/uploads\/2018\/06\/buchstabe_m.jpg 517w, https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-content\/uploads\/2018\/06\/buchstabe_m-273x300.jpg 273w\" sizes=\"(max-width: 517px) 100vw, 517px\" \/><p id=\"caption-attachment-1278\" class=\"wp-caption-text\">buchstabe_m<\/p><\/div>\n<p>Kleiner Aufwand, praktisch brauchbares Ergebnis. Wenn man unterschiedliche Post Types hat, k\u00f6nnte man die Ausgabe auch hierauf noch einschr\u00e4nken, das ist vielleicht mal ganz n\u00fctzlich. Ich hab aber nur die einfachen Posts als Rezepte, das ist f\u00fcr meine Zwecke v\u00f6llig ausreichend.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ich habe mich in einem kleinen PHP-Projekt k\u00fcrzlich ausf\u00fchrlich mit seitenweiser und alfabetischer Pagination bei der Ausgabe von Datenbankabfragen besch\u00e4ftigt, und bin dabei auf eine Idee gekommen, wie man das in WordPress relativ einfach umsetzen kann. Ich geh mal wieder auf meine Rezepte los, das sind \u00fcber 300 St\u00fcck, da ist das alte Inhaltsverzeichnis doch [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1,7,4,8,14,2],"tags":[],"_links":{"self":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/1274"}],"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=1274"}],"version-history":[{"count":4,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/1274\/revisions"}],"predecessor-version":[{"id":1281,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/1274\/revisions\/1281"}],"wp:attachment":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/media?parent=1274"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/categories?post=1274"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/tags?post=1274"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}