2009/08/31

Tutorial – Ein Portfolio mit WordPress realisieren

Hin und wieder taucht bei mir die Frage auf, wie ich mein Portfolio hier umgesetzt habe. Meine Antwort war recht simple bisher: "Mit Custom Fields und Artikeln". Aber wenn ich eherlich bin war es dann doch ein wenig mehr arbeit. Um es nicht jedem einzeln zu erklären was sehr Zeitaufwendig werden könnte werde ich hier versuchen das ganze in einem kleinen Tutorial zu erläutern. Natürlich ist das nicht "DER" Weg und es wird eine vielzahl an anderen Lösungen geben doch ich bin mit dieser hier sehr zufrieden bisher.

Vorbereitung - Verzeichnisstruktur und Dateinamen

Kommen wir zum ersten Teil, das anlegen der Verzeichnisstruktur. Habe mir hier mehrfach Gedanken gemacht wie es am besten und sinnvollsten ist und das war die letzte Version meiner Gedanken.

Verzeichnisstruktur

Portfolio (Hauptordner)
- apparel (Ordner für Kleidung)
-- picture (Große Bilder im Portfoliobereich)
-- preview (Mittlere Bilder in der Portfoliovorschau)
-- thumbs (Kleine Bilder für die Portfolioschnellansicht (Startseite))
- print (Ordner für Print)
-- picture (Große Bilder im Portfoliobereich)
-- preview (Mittlere Bilder in der Portfoliovorschau)
-- thumb (Kleine Bilder für die Portfolioschnellansicht (Startseite))
- web (Ordner für Web)
-- browser (Große Bilder im Portfoliobereich)
-- preview (Mittlere Bilder in der Portfoliovorschau)
-- slide (Bilder für Slideshow im Macbook Pro)
-- thumb (Kleine Bilder für die Portfolioschnellansicht (Startseite))

Nun kommen wir zu den Dateinamen. Es sollte endlos erweiterbar sein ohne groß den Überblick zu verlieren. Es klappt bisher super :)

Der Dateiname ist wie folgt aufgebaut:

projektname_zähler_bildnummer.erweiterung
was dann konkret so ausschaut:
daivdhellmann_02_img01.jpg

davidhellmann = Projektname
02 = 2tes Projekt dafür
img01 = Bild 01

So werden die Bilder in jedem Ordner abgelegt. Es gibt immer nur ein Bild außer bei den Picture und Browser Bildern, da sind bis zu vier Bildern möglich (kann erweitert werden). Das sind dann die Bilder in der Detailansicht. Es würde dann in diesem Ordner so aussehen:

daivdhellmann_02_img01.jpg
daivdhellmann_02_img02.jpg
daivdhellmann_02_img03.jpg

Sollte soweit alles verständlich sein. Falls nicht einfach in den Kommentaren nachfragen. Die größe der Bilder lasse ich hier mal außer acht, dass muss jeder selbst entscheiden was da brauchbar ist.

WordPress vorbereiten

Als erstes erstellt man am besten die Kategorien für die späteren Portfoliobereiche.

portfolio (ID=3) Diese dient nur als Oberkategorie.
- apparel (ID=6) Hier kommen die Apparel Sachen rein.
- print (ID=5) Hier kommen die Print Sachen rein.
- web (ID=4) Hier kommen die Web Sachen rein.

Gebrauchte Funktionen

Funktion 1 ist diese, das für jede Kategorie eine eigene single.php Datei verwendet wird. Wenn diese nicht vorhanden ist dann wird die normale single.php genommen. Diese single.php für die einzelnen Kategorien muss man selber anlegen und zwar:single-4.php für die Kategorie mit der ID=4 für "Web".

Jede Kategorie bekommt eigene single.php zugewiesen

      
        <?php
// Jede Kategorie bekommt eine eigene single.php. Falls diese nicht vorhanden ist wird die normale single.php genutzt.
add_filter('single_template', create_function('$t', 'foreach( (array) get_the_category() as $cat ) { 
	if ( file_exists(TEMPLATEPATH . "/single-{$cat->term_id}.php") ) 
	return TEMPLATEPATH . "/single-{$cat->term_id}.php"; } return $t;' )
);
?>

