{"id":1014,"date":"2018-04-01T14:45:01","date_gmt":"2018-04-01T12:45:01","guid":{"rendered":"http:\/\/evileu.de\/zum-schwarzen-pinguin\/?p=1014"},"modified":"2018-04-01T14:45:01","modified_gmt":"2018-04-01T12:45:01","slug":"sag-niemals-nie-ein-einfaches-wordpress-theme-erstellen","status":"publish","type":"post","link":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/2018\/04\/01\/sag-niemals-nie-ein-einfaches-wordpress-theme-erstellen\/","title":{"rendered":"Sag niemals nie: ein einfaches WordPress-Theme erstellen"},"content":{"rendered":"

Ich hab ja am Anfang dieses Blogs steif und fest behauptet, ich werd hier nie nix zur Erstellung eines eigenen Themes erz\u00e4hlen, weil es a) Zillionen von Themes f\u00fcr jeden Zweck und Geschmack schon gibt und b) Hunderte von hervorragenden Tutorials zum Thema bereits existieren. Aber wenn ich schon die Theme-Erstellung f\u00fcr Drupal und Joomla behandelt habe, darf WordPress eigentlich nicht fehlen, schon aus Gr\u00fcnden der Vergleichbarkeit.<\/p>\n

Das tolle Tutorial von Christian Strang<\/h2>\n

Mit eins der besten Tutorials zur Erstellung eines eigenen WordPress-Themes ist das von Christian Strang auf Lernen hoch 2<\/a>, und statt bei ihm abzuschreiben kann ich nur jedem ans Herz legen, es durchzuarbeiten und selber zu sehen und zu staunen, wie ausf\u00fchrlich er alles erkl\u00e4rt und wie hervorragend nachvollziehbar die ganze Sache ist. Ich gehe mal davon aus, dass jeder ein eigenes Theme nach Christians Anleitung hinkriegt, und setze nur noch ein paar Kleinigkeiten obendrauf.<\/p>\n

Die Vorlage: dreispaltig (wenns geht) mit grossem Headerbild<\/h2>\n

Das Theme-Layout soll ganz schlicht werden, mal sehen wie weit wir damit kommen:<\/p>\n

\"scribble\"

scribble<\/p><\/div>\n

Wenn man sich durch Christians Tutorial durchgearbeitet hat, sollte man jetzt ungef\u00e4hr dieses Layout erreicht haben:<\/p>\n

\"tutorial_layout\"

tutorial_layout<\/p><\/div>\n

Hier wird nur eine (die rechte) Sidebar genutzt, und die ist auch nach Christians Vorlage Widget-f\u00e4hig, das ist die WordPress-Vorgabe und am einfachsten zu realisieren.<\/p>\n

Eine zweite Sidebar<\/h2>\n

Ich h\u00e4tte aber gern auch noch eine linke Sidebar, in die sollen meine neuesten Rezepte rein. Das geht nicht weiter kompliziert und auch ohne Widget. Ich f\u00fcge in der index.php vor die div f\u00fcr den content noch eine div sidebar-left ein und nutze die WordPress-Funktion wp_get_recent_posts(), um mir die neuesten Beitr\u00e4ge ausgeben zu lassen. Das machen wir gleich mit Link zum Beitrag, daf\u00fcr gibts den get_permalink():<\/p>\n

