{"id":213,"date":"2012-01-17T12:10:52","date_gmt":"2012-01-17T12:10:52","guid":{"rendered":"http:\/\/milcke.org\/?p=213"},"modified":"2012-01-17T12:10:52","modified_gmt":"2012-01-17T12:10:52","slug":"wordpress-wechselnde-header-bilder","status":"publish","type":"post","link":"https:\/\/landmesser.me\/?p=213","title":{"rendered":"WordPress wechselnde Header-Bilder pro Hauptmen\u00fcpunkt"},"content":{"rendered":"<p>Auf der Seite der <a title=\"Innenstadtgemeinde Itzehoe\" href=\"http:\/\/kirche-itzehoe.de\/isg\/\" target=\"_blank\">Innenstadtgemeinde Itzehoe<\/a> habe ich ein wenig PHP und CSS eingef\u00fcgt, um daf\u00fcr zu sorgen, dass unterschiedliche Seiten unterschiedliche Bilder im Header anzeigen.<\/p>\n<p>Auf meiner Seite, auf der sich dieser Blog befindet, werden unterschiedliche Header mittels Artikelbildern erreicht. Das bedeutet aber, dass man f\u00fcr jede Seite, die ein anderes Bild als den Standard haben soll, ein eigenes Bild hoch laden muss. Auf der Innenstadtgemeinde-Seite soll aber z.B. f\u00fcr Gemeinde und alle Unterseiten von Gemeinde das selbe Bild erscheinen.<\/p>\n<p>Um dies zu erreichen habe ich folgenden PHP-Code in die <code>header.php<\/code> eingef\u00fcgt:<\/p>\n<pre class=\"prettyprint html\">&lt;p id=&#34;headerimage&#34; class=&#34;&lt;?php\n  $tmp = substr(get_permalink(), strlen(get_bloginfo(&#39;url&#39;))+1);\n  echo substr($tmp,0, strpos($tmp,&#39;&#47;&#39;));\n?&gt;&#34; &#47;&gt;<\/pre>\n<p>Zun\u00e4chst verwundert vielleicht die Verwendung eines Paragraphen als Element f\u00fcr das Hintergrundbild. Das h\u00e4ngt vom gew\u00e4hlten Theme ab. Typischerweise benutzt man hier ein <code>div<\/code>. Ein <code>img<\/code> hat den Nachteil, dass die Bild-URL im Attribut <code>src<\/code> angegeben wird, und nicht \u00fcber CSS ver\u00e4ndert werden kann.<\/p>\n<p>Dieser PHP-Code nimmt die aktuelle Seiten-URL, z.B. <code>http:\/\/www.kirche-itzehoe.de\/isg\/musik\/orgeln\/<\/code>, schneidet dort den Anfang <code>http:\/\/www.kirche-itzehoe.de\/isg\/<\/code> weg (das, was <code>get_bloginfo('url')<\/code> zur\u00fcckgibt) und wirft dann noch alles weg, was nach dem folgenden <code>\/<\/code> kommt. Somit bleibt bei dieser URL noch <code>musik<\/code> \u00fcbrig, und somit ergibt sich<\/p>\n<pre class=\"prettyprint html\">&lt;p id=&#34;headerimage&#34; class=&#34;musik&#34; &#47;&gt;<\/pre>\n<p>Nun kann man einfach mittels CSS unterschiedliche Bilder verwenden.<\/p>\n<pre class=\"prettyprint css\">#headerimage.kirchen {\n  background: url(&#39;images&#47;myheaders&#47;altar.jpg&#39;);\n}\n\n#headerimage.musik {\n  background: url(&#39;images&#47;myheaders&#47;orgel.jpg&#39;);\n}\n\n#headerimage.gemeinde {\n  background: url(&#39;images&#47;myheaders&#47;empore.jpg&#39;);\n}<\/pre>\n<p>Voraussetzung daf\u00fcr, dass das funktioniert ist eine lesbare Permalink-Struktur. Dazu w\u00e4hlt man unter <em>Einstellungen<\/em> \/ <em>Permalinks<\/em> den Artikelnamen aus.<\/p>\n<p>Die Bilder, die als Header verwendet werden sollen, habe ich per FTP in das Theme-Unterverzeichnis kopiert. Dadurch funktionieren die relativen Links in der CSS-Datei.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Auf der Seite der Innenstadtgemeinde Itzehoe habe ich ein wenig PHP und CSS eingef\u00fcgt, um daf\u00fcr zu sorgen, dass unterschiedliche Seiten unterschiedliche Bilder im Header anzeigen. Auf meiner Seite, auf der sich dieser Blog befindet, werden unterschiedliche Header mittels Artikelbildern &hellip; <a href=\"https:\/\/landmesser.me\/?p=213\">Weiterlesen <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[2],"tags":[],"class_list":["post-213","post","type-post","status-publish","format-standard","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/landmesser.me\/index.php?rest_route=\/wp\/v2\/posts\/213","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/landmesser.me\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/landmesser.me\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/landmesser.me\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/landmesser.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=213"}],"version-history":[{"count":0,"href":"https:\/\/landmesser.me\/index.php?rest_route=\/wp\/v2\/posts\/213\/revisions"}],"wp:attachment":[{"href":"https:\/\/landmesser.me\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=213"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/landmesser.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=213"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/landmesser.me\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=213"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}