Portfolio Kategorien von den normalen Blogposts ausschließen

      
        // Kategorien von der Startseite ausschließen
function filter_posts() {
	global $wp_query;
	if(is_home()) {
		$wp_query->set('category__not_in',array(3,4,5,6));
	}
}
add_action('pre_get_posts','filter_posts');

Beide Funktionen kommen in die functions.php im Theme Ordner.
Das hätten wir geschafft. Jede Portfolio Kategorie bekommt nachher eine eigene Templatedatei. Die Portfolio Artikel tauchen nun nicht mehr unter den normalen Blogartikeln auf was so auch keinen Sinn machen würde.

Templates erstellen

Das sind nicht wenige. Es gibt "apparel.php", "print.php", "web.php", "portfolio.php", "portfolio-list.php", "single-4.php", "single-5.php" und "single-6.php". Das sollten alle sein. Ich werde jetzt den kompletten Inhalt dieser Dateien hier abbilden. Im Grunde sind es ganz normale Loops wo Artikel und derenBenutzerdefinierten Felder ausgelesen werden.

apparel.php

Diese Datei ist ist für die Voransicht der Apparel Sachen zuständig

      
        <?php
/*
Template Name: Apparel
*/
?>
<?php get_header(); ?>
<!-- Left -->
<div class="content-portfolio">
 
<ul class="brotnavi">
	<li><a class="list" href="<?php bloginfo('home'); ?>/portfolio/list">Liste</a></li>
	<li><a class="apparel apparel-aktiv" href="<?php bloginfo('home'); ?>/portfolio/apparel">Apparel Stuff</a></li>
	<li><a class="print" href="<?php bloginfo('home'); ?>/portfolio/print">Print Stuff</a></li>
	<li><a class="web" href="<?php bloginfo('home'); ?>/portfolio/web">Web Stuff</a></li>
	<li><a class="overview" href="<?php bloginfo('home'); ?>/portfolio/">Overview</a></li>
</ul>
 
<a name="apparelstuff"></a><h2 class="apparel">Apparel Stuff</h2>
<hr class="portfolio" />
<ul class="portfolio-preview">
 
<?php
	global $myPosts;
	$myPosts = '';
?>
 
<?php
	$my_query = new WP_Query();
	$my_query->query('cat=6&showposts=-1&orderby=date');
	if ($my_query->have_posts()) : while ($my_query->have_posts()) : $my_query->the_post();  
	 $myPosts .= $post->ID . ","; 
?>
 
<li>
	<?php $ordner = get_post_meta($post->ID, 'ordner', true); ?> 
	<?php $preview = get_post_meta($post->ID, 'preview', true); ?>                
	<?php $name = get_post_meta($post->ID, 'name', true); ?> 
	<?php $umfang = get_post_meta($post->ID, 'umfang', true); ?>                
 
	<a href="<?php the_permalink() ?>"><img src="<?php bloginfo('home'); ?>/wp-content/uploads/portfolio/<?php echo $ordner; ?>/preview/<?php echo $preview; ?>.jpg" alt="<?php the_title(); ?>" /></a>
	<div class="ordner"><?php echo $ordner; ?></div>
	<h3><a href="<?php the_permalink() ?>"><?php echo $name; ?></a></h3>
	<cite><?php echo $umfang; ?></cite>
</li>
<?php endwhile; endif; ?>
</ul>
 
</div>
<?php get_footer(); ?>

print.php

Diese Datei ist ist für die Voransicht der Print Sachen zuständig

      
        <?php
/*
Template Name: Print
*/
?>
<?php get_header(); ?>		
<!-- Left -->
<div class="content-portfolio">
 
<ul class="brotnavi">
	<li><a class="list" href="<?php bloginfo('home'); ?>/portfolio/list">Liste</a></li>
	<li><a class="apparel" href="<?php bloginfo('home'); ?>/portfolio/apparel">Apparel Stuff</a></li>
	<li><a class="print print-aktiv" href="<?php bloginfo('home'); ?>/portfolio/print">Print Stuff</a></li>
	<li><a class="web" href="<?php bloginfo('home'); ?>/portfolio/web">Web Stuff</a></li>
	<li><a class="overview" href="<?php bloginfo('home'); ?>/portfolio/">Overview</a></li>
