{"id":3635,"date":"2008-04-30T10:11:10","date_gmt":"2008-04-30T08:11:10","guid":{"rendered":"http:\/\/www.frische-zitronen.de\/2008\/04\/30\/wordpress-widgets-ein-theme-widgetfahig-machen-und-widgets-erstellen\/"},"modified":"2008-04-30T10:11:10","modified_gmt":"2008-04-30T08:11:10","slug":"wordpress-widgets-ein-theme-widgetfahig-machen-und-widgets-erstellen","status":"publish","type":"post","link":"https:\/\/www.jukemedia.de\/blog\/2008\/04\/wordpress-widgets-ein-theme-widgetfahig-machen-und-widgets-erstellen\/","title":{"rendered":"WordPress Widgets – ein Theme widgetf\u00e4hig machen und Widgets erstellen"},"content":{"rendered":"

Widgets gibt es in WordPress schon l\u00e4nger. Ich muss jedoch gestehen, dass sie mir nicht auf Anhieb sympathisch waren. Der Mensch ist halt doch ein Gewohnheitstier und ich bin keine Ausnahme. Der Grund, dass ich Widgets nicht mochte war der, dass ich immer nur die Einfachst-Varianten mit einer Sidebar gesehen habe, maximal zwei. Die Sidebar von diesem Weblog hier hat jedoch mehrere Bereiche. Es gibt Abschnitte die \u00fcber die ganze Breite gehen und wieder andere, die zweigeteilt sind. Au\u00dferdem sind die \u00dcberschriften bestimmter Funktionalit\u00e4ten mit Absicht auf gleicher H\u00f6he angeordnet – als Ordnungs- und Strukturmensch kann ich Durcheinander nun mal nicht leiden. Auf Anhieb habe ich also mit dem Einsatz von Widgets keine L\u00f6sung gesehen, wie ich ohne den manuellen Einsatz von meinen geliebten Template-Tags das gleiche Erscheinungsbild erzeugen kann. Doch manchmal braucht es einfach einen zweiten und dritten Anlauf – dann klappt auch das.<\/p>\n

\u00dcber Widgets hat Gabi vom Blogh\u00e4uschen einen ausf\u00fchrlichen Beitrag mit Erl\u00e4uterungen geschrieben . Als weitere Quelle ist die Original-Seite von Automattic zu nennen. Die ist allerdings f\u00fcr Durchschnittstalente in Englisch nicht ganz so einfach zu verstehen. So z.B. wird dort immer von „Args“ gesprochen – jo, das sind die Argumente in den PHP-Klammern. Aber das nur nebenbei.<\/p>\n

Ein bisschen was zum Einlesen was Widgets sind und was sie tun gibt es hier zu lesen:<\/p>\n

Bloganbieter : WordPress Widgets richtig nutzen <\/a><\/p>\n

Und hier eine Anleitung auf Deutsch:<\/p>\n

Gabis WordPress Templates – Widgets keine b\u00f6sen \u00dcberraschungen mehr<\/a><\/p>\n

Hier die Doku in Englisch:<\/p>\n

Automattic : Widgetizing themes
\n<\/a>Automattic : Widgetizing Plugins<\/a><\/p>\n

Widgets zum Runterladen und Installieren:<\/p>\n

http:\/\/widgets.wordpress.com\/ <\/a><\/p>\n

Wenn dein WordPress widgetf\u00e4hig ist, findest man im Admin unter Themes (Design) einen Unterpunkt mit der Aufschrift „Widgets“. Widgets zeigen z.B. die Archive, die statischen Seiten, die Blogroll oder den WordPress Kalender in der Sidebar an. In einem nicht widgetf\u00e4higen Template muss man diese Funktionen mit Code-Schnipseln h\u00e4ndisch einf\u00fcgen. Das ist an sich auch nicht schwierig, ein paar PHP und (x)html Kenntnisse sind dabei jedoch Voraussetzung.<\/p>\n

Ist ein Theme (Design) jedoch widgetf\u00e4hig, dann sind diese Code-Schnipsel in handliche Einheiten verpackt, die man mit einfach per Klick an die gew\u00fcnschte Stelle in der Sidebar positionieren kann. Das hat f\u00fcr Laien den Vorteil, dass sie selber bestimmen k\u00f6nnen, an welcher Stelle in der Sidebar bestimmte, anklickbare Optionspunkte dargestellt werden sollen. Im Installationspaket von WordPress sind schon eine ganze Reihe von Widgets vorhanden, sollte das nicht reichen, kann man sich erstens selber weitere Widgets selber kreeieren<\/a> oder im Netz danach Ausschau halten.<\/p>\n

Wie oben schon erw\u00e4hnt gibt es schon sehr gute Beschreibungen wie man ein Design widgetf\u00e4hig macht. F\u00fcr ein Design mit einer oder zwei Sidebars m\u00f6chte ich das deshalb nicht wiederholen und statt dessen erg\u00e4nzend einen Weg aufzeigen, wie man z.B. eine Sidebar wie z.B. hier bei den frischen-zitronen mit 4 Bereichen widgetf\u00e4hig machen kann.<\/p>\n

Im Grunde ist die Seitenspalte in diesem Design nicht nur eine (1) Spalte – es sind 4.<\/p>\n

\"widgets.jpg\"<\/p>\n

F\u00fcr jeden dieser Bereiche legt man nun eine eigene Datei an und speichert sie im jeweilgen themes Ordner:<\/p>\n

\nsidebar-oben.php\nsidebar-links.php\nsidebar-rechts.php\nsidebar-unten.php\n<\/pre>\n
Nun die Datei sidebar.php \u00f6ffnen und hier die Pfade zu den 4 Dateien setzen:<\/p>\n
\n
\n\n\n\n\n<\/div>\n<\/pre>\n
Nun noch in den einzelnen Dateien der sidebars folgende Eintr\u00e4ge machen:<\/p>\n
sidebar-oben (1)<\/h4>\n
\n
\n\n\n<\/div>\n<\/pre>\n
sidebar-links (2)<\/h4>\n
\n
\n\n\n<\/div>\n<\/pre>\n
sidebar-rechts (3)<\/h4>\n
\n
\n\n\n<\/div>\n<\/pre>\n
sidebar-unten (4)<\/h4>\n
\n
\n\n\n<\/div>\n<\/pre>\n
In diesem Fall habe ich die einzelnen sidebar-Abschnitte in div-container gepackt, semantischer w\u00e4re es jedoch, wenn man hier eine verschachtelte Liste verwenden w\u00fcrde. Auch habe ich an dieser Stelle darauf verzichtet anzugeben, was passiert, wenn die Funktion nicht vorhanden ist. Es hei\u00dft ja: If functions exists, dann nimm die dynamische sidebar, wenn nicht dann sollte in den einzelnen sidbar Dateien noch eingetragen werden, welcher code dann genommen werden soll. Hier kann man dann in die if-Abfage den code einh\u00e4ngen, den man verwenden w\u00fcrde, wenn das Design nicht widgetf\u00e4hig w\u00e4re. Wie man das macht kann man in den eingans referenzierten Links nachlesen.<\/p>\n
functions.php<\/h4>\n
F\u00fcr jedes widgetf\u00e4hige Design muss im Theme-Ordner eine Datei mit dem Namen functions.php <\/strong>angelegt werden. Je nachdem ob es sich um eine einspaltige, zwei- oder mehrspaltige, widgetf\u00e4hige sidebar handelt, ist der Inhalt dieser Datei unterschiedlich. F\u00fcr die 4 spaltige sidebar kann folgender Eintrag gemacht werden:<\/p>\n
\n '
',\n'after_widget' => '<\/div>',\n'before_title' => '
',\n'after_title' => '<\/h3>',\n));\n?>\n<\/pre>\n
Bei dieser L\u00f6sung wird die \u00dcberschrift eines Anzeigeblocks mit h3 ausgezeichnet. Darunter ist jeder anklickbare Optionspunkt in eine Liste eingebettet. Diese Art der Sidebar ist in vielen Designs zu finden. Daneben gibt es aber auch Themes, bei der die Sidebar als eine durchg\u00e4ngig verschachtelte Liste angelegt ist, das ist die etwas „feinere“ Variante.<\/p>\n
Sidebar einrichten<\/h4>\n
Unsere Sidebar ist nun aber noch leer, weil die vorhandenen widgets noch keinem Bereich zugeordnet wurden. In WordPress 2.5. klickt man sich nun unter Design -> Widgets ein und \u00f6ffnet die Select-Blox rechts. Hier sind nun alle 4 sidebars zu sehen. M\u00f6chte ich nun in der sidebar-oben beispielsweise die letzten postings (recent posts) anzeigen lassen, klicke ich auf sidebar1 und anschlie\u00dfend auf „Anzeigen“. Mir Klick auf das Pluszeichen l\u00e4sst sich nun das Widget „recent posts“ aus der Spalte links in die sidebar1 transportieren. Abspeichern nicht vergessen, sonst tut sich da nichts ;-) . Analog hierzu lassen sich alle anderen Sidebars mit Inhalten f\u00fcllen. Wie diese in der sidebar dargestellt werden, ist dann Sache des .css.<\/p>\n","protected":false},"excerpt":{"rendered":"
Widgets gibt es in WordPress schon l\u00e4nger. Ich muss jedoch gestehen, dass sie mir nicht auf Anhieb sympathisch waren. Der Mensch ist halt doch ein Gewohnheitstier und ich bin keine Ausnahme. Der Grund, dass ich Widgets nicht mochte war der, dass ich immer nur die Einfachst-Varianten mit einer Sidebar gesehen habe, maximal zwei. Die Sidebar  … 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],"tags":[16,165,259],"yst_prominent_words":[],"class_list":["post-3635","post","type-post","status-publish","format-standard","hentry","category-wordpress","tag-wordpress-2","tag-webedesign","tag-widgets"],"_links":{"self":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/3635","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=3635"}],"version-history":[{"count":0,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/3635\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/media?parent=3635"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/categories?post=3635"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/tags?post=3635"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/yst_prominent_words?post=3635"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}