Header Bilder wechseln

Das Blog Theme, welches ich aktuell anpasse, tauscht die Grafiken in der header.php wie folgt:

<?php
function header_graphic() {
    echo "/images/";
    $num=rand(0,1);
    echo "dream".$num.".jpg";
};
?>

Hier bei liegen die beiden Fotos in dem Ordner /images und heißen dream0.jpg oder dream1.jpg. Wenn du mehr Fotos als eines einbinden möchtest, sagen wir einfah mal fünf, sieht die Funktion wie folgt aus:

<?php
function header_graphic() {
    echo "/images/";
    $num=rand(0,1,2,3,4);
    echo "dream".$num.".jpg";
};
?>

Hier liegen dann die fünf Dateien im selben Ordner (/images im Theme) und heißen logischerweise dream0.jpg, dream1.jpg, dream2.jpg, dream3.jpg und dream4.jpg.

Ich denke, diese Funktion wird Dir bei deinem Problem weiter helfen. Ich hoffe, es ist ein Jahr später noch aktuell... ;)

Ich habe mit dieser Funktion allerdings auch ein kleines Problem:
Über den sich wechselnden Grafiken soll der Blogname und der Untertitel, den du generell bei WordPress im Backend einstellen kannst, erscheinen. Dies macht man bei WordPress für gewöhnlich mit dem folgenden Code, durch den eben der Blogname und der Untertitel in das Theme eingebunden werden:

<?php bloginfo('name'); ?>
<?php wp_title(); ?>

Nur leider weiß ich nicht, wie man die Grafiken als Hintergrund einstellt, so dass der Text eben über den beiden bzw. mehreren Grafiken liegt... :-?

angenommen, der headbereich hat die id="header", und die hintergrundgrafik hat dieselbe groesse wie der bereich; dann wuerde ich folgendes in der header.php gerade vorm head end tag einsetzen:
das gibt dem header die hintergrundgrafik (mit der random funktion fuer zwei hintergrundbilder).

<style type="text/css">
#header { background: transparent url(<?php bloginfo('stylesheet_directory'); ?>/images/dream<?php $num=rand(0,1);  echo $num; ?>.jpg) top center no-repeat; }
</style>
 
</head>

Dunkelangst: da du das selbst geloest hast, heute 11:52, kannst du diesen rest hier vergessen:

dann in der eigentlichen header div in der html - (das folgende ist vom default kopiert):

<div id="header">
  <h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
  <div class="description"><?php bloginfo('description'); ?></div>
 </div>

- mit css noch alles ausrichten - fertig.

PS: ich glaube, die rand(min,max) funktion nimmt nur zwei variable.

Auf jeden Fall möchte ich mich bei Dir ganz ganz herzlich bedanken! Ich fand das sehr nett von Dir, wie ausführlich und fachlich fundiert du hier geantwortet hast!

Ich werde mir deinen Tipp merken und dann berichten, wie ich ihn umgesetzt habe. Wie man unschwer erkennt habe ich nicht die große Erfahrung und brauche etwas mehr Zeit um so etwas umzusetzen. Probieren geht über studieren.

Die Lösung, die ich in dem anderen Thread gepostet habe, stammt übrigens nicht von mir. Ich habe sie von einem Bekannten per ICQ mitgeteilt bekommen. Ich habe wirklich nicht die große Erfahrung... ;)

Ich bin Dir also gerade auch für deinen letzten Tipp äußerst Dankbar - werde aber noch Zeit brauchen, diesen umzusetzen.

Ok, vielen Dank für deine Tipps!

Ich kann jetzt den Blogtitel in der style.css hin und her schieben und auch die restliche Optik des selbigen definieren. Ohne deinen Tipp hätte ich das so nicht geschafft.

Zitat

PS: ich glaube, die rand(min,max) funktion nimmt nur zwei variable.

Das hat bei mir so nicht geklappt. Ich bleibe daher bei meinen Zahlenwerten. Aber eigentlich schon schade, denn so wie du es geschrieben hast, ist das irgendwie schon logischer...

Vielen lieben Dank für deine Hilfe!

Im Bezug auf den Code den ich eingebaut habe, habe ich ein Validator Problem.

Bei dem folgenden Code (Beachte </h1> tag Positionierung) meckert der Validator und der Blog sieht vernünftig aus:

<div id="wrapper">
<h1 id="header" onclick="location.href='<?php bloginfo('url'); ?>';" style="cursor: pointer;">
  <!--blog name & description -->
<div id="blogname">
  <h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a><br />
<?php bloginfo('description'); ?></h1>
</div>
</h1>
</div>