</ul>
 
<a name="printstuff"></a><h2 class="print">Print Stuff</h2>
<hr class="portfolio" />
<ul class="portfolio-preview">
 
<?php
	global $myPosts;
	$myPosts = '';
?>
 
<?php
	$my_query = new WP_Query();
	$my_query->query('cat=5&showposts=-1&orderby=date');
	if ($my_query->have_posts()) : while ($my_query->have_posts()) : $my_query->the_post();  
	 $myPosts .= $post->ID . ","; 
?>
 
<li>
	<?php $ordner = get_post_meta($post->ID, 'ordner', true); ?> 
	<?php $preview = get_post_meta($post->ID, 'preview', true); ?>                
	<?php $name = get_post_meta($post->ID, 'name', true); ?>   
	<?php $umfang = get_post_meta($post->ID, 'umfang', true); ?>              
 
	<a href="<?php the_permalink() ?>"><img src="<?php bloginfo('home'); ?>/wp-content/uploads/portfolio/<?php echo $ordner; ?>/preview/<?php echo $preview; ?>.jpg" alt="<?php the_title(); ?>" /></a>
	<div class="ordner"><?php echo $ordner; ?></div>
	<h3><a href="<?php the_permalink() ?>"><?php echo $name; ?></a></h3>
	<cite><?php echo $umfang; ?></cite>
</li>
<?php endwhile; endif; ?>
</ul>  
 
</div>
<?php get_footer(); ?>

web.php

Diese Datei ist ist für die Voransicht der Web Sachen zuständig

      
        <?php
/*
Template Name: Web
*/
?>
<?php get_header(); ?>        
<!-- Left -->
<div class="content-portfolio">
 
<ul class="brotnavi">
    <li><a class="list" href="<?php bloginfo('home'); ?>/portfolio/list">Liste</a></li>
    <li><a class="apparel" href="<?php bloginfo('home'); ?>/portfolio/apparel">Apparel Stuff</a></li>
    <li><a class="print" href="<?php bloginfo('home'); ?>/portfolio/print">Print Stuff</a></li>
    <li><a class="web web-aktiv" href="<?php bloginfo('home'); ?>/portfolio/web">Web Stuff</a></li>
    <li><a class="overview" href="<?php bloginfo('home'); ?>/portfolio/">Overview</a></li>
</ul>
 
<a name="webstuff"></a><h2 class="web">Web Stuff</h2>
<hr class="portfolio" />
 
<ul class="portfolio-preview">
<?php
	global $myPosts;
	$myPosts = '';
?>
 
<?php
	$my_query = new WP_Query();
	$my_query->query('cat=4&showposts=-1&orderby=date');
	if ($my_query->have_posts()) : while ($my_query->have_posts()) : $my_query->the_post();  
	 $myPosts .= $post->ID . ","; 
?>
 
<li>
	<?php $ordner = get_post_meta($post->ID, 'ordner', true); ?> 
	<?php $preview = get_post_meta($post->ID, 'preview', true); ?>                
    <?php $name = get_post_meta($post->ID, 'name', true); ?>
    <?php $umfang = get_post_meta($post->ID, 'umfang', true); ?>                 
 
	<a href="<?php the_permalink() ?>"><img src="<?php bloginfo('home'); ?>/wp-content/uploads/portfolio/<?php echo $ordner; ?>/preview/<?php echo $preview; ?>.jpg" alt="<?php the_title(); ?>" /></a>
	<div class="ordner"><?php echo $ordner; ?></div>
	<h3><a href="<?php the_permalink() ?>"><?php echo $name; ?></a></h3>
	<cite><?php echo $umfang; ?></cite>  
</li>
    <?php endwhile; endif; ?>
</ul>   
 
</div>
<?php get_footer(); ?>

portfolio.php

Diese Datei ist ist für die Voransicht des Portfolios zuständig

      
        <?php
