Antworten auf deine Fragen:
Neues Thema erstellen

"Hardcoded" Header dynamisch gestalten

Coulyo

Coulyo

Director

Hallo,

ich habe mal wieder ein kleines Problem mit Wordpress. Und zwar möchte ich den Header, mit Wordpress dynamisch gestalten. Es sollen die letzten vier Bilder aus einer bestimmten Kategorie angezeigt werden. Wenn man über eines der Bilder hovert soll es groß dargestellt werden und der Text neben dem großen Bild soll natürlich auch dynamisch angepasst werden. Mit festen Bildern funktioniert das schon sehr gut, aber wie kann ich das nun an Wordpress anpassen? Ich hoffe jemand hat Lust sich das anzugucken :) Danke schon mal dafür!

Hier der relevante Code:

HTML:
HTML: 
<div id="header">
    	<a href="#" title="##"><img id="main" src="img/only-god-forgives__130525103700.jpg" alt="###" class="featured-main"></a>
        
        <div class="infoBlock">
        	<div class="textfeld">
        	<h3>The Place Beyond the Pines</h3>
            <p>Dies ist ein kleiner Text über The Place beyond the Pines mit Eva Mendez, Bradley Cooper und Ryan Gosling.</p>
            </div>
        </div>
        <div class="clearfix">
        </div>
        
        <div id="one" class="divider highlight">
        </div>
        <div id="two" class="divider">
        </div>
        <div id="three" class="divider">
        </div>
        <div id="four" class="divider">
        </div>
        <div class="clearfix">
        </div>
        <div class="imageChooser">
            <a href="#" title="##" onmouseover="changeImage('one');">
            	<img src="img/only-god-forgives__130525103700.jpg" alt="###" id="oneImg" class="featured-secondary highlight">
            </a>
            <a href="#" title="##" onmouseover="changeImage('two');">
            	<img src="img/The-Place-Beyond-The-Pines.jpg" alt="###" id="twoImg" class="featured-secondary">
            </a>
            <a href="#" title="##" onmouseover="changeImage('three');">
            	<img src="img/bioshock.jpg" alt="###" id="threeImg" class="featured-secondary">
            </a>
            <a href="#" title="##" onmouseover="changeImage('four');">
            	<img src="img/wueste.jpg" alt="###" id="fourImg" class="featured-secondary">
            </a>
        </div>
    </div>

Javascript:
HTML: 
<script type="text/javascript">
		function changeImage(HighlightedID) {
			if(HighlightedID == 'one') {
				document.getElementById('main').src='img/only-god-forgives__130525103700.jpg';
				
				document.getElementById('one').className = 'divider highlight';
				document.getElementById('two').className = 'divider';
				document.getElementById('three').className = 'divider';
				document.getElementById('four').className = 'divider';
				
				document.getElementById('oneImg').className = 'featured-secondary highlight';
				document.getElementById('twoImg').className = 'featured-secondary';
				document.getElementById('threeImg').className = 'featured-secondary';
				document.getElementById('fourImg').className = 'featured-secondary';
			}
			else if(HighlightedID == 'two') {
				document.getElementById('main').src='img/The-Place-Beyond-The-Pines.jpg';
				
				document.getElementById('one').className = 'divider';
				document.getElementById('two').className = 'divider highlight';
				document.getElementById('three').className = 'divider';
				document.getElementById('four').className = 'divider';
				
				document.getElementById('oneImg').className = 'featured-secondary';
				document.getElementById('twoImg').className = 'featured-secondary highlight';
				document.getElementById('threeImg').className = 'featured-secondary';
				document.getElementById('fourImg').className = 'featured-secondary';
			}
			else if(HighlightedID == 'three') {
				document.getElementById('main').src='img/bioshock.jpg';
				
				document.getElementById('one').className = 'divider';
				document.getElementById('two').className = 'divider';
				document.getElementById('three').className = 'divider highlight';
				document.getElementById('four').className = 'divider';
				
				document.getElementById('oneImg').className = 'featured-secondary';
				document.getElementById('twoImg').className = 'featured-secondary';
				document.getElementById('threeImg').className = 'featured-secondary highlight';
				document.getElementById('fourImg').className = 'featured-secondary';
			}
			else if(HighlightedID == 'four') {
				document.getElementById('main').src='img/wueste.jpg';
				
				document.getElementById('one').className = 'divider';
				document.getElementById('two').className = 'divider';
				document.getElementById('three').className = 'divider';
				document.getElementById('four').className = 'divider highlight';
				
				document.getElementById('oneImg').className = 'featured-secondary';
				document.getElementById('twoImg').className = 'featured-secondary';
				document.getElementById('threeImg').className = 'featured-secondary';
				document.getElementById('fourImg').className = 'featured-secondary highlight';
			}
		}
 
	</script>

