{"id":3655,"date":"2008-07-06T14:12:37","date_gmt":"2008-07-06T12:12:37","guid":{"rendered":"http:\/\/www.frische-zitronen.de\/2008\/07\/06\/wordpress-kategorien-mit-individuellen-bildern-anzeigen\/"},"modified":"2008-07-06T14:12:37","modified_gmt":"2008-07-06T12:12:37","slug":"wordpress-kategorien-mit-individuellen-bildern-anzeigen","status":"publish","type":"post","link":"https:\/\/www.jukemedia.de\/blog\/2008\/07\/wordpress-kategorien-mit-individuellen-bildern-anzeigen\/","title":{"rendered":"WordPress Kategorien mit individuellen Bildern anzeigen"},"content":{"rendered":"<p>Zur Zeit habe ich auf meinem localhost ein neues Template f\u00fcr WordPress in Bearbeitung.  Mein Leben besteht nicht nur aus css und Webdesign, es gibt auch noch viel anderes, was mich interessiert. Ab und an habe schreibe ich hier im Weblog auch mal etwas \u00fcber diese andere Seite,  f\u00fchle mich aber mit den Themen bei den frischen Zitronen seltsam deplatziert. Daher gab es schon vor einiger Zeit noch ein weiteres Weblog, haupts\u00e4chlich um das Thema Kochen. Inzwischen ist aber das Layout und auch die css-Technik \u00fcberholt und alles andere als ein Bringer und \u00fcberhaupt ist das ganze Weblog eingeschlafen, so dass ich es sicherlich bald vom Netz nehmen werde. Statt dessen habe ich mich jedoch entschlossen einen Neuanfang zu starten und hier einmal ein Magazine-Theme zum Einsatz zu bringen. Die frischen Zitronen werden thematisch eng beim Webdesign bleiben.<\/p>\n<p>So viel kann ich \u00fcber das neue Design schon verraten: Es wird am unteren Ende jeweils ein Artikel aus einer Kategorie (bzw. das Exzerpt)  davon gezeigt werden.<br \/>\nHier ein Screenshot:<\/p>\n<p><a class=\"img\" href=\"http:\/\/www.jukemedia.de\/blog\/wp-content\/uploads\/2008\/07\/wordpress-categories-mit-bildern.jpg\" class=\"thickbox\" title=\"Abbildung wordpress-categories-mit-bildern.jpg\"><img decoding=\"async\" src=\"http:\/\/www.frische-zitronen.de\/wp-content\/uploads\/2008\/07\/wordpress-categories-mit-Bildern-thmb.jpg\" alt=\"wordpress-categories-mit-bildern.jpg\" \/><\/a><\/p>\n<p>Man k\u00f6nnte nun hergehen und via benutzerdefinierte Felder jedem Exzerpt bzw. jedem Artikel ein Bild zuordnen und das Aussehen dieses Bereiches damit von zu Ziet variieren. F\u00fcr den Aspekt Lebendigkeit w\u00e4re das bestimmt kein Nachteil, weil wiederkehrende Besucher immer etwas Neues entdecken. Dagegen spricht jedoch, dass es eine zeitaufw\u00e4ndige und auch kostspielige Angelegenheit wird, wenn man jeden Artikel, der in diesen Kategorien gepostet wird, zwangsweise immer mit einem Bild versehen muss. Au\u00dferdem ist das mit dem Abwechslungsreichtum auch so eine Sache. Wenn jeden Tag etwas anderes vorzufinden ist, kann das die Orientierung auch empfindlich st\u00f6ren. Deshalb habe ich mir gedacht, dass ein guter Kompomiss vielleicht der w\u00e4re, anstatt Bilder f\u00fcr jeden einzelnen Artikel,  symbolhafte Bilder f\u00fcr die Kategorien ausgeben zu lassen.<\/p>\n<p>M\u00f6glich wird das mit folgendem Codeschnippsel:<\/p>\n<pre lang=\"php\" line=\"1\">\n   1. <?php $display_categories = array(7,3,4);?>\n   2. <?php foreach ($display_categories as $category) { ?>\n   3. <?php $path = get_bloginfo('template_directory'); ?>\n   4. <?php echo '<a href=\"?cat=' . $category . '\"?><img decoding=\"async\" class=\"cat-image\" src=\"' . $path . '\/images\/category' . $category . '.jpg\" alt=\"foto\" \/?><\/a';?> ?>\n   5. <?php } ?>\n<\/pre>\n<p>In Zeile 1 wird ein Array definiert. Ein Array ist eine Variable, die mehrere Werte aufnehmen kann. Hier tr\u00e4gt man in den runden Klammern die IDs der Kategorien ein. Die ID der Kategorien wird im WordPress Admin =&gt; Verwalten =&gt; Kategorien eingeblendet, wenn man mit der Maus \u00fcber den Namen hovert.<\/p>\n<p>In Zeile 2 wird der Inhalt des Arrays an die Variable $category \u00fcbergeben und mit foreach eine Anweisung gegeben, dass f\u00fcr jeden Wert im Array (also f\u00fcr jede dort angebene Kategorie) etwas Bestimmtes, was nachfolgend dann genannt wird, zu tun ist.<\/p>\n<p>In Zeile 3 wird der Pfad zum Bilderordner, aus welchem dann sp\u00e4ter die Kategoriebilder abgeholt werden, an die Variable $path \u00fcbergeben.<\/p>\n<p>In Zeile 4 wird dann mit echo die Ausgabe als Bildlink Quelltext generiert. Das Bild habe ich noch mit einer Klasse versehen, so dass man es via css ansprechen und bei Bedarf x-tra Formatierungen hinzuf\u00fcgen kann.<\/p>\n<p>Zeile 5 schlie\u00dft die { Klammer.<\/p>\n<p>In dem hier gezeigten Beispiel muss man nun nur noch die Bilder f\u00fcr die Kategorien erstellen und unter dem Namen &#8222;category+catergoryID&#8220; (z.B. category3.jpg) im Ordner images abspeichern.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Zur Zeit habe ich auf meinem localhost ein neues Template f\u00fcr WordPress in Bearbeitung.  Mein Leben besteht nicht nur aus css und Webdesign, es gibt auch noch viel anderes, was mich interessiert. Ab und an habe schreibe ich hier im Weblog auch mal etwas \u00fcber diese andere Seite,  f\u00fchle mich aber mit den  &#8230; <a title=\"WordPress Kategorien mit individuellen Bildern anzeigen\" class=\"read-more\" href=\"https:\/\/www.jukemedia.de\/blog\/2008\/07\/wordpress-kategorien-mit-individuellen-bildern-anzeigen\/\" aria-label=\"Mehr Informationen \u00fcber WordPress Kategorien mit individuellen Bildern anzeigen\">Weiterlesen<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,140],"tags":[14,16,177,188],"yst_prominent_words":[],"class_list":["post-3655","post","type-post","status-publish","format-standard","hentry","category-wordpress","category-webdesign-internetrecht","tag-webdesign-2","tag-wordpress-2","tag-tipps-und-tricks","tag-skripte"],"_links":{"self":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/3655","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/comments?post=3655"}],"version-history":[{"count":0,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/3655\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/media?parent=3655"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/categories?post=3655"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/tags?post=3655"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/yst_prominent_words?post=3655"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}