/*
Template Name: Portfolio
*/
?>
<?php get_header(); ?>
<!-- Left -->
<div class="content-portfolio">
 
<ul class="brotnavi">
    <li><a class="list" href="<?php bloginfo('home'); ?>/portfolio/list">Liste</a></li>
    <li><a class="apparel" href="<?php bloginfo('home'); ?>/portfolio/apparel">Apparel Stuff</a></li>
    <li><a class="print" href="<?php bloginfo('home'); ?>/portfolio/print">Print Stuff</a></li>
    <li><a class="web" href="<?php bloginfo('home'); ?>/portfolio/web">Web Stuff</a></li>
    <li><a class="overview overview-aktiv" href="<?php bloginfo('home'); ?>/portfolio/">Overview</a></li>
</ul>
 
<h2 class="latest">Latest Stuff</h2>
<hr class="portfolio" />
 
<ul class="portfolio-preview">
<?php
	global $myPosts;
	$myPosts = '';
?>
 
<?php
	$my_query = new WP_Query();
	$my_query->query('cat=4,5,6&showposts=15&orderby=date');
	if ($my_query->have_posts()) : while ($my_query->have_posts()) : $my_query->the_post();  
	 $myPosts .= $post->ID . ","; 
?>
<li>
	<?php $ordner = get_post_meta($post->ID, 'ordner', true); ?> 
	<?php $preview = get_post_meta($post->ID, 'preview', true); ?>                
    <?php $name = get_post_meta($post->ID, 'name', true); ?> 
    <?php $umfang = get_post_meta($post->ID, 'umfang', true); ?>               
 
	<a href="<?php the_permalink() ?>"><img src="<?php bloginfo('home'); ?>/wp-content/uploads/portfolio/<?php echo $ordner; ?>/preview/<?php echo $preview; ?>.jpg" alt="<?php the_title(); ?>" /></a>
	<div class="ordner"><a href="<?php bloginfo('home'); ?>/portfolio/<?php echo $ordner; ?>/"><?php echo $ordner; ?></a></div>
	<h3><a href="<?php the_permalink() ?>"><?php echo $name; ?></a></h3>
	<cite><?php echo $umfang; ?></cite>
</li>
    <?php endwhile; endif; ?>
</ul>  
</div>
<?php get_footer(); ?>

Alle vier Quelltexte sind hier nahezu identisch. Sie unterscheiden sich nur Teilweise im Wording und ziehen andere Daten aus der Datenbank (Die verschiedenen Portfoliokategorien). Jetzt fehlt nur noch die Detailansicht, hierfür haben wir jetzt jeweils eine single.php mit der jeweiligen Kategorienummer hinten dran. single-4.php, single-5.php und single-6.php. Wenn diese nicht vorhanden sind müssen sie erstellt werden. Hier die Quelltexte.

single-4.php

Diese Datei ist für die Detailansicht der Web Portfolio Sachen zuständig.

      
        <?php get_header(); ?>
