Wechselndes Main- nicht Headerbild pro Seite

fufanu

Hallo,

ich wollte nur ein wechselndes Headerbild und dachte mit den Tipps hier im Forum und diverser Anleitungen im, wie bspw. bei texto käme ich weiter.
Aber nein!:confused::cry:

Vielleicht kann mir einer von Euch weiterhelfen?

Ich benutze das Ocean Mist Theme in der deutschen Fassung von pixelreality. Hier die Demo. Hier das Theme.
Leider kann ich keine Link zu meiner Seite senden, da noch im absoluten Aufbau und daher noch nicht öffentlich. Hoffe es geht auch so.

Also:
Ich würde gerne anstelle des einen Bildes für alle Seiten, pro Seite jeweils ein anderes Bild anzeigen. Momentan gibt es nur statische Seiten.

Bei texto und hier im Forum wird empfohlen die header.php-Datei entsprechend anzupassen, so dass die header-Bilder wechseln.

Problem bei dem von mir verwendeten Theme ist, dass das header-Bild der dunkelgraue Hintergrund/Rahmen ist. Dieser soll auch weiterhin bestehen bleiben. Innerhalb dieses Rahmens befindet sich das Bild (Landschaftsfoto mit Meerbick). Dies ist das main-Bild.
Ich möchte demnach kein wechselndes Headerbild, sondern ein wechselndes main-Bild.

Hmm? Aber wo gebe ich dies an. In header.php? In style-css? In beiden? Ich habe bisher nur die header.php angepasst.

Vielleicht hat jemand Zeit und Lust und schaut sich mal den Code von header.php und style.css an.

Vorab VIELEN DANK!

1a) Originalversion - header.php

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">


<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> <?php } ?> <?php wp_title(); ?></title>
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<link rel="shortcut icon" href="<?php bloginfo('url'); ?>/favicon.ico" type="image/x-icon" />




<?php wp_head(); ?>
</head>
<body>
<div id="page">
  <div id="header">
    <h1><a href="<?php echo get_settings('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
    <div class="description"><?php bloginfo('description'); ?>&nbsp;</div>
    <div id="mainpic"></div>
    <ul id="pagetabs">
      <?php wp_list_pages('title_li='); ?>
    </ul>
  </div>

Alles anzeigen

1b) Originalversion - style.css (Aus Platzgründen lasse ich Typo, Footer, etc. weg)

PHP

/* CSS Document */


/*  
Theme Name: Ocean Mist German
Theme URI: http://www.edmerritt.com/
Description: Ocean Mist 1.2 German<br /> Die deutsche Version von Ocean Mist 1.2
Version: 1.2
Author: Ed Merritt (&Uuml;bersetzung durch Sebastian Schwittay (www.pixelreality.net))
Author URI: http://www.edmerritt.com/
*/