Bei dem folgenden Code (Beachte </h1> tag Positionierung) meckert der Validator nicht - jedoch sieht der Blog fürchterlich aus, da alles verzogen ist:

<div id="wrapper">
<h1 id="header" onclick="location.href='<?php bloginfo('url'); ?>';" style="cursor: pointer;"></h1>
  <!--blog name & description -->
<div id="blogname">
 <a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a><br />
<?php bloginfo('description'); ?>
</div>
</div>

In der style.css ist die Optik für wrapper wie folgt fest gelegt:

#wrapper {
    background-color: #FFFFFF;
    border-left: 5px solid #FFFFFF;
    border-right: 5px solid #FFFFFF;
    margin: 0px auto 0px auto;
    padding: 0px;
    text-align: center;
    width: 726px;
}

In der style.css ist die Optik für blogname wie folgt fest gelegt:

#blogname {
    background-repeat: no-repeat;
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    height: 330px;
    margin: 0px;
    padding: 15px 0px 0px 15px;
    text-align: left;
    vertical-align: bottom;
}

In der style.css ist die Optik für header wie folgt fest gelegt:

#header {
    background-repeat: no-repeat;
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    height: 330px;
    margin: 0px;
    padding: 1px 0px 0px 15px;
    text-align: left;
    vertical-align: bottom;
}

Hier ist jedenfalls noch die Fehlermeldung vom Validator:

Zitat

1. Line 186, Column 15: document type does not allow element "div" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag <div id="name">
   The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element. One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

Ich glaube, ich seh den Wald vor lauter Bäumen nicht. Der Teufel liegt im Detail.

Hat jemand eine Idee?

Exakt das selbe Problem habe ich auch mit deinem Code, alchymyth:

[COLOR=#000000]<div id="header">
  <h1><a href="[COLOR=#0000cc]<?php [/COLOR][COLOR=#006600]echo [/COLOR][COLOR=#0000cc]get_option[/COLOR][COLOR=#006600]([/COLOR][COLOR=#cc0000]'home'[/COLOR][COLOR=#006600]); [/COLOR][COLOR=#0000cc]?>[/COLOR]/">[COLOR=#0000cc]<?php bloginfo[/COLOR][COLOR=#006600]([/COLOR][COLOR=#cc0000]'name'[/COLOR][COLOR=#006600]); [/COLOR][COLOR=#0000cc]?>[/COLOR]</a></h1>
  <div class="description">[COLOR=#0000cc]<?php bloginfo[/COLOR][COLOR=#006600]([/COLOR][COLOR=#cc0000]'description'[/COLOR][COLOR=#006600]); [/COLOR][COLOR=#0000cc]?>[/COLOR]</div>
 </div>[/COLOR]

im angemeckerten fall hast du ein 'div' innerhalb eines 'h1':

deine verschachtelung ist:

div wrapper
h1 (1)
div blogname
h1 (2)
/h1 (2)
/div blogname
/h1 (1)
/div wrapper

das mag der validator nicht.



ich hab mal im firefox mit dem developer addon rumgespielt, und bin darauf gekommen (ich weiss, das ist wieder der gleiche vorschlag wie vorher, nur mit deinem klickbaren gesamtheader - und ist ziemlich aehnlich wie im default theme):

<div id="header" onclick="location.href='<?php bloginfo('url'); ?>';" style="cursor: pointer;"><h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
  <!--blog name & description -->
<p><?php bloginfo('description'); ?></p>
</div>

braucht vielleicht nur minimale anpassung der positionierung mit css (margin und padding)

#header h1 {  }
#header p {   }

ich hab den schnipsel in ein anderes dokument gepasted, und validiert strict.

Hey, danke für den Tipp! Der hat mich echt weiter gebracht. Ich hab ihn jetzt so nicht benutzt, aber ich hab verstanden worauf du hinaus möchtest... Die style.css konnte ich unangetastet lassen...

Der entsprechende Code sieht jetzt so aus und der Validator liebt ihn:

<div id="header">
    <div id="blogname">
      <a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>
<br/><a href="<?php bloginfo('url'); ?>"><?php bloginfo('description'); ?></a>
    </div><!-- div#blogname -->
  </div><!-- div#header -->

Vielen Dank für deine Hilfe!

Moin,

also dieser Thread ist zwar schon ein Weilchen her, aber ich stand vor einer ähnlichen Herausforderung und muss gratulierend sagen, dass das eine total simple, leichte und schnelle Methode ist, um ein Headerbild auszutauschen. Einfach super.
Und VIEL besser, als alle Plugins, die ich mühsam ausprobiert habe. Danke alchymyth.

Viele Grüße!