<div id="blog" style="width:970px;">
	<?php if (have_posts()) : ?>
	<?php while (have_posts()) : the_post(); ?>
	<ul class="brotnavi brotnavi-left">
		<li><a class="overview" href="<?php bloginfo('home'); ?>/portfolio/">Overview</a></li>
		<li><a class="web web-aktiv" href="<?php bloginfo('home'); ?>/portfolio/web">Web Stuff</a></li>
		<li><a class="print" href="<?php bloginfo('home'); ?>/portfolio/print">Print Stuff</a></li>
		<li><a class="apparel" href="<?php bloginfo('home'); ?>/portfolio/apparel">Apparel Stuff</a></li>
		<li><a class="list" href="<?php bloginfo('home'); ?>/portfolio/list">Liste</a></li>
	</ul>	
	<div style="float:left;">
		<?php $ordner = get_post_meta($post->ID, 'ordner', true); ?>
		<?php $browser = get_post_meta($post->ID, 'browser', true); ?>	
		<?php if($browser !== '') { ?>
			<p class="browser"><img src="<?php bloginfo('home'); ?>/wp-content/uploads/portfolio/<?php echo $ordner; ?>/browser/<?php echo $browser; ?>.jpg" alt="<?php the_title(); ?>" /></p>
		<?php } ?>
			<?php $img02 = get_post_meta($post->ID, 'img02', true); ?>
		<?php if($img02 !== '') { ?>
			<p class="bild"><img src="<?php bloginfo('home'); ?>/wp-content/uploads/portfolio/<?php echo $ordner; ?>/browser/<?php echo $img02; ?>.jpg" alt="<?php the_title(); ?>" /></p>
		<?php } ?>	
			<?php $img03 = get_post_meta($post->ID, 'img03', true); ?>
		<?php if($img03 !== '') { ?>
			<p class="bild"><img src="<?php bloginfo('home'); ?>/wp-content/uploads/portfolio/<?php echo $ordner; ?>/browser/<?php echo $img03; ?>.jpg" alt="<?php the_title(); ?>" /></p>
		<?php } ?>		
			<?php $img04 = get_post_meta($post->ID, 'img04', true); ?>
		<?php if($img04 !== '') { ?>
			<p class="bild"><img src="<?php bloginfo('home'); ?>/wp-content/uploads/portfolio/<?php echo $ordner; ?>/browser/<?php echo $img04; ?>.jpg" alt="<?php the_title(); ?>" /></p>
		<?php } ?>		
		<?php the_content(); ?>
	</div>
	<div id="sidebar">
		<?php $name = get_post_meta($post->ID, 'name', true); ?>
		<h3 class="details"><?php echo $name; ?></h3>
		<?php $kunde = get_post_meta($post->ID, 'kunde', true); ?>
		<?php $umfang = get_post_meta($post->ID, 'umfang', true); ?>
		<?php $datum = get_post_meta($post->ID, 'datum', true); ?>
		<?php $beschreibung = get_post_meta($post->ID, 'beschreibung', true); ?>
		<?php $url = get_post_meta($post->ID, 'url', true); ?>	
		<div class="p">
			<?php if($kunde !== '') { ?>
			<p><?php echo $kunde; ?></p>
			<h4>kunde</h4>
			<?php } ?>
			<?php if($umfang !== '') { ?>
			<p><?php echo $umfang; ?></p>
			<h4>umfang</h4>
			<?php } ?>
			<?php if($datum !== '') { ?>
			<p><?php echo $datum; ?></p>
			<h4>datum</h4>
			<?php } ?>
			<?php if($beschreibung !== '') { ?>
			<p><?php echo $beschreibung; ?></p>
			<h4>beschreibung</h4>
			<?php } ?>
			<?php if($url !== '') { ?>
			<p><a href="http://<?php echo $url; ?>"><?php echo $url; ?></a></p>
			<?php } ?>
		</div>
	</div>
	<?php endwhile; else: ?>
	<p>Keine Artikel vorhanden</p>
	<?php endif; ?>
	<div class="navigation" style="clear:both; float:left; width:600px; padding:40px 10px 0 10px;">
		<div class="alignleft" style="float:left;"><?php next_post_link('%link', '&laquo;  previous work', TRUE, '1 and 3 and 5 and 6 and 7 and 8'); ?></div>
		<div class="alignright" style="float:right; text-align:right;"><?php previous_post_link('%link', 'next work &raquo;', TRUE, '1 and 3 and 5 and 6 and 7 and 8'); ?></div>
	</div>
</div>
<?php get_footer(); ?>

single-5.php

Diese Datei ist für die Detailansicht der Print Portfolio Sachen zuständig.

      
        <?php get_header(); ?>