/* layout */
* {font-size: 100%; margin: 0; padding: 0; line-height: 1.4em;}
body {position: relative; background: url(images/bg_body.gif) top left repeat-x #9bc3d5; font: 70% Verdana, Arial, Helvetica, sans-serif; color: #4B5D67; text-align: center;}
#page {display: block; width: 750px; background: url(images/bg_main.gif) top repeat-y; text-align: left; margin: 0 auto;}
#header {position: relative; float: left; display: block; width: 750px; background: url(images/bg_header.gif) top no-repeat; min-height: 355px; padding: 0;}
* html #header {height: 355px;}
#content {float: left; display: block; width: 543px; margin: 0 0 0 7px;}
#sidebar {float: left; display: block; width: 193px; margin: 0;}
* html #content, * html #sidebar {position: relative; left: -7px;}
.post {float: left; display: block; width: 525px; margin: 0 0 18px 18px;}
.page {float: left; display: block; width: 507px; margin: 0 0 0 18px;}
.archive {float: left; display: block; width: 507px; margin: 0 0 18px 18px; border-bottom: 1px solid #ccc;}
#sidebar .post {display: block; width: 157px; margin: 0 0 18px 18px;}
.title {float: left; display: block; width: 543px; background: url(images/bg_h2.gif) bottom repeat-x #E2EBF8; margin: 0 0 18px 0;}
#sidebar .title {float: left; display: block; width: 193px; background: url(images/bg_h3.gif) bottom left repeat-x #CADFED;}
.entry {float: right; display: block; width: 350px; margin: 0;}
.postinfo {float: left; display: block; width: 157px; margin: 0 0 18px 0;}
.wideposts .entry {float: left; display: block; width: 525px; margin: 0 0 18px 5px;}
.wideposts .postinfo {float: left; display: block; width: 525px; margin: 0 0 18px 0;}
.archive .postinfo {margin-left: 0;}
.archive .entry {margin-right: -24px;}
* html .post, * html #sidebar .post, * html .archive  {margin-left: 0; position: relative; left: 18px;}
p img {float: left; margin: 0 18px 12px 0;}
p img.wp-smiley {float: none; margin: 0;}
embed {float: left; margin: 0 18px 12px 0;}


/* typography */
aus Platzgründen hier im Forum nicht angegeben


/* lists */
aus Platzgründen hier im Forum nicht angegeben




/* links */
aus Platzgründen hier im Forum nicht angegeben




/* main image */
#mainpic {position: absolute; bottom: 0; float: left; background: url(images/future.jpg) no-repeat; display: block; width: 736px; height: 229px; margin: 0 7px; border-top: 3px solid #CCCC66; border-bottom: 3px solid #CCCC66;}




/* forms */
form {margin: 0 0 18px 0;}
#searchsubmit {position: absolute;}
#s {width: 130px; padding: 2px; border: 1px solid #B9C3D1; background: #CAD6E1; color: #32474B; margin-right: 2px;}
select, .field {width: 157px; margin: 0 0 4px 0; color: #32474B;}
.field {padding: 2px; width: 153px;}
textarea {padding: 2px; width: 308px; font: 1em Verdana, Arial, Helvetica, sans-serif;}
select option {padding: 1px;}
#submit {padding: 3px;}




/* calendar */
aus Platzgründen hier im Forum nicht angegeben


/* page tabs */
#pagetabs {position: absolute; bottom: 3px; left: 1px; display: block; float: left; padding: 0; margin: 0 0 0 25px; list-style: none;}
#pagetabs ul {display: none;}
#pagetabs li {float: left; border-bottom: 1px solid #414e53; margin: 0 5px 0 0; padding: 0;}
#pagetabs li:hover {border-bottom: 1px solid #486065;}
#pagetabs a {float: left; display: block; padding: 5px 5px 3px 5px; background: #526a74; color: #fff; font-size: 12px; font-weight: bold; border-bottom: 2px solid #4a5e65;}
#pagetabs a:hover {background: #5c7d86; border-bottom: 2px solid #527077; color: #fff;}
.pagetabstitle {border-bottom: none !important; color: #fff; font-weight: bold; position: relative; top: 4px;}


/* footer */
aus Platzgründen hier im Forum nicht angegeben

Alles anzeigen

2a) Angepasste Version - header.php

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">


<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> <?php } ?> <?php wp_title(); ?></title>
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<link rel="shortcut icon" href="<?php bloginfo('url'); ?>/favicon.ico" type="image/x-icon" />




<?php wp_head(); ?>
</head>
<body>
<div id="page">
  <div id="header">
    <div id="mainpic" style:"background: url('<?php bloginfo('stylesheet_directory');if (is_home()) {echo"http://forum.wordpress-deutschland.org/images/panorama.jpg";} elseif (is_page('profil')) {echo "http://forum.wordpress-deutschland.org/images/profil.jpg";} elseif (is_page('begegnungen')) {echo "http://forum.wordpress-deutschland.org/images/kreuzung.jpg";} elseif (is_category('fundstuecke')) {echo "http://forum.wordpress-deutschland.org/images/future.jpg";} else {echo "http://forum.wordpress-deutschland.org/images/panorama.jpg";}?>');position: absolute; bottom: 0; float: left; no-repeat; display: block; width: 736px; height: 229px; margin: 0 7px; border-top: 3px solid #CCCC66; border-bottom: 3px solid #CCCC66;"></div>
    <h1><a href="<?php echo get_settings('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
    <div class="description"><?php bloginfo('description'); ?>&nbsp;</div>
    <ul id="pagetabs">
      <?php wp_list_pages('title_li='); ?>
    </ul>
  </div>

Alles anzeigen

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

jottlieb

Der Teil in der style.css für das Headerbild ist der hier:

Code

/* main image */
#mainpic {position: absolute; bottom: 0; float: left; background: url(images/mainpic01.jpg) no-repeat; display: block; width: 736px; height: 229px; margin: 0 7px; border-top: 3px solid #67939B; border-bottom: 3px solid #67939B;}

Also sollte es reichen in der header.php (im head-Bereich) von deinem Theme eine spezielle Abfrage dafür einzubauen:

PHP

<style type="text/css"><!--
<?php if (is_page('bla')) { ?>
#mainpic {background: url(images/mainpic_bla.jpg) no-repeat;}
<?php } elseif (is_page('blub')) { ?>
#mainpic {background: url(images/mainpic_blub.jpg) no-repeat;}
<?php } elseif (is_page('blib')) { ?>
#mainpic {background: url(images/mainpic_blib.jpg) no-repeat;}
<?php } else { ?>
#mainpic {background: url(images/mainpic01.jpg) no-repeat;}
<?php } ?>
//--></style>

Alles anzeigen

fufanu

Hallo Jottlieb,

lass ich den Code in der style.css unvervändert? Also auch die Angabe: background:url(images/mainpic01.jpg)? Wird dann nicht automatisch mainpic01.jpg augerufen?

HTML

/* main image */
#mainpic {position: absolute; bottom: 0; float: left; background: url(images/mainpic01.jpg) no-repeat; display: block; width: 736px; height: 229px; margin: 0 7px; border-top: 3px solid #67939B; border-bottom: 3px solid #67939B;}

Die header.php habe ich folgendermaßen angepasst, siehe unten. Habe den Code zwischen <head> und </head> eingesetzt. Scheinbar falsch, da nun gar kein mainpic mehr erscheint. Ich sehe jetzt wieder nur den grauen Hintergrund.

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">


<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> <?php } ?> <?php wp_title(); ?></title>
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<link rel="shortcut icon" href="<?php bloginfo('url'); ?>/favicon.ico" type="image/x-icon" />




<?php wp_head(); ?>
<style type="text/css"><!--
<?php if (is_page('profil')) { ?>
#mainpic {background: url(images/profil.jpg) no-repeat;}
<?php } elseif (is_page('begegnungen')) { ?>
#mainpic {background: url(images/begegnungen.jpg) no-repeat;}
<?php } elseif (is_page('fundstuecke')) { ?>
#mainpic {background: url(images/fundstuecke.jpg) no-repeat;}
<?php } else { ?>
#mainpic {background: url(images/panorama.jpg) no-repeat;}
<?php } ?>
//--></style>
</head>
<body>
<div id="page">
  <div id="header">
    <h1><a href="<?php echo get_settings('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
    <div class="description"><?php bloginfo('description'); ?>&nbsp;</div>
    <div id="mainpic"></div>
    <ul id="pagetabs">
      <?php wp_list_pages('title_li='); ?>
    </ul>
  </div>

Alles anzeigen

Dank & Gruß
Fufanu

jottlieb

Zitat

lass ich den Code in der style.css unvervändert

Ja.

Zitat

Wird dann nicht automatisch mainpic01.jpg augerufen?

Nein. Wenn mich nicht alles täuscht, dürften Angaben im Header höherwertig sein als die im Stylesheet. Wenn es also wie hier widersprechende Angaben gibt, dann sollte die im Header berücksichtigt werden.

Zitat

Scheinbar falsch, da nun gar kein mainpic mehr erscheint. Ich sehe jetzt wieder nur den grauen Hintergrund.

Das liegt wohl am Pfad zu den Bildern.
Mach die mal in diesem Format:

PHP

<?php bloginfo('stylesheet_directory'); ?>/images/profil.jpg

Das müsste dann klappen.

fufanu

Zitat von jottlieb
Das liegt wohl am Pfad zu den Bildern.
Mach die mal in diesem Format:
PHP
<?php bloginfo('stylesheet_directory'); ?>/images/profil.jpg
Das müsste dann klappen.

D.h. einen Schrägstrick vor "images" setzen? Oder meinst du noch etwas anderes?
Zur Info der Ordner "Images" liegt im Verzeichnis auf gleicher Ebene wie header.php.

Habe es nun so (siehe unten) aber verändert hat sich nichts.

PHP

<?php wp_head(); ?>
<style type="text/css"><!--
<?php if (is_page('profil')) { ?>
#mainpic {background: url(/images/profil.jpg) no-repeat;}
<?php } elseif (is_page('begegnungen')) { ?>
#mainpic {background: url(/images/begegnungen.jpg) no-repeat;}
<?php } elseif (is_page('fundstuecke')) { ?>
#mainpic {background: url(/images/fundstuecke.jpg) no-repeat;}
<?php } else { ?>
#mainpic {background: url(/images/panorama.jpg) no-repeat;}
<?php } ?>
//--></style>
</head>

Alles anzeigen

Als Bezeichnung gebe ich doch jeweils das an was in der WP-Adminoberfläche "Seite bearbeiten" in der rechten Spalte unter "Titelform" steht, richtig?
Also z.B. steht im Feld Titelform "profil" dann wird im Code (is_page('profil')) angegeben, richtig?

Dank & Gruß

jottlieb

Zitat

D.h. einen Schrägstrick vor "images" setzen? Oder meinst du noch etwas anderes?

Der PHP-Code muss auch dazu.
Also z.B. so:

PHP

#mainpic {background: url(<?php bloginfo('stylesheet_directory'); ?>/images/profil.jpg) no-repeat;}

Zitat

Als Bezeichnung gebe ich doch jeweils das an was in der WP-Adminoberfläche "Seite bearbeiten" in der rechten Spalte unter "Titelform" steht, richtig?
Also z.B. steht im Feld Titelform "profil" dann wird im Code (is_page('profil')) angegeben, richtig?

Genau.

fufanu

SUPER!!! Es hat funktioniert!

Vielen vielen vielen Dank!

Gruß, Fufanu

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Wechselndes Main- nicht Headerbild pro Seite

Jetzt mitmachen!

Benutzer online in diesem Thema