CSS:
HTML: 
#header{float:left; width:960px; height:540px; background-color:#333;}
.infoBlock{height:410px; width:33%; background-image:url(img/textfeld.png); z-index:100; position:relative; bottom:544px; 
	color:#FFF;}
.textfeld{position:absolute; bottom:20px; padding:20px;}
.imageChooser{position:relative; bottom:544px; height:135px; background-color:#FFF;}
.divider{float:left; width:25%; height:5px; background-color:#FFF; position:relative; bottom:544px;}
.featured-main{width:100%;}
.featured-secondary{width:25%; float:left; opacity:0.7;}
.highlight{opacity:1; background-color:#09F; transition-property:opacity; transition-duration:0.2s;}
 
Zuletzt bearbeitet:
Coulyo

Coulyo

Director

AW: "Hardcoded" Header dynamisch gestalten

Habs nun endlich selbst hinbekommen, auch wenn es nicht 100%ig so ist wie oben beschrieben. Statt die ersten 4 Beiträge aus einer Kategorie zu holen, nehme ich jeweils den ersten Beitrag aus 4 Kategorien. Ein kleiner Workaround, der für mich sehr gut funktioniert, aber natürlich unterscheidet sich das von Fall zu Fall.
Nur der Vollständigkeit halber ist unten noch der fertige Code, falls jemand ähnliche Probleme hat :)

HTML: 
	<head>
	<meta charset="<?php bloginfo('charset'); ?>">
	<title>
    <?php wp_title(); bloginfo('name'); ?>
    </title>
	<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>">
    
	<script type="text/javascript">
		function changeImage(HighlightedID) {
			if(HighlightedID == 'one') {
				document.getElementById('main').src = document.getElementById('oneImg').src;
				
				document.getElementById('one').className = 'divider highlight';
				document.getElementById('two').className = 'divider';
				document.getElementById('three').className = 'divider';
				document.getElementById('four').className = 'divider';
				
				document.getElementById('oneImg').className = 'featured-secondary highlight';
				document.getElementById('twoImg').className = 'featured-secondary';
				document.getElementById('threeImg').className = 'featured-secondary';
				document.getElementById('fourImg').className = 'featured-secondary';
				
				document.getElementById('main').alt = document.getElementById('oneImg').alt;
				document.getElementById('mainLink').href = document.getElementById('oneLink').href;
				
				document.getElementById('headline').innerText = document.getElementById('headlineOne').innerText;
				document.getElementById('headline-text').innerText = document.getElementById('textOne').innerText;
			}
			else if(HighlightedID == 'two') {
				document.getElementById('main').src = document.getElementById('twoImg').src;
				
				document.getElementById('one').className = 'divider';
				document.getElementById('two').className = 'divider highlight';
				document.getElementById('three').className = 'divider';
				document.getElementById('four').className = 'divider';
				
				document.getElementById('oneImg').className = 'featured-secondary';
				document.getElementById('twoImg').className = 'featured-secondary highlight';
				document.getElementById('threeImg').className = 'featured-secondary';
				document.getElementById('fourImg').className = 'featured-secondary';
				
				document.getElementById('main').alt = document.getElementById('twoImg').alt;
				document.getElementById('mainLink').href = document.getElementById('twoLink').href;
				
				document.getElementById('headline').innerText = document.getElementById('headlineTwo').innerText;
				document.getElementById('headline-text').innerText = document.getElementById('textTwo').innerText;
			}
			else if(HighlightedID == 'three') {
				document.getElementById('main').src = document.getElementById('threeImg').src;
				
				document.getElementById('one').className = 'divider';
				document.getElementById('two').className = 'divider';
				document.getElementById('three').className = 'divider highlight';
				document.getElementById('four').className = 'divider';
				
				document.getElementById('oneImg').className = 'featured-secondary';
				document.getElementById('twoImg').className = 'featured-secondary';
				document.getElementById('threeImg').className = 'featured-secondary highlight';
				document.getElementById('fourImg').className = 'featured-secondary';
				
				document.getElementById('main').alt = document.getElementById('threeImg').alt;
				document.getElementById('mainLink').href = document.getElementById('threeLink').href;
				
				document.getElementById('headline').innerText = document.getElementById('headlineThree').innerText;
				document.getElementById('headline-text').innerText = document.getElementById('textThree').innerText;
			}
			else if(HighlightedID == 'four') {
				document.getElementById('main').src = document.getElementById('fourImg').src;
				
				document.getElementById('one').className = 'divider';
				document.getElementById('two').className = 'divider';
				document.getElementById('three').className = 'divider';
				document.getElementById('four').className = 'divider highlight';
				
				document.getElementById('oneImg').className = 'featured-secondary';
				document.getElementById('twoImg').className = 'featured-secondary';
				document.getElementById('threeImg').className = 'featured-secondary';
				document.getElementById('fourImg').className = 'featured-secondary highlight';
				
				document.getElementById('main').alt = document.getElementById('fourImg').alt;
				document.getElementById('mainLink').href = document.getElementById('fourLink').href;
				
				document.getElementById('headline').innerText = document.getElementById('headlineFour').innerText;
				document.getElementById('headline-text').innerText = document.getElementById('textFour').innerText;
			}
		}
 
	</script>
    
    <script type="text/javascript">
			function setHeader(){
				
				
				if(document.getElementById('main').src = "http://visionarty.pf-control.de/testMarc/"){
					document.getElementById('main').src = document.getElementById('oneImg').src;
					document.getElementById('main').alt = document.getElementById('oneImg').alt;
					
					document.getElementById('mainLink').href = document.getElementById('oneLink').href;
					document.getElementById('mainLink').title = document.getElementById('oneLink').title;
					
					document.getElementById('headline').innerText = document.getElementById('headlineOne').innerText;
					document.getElementById('headline-text').innerText = document.getElementById('textOne').innerText;
				}
			}
			
			window.onload = setHeader;
	</script>
    
	<?php wp_head(); ?>
	</head>

HTML: 
    <div id="header">
    	
    	<a href="" title="" id="mainLink"><img src="" alt="" id="main" class="featured-main"></a>
        
        <div class="infoBlock">
        	<div class="textfeld">
        	<h3 id="headline">Sorry, irgendwas ist schief gelaufen</h3>
            <p id="headline-text">..</p>
            </div>
        </div>
        <div class="clearfix">
        </div>
        
        <div id="one" class="divider highlight">
        </div>
        <div id="two" class="divider">
        </div>
        <div id="three" class="divider">
        </div>
        <div id="four" class="divider">
        </div>
        <div class="clearfix">
        </div>
        
        <div class="imageChooser">
        
        <?php  
		$args = array('numberposts' => 1, 'category' => 4);
		$myposts = get_posts($args);
		
		foreach($myposts as $post){
			setup_postdata($post);
			$url = wp_get_attachment_url(get_post_thumbnail_id($post -> ID));
		?>
		
		<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" onmouseover="changeImage('one');" id="oneLink">
        	<img src="<?php echo $url; ?>" alt="<?php the_title(); ?>" id="oneImg" class="featured-secondary highlight">
        </a>
        
        <div id="headlineOne" class="versteckt"> <?php the_title(); ?> </div>
        <div id="textOne" class="versteckt"><?php echo get_the_excerpt(); ?> </div>

		<?php } ?>
        
        <?php  
		$args = array('numberposts' => 1, 'category' => 5);
		$myposts = get_posts($args);
		
		foreach($myposts as $post){
			setup_postdata($post);
			$url = wp_get_attachment_url(get_post_thumbnail_id($post -> ID));
		?>

		<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" onmouseover="changeImage('two');" id="twoLink">
        	<img src="<?php echo $url; ?>" alt="<?php the_title(); ?>" id="twoImg" class="featured-secondary">
        </a>
        
        <div id="headlineTwo" class="versteckt"> <?php the_title(); ?> </div>
        <div id="textTwo" class="versteckt"><?php echo get_the_excerpt(); ?> </div>

		<?php } ?>
        
        <?php  
		$args = array('numberposts' => 1, 'category' => 7);
		$myposts = get_posts($args);
		
		foreach($myposts as $post){
			setup_postdata($post);
			$url = wp_get_attachment_url(get_post_thumbnail_id($post -> ID));
		?>

		<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" onmouseover="changeImage('three');" id="threeLink">
        	<img src="<?php echo $url; ?>" alt="<?php the_title(); ?>" id="threeImg" class="featured-secondary">
        </a>
        
        <div id="headlineThree" class="versteckt"> <?php the_title(); ?> </div>
        <div id="textThree" class="versteckt"><?php echo get_the_excerpt(); ?> </div>

		<?php } ?>
        
        <?php  
		$args = array('numberposts' => 1, 'category' => 6);
		$myposts = get_posts($args);
		
		foreach($myposts as $post){
			setup_postdata($post);
			$url = wp_get_attachment_url(get_post_thumbnail_id($post -> ID));
		?>

		<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" onmouseover="changeImage('four');" id="fourLink">
        	<img src="<?php echo $url; ?>" alt="<?php the_title(); ?>" id="fourImg" class="featured-secondary">
        </a>
        
        <div id="headlineFour" class="versteckt"> <?php the_title(); ?> </div>
        <div id="textFour" class="versteckt"><?php echo get_the_excerpt(); ?> </div>

		<?php } ?>
        </div>
    </div>
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.
Gesamt: 68 (Mitglieder: 0, Gäste: 68)
Robots: 1.257

Statistik des Forums

Themen
118.565
Beiträge
1.538.067
Mitglieder
67.488
Neuestes Mitglied
Andrew56524
Oben