<div id="blog" style="width:970px;">
	<?php if (have_posts()) : ?>
	<?php while (have_posts()) : the_post(); ?>
	<ul class="brotnavi brotnavi-left">
		<li><a class="overview" href="<?php bloginfo('home'); ?>/portfolio/">Overview</a></li>
		<li><a class="web" href="<?php bloginfo('home'); ?>/portfolio/web">Web Stuff</a></li>
		<li><a class="print print-aktiv" href="<?php bloginfo('home'); ?>/portfolio/print">Print Stuff</a></li>
		<li><a class="apparel" href="<?php bloginfo('home'); ?>/portfolio/apparel">Apparel Stuff</a></li>
		<li><a class="list" href="<?php bloginfo('home'); ?>/portfolio/list">Liste</a></li>
	</ul>
	<div style="float:left;">
		<?php $ordner = get_post_meta($post->ID, 'ordner', true); ?>
		<?php $browser = get_post_meta($post->ID, 'browser', true); ?>
		<?php if($browser !== '') { ?>
			<p class="bild"><img src="<?php bloginfo('home'); ?>/wp-content/uploads/portfolio/<?php echo $ordner; ?>/picture/<?php echo $browser; ?>.jpg" alt="<?php the_title(); ?>" /></p>
		<?php } ?>
			<?php $img02 = get_post_meta($post->ID, 'img02', true); ?>
		<?php if($img02 !== '') { ?>
			<p class="bild"><img src="<?php bloginfo('home'); ?>/wp-content/uploads/portfolio/<?php echo $ordner; ?>/picture/<?php echo $img02; ?>.jpg" alt="<?php the_title(); ?>" /></p>
		<?php } ?>
			<?php $img03 = get_post_meta($post->ID, 'img03', true); ?>
		<?php if($img03 !== '') { ?>
			<p class="bild"><img src="<?php bloginfo('home'); ?>/wp-content/uploads/portfolio/<?php echo $ordner; ?>/picture/<?php echo $img03; ?>.jpg" alt="<?php the_title(); ?>" /></p>
		<?php } ?>
			<?php $img04 = get_post_meta($post->ID, 'img04', true); ?>
		<?php if($img04 !== '') { ?>
			<p class="bild"><img src="<?php bloginfo('home'); ?>/wp-content/uploads/portfolio/<?php echo $ordner; ?>/picture/<?php echo $img04; ?>.jpg" alt="<?php the_title(); ?>" /></p>
		<?php } ?>
		<?php the_content(); ?>
	</div>
	<div id="sidebar">
		<?php $name = get_post_meta($post->ID, 'name', true); ?>
		<h3 class="details"><?php echo $name; ?></h3>
		<?php $kunde = get_post_meta($post->ID, 'kunde', true); ?>
		<?php $umfang = get_post_meta($post->ID, 'umfang', true); ?>
		<?php $datum = get_post_meta($post->ID, 'datum', true); ?>
		<?php $beschreibung = get_post_meta($post->ID, 'beschreibung', true); ?>
		<?php $url = get_post_meta($post->ID, 'url', true); ?>
		<div class="p">
			<?php if($kunde !== '') { ?>
			<p><?php echo $kunde; ?></p>
			<h4>kunde</h4>
			<?php } ?>
			<?php if($umfang !== '') { ?>
			<p><?php echo $umfang; ?></p>
			<h4>umfang</h4>
			<?php } ?>
			<?php if($datum !== '') { ?>
			<p><?php echo $datum; ?></p>
			<h4>datum</h4>
			<?php } ?>
			<?php if($beschreibung !== '') { ?>
			<p><?php echo $beschreibung; ?></p>
			<h4>beschreibung</h4>
			<?php } ?>
			<?php if($url !== '') { ?>
			<p><a href="http://<?php echo $url; ?>"><?php echo $url; ?></a></p>
			<?php } ?>
		</div>
	</div>
	<?php endwhile; else: ?>
	<p>Keine Artikel vorhanden</p>
	<?php endif; ?>
	<div class="navigation" style="clear:both; float:left; width:600px; padding:40px 10px 0 10px;">
		<div class="alignleft" style="float:left;"><?php next_post_link('%link', '&laquo;  previous work', TRUE, '1 and 3 and 4 and 6 and 7 and 8'); ?></div>
		<div class="alignright" style="float:right; text-align:right;"><?php previous_post_link('%link', 'next work &raquo;', TRUE, '1 and 3 and 4 and 6 and 7 and 8'); ?></div>
	</div>
</div>
<?php get_footer(); ?>

single-6.php

Diese Datei ist für die Detailansicht der Apparel Portfolio Sachen zuständig

      
        <?php get_header(); ?>
