{"id":4459,"date":"2012-09-06T22:54:53","date_gmt":"2012-09-06T20:54:53","guid":{"rendered":"http:\/\/notizblog.org\/?p=4459"},"modified":"2021-04-19T22:17:08","modified_gmt":"2021-04-19T20:17:08","slug":"ive-made-a-wordpress-theme-kind-of","status":"publish","type":"post","link":"https:\/\/notiz.blog\/2012\/09\/06\/ive-made-a-wordpress-theme-kind-of\/","title":{"rendered":"I\u2019ve made a WordPress Theme\u2026 kind of\u2026"},"content":{"rendered":"\n<p>Eigentlich wollte ich ja nur einen <a href=\"https:\/\/web.archive.org\/web\/20130514011147\/http:\/\/wordpress.org:80\/extend\/themes\/toolbox\">Toolbox<\/a> Fork erstellen und das Theme um Microdata\/Schema.org erweitern und dann hat es doch so viel Spa\u00df gemacht, dass ein eigenes Theme daraus wurde&#8230; Ich pr\u00e4sentiere euch <a href=\"https:\/\/github.com\/pfefferle\/SemPress\">SemPress<\/a>, das hoch semantische HTML5 Theme mit ner Prise Responsiveness und <abbr title=\"Search Engine Optimization\">SEO<\/abbr> \ud83d\ude42<\/p>\n\n\n\n<p>Das Theme versch\u00f6nert \u00fcbrigens das <a href=\"https:\/\/notiz.blog\/\">notizBlog<\/a> und ist aus folgenden Gr\u00fcnden gro\u00dfartig:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">POSH &#8211; Plain Old Semantic HTML5<\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignright\"><img decoding=\"async\" src=\"https:\/\/notiz.blog\/wp-content\/uploads\/2011\/07\/HTML5_Logo_256.png\" alt=\"HTML5 Logo\"\/><\/figure><\/div>\n\n\n\n<p>SemPress basiert, wie schon erw\u00e4hnt, auf Toolbox und die HTML5 Struktur wurde auch weitestgehend beibehalten. Ich habe lediglich einige Tags in (meiner Meinung nach) semantisch passendere getauscht. Im Detail:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong><a href=\"https:\/\/web.archive.org\/web\/20200910003307\/http:\/\/diveintohtml5.info\/semantics.html#new-elements\">Semantische Tags<\/a><\/strong> &#8211; Ich habe einfach mal geschaut welche Tags Toolbox noch nicht unterst\u00fctzt und sie dann, hoffentlich richtig eingebaut :).<\/li><li><strong><a href=\"https:\/\/web.archive.org\/web\/20200724153910\/http:\/\/diveintohtml5.info\/forms.html\">HTML5 Input-Types<\/a><\/strong> &#8211; SemPress unterst\u00fctzt einige der neuen Input-Types wie z.B. &#8222;search&#8220;, &#8222;email&#8220; und &#8222;url&#8220;. Mehr dazu in einem \u00e4lteren <a href=\"https:\/\/notiz.blog\/2011\/07\/11\/html5-input-types-form-validierung-und-wordpress\/\">Artikel<\/a>.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Websemantics<\/h2>\n\n\n\n<p>Eigentlich hab ich das ganze Projekt (wie schon erw\u00e4hnt) ja nur gestartet, damit ich mal wieder was produktives mit Microformats machen und Schema.org lernen kann. Hier also der <em>Semantic Overload<\/em>:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Microformats<\/strong> &#8211; Toolbox selbst unterst\u00fctz Microformats ja schon von Haus aus und ich musste nur kleine hAtom fixes und die richtigen <em><a href=\"http:\/\/microformats.org\/wiki\/rel-profile\">Profile Header<\/a><\/em> setzen.<\/li><li><strong>Microformats v2<\/strong> &#8211; Ich bin zwar <a href=\"https:\/\/notiz.blog\/2012\/07\/03\/microformats-the-next-generation\/\">kein gro\u00dfer Fan<\/a> von <a href=\"http:\/\/microformats.org\/wiki\/microformats_2\">Microformats 2<\/a>, aber ich wollte testen wie leicht sich das Theme um neues HTML-Classes erweitern l\u00e4sst und wie viel Arbeit es bedeutet. SemPress unterst\u00fctzt hCard 2 und hAtom 2.<\/li><li><strong>Microdata\/Schema.org<\/strong> &#8211; \u00c4hnlich wie bei Microformats v2 wollte ich testen wie schwer es ist, <a href=\"https:\/\/schema.org\/\">Schema.org<\/a> einzubauen. Das Theme unterst\u00fctzt <code>http:\/\/schema.org\/Blog<\/code>, <code>http:\/\/schema.org\/BlogPosting<\/code> and <code>http:\/\/schema.org\/Person<\/code>.<\/li><\/ul>\n\n\n\n<p>Was ich noch gerne einbauen will ist hMedia f\u00fcr alle m\u00f6glichen Medieninhalte wie z.B. auch WordPress &#8222;Images&#8220; und &#8222;Galleries&#8220; und nat\u00fcrlich auch das Schema.org Pendant.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">WordPress Features<\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignright\"><img decoding=\"async\" src=\"https:\/\/notiz.blog\/wp-content\/uploads\/2007\/03\/wordpress-logo.png\" alt=\"\"\/><\/figure><\/div>\n\n\n\n<p>Neben dem ganzen semantik Ged\u00f6ns, hab ich nat\u00fcrlich auch ne Menge WordPress-Features eingebaut.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Post Thumbnails<\/strong> &#8211; SemPress unterst\u00fctzt diverse <em><a href=\"https:\/\/codex.wordpress.org\/Post_Thumbnails\">Post-Thumbnail<\/a><\/em> Gr\u00f6\u00dfen (maximal 600px) und versucht sie bestm\u00f6glich darzustellen. Alle Bilder kleiner als 480px werden z.B. mit <em>float right<\/em> in den Text integriert.<\/li><li><strong>Post Types<\/strong> &#8211; Im Gegensatz zu Toolbox unterst\u00fctzt SemPress folgende <em><a href=\"https:\/\/codex.wordpress.org\/Post_Types\">Post-Types<\/a><\/em>: &#8222;aside, status, gallery, video, audio, link, image&#8220; und fast alle haben auch ein individuelles Layout spendiert bekommen.<\/li><li>&#8230;au\u00dferdem: <a href=\"http:\/\/codex.wordpress.org\/Translating_WordPress\">Localization<\/a>, Sidebar-Widgets und die WordPress&#8216; Navigation Menu.<\/li><\/ul>\n\n\n\n<p>Mal schauen ob ich noch ein <a href=\"http:\/\/en.support.wordpress.com\/themes\/custom-header-image\/\">Custom-Header-Image<\/a> mit rein nehmen werde&#8230;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS und Design<\/h2>\n\n\n\n<p>Zuerst sollte SemPress gar kein Design bekommen, aber man muss ja auch bei CSS und Fonts auf dem Laufenden bleiben! Ich mach das ja schlie\u00dflich nicht zum Spa\u00df sondern zur Fortbildung :). Da ich aber kein wirklich gro\u00dfer Designer bin, hab ich mir ne Menge Ideen und CSS bei folgenden gro\u00dfartigen Projekten ausgeliehen:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Das Basis-CSS hab&#8216; ich von <a href=\"https:\/\/web.archive.org\/web\/20130514011147\/http:\/\/wordpress.org:80\/extend\/themes\/toolbox\">Toolbox<\/a> \u00fcbernommen.<\/li><li>Die Tabellen, Buttons, Input-Felder, Code-Boxen habe ich mir bei <em><a href=\"https:\/\/getbootstrap.com\/2.3.2\/\">Twitters Bootstrap<\/a><\/em> gemopst.<\/li><li>Die Icons, die vor einigen Artikeln erscheinen (z.B. die vom Typ Video oder Audio) sind von von <a href=\"https:\/\/fontawesome.com\/\">Font Awesome<\/a>.<\/li><li>Danke auch an <a href=\"http:\/\/html5boilerplate.com\/\">HTML5 Boilerplate<\/a> f\u00fcr einige Ideen!<\/li><\/ul>\n\n\n\n<p>Ein paar weitere Kleinigkeiten (auf die ich auch bissle Stolz bin):<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Man kann den bei dem &lt;code \/&gt;-Tag die Programmiersprache mir <code>data-programming-language=\"PHP\"<\/code> setzen und es wird wie folgend angezeigt: <code>&lt;?php echo \"Hallo Welt\"; ?&gt;<\/code>     <\/li><li>Das Theme kommt komplett ohne Bilder aus.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Responsive Design<\/h2>\n\n\n\n<p>Das Theme sollte eigentlich und hoffentlich auf jedem Ger\u00e4t gut aussehen und unterst\u00fctzt drei++ Breiten:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Volle Breite + Sidebar rechts<\/li><li>Volle Breite + Zweispaltige Sidebar am Ende der Seite<\/li><li>Variable Breite (die, f\u00fcr das Ger\u00e4t beste Breite mit einem) + Einspaltige Sidebar am Ende der Seite.<\/li><\/ul>\n\n\n\n<p>Au\u00dferdem passt sich das Men\u00fc automatisch an die Gr\u00f6\u00dfen an und das ganz ohne JavaScript! &#8230;beim Drop-Down Men\u00fc gibt es zwar noch keine M\u00f6glichkeit das Men\u00fc wieder zu schlie\u00dfen, aber wer will das schon \ud83d\ude09<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Was jetzt noch?<\/h2>\n\n\n\n<p>Da mir das themen ne Menge Spa\u00df gemacht hat werde ich wohl auch weiterhin flei\u00dfig an SemPress weiter basteln und es noch semantischer und WordPressiger machen. Falls ihr irgendwelche Fehler findet oder Dinge besser k\u00f6nnt wie ich&#8230; bitte helft mir und <a href=\"https:\/\/github.com\/pfefferle\/SemPress\">forkt SemPress<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Eigentlich wollte ich ja nur einen Toolbox Fork erstellen und das Theme um Microdata\/Schema.org erweitern und dann hat es doch so viel Spa\u00df gemacht, dass ein eigenes Theme daraus wurde&#8230; Ich pr\u00e4sentiere euch SemPress, das hoch semantische HTML5 Theme mit ner Prise Responsiveness und SEO \ud83d\ude42 Das Theme versch\u00f6nert \u00fcbrigens das notizBlog und ist aus [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"webmentions_disabled_pings":false,"webmentions_disabled":false,"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":4,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":""},"categories":[946],"tags":[5171,700,164,956,973,58,874,57],"class_list":{"0":"post-4459","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-wordpress","7":"tag-fediblog","8":"tag-html5","9":"tag-microformats","10":"tag-schema-org","11":"tag-sempress","12":"tag-theme","13":"tag-websemantics","14":"tag-wordpress","15":"h-entry","16":"hentry"},"_links":{"self":[{"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/posts\/4459","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/comments?post=4459"}],"version-history":[{"count":5,"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/posts\/4459\/revisions"}],"predecessor-version":[{"id":21358,"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/posts\/4459\/revisions\/21358"}],"wp:attachment":[{"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/media?parent=4459"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/categories?post=4459"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/tags?post=4459"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}