Wechselbilder im Header

bienchen

Hallo Zusammen,

ich beschäftige mich seit Kurzem mit WordPress und kenne mich nur sehr wenig aus. Jetzt habe ich mit dem Programm Artisteer 2.5 ein Template erstellt in dem ich wechselnde Headerbilder einbinden möchte... leider weiß ich nicht, wie es funktioniert. Es gibt den php-Befehl:

PHP

header<?php echo rand(1,14)?>.jpg

Aber in welcher WP-Datei muß ich diesen Codeschnipsel eintragen? Vielleicht kann mir jemand einen Tipp geben.

LG Bienchen

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

bego

In der header.php

bienchen

... leider verstehe ich es immer noch nicht :-?

Ich gebe mal hier den kompletten Code meiner header.php ein:

PHP

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type') ?>; charset=<?php bloginfo('charset') ?>" />
<title><?php wp_title( '|', true, 'right' ); bloginfo( 'name' ); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url') ?>" type="text/css" media="screen" />
<!--[if IE 6]><link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.ie6.css" type="text/css" media="screen" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.ie7.css" type="text/css" media="screen" /><![endif]-->
<?php if(WP_VERSION < 3.0): ?>
<link rel="alternate" type="application/rss+xml" title="<?php printf(__('%s RSS Feed', THEME_NS), get_bloginfo('name')); ?>" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="<?php printf(__('%s Atom Feed', THEME_NS), get_bloginfo('name')); ?>" href="<?php bloginfo('atom_url'); ?>" />
<?php endif; ?>
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php if (is_file(TEMPLATEPATH .'/favicon.ico')):?>
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" />
<?php endif; ?>
<?php wp_head(); ?>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/script.js"></script>
</head>
<body <?php if(function_exists('body_class')) body_class(); ?>>
<?php 
ob_start();

Alles anzeigen

An welcher Stelle muß ich den Codeschnipsel einbauen. Und wo muß ich die Dateinamen der Bilder einfügen, damit die richtigen Bilder gezeigt werden.

Leider fehlen mir bei WP total die Zusammenhänge... da muß ich noch viel lernen!

LG
Heidi

bego

Zitat von bienchen
... leider verstehe ich es immer noch nicht :-?

Ich gebe mal hier den kompletten Code meiner header.php ein:
PHP
(...)
</head>
<body <?php if(function_exists('body_class')) body_class(); ?>>
<?php 
ob_start();

Ähm, ist das alles in der header.php?
Ich mein' … zumindest das letzte Tag dürfte geschlossen sein?!

Ich kenne mich mit Artisteer nicht aus, aber üblicherweise hat man in den Templates Bereiche, die mit <div>-Tags abgegrenzt werden. Ein Bereich müsste dann header oder masthead oder ähnlich heißen. Eventuell steht da auch schon ein Foto "header.jpg"?

Andererseits wäre es möglich, dass das Foto (bisher) als Hintergrund im Stylesheet definiert ist. Such mal im Stylesheet nach etwas in der Art url('header.jpg').

Natürlich kann man keinen php-Code ins Stylesheet einbinden, aber dann wüsstest Du zumindest schon mal, wie der Bereich heißt, in den Dein Zufallsbild gehört.

bienchen

Hallo bego,

vielen Dank für Deine Antwort.

Ich habe in der style.css die Definition für das Headerbild:

HTML

iv.art-header-jpeg
{
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 1000px;
  height: 250px;
  background-image: url('images/header.jpg');
  background-repeat: no-repeat;
  background-position: center center;
}

Alles anzeigen

Die header.php sieht tatsächlich so aus. Die Dateien, die Artisteer generiert, sind vollgestopft mit Code. Deshalb komme ich damit gar nicht klar. Wenn man das Template nicht verändern möchte, ist es o.k., sonst ist es recht kompliziert.... zumindest für mich :?

Gruß
Heidi

bego

Kurios, kurios ...

Mach doch mal folgendes:

Code

iv.art-[URL="http://forum.wordpress-deutschland.org/lexikon/?do=showentry&item=header"]header[/URL]-jpeg {
 position: absolute;   
 z-index: -1;   
 top: 0;   
 left: 0;   
 width: 1000px;   
 height: 250px;
 /*background-image: [URL="http://forum.wordpress-deutschland.org/lexikon/?do=showentry&item=url"]url[/URL]('images/header.jpg');*/
 background-color: pink;
 background-repeat: no-repeat;   
 background-position: center center; 
 }

Alles anzeigen

Wenn nun das Titelbild fehlt und Du statt dessen einen pinken Kasten siehst, suchst Du in der index.php nach dem Eintrag "class=art-header-jpg". Dort bindest Du dann erstmal ein ganz normales Bildchen ein:

Code

<img src="http://upload.wikimedia.org/wikipedia/commons/2/22/New_York_City_at_night_HDR.jpg">

Wenn Du dann das Bild statt eines pinken Hintergrund siehst, kannst Du das Bild durch deinen php-Code für Zufallsbilder ersetzen.

bienchen

... es gibt in meinem Template eine Seite: page.php in der steht folgender Code:

PHP

<div id="art-page-background-glare">
    <div id="art-page-background-glare-image"></div>
</div>
<div id="art-main">
    <div class="art-sheet">
        <div class="art-sheet-tl"></div>
        <div class="art-sheet-tr"></div>
        <div class="art-sheet-bl"></div>
        <div class="art-sheet-br"></div>
        <div class="art-sheet-tc"></div>
        <div class="art-sheet-bc"></div>
        <div class="art-sheet-cl"></div>
        <div class="art-sheet-cr"></div>
        <div class="art-sheet-cc"></div>
        <div class="art-sheet-body">
            <div class="art-header">
                <div class="art-header-jpeg"></div>
 
            </div>
            <div class="art-nav">
             <div class="l"></div>
             <div class="r"></div>
             <ul class="art-menu">
              <?php echo $menu_items; ?>
             </ul>
            </div>
            <div class="art-content-layout">
                <div class="art-content-layout-row">
                    <div class="art-layout-cell art-content">
                        <?php echo $sidebarTop; ?>
                            <?php echo $content; ?>    
                        <?php echo $sidebarBottom; ?>    
                    </div>
                    <div class="art-layout-cell art-sidebar1">
                        <?php echo $sidebar1; ?>    
                    </div>
                </div>
            </div>
            <div class="cleared"></div><div class="art-footer">
                <div class="art-footer-t"></div>
                <div class="art-footer-l"></div>
                <div class="art-footer-b"></div>
                <div class="art-footer-r"></div>
                <div class="art-footer-body">
                  <?php echo $sidebarFooter; ?>
                  <?php echo $footerRSS; ?>
                  <div class="art-footer-text">
                      <?php echo $footerText; ?>
 
                  </div>
              <div class="cleared"></div>
                </div>
            </div>
      <div class="cleared"></div>
        </div>
    </div>
    <div class="cleared"></div>
    <</div>

Alles anzeigen

in der index.php steht nur folgendes:

PHP

<?php 
get_header();
 if (have_posts()) 
 {
    while (have_posts())  
    {
      art_post();
    }
    art_page_navi();
 } else {    
    art_not_found_msg();      
 }
get_footer();

Alles anzeigen

Den pinken Hintergrund konnte ich sehen, allerdings kein Bild.

LG Bienchen

bego

Zitat von bienchen
... es gibt in meinem Template eine Seite: page.php in der steht folgender Code:
Code
<div class="art-header-jpeg"></div>
...
in der index.php steht nur folgendes:
PHP
<?php 
get_header();
 if (have_posts()) 
 {
    while (have_posts())  
    {
      art_post();
    }
    art_page_navi();
 } else {    
    art_not_found_msg();      
 }
get_footer();
Alles anzeigen
Den pinken Hintergrund konnte ich sehen, allerdings kein Bild.

LG Bienchen

Immerhin ein Fortschritt: wir haben schon mal die richtige Klasse im Stylesheet erwischt! (Style Sheet geändert, Header-Bild weg, Hintergrund des Headers pink.)

Jetzt müssen wir nur noch suchen, in welchen Templates die Klasse verwendet wird. Dazu muss man wissen, dass WordPress eine Webseite aus mehreren Templates zusammen setzt: header.php, sidebar.php, index.php, footer.php.

Bei der Ansicht einzelner Seiten ändert sich diese Zusammensetzung:
header.php, sidebar.php, page.php, footer.php

Das heißt: wenn Du Änderungen an der page.php vornimmst, siehst Du das erst, wenn Du eine einzelne Seite aufrufst. Für die anderen Darstellungen müssen wir weiter suchen, wo der Eintrag "class=art-header-jpg" verwendet wird. Da es nicht in header.php und nicht in index.php steht, tippe ich nun auf sidebar.php. Schau doch da mal nach.

bienchen

Eine sidebar.php ist in dem Template nicht vorhanden. Ich habe nochmal alle Dateien durchsucht. Leider finde ich keinen Eintrag. Jetzt habe ich über Artisteer erstmal eine Flashdatei eingebunden... ist zwar nicht das, was ich möchte, aber sieht erstmal ganz gut aus.

Vielen Dank für Deine Hilfe!

Später werde ich auf jeden Fall nochmal suchen.... aber im Moment fehlt mir die Geduld.

LG Bienchen

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Wechselbilder im Header

Jetzt mitmachen!