<div id="blog" style="width:970px;">
	<?php if (have_posts()) : ?>
	<?php while (have_posts()) : the_post(); ?>
	<ul class="brotnavi brotnavi-left">
		<li><a class="overview" href="<?php bloginfo('home'); ?>/portfolio/">Overview</a></li>
		<li><a class="web" href="<?php bloginfo('home'); ?>/portfolio/web">Web Stuff</a></li>
		<li><a class="print" href="<?php bloginfo('home'); ?>/portfolio/print">Print Stuff</a></li>
		<li><a class="apparel apparel-aktiv" href="<?php bloginfo('home'); ?>/portfolio/apparel">Apparel Stuff</a></li>
		<li><a class="list" href="<?php bloginfo('home'); ?>/portfolio/list">Liste</a></li>
	</ul>
	<div style="float:left;">
		<?php $ordner = get_post_meta($post->ID, 'ordner', true); ?>
		<?php $browser = get_post_meta($post->ID, 'browser', true); ?>
		<?php if($browser !== '') { ?>
			<p class="bild"><img src="<?php bloginfo('home'); ?>/wp-content/uploads/portfolio/<?php echo $ordner; ?>/picture/<?php echo $browser; ?>.jpg" alt="<?php the_title(); ?>" /></p>
		<?php } ?>
			<?php $img02 = get_post_meta($post->ID, 'img02', true); ?>
		<?php if($img02 !== '') { ?>
			<p class="bild"><img src="<?php bloginfo('home'); ?>/wp-content/uploads/portfolio/<?php echo $ordner; ?>/picture/<?php echo $img02; ?>.jpg" alt="<?php the_title(); ?>" /></p>
		<?php } ?>
			<?php $img03 = get_post_meta($post->ID, 'img03', true); ?>
		<?php if($img03 !== '') { ?>
			<p class="bild"><img src="<?php bloginfo('home'); ?>/wp-content/uploads/portfolio/<?php echo $ordner; ?>/picture/<?php echo $img03; ?>.jpg" alt="<?php the_title(); ?>" /></p>
		<?php } ?>
			<?php $img04 = get_post_meta($post->ID, 'img04', true); ?>
		<?php if($img04 !== '') { ?>
			<p class="bild"><img src="<?php bloginfo('home'); ?>/wp-content/uploads/portfolio/<?php echo $ordner; ?>/picture/<?php echo $img04; ?>.jpg" alt="<?php the_title(); ?>" /></p>
		<?php } ?>
		<?php the_content(); ?>
	</div>
	<div id="sidebar">
		<?php $name = get_post_meta($post->ID, 'name', true); ?>
		<h3 class="details"><?php echo $name; ?></h3>
		<?php $kunde = get_post_meta($post->ID, 'kunde', true); ?>
		<?php $umfang = get_post_meta($post->ID, 'umfang', true); ?>
		<?php $datum = get_post_meta($post->ID, 'datum', true); ?>
		<?php $beschreibung = get_post_meta($post->ID, 'beschreibung', true); ?>
		<?php $url = get_post_meta($post->ID, 'url', true); ?>
		<div class="p">
			<?php if($kunde !== '') { ?>
			<p><?php echo $kunde; ?></p>
			<h4>kunde</h4>
			<?php } ?>
			<?php if($umfang !== '') { ?>
			<p><?php echo $umfang; ?></p>
			<h4>umfang</h4>
			<?php } ?>
			<?php if($datum !== '') { ?>
			<p><?php echo $datum; ?></p>
			<h4>datum</h4>
			<?php } ?>
			<?php if($beschreibung !== '') { ?>
			<p><?php echo $beschreibung; ?></p>
			<h4>beschreibung</h4>
			<?php } ?>
			<?php if($url !== '') { ?>
			<p><a href="http://<?php echo $url; ?>"><?php echo $url; ?></a></p>
			<?php } ?>
		</div>
	</div>
	<?php endwhile; else: ?>
	<p>Keine Artikel vorhanden</p>
	<?php endif; ?>
	<div class="navigation" style="clear:both; float:left; width:600px; padding:40px 10px 0 10px;">
		<div class="alignleft" style="float:left;"><?php next_post_link('%link', '&laquo;  previous work', TRUE, '1 and 3 and 5 and 4 and 7 and 8'); ?></div>
		<div class="alignright" style="float:right; text-align:right;"><?php previous_post_link('%link', 'next work &raquo;', TRUE, '1 and 3 and 5 and 4 and 7 and 8'); ?></div>
	</div>