\u00a0<div id = \"sidebar-left\">\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0<h2>Die neuesten Rezepte<7h2>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<ul>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<?php $liste = wp_get_recent_posts();\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0foreach($liste as $item){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0echo '<li><a href=\"' . get_permalink($item[\"ID\"]) . '\">' . $item[\"post_title\"].'<\/a> <\/li>';\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?>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<\/ul> \r\n\u00a0\r\n\u00a0 <\/div> <!-- sidebar-left--><\/pre>\n
In der style.css habe ich die divs f\u00fcr sidebar-left, main und sidebar-right nebeneinander positioniert:<\/p>\n
#main\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 {width: 600px; padding: 20px; float: left;}\r\n\r\n#sidebar-left\u00a0\u00a0 {width: 200px; padding: 10px;float: left;}\r\n\r\n#sidebar-right\u00a0\u00a0 {width: 200px; padding: 10px;float: left;}<\/pre>\n
Die Ausgabe ist schon ganz passabel:<\/p>\n
\"die_neuesten_rezepte\"
die_neuesten_rezepte<\/p><\/div>\n
Ein Header-Bild w\u00e4r jetzt noch sch\u00f6n<\/h2>\n
Daf\u00fcr gibt es die sehr komfortable Funktionalit\u00e4t<\/p>\n
add_theme_support( 'custom-header' );<\/pre>\n
Diese Zeile kommt in die functions.php<\/p>\n
Dann gibt man ihr noch ein paar Argumente mit:<\/p>\n
$args = array(\r\n 'width'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 => 1260,\r\n 'height'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 => 350,\r\n 'default-image' => get_template_directory_uri() . '\/images\/header.jpg',\r\n 'uploads'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 => true,\r\n );\r\n add_theme_support( 'custom-header', $args );<\/pre>\n
Die width und heigth Angaben tauchen dann im Customizer als empfohlene Gr\u00f6\u00dfe auf, das kann sich jeder selbst einstellen wie es zu seinem Layout pa\u00dft. In der header.php wird jetzt folgender Code an oberster Stelle nach der \u00f6ffnenden div f\u00fcr den wrapper folgender Code eingesetzt:<\/p>\n
<img src=\"<?php header_image(); ?>\" \r\n\u00a0\u00a0 \u00a0height=\"<?php echo get_custom_header()->height; ?>\" width=\"<?php echo get_custom_header()->width; ?>\" alt=\"\" \/><\/pre>\n
Jetzt noch das Header-Bild hochladen und ggf. zuschneiden, dann sollte es auch schon sichtbar sein:<\/p>\n
\"headerbild\"
headerbild<\/p><\/div>\n
Ich hab mir gleich noch das Blau des Himmels rausgemessen und in der style.css als background-color f\u00fcr die div header gesetzt, damit das sch\u00f6n zusammenpasst.<\/p>\n
Jetzt fehlen mir eigentlich nur noch ein paar Schriftformatierungen, die mach ich in einem Rutsch:<\/p>\n
#navlist li\r\n{\r\nfont-family:\u00a0\u00a0\u00a0 Times;\r\nfont-variant:small-caps;\r\nfont-size:\u00a0\u00a0\u00a0\u00a0\u00a0 25px;\r\ndisplay: inline;\r\nlist-style-type: none;\r\npadding-right: 20px;\r\n\r\n}\r\n\r\nbody {\r\n\u00a0 margin: 0;\r\n\u00a0 padding: 0;\r\n\u00a0 font-family: Helvetica;\r\n\u00a0 font-size: 14px;\u00a0\u00a0 \u00a0\r\n\u00a0 font-weight: normal;\r\n\u00a0 line-height: 24px;\r\n\u00a0 color: #43473b;\r\n}\r\n\r\n\r\nh1, h2, h3, h4, h5, h6 {\r\n\u00a0 font-family: Times;\r\n\u00a0 font-weight: normal;\r\n\u00a0 color: #43473b;\r\n}\r\n\r\nh1 { font-size: 45px; font-variant:small-caps;}\r\nh2 { font-size: 30px; font-variant:small-caps;}\r\nh3 { font-size: 22px; font-variant:small-caps;}\r\n\r\na { color: #43473b; \r\n\u00a0\u00a0 \u00a0text-decoration: none;\r\n}\r\na:hover { color: #fc737b; \r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}<\/pre>\n
Fertig ist mein \u00dcbungsstheme!<\/p>\n
\"finish\"
finish<\/p><\/div>\n
Jetzt w\u00e4rs nat\u00fcrlich schick, wenn die linke sidebar auch Widgetf\u00e4hig w\u00e4re, aber man kanns auch \u00fcbertreiben… ich geh mal gucken, vielleicht finde ich da noch was dazu.<\/p>\n
 <\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
Ich hab ja am Anfang dieses Blogs steif und fest behauptet, ich werd hier nie nix zur Erstellung eines eigenen Themes erz\u00e4hlen, weil es a) Zillionen von Themes f\u00fcr jeden Zweck und Geschmack schon gibt und b) Hunderte von hervorragenden Tutorials zum Thema bereits existieren. Aber wenn ich schon die Theme-Erstellung f\u00fcr Drupal und Joomla […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1,22,2],"tags":[],"_links":{"self":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/1014"}],"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=1014"}],"version-history":[{"count":10,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/1014\/revisions"}],"predecessor-version":[{"id":1046,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/1014\/revisions\/1046"}],"wp:attachment":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/media?parent=1014"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/categories?post=1014"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/tags?post=1014"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}