Das Logo oder den Banner der Website Datumsabhängig wechseln
Es waren die Grafiker von Google, die 1998 damit angefangen haben. Zu bestimmten Anlässen, Feiertagen, Geburts- und Gedenktagen wird das normale Google Logo durch ein abgewandeltes Logo ersetzt, das auf den jeweiligen Anlass aufmerksam macht.
Mittlerweile gibt es ein ganzes Archiv von Google Logos zu allen möglichen Anlässen.
Es ist nicht erforderlich, gleich einen so hohen Aufwand wie Google zu betreiben, aber es ist ein netter Zug die Besucher der eigenen Website z.B. in der Adventszeit mit einem weihnachtlichen Logo zu begrüßen.
Was benötigt man dazu?
Zunächst einmal ein Logo für den entsprechenden Anlass, z.B. zur Adventszeit. Darauf, wie Sie ein Logo erstellen oder verändern gehe ich in diesem Tipp nicht ein, sondern gehe davon aus, dass es bereits vorhanden ist. Einen guten Einstieg in die Gestaltung des eigenen Logos finden Sie bei Dr. Web "Auf dem Weg zum Logo".
Die folgenden Arbeiten am Template, der Designvorlage für Ihre Website, lassen sich recht einfach und bequem mit dem Addon File Editor (AFE) erledigen.
Übertragen Sie das neue Logo in das Verzeichnis des Template, das angepasst werden soll - im Addon File Editor » Templates » Ihr Template » Datei hochladen.
Öffnen Sie die index.php des Templates zum Bearbeiten - Addon File Editor » Templates » Ihr Template » index.php » Bearbeiten.
Suchen Sie in der index.php die Stelle, an der das Logo eingebunden ist. Für die Einbindung des Logos in ein Template gibt es unterschiedliche Methoden.
Eine Variante ist, die Grafik an der entsprechenden Stelle mit einem <img> Tag einzubinden, dies ist z.B. bei dem Template Round der Fall, das zusammen mit Website Baker ausgeliefert wird:
<table cellpadding="0" cellspacing="0" border="0" align="center" class="main" width="750">
<tr>
<td colspan="2" class="header" height="80">
<a href="<?php echo WB_URL; ?>">
<img src="<?php echo TEMPLATE_DIR; ?>/images/banner.jpg" border="0" width="750"
height="80" alt="<?php page_title('', '[WEBSITE_TITLE]'); ?>" />
</a>
</td>
</tr>
Eine andere Variante ist, das Logo über das Cascading Style Sheet (CSS) einzubinden, in diesem Fall werden Sie nur einen Container mit der entsprechenden Kennzeichnung finden, die Grafik wird über CSS Datei geladen die für die Bildschirmdarstellung zuständig ist (meist template.css oder screen.css):
</head>
<body>
<!-- Logo -->
<div id="logo"></div>
Wir bleiben bei unserem Beispiel mit dem Logo zur Adventszeit. Sie möchten, dass in der Zeit vom 01. Dezember bis zu den Heiligen 3 Königen am 06. Januar ihr Adventslogo angezeigt wird, das den Namen logo_weihnachten.jpg hat.
In dem Fall, dass in Ihrem Template ein <img> Tag für das Logo verwendet wird, ersetzen Sie den Code wie folgt (Beispiel: Template Round):
<table cellpadding="0" cellspacing="0" border="0" align="center" class="main" width="750">
<tr>
<td colspan="2" class="header" height="80">
<a href="<?php echo WB_URL; ?>">
<?php
// Logo ueber das Datum auswaehlen
if ((date('m') == 12) || ((date('m') == 1) && (date('d') < 7))) {
// von Dezember bis einschliesslich 6. Januar das Weihnachtslogo verwenden
$logo = 'logo_weihnachten.jpg';
}
else {
// Standardlogo verwenden
$logo = 'banner.jpg';
}
?>
<img src="<?php echo TEMPLATE_DIR; ?>/images/<?php echo $logo; ?>" border="0" width="750"
height="80" alt="<?php page_title('', '[WEBSITE_TITLE]'); ?>" />
</a>
</td>
</tr>
Mit dem <?php [...] ?> Block wird das Datum abgefragt und im Monat Dezember bzw. im Monat Januar, wenn das Tagesdatum kleiner ist als 7, der Name des Weihnachtslogo in der Variablen $logo gespeichert, ansonsten wird der normale Name des Logos in der Variablen $logo abgelegt.
In dem <img> Tag, der das Logo anzeigt, wird banner.jpg durch <?php echo $logo; ?> ersetzt.
Speichern Sie die index.php. Fertig, mehr brauchen Sie in diesem Fall nicht zu tun!
Falls das Logo in Ihrem Template über einen Container eingebunden ist, ersetzen Sie den Container durch folgenden Code:
</head>
<body>
<?php
// Logo ueber das Datum auswaehlen
if ((date('m') == 12) || ((date('m') == 1) && (date('d') < 7))) {
// von Dezember bis einschliesslich 6. Januar das Weihnachtslogo verwenden
$logo = 'logo_weihnachten';
}
else {
// Standardlogo verwenden
$logo = 'logo';
}
echo sprintf('<div id="%s"></div>', $logo);
?>
Speichern Sie die index.php.
Öffnen Sie die dazugehörige CSS Datei für die Bildschirmdarstellung und suchen sie den Block, der im Container mit id oder class angegeben ist, Beispiel:
#logo {
/* Standardlogo */
position: absolute;
z-index: 1;
top: 50px;
left: 240px;
margin: 0;
padding: 0;
background-image: url(phpmanufaktur.png);
background-repeat: no-repeat;
background-position: top left;
width: 520px;
height: 95px;
}
Ergänzen Sie diesen Block, in dem Sie einen neuen Block für die Formatierung des Weihnachtslogos einfügen:
#logo_weihnachten {
/* Logo fuer die Adventszeit */
position: absolute;
z-index: 1;
top: 50px;
left: 240px;
margin: 0;
padding: 0;
background-image: url(phpmanufaktur_weihnachten.png);
background-repeat: no-repeat;
background-position: top left;
width: 520px;
height: 95px;
}
Speichern Sie die CSS Datei. Fertig.
Ich wünsche Ihnen eine besinnliche Adventszeit.
Ralf Hertsch, 01.12.2009
Kommentare
11.09.2010
gute Tipps :)
|
|
|
|