</div>
<?php get_footer(); ?>

Die Schnellansicht auf der Startseite

Auf der Startseite habe ich ja die schnell ansicht. Hier kommen dann die ###strong/strong### zum Einsatz. Es werden zwanzig Arbeiten aus allen drei Kategorien gezogen. Das ganze sieht dann so aus (nur ein Teil des Startseiten Quelltextes):

      
        <h2 class="latest">Latest Stuff</h2>
<ul class="latest">
<?php
	$my_query = new WP_Query();
	$my_query->query('cat=4,5,6&showposts=20&orderby=date');
	if ($my_query->have_posts()) : while ($my_query->have_posts()) : $my_query->the_post();  
	$myPosts .= $post->ID . ","; 
?>
<?php $thumb = get_post_meta($post->ID, 'thumb', true); ?>
<?php $ordner = get_post_meta($post->ID, 'ordner', true); ?> 
<?php $name = get_post_meta($post->ID, 'name', true); ?> 
<li>         
    <a class="tooltip" title="<?php echo $name; ?>" href="<?php the_permalink() ?>">
        <img src="<?php bloginfo('home'); ?>/wp-content/uploads/portfolio/<?php echo $ordner; ?>/thumb/<?php echo $thumb; ?>.jpg" alt="<?php the_title(); ?>" />
    </a>
</li>
<?php endwhile; endif; ?>
</ul>

Der Laptop Slider im Header

Oben im Header der Laptop wird ja auch automatisch und zufällig mit Inhalt gefüllt. Hier läuft das ganze wieder ähnlich ab. Dazu braucht man dann natürlich auch jQuery+ innerfade plugin. Aber es sind auch andere Sachen möglich wie Slide etc. Hier wird sich nur aus der Kategorie 4 (Web) der Inhalt gezogen und zwar die Slide Bilder. Sind immer zehn Stück die zufällig ausgwählt werden. Quelltext für diesen Teil:

      
        <div id="headslide">
    <div id="slider">
        <ul id="macbookpro">
        <?php
			global $myPosts;
			$myPosts = '';
        ?>
        <?php
			$my_query = new WP_Query();
			$my_query->query('cat=4&showposts=10&orderby=rand');
			if ($my_query->have_posts()) : while ($my_query->have_posts()) : $my_query->the_post();  
			 $myPosts .= $post->ID . ","; 
        ?>
        <?php $slide = get_post_meta($post->ID, 'slide', true); ?>
        <li>
        	<a href="<?php the_permalink() ?>">
            	<img src="<?php bloginfo('home'); ?>/wp-content/uploads/portfolio/web/slide/<?php echo $slide; ?>.jpg" alt="<?php the_title(); ?>" />
            </a>
        </li>
        <?php endwhile; endif; ?>
        </ul>    
    </div>    
</div>

Auf gehts zum Befüllen der Bereiche

Hier benötigt man für einfacheres Arbeiten das Plugin: More-Fields. Dort kann man sich kleine Boxen zurecht basteln für die Custim Fields. Auf jeden Fall übersichtlicher als die Standardmethode von WordPress.

Soweit war es das im Grunde

Das Portfolio steht nun quasi. Klar ist das hier nicht eine Lösung die man 1:1 nutzen kann und soll. Es geht eher darum zu verstehen wie mein Portfolio aufgebaut ist. Ich habe versucht das ganze recht ausführlich zu machen. Ob alles dabei ist und auch verstanden wird kann ich nicht sagen da ich selten ein Tutorial in solch einem Umfang geschrieben habe. Bei Fragen dann einfach die Kommentarfunktion nutzen.

Tutorials

comments powered by Disqus